概要

皆さまは普段アプリなどを作成していたり、何かしらのサービスを開発されていますでしょうか？

私自身は主に Web アプリやサービスを個人的に開発していたり、時々趣味でモバイルアプリなども作成しており、プログラミングを楽しんでいます。

Web アプリ・サービスを開発しているときは TypeScript、React.js、Next.js などを主に利用しており、モバイルアプリを開発しているときは Flutter、Kotlin、React Native、時々 Object-C を利用しています。

nextjs.org

ja.legacy.reactjs.org

www.typescriptlang.org

flutter.dev

developer.android.com

いろいろなプログラミング言語を触れたり、新しいライブラリやフレームワークなどを触りながら趣味のようにプログラミングをしているので、個人的にはとても楽しく開発作業をしています！

しかし時々、Web サービス開発時に利用していたデザイン関連のライブラリ・モジュールが、モバイルアプリ開発にも利用できたらいいな、などと思う時があります。

そんな時、Web サービス開発時に利用でき、かつモバイルアプリ開発時に利用できるフレームワーク React Native の両方で動作する UI ライブラリを見つけましたので、今回はこちらについてご紹介しようと思います。

今回ご紹介する OSS は、Web と React Native の両方で動作する UI ライブラリ「TAMAGUI」になります。

「TAMAGUI」は Web とモバイルの間でより多くのソースコードを共有することを目的に作成された OSS になります。

それでは早速詳細について見ていきましょう！

特徴

「TAMAGUI」の特徴としては、やはり Web と React Native とで同じように UI を開発することが出来るという点でしょうか。

また、「TAMAGUI」を利用することで、DX、パフォーマンス、およびソースコードの保守性を犠牲にすることなく、かつ改善しながら Web アプリとモバイルネイティブアプリの間でソースコードを共有することが出来るそうです！

利用手順

「TAMAGUI」をインストールする方法は以下のコマンドを実行することで利用可能です。

Web

yarn add tamagui

インストール後は環境変数をそれぞれ以下のように、TAMAGUI_TARGET=web webpack のように設定します。

{
  "scripts": {
    "dev": "TAMAGUI_TARGET=web webpack"
  }
}

モバイルネイティブ

TAMAGUI_TARGET=native react-native start

TAMAGUI_TARGET=native expo start

また、次のように TAMAGUI_TARGET をインライン化するように、 Metro と Babel に示すようにします。

yarn add @tamagui/babel-plugin babel-plugin-transform-inline-environment-variables

babel.config.js

// just to ensure TAMAGUI_TARGET is set
process.env.TAMAGUI_TARGET = 'native'

module.exports = {
  plugins: [
    ['transform-inline-environment-variables', {
      include: ['TAMAGUI_TARGET']
    }]
  ]
}

使用感

いくつか公式ドキュメントのほうのソースコードを見てみました。

import { Stack, Text } from 'tamagui' // or '@tamagui/core'

export default () => (
  <Stack margin={10}>
    <Text color="$color">Hello</Text>
  </Stack>
)

Stack と Text は「TAMAGUI」のベースとなる要素であり、React Native の View と Text と同等ということです。

一方 Web の場合はデフォルトでは div と span に変換されます。

また、styled を使用することで、既存のコンポーネントを拡張して新しコンポーネントを作成することもできるそうです。

import { Stack, styled } from 'tamagui' // or '@tamagui/core'

export const Circle = styled(Stack, {
  borderRadius: 100_000_000,

  variants: {
    pin: {
      top: {
        position: 'absolute',
        top: 0,
      },
    },

    centered: {
      true: {
        alignItems: 'center',
        justifyContent: 'center',
      },
    },

    size: {
      '...size': (size, { tokens }) => {
        return {
          width: tokens.size[size] ?? size,
          height: tokens.size[size] ?? size,
        }
      },
    },
  } as const,
})

上記のソースコードでは、第 1 引数に渡されている Stack コンポーネントを拡張し、Circle コンポーネントを定義しています。

Props の宣言方法はいくつか種類がありますが、上記のように variants や centered などで宣言します。

内容としては JavaScript を触ったことがある方にとってはそこまで難しくなく利用することが出来そうだな、という印象でした。

このほかにも様々な記法やテクニックがありますので、詳細について把握したい方はぜひ公式ドキュメントのほうを参照されることをおすすめします！

tamagui.dev

まとめ

今回は、Web と React Native の両方で動作する UI ライブラリ「TAMAGUI」についてご紹介しました。

「TAMAGUI」を利用することで、Web とモバイルネイティブとで同じようにソースコードを書いてデザインを作成することが出来るため、ソースコードの管理がしやすくなりそうですね。

自分も今後は積極的にこちらの「TAMAGUI」を使用して開発を進めていきたいなと思いました！

普段 Web アプリを開発していて React Native でモバイルアプリを開発することになったが何か良いデザイン用ライブラリがないかお探しの方、もしくはその逆で、普段 React Native でモバイルアプリを開発していて Web アプリを開発することになったが何か良いデザイン用ライブラリがないかお探しの方は、ぜひ一度こちらの「TAMAGUI」を利用されてみてはいかがでしょうか？