TIS ENGINEER NOTE

ITエンジニアのためのキャリア向上ノウハウブログ

プログラミング

React Nativeの開発環境構築(Expo未使用)

更新日:

javascriptのフレームワークであるReactでネイティブアプリが作成可能となるReact Native。

最近では簡単にビルドや動作確認が行えるExpoなどのサービスもありますが、将来的にiOS/Androidエンジニアと連携を取れるようになりたいという意思もあり、そちらは使わずに進めてみたので手順を共有していきます。Expoすごい便利そうなんですけどね・・・

環境はMacで進めていきます。

各種インストール

まずは開発に必要な以下のパッケージをインストールします。

brew install node
brew install watchman

次にCLI(コマンドラインツール)をインストールします。

yarn global add react-native-cli

npmを利用している場合は以下のコマンドで

npm install -g react-native-cli

Androidアプリを開発する場合

Androidアプリを開発する場合はJDKが必要になります。以下のコマンドでインストール可能です。

brew cask install java

もしbrew caskが使えない場合、先にこちらのコマンドを実行しましょう。

brew install caskroom/cask/brew-cask

次にAndroid Studioをインストールします。

brew cask install android-studio

インストール完了後にAndroid Studioを立ち上げることで、セットアップが始まります。

Android Studioのセットアップ

最初に設定ファイルを読み込むか聞かれます。必要であればインポートしてください。

次にインストール方式を選択する画面が出ますので、「Custom」を選択します。

UIテーマはお好みで選んでいただき、次の画面でReact Nativeの公式で指定されているコンポーネントをインストールします。Android SDK Locationについてはデフォルトで進めます。

あとはデフォルトの設定でウィザードを進めれば各種インストールが実行されます。

インストールが完了したら環境変数を設定しておきましょう!

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools
source ~/.bash_profile

Android Studioをインストールすると、Android SDKの最新版がインストールされますが、2017/11現在React NativeにおいてはAndroid SDK 6.0が必要となりますので、これらを個別に取得します。

Android StudioのトップからSDK Managerを選択してください。

React Native公式の推奨に沿って、Show Package Detailsをチェック後、以下のパッケージを選択します。

次に同画面上部のタブでSDK Toolsに切り替え、同じくShow Package Detailsをチェック後、Android SDK Build-Toolsの23.0.1をチェックします。

最後にApplyをクリックし、ライセンスに同意してインストールが開始されます。

あと一つやることがあります。エミュレーターの起動です。

エミュレータを起動しておけば、動作確認が簡単にできるようになります。

$ emulator -list-avds
Nexus_5X_API_27_x86

emulator -list-avdsコマンドによって利用可能な仮想端末が表示されます。特に端末を選ぶ必要がなければ表示された仮想端末を起動しましょう。

~/Library/Android/sdk/tools/emulator -avd Nexus_5X_API_27_x86

iOSアプリを開発する場合

iOSアプリを開発する場合はXcodeが必要になります。

XcodeはAppStoreよりインストールを行なってください。

https://itunes.apple.com/jp/app/xcode/id497799835?mt=12

React Nativeによる開発

インストール作業は以上となります。早速以下のコマンドでプロジェクトを作成します。

react-native init SampleApp

コマンドを実行したディレクトリ配下にSampleAppディレクトリが作成され、その中にReact Nativeの開発において必要なファイルやディクレクトリ構造が作成されます。.gitignoreなどのファイルもよしなに記述してくれています。ありがたや。

動作確認

iOS/Android共通して、作成されたプロジェクトに移動します。

cd SampleApp

iOSの場合

以下のコマンドでiOS用のビルドが実行されます。

react-native run-ios

あとはXcodeからios/SampleApp.xcodeprojをエミュレータで開けば動作確認が可能です。

※今回はAndroidの方をメインで進めているため、動作確認は行なっておりません。後ほど更新させていただきます。

Androidの場合

以下のコマンドでAndroid用のビルドが行われます。

react-native run-android

また、エミュレータが起動されている場合、以下のように自動でエミュレータが立ち上がり、React Nativeプロジェクトのサンプル画面が表示されます。

まとめ

アプリ開発をやってみたいなぁと思いつつ、各ネイティブ開発言語を習得するのは骨が折れるなぁと思いReact Nativeに手を出してみました。

ひとまず近日中に簡単なアプリをリリースできるようにゴリゴリやっていこうと思います(´∀`)

よく読まれている記事

エンジニア独立

2019/4/15

ITエンジニアが市場価値を知りたければエージェントを活用すべき

どうも、フリーランスエンジニアのてぃすです。 企業に雇われないフリーランスという働き方。 ITエンジニアという自分の技術を商売道具とする職業は、フリーランスとの相性が抜群だったりします。 僕自身文系かつエンジニア歴2年半で独立しましたが、1年目から年収1000万を軽く超えることができました。 独立してこれまでで学んだことは、ITエンジニアがフリーランスとなり効率よく稼ぐには市場価値の把握がもっとも重要であるということです。 市場価値という超重要な要素 ITエンジニアという職業はいくら高い技術を持っていても ...

続きを読む

エンジニア独立

2018/2/18

Webサービス・Webアプリケーションを作って公開するまでの流れ

エンジニアとして活動していくに際して、自分で作成し公開している制作物があるというのは非常に強力なアピールポイントとなります。 もちろんクオリティが高いに越したことはありませんが、自分で作成し公開までを行なったというだけでもかなりの評価を得られます。 これからエンジニアになりたい エンジニアとしてのキャリアアップ・キャリアチェンジを望んでいる という人には大変オススメのプロセスです。 実際僕もRailsを未経験の状態から勉強していた際の仕上げとして作成&公開したWebアプリケーションのおかげであっさ ...

続きを読む

エンジニア独立

2019/4/15

エンジニアがリモートワークをして感動したお話

こんにちは。フリーランスエンジニアのてぃすです。 僕はエンジニアとして活動する中で、メインで参加しているプロジェクト以外にもフルリモートでもう1つのプロジェクトにも参加しています。 今日は実際にリモートワークってどんなもんなのかについてお話していこうと思います。 前置き リモートワークの話題については各種メディア、ブログやSNSでも度々盛り上がっています。 通勤時間の短縮になる 通勤で使う体力を仕事にまわすことができる 家庭の事情などで外で働けない人も活躍することができる などのポジティブな捉え方もあれば ...

続きを読む

エンジニア独立

2019/5/30

レガシーな技術を扱っていたSES正社員がモダンな技術を扱うフリーエンジニアになるまでにやったこと

こんにちは。フリーエンジニアのてぃすです。 僕は独立する前、SESの正社員として非常に歴史の長いプロジェクトに常駐で参加していました。 Javaを使ったシステムなのですが、他のJavaエンジニアに聞いても「なにそれ」と言われてしまうような非常にマニアックなフレームワークを最新から数年遅れのバージョンで扱っていました。 自動テスト?クラウドサーバー?なにそれ?的な非常にレガシーかつ面白みのない状況に嫌気と不安を感じて独立を志したわけです。 で、この時のような僕と同じような状況で悩んでいる人ってのをエンジニア ...

続きを読む

エンジニア独立

2019/4/23

エンジニア派遣でキャリアを積んで高収入を目指す

エンジニアとして採用面談を受けたことのある人なら分かると思うのですが、面談の時に最も重要視されるポイントは業務経験です。 もちろん普段の個人学習や、技術への関心などでフォローできる面もありますが、一番見られるのはどんな技術を使って、どんな業務を行ってきたかという点なんですよね。 採用する側もプロダクトの正否を左右する立場として責任を負っているわけですから当然です。 そんな時、良質な職務経験をどのように積むことができるか、というのがポイントになってきます。 今回はキャリア構築のための、派遣エンジニアという選 ...

続きを読む

-プログラミング
-, , ,

Copyright© TIS ENGINEER NOTE , 2021 All Rights Reserved Powered by AFFINGER5.