初心者向け!WindowsでReactNative入門~環境構築編~ ②Android Studioのインストール

f:id:enia:20210920164331p:plain

えにあです。
WindowsでReactNative入門~環境構築編~の2日目です。
Androidアプリ開発用にAndroid Studioをインストールしていきます。

目次

インストーラーのダウンロード

下記の公式ページにアクセスします。
developer.android.com

垢枠のエリアをクリックします。
f:id:enia:20210913102350p:plain

利用規約が表示されるので、最下部に移動して、利用規約に同意します。 赤枠のDownloadボタンを押下するとダウンロードが始まります。(size:912MB)
f:id:enia:20210913102505p:plain

Android Studioのインストール

ダウンロードしたインストーラを実行します。 セットアップウィザードが起動したらNextを押します。
f:id:enia:20210913103115p:plain

インストールするコンポーネントを選択します。デフォルトのままNextを押します。
f:id:enia:20210913103146p:plain

インストールディレクトリを設定してNextを押します。デフォルトのディレクトリでよいでしょう。
f:id:enia:20210913103231p:plain

スタートメニューへの登録設定を行います。デフォルトのままInstallボタンを押します。
f:id:enia:20210913103303p:plain

インストールが始まります。
f:id:enia:20210913103411p:plain

完了したらNextを押下します。
f:id:enia:20210913103440p:plain

Finishを押下します。
f:id:enia:20210913103506p:plain

自動的に次の画面が起動します。

Do not import settingsを選択してOKをクリックします。
f:id:enia:20210913103736p:plain

GoogleAndroid Stuidoを改善するために、どのように使っているか情報をGoogleに送信しても良いか?と聞かれているようです。「Don't send」を選択しても問題なく使えるので、こちらを選択しました。
f:id:enia:20210913103932p:plain

「Next」を選択します。
f:id:enia:20210913104042p:plain

「Standard」にチェックを入れてNextを押します。
f:id:enia:20210913104217p:plain

UIのテーマです。好きな方を選択してNextを押します。 私は夜電気を暗めにして作業するので、目が痛くならないようにダークモードを選びました。
f:id:enia:20210913104309p:plain

「Finish」を押します。
f:id:enia:20210913104357p:plain

初期化が完了するまで3~4分待ちましょう。
f:id:enia:20210913104425p:plain

おっと、私の環境ではエラーが発生してしまいました。 とりあえずFinishしか押せないので押します。
f:id:enia:20210913104719p:plain

とりあえず起動はできるはずです。 ここまででインストールは完了です。

Android Studioの設定

SDKの設定をしていきます。 メニューからCustomizeを選択し、表示された画面でAllSettingsを選択します。
f:id:enia:20210913134232p:plain

Android SDK Build-Tools(赤枠)がinstalledになっていることを確認します。
f:id:enia:20210913134923p:plain

Android SDK Locationをコピーしておきましょう。
最後に環境変数の設定をする際に利用します。
f:id:enia:20210913135041p:plain

エミュレータの設定

メイン画面に戻り、[Projects] -> [More Actions] -> [AMD Manager] を選択します。
f:id:enia:20210913135211p:plain

[create virtual device]をクリックします。
f:id:enia:20210913135257p:plain

エミュレートするハードウェアのタイプを選択します。プロダクトを開発するときには様々な機器でテストする必要がありますが、今回は入門編なので[Pixel 5]を使うことにします。
f:id:enia:20210913135441p:plain

エミュレータにロードするOSバージョンを選択します。ここでは最新のAndroid11を選択します。 f:id:enia:20210913135607p:plain

利用規約に同意して[Next]を選択します。
f:id:enia:20210913135708p:plain

OSのダウンロードが始まります。
f:id:enia:20210913140239p:plain

完了すると[Next]が押せるようになったはずです。
f:id:enia:20210913140328p:plain

[Finish]を押下します。
f:id:enia:20210913140439p:plain

バイス一覧にPixel5が表示されているはずです。[▲]を押してみましょう。
f:id:enia:20210913140532p:plain

エミュレータが起動するはずです。真っ暗な場合はしばらく待ってみましょう。 5分程度待つと、真っ暗 => Googleのロゴ => 以下の画面 という順番で表示されると思います。
f:id:enia:20210920222931p:plain:w200

環境変数の設定

途中でコピーしたAndroid SDK Locationのパスをユーザ環境変数ANDROID_SDKに設定します。
f:id:enia:20210920203017p:plain

ユーザ環境変Pathに以下二つを登録します。

%ANDROID_SDK%\emulator
%ANDROID_SDK%\platform-tools

以上でAndroid Studioのインストールは完了です! 今回はここまで!