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

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

よく読まれている記事

エンジニア独立

2018/8/22

【厳選】現役フリーエンジニアが勧めるフリーランスエージェント2選

こんにちは、フリーエンジニアのてぃすです。 エンジニア、特にプログラマーがフリーランスになろうとしたとき、人脈豊富なスーパーエンジニアでもない限り、最も現実的な選択肢がフリーランスエージェントを利用した働き方です。 とはいえエンジニアバブルの昨今、そういったエージェントサービスは数多存在しており、戦国時代状態です。 選択肢が多いということは嬉しいことであり、同時にどれを選べばいいかという悩みにもなります。 各サイトではメリットや自サービスの長所しか書かれていません。当然ですが。 そうなると選ぶ側としては迷 ...

続きを読む

エンジニア独立

2019/5/29

エンジニアの強い味方、フリーランスエージェントとは?

このブログで度々登場する単語であるフリーランスエージェント。 これまで正社員として企業に所属してきたエンジニアにとっては馴染みのない単語だと思います。 なんとなく案件を紹介してくれるサービスだろう。 食べログの飲食店が案件に変わったようなものだろう。 派遣の意識高い系なのだろう。 くらいの印象の方もいらっしゃるかも知れません。 そこで今回はエンジニアにとって、フリーランスエージェントとは何者なのか、利用することによってどんなメリットがあるのかについて説明していこうと思います。 理屈はいいからどのエージェン ...

続きを読む

エンジニア入門

2018/1/21

プログラミング言語としてのJavaについて

こんにちは、フリーランスエンジニアのてぃすです。 エンジニア・プログラマは年収1000万を現実的に目指せる職業として最近特に注目を集めている職業です。 今いる業界の将来性に不安を感じ脱出してきた人たちも、どんどんエンジニア・プログラマという働き方に集結しています。 ある程度エンジニア・プログラマという職業について調べていると、どのプログラミング言語を習得すればいいのか、という疑問が出てくるタイミングがあると思います。 どのプログラミング言語を選べばいいか、という疑問について調べてみると最近ではJava・R ...

続きを読む

エンジニア独立

2019/4/23

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

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

続きを読む

エンジニア独立

2019/4/28

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

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

続きを読む

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

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