はじめに
個人で作ってみたいアプリがありましたが、モバイルアプリの開発やったことがないので、まずはWeb版から取り組み、そのあとネイティブ版にも展開できたらなと思ったところ、Webとモバイルのコードを共通化して開発できるテンプレートが存在することを知りました。
ただ、そのテンプレートの構成は初見では少し理解しづらかったため、まずは大枠だけ整理しようと思います！
まだまだ僕も深く理解できていないのですが少しでも参考になれれば幸いです。
テンプレートの概要
こちらのテンプレートを使っていきます！
こちらのテンプレートは以下の技術を採用しています。
- Next.js
- Expo
- Tamagui
- Solito
概要だけ触れておきます。
Next.js
Next.js は React ベースのフレームワークで、ルーティングや SSR（サーバーサイドレンダリング）、静的サイト生成（SSG）などを簡単に扱えるのが特徴です。
Expo
ExpoはReact NativeをベースにiOS, Andoroid向けのアプリを開発することでできるクロスプラットフォームフレームワークになります。
Solito
Solito は、Next.js と React Native を使って強力なクロスプラットフォームアプリを構築するためのツールになります。タイトルのことを実現するために重要な存在です。
Tamagui
TmaguiはReactとReactNativeどちらにも対応しているUIライブラリでまさにWebとネイティブの共通化にはうってつけのライブラリです。
ディレクトリ構成
ディレクトリ構成はメインどころだけ見ると以下になります。
├── apps/
│ ├── next/ # Web（Next.js）用アプリ
│ └── expo/ # モバイル（Expo）用アプリ
│
├── packages/
├── app/
│ └── features # Webとネイティブで共通の機能や画面
└── ui/ # ボタンやカードなどの共通UIコンポーネント
apps/next/
このフォルダは、Webアプリとしてのフロントエンド部分を担っています。中を見てみると、appとpagesディレクトリがあり、デフォルトではApp RouterとPages Routerどちらを使うか「Change Router」で切り替えてみれるみたいです。
実際の開発時には、使用しない方のディレクトリは削除する形になりそうです。
apps/expo/
こちらはモバイルアプリ側のエントリーポイントになります。appディレクトリがあり、expo-routerを使用しているみたいです。
ベースはReactNativeなのでWebとほとんど同じ感覚でページを追加・編集できるのがとても便利です。Webとの違いを意識せずに画面設計できるのは良いなと思いました。
packages/ui/
ここにはボタンやテキスト項目、カードなどの共通のUIコンポーネントを定義します。
packages/app/features/
ここにはwebとネイティブ共通で使用するページのコンポーネントなどをまとめておくためのものっぽいです。
「この画面はwebでもモバイルでも同じものを使いたいなあ」というコンポーネントはここで作成してapps/nextやapps\expoディレクトリ内でimportして使いまわすイメージでしょうか。
最後に
このテンプレートを使えば、最初からモバイルとWebの両方を意識した設計ができているので、あとは中身を自分のアプリに置き換えていくだけでできそうな感じがしました。
今回改めて記事にまとめることで「このディレクトリに何のファイル作ればいいんだ...？」という迷いも減ってきた気がします。
業務でも触ったことがない技術ばかりでまだまだ手探り状態ですが気楽に触りながらもっと理解を深めていこうと思います。
「Web版とネイティブ版どちらにも対応したアプリを作ってみたいなあ」という方がいたら、このテンプレート使うのはいいかもしれないです！ぜひ試してみてください！