メインコンテンツまでスキップ

プロジェクトの作成

React Nativeプロジェクトの作成​

アプリを実装する前にで紹介しているコードを簡単に動かすことができるように、プロジェクトを作成します。

このコンテンツではReact NavigationやReact Native Elementsなどのパッケージを利用します。これらのパッケージがインストールされたプロジェクトを簡単に用意できるよう、RN Spoilerというテンプレートを用意しています。

次のコマンドを実行して、新規プロジェクトを作成してください。（<YourAppName>の部分は、好みのプロジェクト名に変更してください。このプロジェクトは後ほどToDoアプリの実装で使用します）

注記

プロジェクト名には、ごく一部を除いて記号は利用できません。アルファベットから始まり、英数字のみで構成されたプロジェクト名とすることをおすすめします。

注記

プロジェクトの作成が終わったらgitで変更履歴を管理できるようにしておくと便利です。（プロジェクトを作成した時点で.gitignoreも設定されているため、不要なファイルは管理対象外になっています）

動作確認した後などにgit commitで内容を保存しながら学習を進めていくと、修正内容や「動かなくなってしまった」ときの差分確認に便利です。

npx react-native init --npm --template https://github.com/ws-4020/rn-spoiler#v2024.10.0 <YourAppName>

RN Spoilerは、Expoのテンプレートをベースにしているので、このあとのアプリの実行で紹介しているExpo Goで動作します。

備考

npmではなくYarnを利用したい場合は、--npmというオプションを削除してください。Yarnがインストールされている場合は、Yarnを利用してパッケージがインストールされます。

npx react-native init --template https://github.com/ws-4020/rn-spoiler#v2024.10.0 <YourAppName>
備考

初めてnpx react-native init ...を実行すると、次のように不足しているパッケージをインストールするかと聞かれます。react-nativeをインストールしようとしていれば問題ないので、エンターキーを押して実行してください。

Need to install the following packages:
  react-native
Ok to proceed? (y)
備考

RN Spoilerをテンプレートとしてプロジェクトを作成したときに、次のようなエラーで異常終了してしまうことがあります。

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined@undefined
npm ERR! Found: @babel/core@7.9.6
npm ERR! node_modules/@babel/core
npm ERR!   dev @babel/core@"~7.9.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional @babel/core@">=7.11.0" from eslint-config-universe@7.0.1
npm ERR! node_modules/eslint-config-universe
npm ERR!   dev eslint-config-universe@"^7.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

新規プロジェクトの作成中にエラーが発生した場合は次の手順でリカバリしてください。

  1. cd <YourAppName>（<YourAppName>は実際に作成したときの値に変更してください）
  2. npm install --legacy-peer-deps

Visual Studio Code用の推奨設定​

作成されたプロジェクトにはVisual Studio Code用のファイルが含まれています。

  • 拡張機能一覧（.vscode/extensions.json）
  • 推奨設定（.vscode/settings.json）

Extensions→Recommendedで表示されるWORKSPACE RECOMMENDATIONSに表示される拡張機能をインストールすると、以下のメリットがあります。

  • エディター上での警告表示
  • ファイル保存時の自動フォーマット・自動修正

インストールした拡張機能は違うプロジェクトでも引き継がれるので、この作業は初回のみで十分です。

その他の有用な拡張機能については開発に利用するツールの「Visual Studio Code」ページを参照ください。

に最終更新