初心者向け!WindowsでReactNative入門~アプリ開発編~ 1日目

f:id:enia:20211005223434p:plain えにあです。

WindowsでReactNative入門~アプリ開発編~の1日目です。

この記事は和田さんのUdemyの講座を参考にしています。
www.udemy.com

講座は非常にわかりやすい内容で、特にReact経験者であればすぐに理解できると思います。 しかしながら、現在のバージョンとの環境差異であったり、MacWindowsの違いであったり、コーディングスタイルの好みの違いがあったので、自分なりにアレンジにした開発の過程を記録していきます。

目次

出来上がりイメージ

こんな感じのアプリを作ります。 f:id:enia:20211005212734p:plain

環境

Windows10 HomeEdition
expo 4.11.0
node.js 4.17.6
VSCode
Typescript

Androidアプリだけが対象です。iosは対象外です。

プロジェクト作成

では早速始めていきましょう。
作業ディレクトリはどこでも構いません。私はD:Learningの下で作業をしています。

Windows PowerShellを起動して、expo init news-appと入力します。 選択肢が表示されるので、blank (Typescript)を選択します。

PS D:\Learning> expo init news-app
? Choose a template: » - Use arrow-keys. Return to submit.
    ----- Managed workflow -----
    blank               a minimal app as clean as an empty canvas
>   blank (TypeScript)  same as blank but with TypeScript configuration
    tabs (TypeScript)   several example screens and tabs using react-navigation and TypeScript
    ----- Bare workflow -----
    minimal             bare and minimal, just the essentials to get you started

自動的に必要なライブラリのインストールなどが始まります。 1分ほどで完了し、以下の内容が表示されます。

√ Choose a template: » blank (TypeScript)  same as blank but with TypeScript configuration
  Downloading and extracting project files.
🧶 Using Yarn to install packages.  Pass --npm to use npm instead.
  Installing JavaScript dependencies.

✅ Your project is ready!

To run your project, navigate to the directory and run one of the following yarn commands.

- cd news-app2
- yarn start # you can open iOS, Android, or web from here, or run them directly with the commands below.
- yarn android
- yarn ios # requires an iOS device or macOS for access to an iOS simulator
- yarn web

これで、空のプロジェクトが作成されました。

ここでは選択肢の違いを詳しくは説明しませんが、javascriptを使う場合はblank、Typescriptを使う場合はblank(Typescript)を選択します。
規模の小さいプログラムであればjavascriptでもよいですが、中規模以降になるとTypescriptで型付けを行った方がメンテナンスしやすいと私は考えておりますので、Typescriptを採用します。

エミュレータで起動してみる

さて、作成した空のプロジェクトは中身のないアプリですが、それでも立派なアプリです。つまり起動することができます。早速Androidエミュレータ上でこのアプリを起動してみましょう。

まずAndroidエミュレータを起動しましょう。 環境構築編でエミュレータの設定は完了していますね。 前回はAndroid Studioからエミュレータを起動しましたが、今回はコマンドで起動してみましょう。

まず、エミュレータの名前を調べるためにemulator -list-avdsを実行します。このコマンドは、今までに作成したエミュレータの一覧を表示するコマンドです。

PS D:\Learning> emulator -list-avds                            
Pixel_5_API_30

ここで、環境構築編で作成したエミュレータが表示されるはずです。私の場合はPixel5で作成したので上記のように出力されました。

エミュレータの名前がわかったのでこのエミュレータemulator -avd エミュレータ名で起動します。

PS D:\Learning> emulator -avd Pixel_5_API_30
emulator: Android emulator version 30.8.4.0 (build_id 7600983) (CL:N/A)
handleCpuAcceleration: feature check for hvf
added library vulkan-1.dll
Failed to open /qemu.conf, err: 2
Windows Hypervisor Platform accelerator is operational
emulator: INFO: GrpcServices.cpp:315: Started GRPC server at 127.0.0.1:8554, security: Local
emulator: INFO: EmulatorAdvertisement.cpp:93: Advertising in: C:\Users\heart\AppData\Local\Temp\avd\running\pid_8144.ini
emulator: ERROR: AdbHostServer.cpp:102: Unable to connect to adb daemon on port: 5037
Your emulator is out of date, please update by launching Android Studio:
 - Start Android Studio
 - Select menu "Tools > Android > SDK Manager"
 - Click "SDK Tools" tab
 - Check "Android Emulator" checkbox
 - Click "OK"

エミュレータが起動すればOKです。
f:id:enia:20211005220035p:plain:w200

次に、作成したプロジェクトディレクトリに移動しexpo startを実行します。

PS D:\Learning> cd news-app
PS D:\Learning\news-app> expo start 

すると、ブラウザが起動し、以下の画面が表示されるので、Run on Android device/emulatorをクリックします。
f:id:enia:20211005215929p:plain

このような画面が表示されれば成功です!
f:id:enia:20211005221901p:plain:w200

おわりに

今回は空のプロジェクトを作成し、エミュレータで空のアプリを起動させました。
次回は独自のアプリを作り始めていきます。
今回はここまで!

Something went wrongと表示された場合

私の場合、以下のようなエラー画面が表示されてしまいました。
この解決方法でめちゃくちゃはまりました。
色々原因があるのですが、私の場合ググっても出てこない原因でした。
f:id:enia:20211005220342p:plain:w200

Network response timed outと表示されていますが、どうやらエミュレータ側から、expoの待ち受けポートである19000に接続できていないようです。

対策① ネットワークプロファイルをプライベートにする

ネットワークプロファイルは以下のようにプライベートを選択してください。
f:id:enia:20211005222129p:plain

対策② ポート重複を解消する

対策①で解決しない場合、expoの待ち受けポートである19000番を別のプロセスが使用している可能性があります。

netstat -aon | find '"19000"'を実行し、19000番ポートを使用ているプロセスを調べます。
1228と5808の二つプロセスが19000でLISTENしていることがわかります。

PS D:\Learning> netstat  -aon  | find '"19000"'
  TCP         0.0.0.0:19000          0.0.0.0:0              LISTENING       5808
  TCP         0.0.0.0:19000          0.0.0.0:0              LISTENING       1228
  TCP         [::]:19000             [::]:0                 LISTENING       1228

PIDからプロセスを調べます。node.exeがexpo startで起動したプロセスです。
windowsが起動しているsvchostとポートが重複しているようです。

PS D:\Learning\news-app> tasklist | findstr "1228 5808"   
svchost.exe                   5808 Services                   0      9,608 K
node.exe                      1228 Console                    1    107,260 K

その場合は、expo start --port 空きポート番号で、ポート重複を回避します。

expo start --port 19010

対策③ tunnelを使う

LANをtunnelに変更すると、とりあえず動くかもしれません。
f:id:enia:20211005223141p:plain