Reactnative プロジェクトのセットアップ(Android ver.)

Reactnativeプロジェクトを使うにあたり、はじめの一歩がわからない!
と、いう方に向けて、前回は”ios ver.”の記事を書かせていただいたので、
今回はその続編として “Android ver.”の記事になります!

ちなみに前回の記事はこちら

今回はMacでのAndroid向け開発で必要な準備についてです。

ちなみに最初に言ってしまうと、手順の途中まで、ios ver. と全く同じです!!
ですので

1.Homebrew のインストール
2.Node.js のインストール
3.yarn のインストール
4.ReactNativeパッケージのインストール
5.watchman のインストール

この部分に関しては、前回の記事を参考にしてもらえたらと思いますので、
今回は割愛します….m( . _ . )m

今回はその続きから改めて解説していきます✴︎

6. JDK インストール

・JDKとは
 JDKは、Java Development Kit の略称で、開発に必要なソフトウェアパッケージのことです。

-JDK のインストール手順-

①AdoptOpenJDKのサイトにアクセス

まずはこちらのサイトにアクセスします⇨AdoptOpenJDK サイト

JDKを公開しているサイトの一つです。
全て英語で書かれているので、「うわっ!」と思うかもしれませんがご安心ください。
一つ一つの手順を解説していきます!

Reactnative 手順_AdoptOpenJdkのサイトトップ

②バージョンを選び、ダウンロード

バージョンを確認し、インストール

では早速ダウンロード!・・・の前に、
ご自分の端末のOSのバージョンとダウンロードリンクのバージョン(赤枠部分)が一致しているか、確認してください。
(もし一致していなかった場合は、「Other Platforms」ボタン(☆のついた赤枠部分)をクリックして、端末のバージョンとあっているものを選択してください。)

今回は「Open JDK 11 (LTS)」と、JVM は 「HotSpot」をダウンロードしますので、
この2つを選択した状態で「Latest release」と書かれた青い大きなボタンをクリックしてください。
すぐにダウンロードが始まります。


③インストール

ダウンロードしてきた pkg ファイルを開きます。

ダウンロードされたファイルを開く

インストール画面が開きますので、「続ける」をクリックします。

インストール画面が開く

使用許諾契約画面になります。(英語しか選べなかった・・・)
印刷したり保存したりしたい方は「Print」や「Save」、
別に良いやって方は「Continue」をクリックしてください。

使用許諾契約画面

使用許諾契約に同意するか聞かれるので、「Agree」(同意)を
クリックします。

ライセンス同意確認画面

インストール先の確認画面になりますので、問題なければ「続ける」を
クリックします。

インストール先の確認

再度確認画面が出るので、こちらも問題なければいよいよ「インストール」!!

インストール先最終確認

・・・と思いきや、ユーザIDとパスワードの入力が必要でした。
(通常、ユーザIDの方はすでに入力された状態でこの画面が出ると思います。)

再度!いよいよインストール!!

管理者アカウントのIDとパスワード入力

この画面になればインストール完了です。インストール自体は1分もかからず、
素早く終わります。終わったら画面は閉じてしまってOKです。

インストール完了

④確認

正常にインストールされているか、ターミナルで以下の2つのコマンドを打って確認します。

java -version
javac -version

どちらもインストールしたjavaのバージョンが出ればOKです!

7.Android Studio インストール

・Android Studio とは
Android Studio とは、Google公式推奨の開発環境です。
Android開発には欠かせません。

– Android Studio のインストール手順 –

①Android Studio 公式ダウンロードサイトにアクセス

こちらのサイトにアクセスします⇨Android Studio 公式サイト

②ダウンロード

ダウンロードボタン(緑色のボタン)をクリックします。

公式サイトでダウンロードボタンをクリック

すると次の画面になるので、同意にチェックをつけて「ダウンロードする」ボタン(青いボタン)をクリックします。

ダウンロード画面

ダウンロードしたファイルをクリックして実行します。

ダウンロードファイルの実行

次のような画面が開くと思うので、
Android Studio を、「Applications」にドラッグアンドドロップします。

AndroidStudio をApplicationにドラッグ

以下のようなダイアログが出るので、「認証」ボタンをクリックします。

管理者での認証ボタンをクリック

すると管理者のユーザIDとパスワードを求められるので、入力してください。

ユーザIDとパスワード入力

これでインストールは完了しましたので、初期設定をしていきましょう!

③初期設定 – インストール

「Applications」の中から「Android Studio」を探してクリック、実行します。

Application一覧画面

Install Type:「Custom」を選択して「Next」をクリック

setup画面

JDK Location:特に理由がなければこのままで「Next」ボタンをクリックします。

SDK Components Setup:下図のようにチェックを入れて、「Next」をクリックします。

SDK Components SetUp

UI Theme:テーマカラーを選びます。今回は黒にしてみましたが、好みで選んでくださいね!

Select UI Thema

Emulator:推奨の2.0GBで「Next」クリック!

Emmulator Settings

各設定の確認です。OKそうなら「Finish」をクリックしてください。

Verify Settings

管理者アカウントでの許可を求められるので、
管理者アカウントのユーザID、パスワードを入力します。

管理者権限で許可

ダウンロードが完了したら「Finish」をクリックします。

Downloading Component

これでインストールは完了です!

完了画面

④初期設定 – SDKの設定

Android Studioを立ち上げて、「Configure」をクリック。

Configuration

開いたメニューの中から「SDK Manager」を選択します。

Configure-SDKMAnager

「Show Package Details」(赤丸部分)にチェックをいれ、
黄色枠内のチェックを確認していきます。

show packageにチェックを入れる

パッケージ確認

パッケージ確認

図の通りになったら、右下の「OK」をクリック。
すると確認画面が出ますので、これも「OK」をクリック!

確認ダイアログ

ライセンス同意確認画面になりますので、下の赤丸部分の「Accept」を選択します。
次に真ん中の赤丸で囲ってある「android-sdk-previewer-license」をクリック。

ライセンス同意画面

こちらも「Accept」を選択し、「Next」ボタンをクリックします。

ライセンス同意画面2

これでSDKの設定も完了です!

8.Android環境変数の設定

・環境変数とは
OSが持つ設定値で、利用者や実行されるプログラムと共有することができます。

– 環境変数設定の手順 –

①bash_profileの編集

「bash_profile」は隠しファイルですので、以下の表示方法で表示してください。

 ◇Finderを開き、command + shift + . を同時に押すと、半透明のファイルやフォルダが
  ふわっと現れます。
 ◇ちなみに、「bash_profile」は使用ユーザフォルダの直下にあります。

.bash_profileが見つかったら、ファイルに以下を追加します。

export ANDROID_HOME=$HOME/Library/Android/sdk 
export PATH=$PATH:$ANDROID_HOME/emulator 
export PATH=$PATH:$ANDROID_HOME/tools 
export PATH=$PATH:$ANDROID_HOME/tools/bin 
export PATH=$PATH:$ANDROID_HOME/platform-tools

無事完了した方は「②設定を反映する」に続きます。

※もし、「bash_profile」が見つからなかった場合は、以下を実行してください!

ターミナルを起動し、タブ左上の「ターミナル」をクリック。
開いたメニューの中から「環境設定」を選びます。

ターミナルの環境設定メニューを開く

環境設定の画面が開きます。
ここで、”開くシェル”を、「デフォルトのログインシェル」から、
「コマンド(完全パス)」に変更し、パスを以下に設定します。

/bin/bash

環境設定画面

ターミナルを開き直し、以下を実行します。

touch .bash_profile

②設定を反映する

ターミナルで以下を実行します。

source $HOME/.bash_profile

ここまできたら完了です!プロジェクトの作成を行います!

9.プロジェクトの作成

下記コマンドの”プロジェクト名”の部分を、自分の作りたいプロジェクト名に変更して、
ターミナルで実行して新規プロジェクトを作成します。
※ちなみにプロジェクト名にはアルファベットか数字しか使えないようです。

npx react-native init [プロジェクト名] --template react-native-template-typescript

これでプロジェクトの作成も完了です!

10.おわり

以上で、 Reactnative プロジェクトのセットアップ(Android編)は完了です!
お疲れ様でした!

そろそろ開発日記の方も更新しようかななんて思ってますので、
また次回の更新、お楽しみに〜

読んでくれてありがとう〜

私たちが頑張って作ったアプリ、”ToDotto”についてはこちら ↓ ↓

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です