Next.js・React Native対応 UIライブラリ「Tamagui」の紹介

Transcript

1. Next.js・React Native対応 UIライブラリ「Tamagui」の紹介
2. アジェンダ • Tamaguiとは？ • ディレクトリ構成・コード一部抜粋 • solitoとは？ • Tamaguiを使ってゲームを作ってみた話 • Tamaguiを使ってみて感じたこと • Tamaguiをプロダクトや技術選定に入れるか？ • まとめ
3. Tamaguiとは？ • VercelのNateさんが2022年12月30日にVersion 1.0リリース • Next.jsとReact Native両方に対応したUIフレームワーク • Webは「Next.js」でReact Nativeは「Expo」を使用している
4. ディレクトリ構造 • webを立ち上げる時は「yarn web」 • nativeを立ち上げる時は「yarn native」 • packages/app/featuresで実装した機能を Expo・Nextで呼び出して使うことでコードを共 通化しています。
5. コード一部抜粋
6. solitoとは？ • React Navigation と Next.js の小さなラッパーで、プラットフォーム間でナビゲー ション コードを共有できる • React Native + Next.js を使用してクロスプラットフォーム アプリを構築するための パターンとサンプルがある • Tamaguiではsolitoの「useLink」を使用することでページ遷移を行なっている https://solito.dev/
7. Tamaguiを使ってゲームを作ってみた話 • 「図鑑ID」「名前」に一致するポケモン画像を選択し当てるゲーム • https://pokemon-quiz-next.vercel.app/
8. 感じたこと • 問題や不具合があった時に検索しても基本情報がでない ◦ 不具合はissuesに記載されていて修正待ちになるケースが多い • ReactとReact Native両方の知識が必要(特にReact Native) ◦ Webで問題なく動くがアプリで不具合が出るケースはよくある ◦ 例. ポケモンの画像を選択する際は onClickではなくonPressを使用する • React(Next)やReact Nativeを学びたい人にはあまりおすすめしない • アップデートが異常に早い ◦ 8月に作成したサービスの versionは「1.48.7」で最新が「1.74.15」 ◦ 1日に数回アップデートをしていることもある
9. プロダクトに使用・技術選定に入れるのか？ • プロダクトによるが使用・選定には入れない ◦ まだ1年も経過していないため、公式を見る以外に知見や情報が少ない ◦ アップデートがかなり早いため、毎回バージョンアップをするのがかなり面倒臭い ◦ UI部分が共通化しているのは良いが、別の動きや表示をさせる等になってくると処理が大変になる + コードが複雑になりがち • WebとアプリでUIが共通で大幅に変わらない部分での使用だと良いかも ◦ マイページやメニュー画面等で使用するのは良いかも？ ◦ すでに「react-native-web」を導入していて、差し替えるのはアリかも？
10. まとめ • React (Next.js)/ React Native両方の知識が必要になるが、書いていて面白い • React(Next)やReact Nativeを学びたい人はTamaguiでキャッチアップせずにそれ ぞれで学んだ方がよい • どちらも経験のある人がキャッチアップする分には学びはある • リリースして1年経過していないため今後の動向に期待している • react-native-webを採用しているプロダクト・企業がTamaguiに置き換えた時に、 注目が出そうな感じ
11. ご清聴ありがとうございました!!