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/5/29

パーソルテクノロジースタッフの派遣でエンジニア歴2年の僕が時給2000円を余裕で超えた話

今いる会社を辞めることとなり、今後のエンジニアとしての身の振りを検討中のてぃすです。 今回とある派遣会社にて、業務経験なしのRuby on Railsの案件を紹介してもらい、その時給が2000円を超えていました。 月給換算したら1,2年目の正社員の給与を余裕で超えてきます。派遣という働き方の印象がガラッと変わる体験をしました。 今回はエンジニア歴2年の僕にそんな素敵な待遇を提供してくれたパーソルテクノロジースタッフについて、実体験を交えて語っていこうと思います。 エンジニア派遣の「パーソルテクノロジースタ ...

続きを読む

エンジニア独立

2019/4/15

フリーランスエンジニアの適正価格をぶっちゃけてみる

どうも、フリーランスエンジニアのてぃすです。 先日以下のツイートをしました。 実務経験2年以上のエンジニアが都内でフリーランスをやる場合、週5で月60万未満の案件は切り捨ててOKです。正社員的に考えると高めに見えますが、業務委託としてやるには60万円しか出さない案件は最底辺であると考えましょう — てぃす@フリーランスエンジニア (@tis_engineer) March 29, 2019 すると結構な反響があったので、今日はこのツイートで語っているフリーランスをやる場合の単価の基準について、 ...

続きを読む

エンジニア独立

2019/5/29

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

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

続きを読む

エンジニア独立

2019/4/15

【2019年版】現役フリーランスエンジニアがオススメするフリーランスエージェント4選

どうも、フリーランスエンジニアのてぃすです。 僕は正社員時代の月収は20万円を切るくらいだったのですが、独立したことで同じ労働時間で月100万円をキープできるようになりました。 現在はちょっと働く時間を減らして週3リモートで月70万円で働いていますが、このくらいのバランスもストレスが少なく、快適な日々を過ごすことができています。 そんな感じで独立から1年以上が経過し、わかったことがあります。 ITエンジニアは今の相場から考えれば、フリーランスになった方が圧倒的に得だなということです。 もちろん正社員ディス ...

続きを読む

エンジニア入門

2019/4/15

エンジニアは勉強し続けなければいけない職業なのか

こんにちは。フリーランスエンジニアのてぃすです。 最近は就職・転職する際にエンジニアを選択肢に含める人が増えてきています。 しかしエンジニアという職業を候補にあげるにあたって、 エンジニアは働きながら勉強し続けなければいけないのではないか? という疑問もよく見聞きします。 そこで今回はフリーランスエンジニアとして活動している僕の視点からこの疑問についての答えを説明していこうと思います。 結論 先に結論を述べると、 エンジニアは勉強し続けなければいけないのか? という疑問の答えはNOです。 決してエンジニア ...

続きを読む

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

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