react-native-visionos でつくるVisionOS向けアプリの初期構成

前回より callstack/react-native-visionos 向けアプリについて研究をはじめた。今回もその続き。初期ディレクトリの構成についてメモ。

callstack/react-native-visionos は React Native を fork して作られているので、初期状態のディレクトリ構成も似ている。一部 VisionOS 向けビルドに必要なファイルが追加されていたり、変更されていたりする。

ちなみに、前回は以下。

• Vision Pro 向けアプリを react-native-visionos で作ってあそぶ (0) - よりひろい フロントエンド

まずは Hello　World　的な画面が表示されるところまでたどりついた。プロジェクト作成には以下のコマンドを使った。

$ npx @callstack/react-native-visionos@latest init MyHello

現在、以下のようなファイル群が生成されている。

.
├── .bundle
├── .eslintrc.js
├── .prettierrc.js
├── .watchmanconfig
├── App.tsx
├── Gemfile
├── README.md
├── __tests__/
├── android/
├── app.json
├── babel.config.js
├── index.js
├── ios/
├── jest.config.js
├── metro.config.js
├── package-lock.json
├── package.json
├── tsconfig.json
├── vendor/
└── visionos/

各ファイルおよびディレクトリについて

前述のディレクトリについて、各役割などを書いてみる。書いていく途中でいくつか今後深掘りしてみたいライブラリなどに出会った。ということでトップページの右カラムにある Links of Interest にいくつか追加した。

• .bundle
  • bundle コマンド用のディレクトリ。設定ファイルが含まれている
• .eslintrc.js
  • React Native 用のESLint Config
• .prettierrc.js
  • フォーマットには prettier が使える。必要に応じてカスタマイズしよう
• .watchmanconfig
  • Watchman という Meta Platforms 製の監視サービスの設定ファイル。いずれこれはこれで研究してみようと思う
• App.tsx
  • React Fundamentals · React Native から学習ができそう
  • Swift UI も宣言的に記述できるため、昔ほどは JSX で書くことのメリットは減っているかもしれないと感じた
  • ここはあとでまた読み解くつもり
• Gemfile
  • 依存関係でいくつか環境構築が発生したところ。もうちょっとこの辺りに詳しかったらつまづきも少なかったように思う
• __tests__
  • jest によるテストをここに書ける。ここにいろいろなテストを書いていく回をそのうちやってみよう
• android や ios
  • Android や iOS 向けのプロジェクトファイルはここで定義できる。たとえば iOS 向けのビルド $ yarn ios をしてみると、iPhone のシミュレータが起動し App.tsx で定義した UI を確認することができる
• app.json
  • このファイルは index.js にてインポートされているファイルで、いろいろな経緯を見ると削除することも可能らしい　 What is the purpose of app.json file? Is it safe to delete it? · Issue #1113 · react-native-community/cli
• babel.config.js
  • Babel の設定ファイル。現状はデフォルトの設定のみが記載されている。何か必要があればいずれ使うだろう
• index.js
  • エントリポイントとなる JavaScript ファイル。初期時はアプリ名の指定のみがされている
• jest.config.js
  • テストフレームワーク Jest の設定ファイル。初期状態では react-native のプリセットだけが指定されている
• metro.config.js
  • metro.config.js は Meta Platforms 製の React Native 向けのバンドラー向けの設定らしい。らしいと書いたのは今まで Metro を使ったことがないため。このバンドラについてはまた後日とりあげる Configuring Metro | Metro
• package.json
  • package.json の script はチェックしておきたい。android や ios のほかに VisionOS 向けのビルドを行う visionos コマンドが定義されている
• tsconfig.json
  • 前述の各種ビルド設定ファイルやPodsファイルなどは除外されている
• vendor
  • 初期状態では iOS のビルド用に使う Ruby が格納されている
• visionos
  • VidionOS 向けのプロジェクトファイルが含まれている。ここもあとでじっくりみてみる

といったところで、今回はおわり。次回よりいよいよ UI コンポーネントをいじっていく。