Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Next.js・React Native対応 UIライブラリ「Tamagui」の紹介
Search
もじゃ
October 26, 2023
1
1.2k
Next.js・React Native対応 UIライブラリ「Tamagui」の紹介
もじゃ
October 26, 2023
Tweet
Share
Featured
See All Featured
A better future with KSS
kneath
239
17k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.2k
Building Adaptive Systems
keathley
41
2.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.3k
Fireside Chat
paigeccino
37
3.5k
The Power of CSS Pseudo Elements
geoffreycrofte
76
5.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
1
60
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
33k
The Cult of Friendly URLs
andyhume
78
6.4k
Optimizing for Happiness
mojombo
378
70k
Building Applications with DynamoDB
mza
95
6.4k
Transcript
Next.js・React Native対応 UIライブラリ「Tamagui」の紹介
アジェンダ • Tamaguiとは? • ディレクトリ構成・コード一部抜粋 • solitoとは? • Tamaguiを使ってゲームを作ってみた話 •
Tamaguiを使ってみて感じたこと • Tamaguiをプロダクトや技術選定に入れるか? • まとめ
Tamaguiとは? • VercelのNateさんが2022年12月30日にVersion 1.0リリース • Next.jsとReact Native両方に対応したUIフレームワーク • Webは「Next.js」でReact Nativeは「Expo」を使用している
ディレクトリ構造 • webを立ち上げる時は「yarn web」 • nativeを立ち上げる時は「yarn native」 • packages/app/featuresで実装した機能を Expo・Nextで呼び出して使うことでコードを共
通化しています。
コード一部抜粋
solitoとは? • React Navigation と Next.js の小さなラッパーで、プラットフォーム間でナビゲー ション コードを共有できる •
React Native + Next.js を使用してクロスプラットフォーム アプリを構築するための パターンとサンプルがある • Tamaguiではsolitoの「useLink」を使用することでページ遷移を行なっている https://solito.dev/
Tamaguiを使ってゲームを作ってみた話 • 「図鑑ID」「名前」に一致するポケモン画像を選択し当てるゲーム • https://pokemon-quiz-next.vercel.app/
感じたこと • 問題や不具合があった時に検索しても基本情報がでない ◦ 不具合はissuesに記載されていて修正待ちになるケースが多い • ReactとReact Native両方の知識が必要(特にReact Native) ◦
Webで問題なく動くがアプリで不具合が出るケースはよくある ◦ 例. ポケモンの画像を選択する際は onClickではなくonPressを使用する • React(Next)やReact Nativeを学びたい人にはあまりおすすめしない • アップデートが異常に早い ◦ 8月に作成したサービスの versionは「1.48.7」で最新が「1.74.15」 ◦ 1日に数回アップデートをしていることもある
プロダクトに使用・技術選定に入れるのか? • プロダクトによるが使用・選定には入れない ◦ まだ1年も経過していないため、公式を見る以外に知見や情報が少ない ◦ アップデートがかなり早いため、毎回バージョンアップをするのがかなり面倒臭い ◦ UI部分が共通化しているのは良いが、別の動きや表示をさせる等になってくると処理が大変になる +
コードが複雑になりがち • WebとアプリでUIが共通で大幅に変わらない部分での使用だと良いかも ◦ マイページやメニュー画面等で使用するのは良いかも? ◦ すでに「react-native-web」を導入していて、差し替えるのはアリかも?
まとめ • React (Next.js)/ React Native両方の知識が必要になるが、書いていて面白い • React(Next)やReact Nativeを学びたい人はTamaguiでキャッチアップせずにそれ ぞれで学んだ方がよい
• どちらも経験のある人がキャッチアップする分には学びはある • リリースして1年経過していないため今後の動向に期待している • react-native-webを採用しているプロダクト・企業がTamaguiに置き換えた時に、 注目が出そうな感じ
ご清聴ありがとうございました!!