TIS ENGINEER NOTE

27才文系出身フリーランスエンジニアのブログ

プログラミング

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

更新日:

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

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

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

各種インストール

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

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

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

Androidアプリを開発する場合

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

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

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

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

Android Studioのセットアップ

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

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

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

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

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

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

iOSアプリを開発する場合

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

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

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

React Nativeによる開発

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

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

動作確認

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

iOSの場合

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

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

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

Androidの場合

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

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

まとめ

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

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

よく読まれている記事

エンジニア入門

2018/7/29

WebCamp PRO - エンジニアとして働きたい人のためのプログラミングスクール

最近のプログラミングスクールは、就業サポート・業務で役立つ教育を掲げているところがかなり多くなってきました。というかこの2つを満たしていないスクールはもはや存在価値が薄くなってきています。 今回はその2本の柱を高いクオリティで実現しているWebCamp PROについて、現役プログラマの目線から紹介していこうと思います。 このWebCamp PROは総合的に見て、本気でエンジニアを目指そうとする人にとって最有力候補と言えるレベルで非常に優秀なプログラミングスクールです。この根拠はこれから書くWebCamp ...

続きを読む

エンジニア入門

2018/8/19

本気でRubyを学びたい人のためのエンジニアスクール『ポテパンキャンプ』

こんにちは、フリーエンジニアのてぃすです。 エンジニアといえば今や最も少ない投資で高収入を望め、更には週3勤務やリモートワークなどの柔軟な働き方も目指せる夢のある職業です。 ここ最近は営業職や事務職から、将来性を考えてエンジニアに転身するといういう人もかなり増えてきています。 特にRubyプログラマーは日本における絶大な需要とリモート案件の豊富さから、特に人気のあるポジションとなっています。エンジニアとして働いているが、職場環境に不満を抱いていたり、今扱っている技術が今後通用するか不安に感じ、Ruby・W ...

続きを読む

エンジニア独立

2018/8/22

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

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

続きを読む

office

エンジニア独立

2018/1/2

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

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

続きを読む

エンジニア独立

2018/8/12

Midworks - フリーランスエンジニアの不安を消滅させる次世代のエージェント

こんにちは、フリーエンジニアのてぃすです。 今やフリーランスエンジニアという働き方もだいぶカジュアルになってきています。僕自身 文系大学卒 大したキャリアもコネもない という一般的には心もとない状態から独立しましたが、正社員時代と比べて収入も5倍ほどになり、リモート中心で非常にストレスのない毎日を過ごせています。 先日エンジニアの集まりに参加して、そこにもフリーランスエンジニアが何人かいたのですが、その人たちの多くからMidworksというエージェントを使っているという話を聞きました。 気になって調べてみ ...

続きを読む

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

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