※初回起動時はローカルサーバーを起動する必要があるのでnpm startを実行する必要があります！
Reactアプリケーションを作成している時に、皆さんはどのようにブラウザを起動して実行テストを行っているでしょうか。
ターミナルからnpm startを実行している方がほとんどだと思います。
ただ、毎回毎回ターミナルでコマンドを実行するのも面倒です。VSCodeには「F5」という便利なデバッグ実行ショートカットがありますね。これを使わない手はありません。
この方法はReactだけでなく各種フレームワークでも活躍する便利機能なので覚えておいて損はありません。
npm startコマンドでは、http://localhost:3000/が開いてしまう
デフォルト状態でnpm startを実行すると、ブラウザ（各自選択したブラウザ）が開き、http://localhost:3000/というトップページのURLが表示されます。
プロトコルがhttp、ドメインがlocalhost、ポートが3000ということですね。
別にこれでもいいじゃないかと思われるかもしれませんが、フロントエンド系の仕事をしていると、どうしてもブラウザのQRコードをスマホに読ませて、実機で確認したくなります。
実は、http://localhost:3000/のページでQRコードを生成させて、スマホカメラで読み込んでブラウザ表示すると……出来ません、表示されません。
スマホではlocalhostというドメインが認識出来ないんですね。
開発の利便性を高めるために、第一にスマホ実機効率化のためにF5キーのショートカットを機能させたく思い執筆にいたりました。
React NativeではQRコードデフォルトで付いてるのに、Reactだと付いてないんですよね……欲しいなぁ。でも、F5が使えるようになった今、ほぼほぼ不便はなくなりました。同じように考えている人いると思うんですが、どうでしょうね。
npm startオプションやNode.jsの設定などに奮闘した結果
npmコマンドを色々調べて、npm start側で初期起動をhttp://192.168.X.X:3000/に設定しようと試みましたが、どのサイトを見ても自分の欲しい情報とはズレズレでなかなかたどり着けませんでした。（調べ方が悪かったとはそう思えない……）
ポートも8080に替えた方が良さそうかな、とも考えたんですが、おそらく3000のままでもスマホの実機で確認できるはずなので、とりあえずポート番号は3000で良いと判断しました。
結局、npm start側の仕様は変更することは諦めました。後々不都合なこととかも出てきそうな予感もしたので、一旦このままでいきます。ドメイン、ポートともに何か変えることはしませんでした。
実現したい要件まとめ
- http://192.168.X.X:3000/のようにlocalhostではなくローカルIPアドレスでブラウザのページが開くようにしたい。
- F5キーで瞬時に開きたい
- QRコードを使ってスマホ実機でも瞬時に確認できる環境を作りたい。
- 前提条件として、同じローカルLAN内にデバイスとPCが存在している。
- スマホでもホットリロードが効くこと。
プライベートIP（ローカルIP）アドレスであれば外部公開もされないので、まぁ安心してデバック作業が出来ます。
実際に行った作業の手順
めちゃくちゃ簡単です。
- VSCode上で、tsxファイル（なんでもいいはず）を開いた状態でF5キーを押す。
- ブラウザを聞かれるので決める（Chrome一択）
- launch.jsonが開くので編集する
- もう一回F5を押すと瞬時にブラウザが起動する（※ 1のデバッグモードは停止させてから）
1,2は問題ないですね。3ですが、下記のように編集します。
{
// IntelliSense を使用して利用可能な属性を学べます。
// 既存の属性の説明をホバーして表示します。
// 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://192.168.X.XX:3000",
"webRoot": "${workspaceFolder}"
}
]
}“url”の部分だけです。初期値はhttp://localhost:8080/になっていますので、それをhttp://192.168.X.XX:3000に書き換えます。
ローカルIPアドレスとポート番号3000を指定するだけです。
launch.jsonを保存したら、F5を押してデバックモードで実行してみてください。うまく表示されるはずです。（表示されない場合は、既にデバッグモードになってしまっている可能性があるので、デバッグモードを一旦終了してください。）
ローカルIPを調べる方法
補足です。うっかり忘れてしまった方用にローカルIPの調べ方を伝えておきます。
ipconfigターミナルに上記コマンドを打って「IPv4アドレス」と書いてある右に出ます。
Macだと、ifconfigかな。ipconfigはWindowsです。
何といっても実機検証がホットリロードで快適
色々書いてきましたが、僕が一番やりたかったのは実機検証をどれだけ効率的に行えるか、ということです。
他の方のサイトにはスマホのアドレスバーにlocalhostをローカルIPに書き換える、が一番多かったです。ただ、効率的を求める（短気）な僕にはそれは無しでした。QRコードがあるじゃないか！使え！でした。
React Native（Expo）同様に実機でもホットリロードが有効で、ソースコードを変更すると、画面上の文字も即座に反映されました。これ、これがやりたかったの。
まとめ
この環境設定はメリットしかありません。
- QRコードで実機検証を開始できる。
- npm startの設定等をいじる必要がない。
- スマートフォンでもホットリロードが有効。
- ChromeのデベロッパーツールでモバイルViewに切り替えたりする必要がない。
非常に便利で開発がかなり早くなるため、これらの設定はしておいたほうが良いかと思います。おすすめなので是非やってみてください。
