最終更新日: 20240303

本題だけ見たい人はこちらに飛んでね！
環境構築スタート

記事の目的

この記事を見るだけでー
ReactNativeExpoの環境構築ができることを目的にしています！
質問事項があれば記事へのコメントもしくは@rioLi0NにDMなど気軽にどうぞ！

ターゲット層

Windowsで開発している（MAC高いから持ってない苦学生です）
TypeScriptじゃなくてJavaScriptを開発したい
ReactNative「Expo」で開発する

バックボーン！！！

CEO「Android向けアプリ完成したね！」
僕「はい！」
CEO「ところで、iOS対応もしたいんだけど相談できる？」
僕「なるほど！いけます！」

それから色々あり調査などをした上で
下記の要件を満たすReactNativeExpoを採用することにしました！

1. クロスプラットフォーム言語なので保守作業が楽になる
2. 企業の技術スタックがWeb系なこと
3. RNに加えてExpoも使うことで更にWeb寄りの開発が可能で開発体験も向上
4. アプリの技術要件的には複雑なものではなく実装が可能そうなこと
5. 企業の技術スタックとアプリ規模を考えて無理にTypeScriptを使う必要がなさそう

同じ境遇の人が居るかもしれないので記事に残しておきます！

環境構築

構築する環境はこちらー

WindowsでJavaScriptを使ったRNEプロジェクト
ルーティングにはExpo Routerを採用

解説方針としては、面倒に感じてほしくないのでノリでいけるよねって箇所は端折ります～

node.jsの導入

公式サイトからインストール

導入確認のコマンド

node -v

expo-cliのインストール

コマンドぽちぽちー

npm i -g expo-cli

下記のエラーでると思うけど
new local Expo CLIを使えばいいだけなので無視してOK

WARNING: The legacy expo-cli does not support Node +17. Migrate to the new local Expo

このコマンドでプロジェクトを作ったら
自動的にnew local Expo CLIを利用することになります！
（この解説ではGitHubからテンプレートプロジェクト持ってくるのでコマンドは使わないけど気になって調べたら時間のロスなので解説しておきます！）

npx create-expo-app {プロジェクト名}

ExpoRouterを導入したプロジェクトの作成

TypeScriptなら公式がテンプレート用意してくれてるんだけど...

npx create-expo-app@latest --template tabs@50

JavaScriptはないんだよね...
だけど有志がJavaScriptユーザー向けに作ったテンプレートをGitHubに公開してくれているので利用するしかないね！
(将来的にリポジトリが消えてるとかあったら僕に連絡してくれたら渡せます)

プロジェクトの初期化

GitHubから持ってきたプロジェクトの名前を変更します！
もっとスマートな方法があったらコメントで教えてください(切実な願い)

1. 空のプロジェクトディレクトリに解凍した中身を移動する
2. vscodeなどでプロジェクトを開く
3. crrl + win + f などでプロジェクト全体文字検索を開いて「template_js」で検索する
4. ヒットした文字列全てを「任意プロジェクト名」に置換する

プロジェクトを実行

コマンドぽちぽちー
表示されたQRコードをExpo Goで読み取ると動作確認できます
(注意: gitbashなどの非対話コマンドラインで実行すると正常動作しない)

npx expo start

リモート作業で別の人にQRコードを読み取ってほしいならこちら
(crtl+Cでサーバー閉じたらQRコードは読み込めなくなる)

npx expo start --tunnel

ライブラリの導入

expo向けに作られたライブラリ

npx expo install ライブラリ名

React発祥のライブラリ

npm install ライブラリ名

おわりに

僕は本記事の情報調査に4時間くらい使った記憶があるのですが
この記事を見た皆さんは10分もかからなかったと思います！
1人でも参考になった人がいたら本望です！

最後に、本記事の改善点があればフィードバックを貰えると嬉しいです！
仮に批判だとしても意見を頂けるのはありがたいことなので！