こんばんは。今日は、Expo + TypeScript + React Nativeで最初のプロジェクトを作成するまでの手順を残しておこうと思います。こちらの記事はMac OSでの開発を前提としていますが、もしReact Nativeの開発環境がまだ準備されていない場合は、こちらをご参照ください。
Contents
React Nativeプロジェクトの作成
まずは、React Nativeプロジェクトの作成を行います。Expoを利用すれば、とても簡単にプロジェクトの作成が行えます。
っとその前に、TypeScriptを使用する場合は、上記の準備に加えて、typescriptもインストールしておきます。
npm install -g typescript
準備が終わったら、コンソールで、以下コマンドを実行します。
expo init MyFirstProjectTypeScript
すると、テンプレートプロジェクトが作成されますが、TypeScriptの場合はここで”blank (Type
![](https://i0.wp.com/www.simpletraveler.jp/wp-content/uploads/2021/01/image-75.png?resize=728%2C259&ssl=1)
これだけで完了です!
(参考)プロジェクトの構成
ちなみに、テンプレートプロジェクトの構成は以下のようになっています。
cd MyFirstProjectTypeScript
ls -ltr
![](https://i0.wp.com/www.simpletraveler.jp/wp-content/uploads/2021/01/image-77.png?resize=728%2C181&ssl=1)
TypeScriptではない場合が以下になりますが、以下が異なるようです。
- App.jsがApp.tsxになっている
- tsconfig.jsonというファイルが増えている
![](https://i0.wp.com/www.simpletraveler.jp/wp-content/uploads/2021/01/image-52.png?resize=728%2C145&ssl=1)
App.tsx
![](https://i0.wp.com/www.simpletraveler.jp/wp-content/uploads/2021/01/image-78.png?resize=728%2C584&ssl=1)
React Native プロジェクトの実行
それでは、プロジェクトを実行してみます。プロジェクトディレクトリ内で、以下コマンドを実行します。
cd MyFirstProjectTypeScript
yarn start
すると、エミュレータ画面が立ち上がりましたが、エラーが・・・
![](https://i0.wp.com/www.simpletraveler.jp/wp-content/uploads/2021/01/image-53.png?resize=728%2C358&ssl=1)
コンソール画面にも、”Error running ‘xcrun simctl list devices –json’:xxxx”というエラーが出ています。
![](https://i0.wp.com/www.simpletraveler.jp/wp-content/uploads/2021/01/image-54.jpg?resize=728%2C314&ssl=1)
他のWebページをみると、どうやらXCode側で事前設定が必要だったみたい。
XCodeを起動し、Preference>Locationsで、CLI (Command Line Tools)を指定すればOKです。
![](https://i0.wp.com/www.simpletraveler.jp/wp-content/uploads/2021/01/image-54.png?resize=728%2C479&ssl=1)
再度コンソールでyarn startを実行し、iOSエミュレータを起動するため、”i”を押すと・・
![](https://i0.wp.com/www.simpletraveler.jp/wp-content/uploads/2021/01/image-80.png?resize=728%2C106&ssl=1)
今度は無事XCodeのエミュレータが立ち上がり、テンプレートアプリが立ち上がりました!
![](https://i0.wp.com/www.simpletraveler.jp/wp-content/uploads/2021/01/image-79.png?resize=458%2C1024&ssl=1)
以上、Expo + TypeScript + React Nativeアプリを作成し、ローカルで立ち上げるまでの手順でした!
おしまい
[番外編] ReactNativeをもっと学ぶなら・・・
React Nativeをもっとちゃんと学びたい!という方は、こちらにおすすめコンテンツをまとめましたので、ご参考にしていただければと思います・・!
土台のJavaScript/TypeScriptに不安がある方は、こちらもまとめましたので、ご参考になりましたら幸いです。