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に手を出してみました。

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

よく読まれている記事

office

エンジニア独立

2019/5/29

エンジニア歴2年の僕がレバテックフリーランスでフリーランスを目指してみた

正社員エンジニアからフリーランスエンジニアへの方向転換の一環として、業界最大手であるレバテックフリーランスの個人面談に出向いてきたので、その感想を書いていこうと思います。 フリーランスというと知識・経験・人脈を兼ね備えたスーパーエンジニアしかなれない存在だと思っている人も少なくありません。 しかし最近では今回紹介するレバテックフリーランスや以前の記事で紹介したギークスジョブなどといったエージェントを利用すれば、僕のように経験の浅いエンジニアでも十分に目指せる働き方となっています。 この記事が現在働いている ...

続きを読む

エンジニア入門

2018/1/2

プログラマになるために資格は必要か

ここ最近のエンジニア需要増大に伴って、プログラマやエンジニアになりたいと考え始める人が周りにも増えてきました。 そんな時によく聞かれるのが「プログラマになろうとしたら、資格とか取ったほうがいいの?」という内容。 確かに、真っ黒な画面に向かってカタカタ英語や記号を打ち込んでいるTHE 専門職であるプログラマという職業には、何かしら資格が必要に思えるかもしれません。 今日はそんなプログラマ・エンジニアを目指していて、最初の一歩として資格取得を検討している人に向けてプログラマになるのに資格が必要かという疑問に応 ...

続きを読む

エンジニア独立

2019/4/15

僕がITエンジニアとして独立しなかった場合の損失を計算してみた結果

どうも、フリーランスエンジニアのてぃすです。 僕はエンジニア歴が2年くらい経った頃に、月収が20万円を下回るような状態でした。 その後独立し、ほどなくして月収は100万円にまで到達しました。 実に5倍ほど収入が跳ね上がったことになります。 正直もう少し早く独立していればなぁと思っています。 今だからこそ考えられることですが、戦略さえしっかりしていれば、1年くらいは独立を早めることは可能だったと思うので。 こういう後悔というか振り返りをするたびに思うのですが、世の中僕以上に行動を遅らせることによる損失を食ら ...

続きを読む

エンジニア独立

2019/4/28

収入を上げたいWebエンジニアが学習するべき技術

どうも、フリーランスエンジニアのてぃすです。 エンジニアの収入は技術に比例して上がるわけではない。というのはこのブログでよく言っていることです。 しかし技術と収入の因果関係はもちろん0ではありません。 そこで今回はITエンジニアとして働いていく上で収入アップに繋がる可能性の高い技術をピックアップして紹介していきます。 今やっている仕事で収入に限界を感じている 新しい技術を学びたいけど何を学ぶのが効率がいいのか知りたい というエンジニアは要チェックです。 技術によって収入が上がる要因 まず収入が上がる技術と ...

続きを読む

エンジニア独立

2019/4/15

プログラマーがフリーランスになって独立するために必要なスキル

こんにちは、フリーエンジニアのてぃすです。 ITエンジニアが独立するべきか、しないべきか。昨今のエンジニア・プログラマーの働き方議論において、最もホットなのがこの話題じゃないでしょうか。 賛否については、それぞれの立場や環境によって感情論も混ざって言い分は異なりますし、経験したこともない人の否定意見も飛び交って魑魅魍魎が跳梁跋扈な感じです。 なので今回はそういった賛否ではなく、実際にプログラマーをはじめとするITエンジニアが独立するためにはどの程度のスキル・経歴が必要かについてお話していこうと思います。 ...

続きを読む

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

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