React Nativeの始め方

React Nativeの環境構築

kokikono.hatenablog.com

前回の記事で少しでも興味を湧いた人や、開発してみたいって思ってくれた人のためにReact Nativeでの開発環境などを紹介します。

※私はmacユーザーなので、ここではmacOSの説明のみです。

また、時間があればWindowsの記事も書こうと思います。

インストールしてみよう

facebook.github.io

 

ReactNativeでは以下の手順が必要です。

  1. Node
  2. Watchman
  3. React Nativeコマンドラインツール
  4. Android Studio
  5. Xcode
  6. Welcome to React Native !!!

では上記ツールをインストールしていきましょう!

1.Nodeのインストー

公式ではHomebrewを使用してNodeをインストールすることをおすすめしています。

Homebrew — macOS 用パッケージマネージャー

Homebrewをインストールしてない人は上記公式HPからインストールしてください。

では、Homebrewがある人は下記コマンドでNodeをいれましょう!

brew install node

※すでにNodeをインストールしている人はバージョンが4以上であること確認してください。

2.Watchmanのインストー

WatchmanもNodeと同じようにbrewからインストールできます。

brew install watchman

Watchman | A file watching service - Watchman

Watchmanとは簡単に説明するとファイルを監視し変更された時のログを取るためのツールです。

これによりReact Nativeにおいて実行する際のビルド時間を大幅に短縮できます。

サクサク開発したい人はいれておきましょう!

3.React Nativeのコマンドラインツール

npm install -g react-native-cli

Nodeをインストールする際にnpmは付属してるのですぐにインストールできます。

これはReact Nativeプロジェクトの作成や実行時に使用するので必須です。

4.Android Studioのインストー

iOSでしかしたくないっと思ってる信者さんは必須ではありません。

developer.android.com

基本的に公式は日本語化されているので、細かい説明は省略しますがカスタムインストールをおこなってください。

セットアップウィザードが起動したらカスタムインストールを選択肢し次のツールをインストールしてください。

  • Android SDK
  • Android SDK Platform
  • Performance (Intel ® HAXM)
  • Android Virtual Device

次へ次へを実行していくと「Androidスタジオへようこそ」が表示されます。

そこから、「設定」>「SDKマネージャ」をクリックし、Android 6.0をインストールしましょう。

そこでは以下にチェックをいれてください。

  • Google APIs
  • Android SDK Platform 23
  • Intel x86 Atom_64 System Image
  • Google APIs Intel x86 Atom_64 System Image

次に、[SDKツール]タブを選択して、[パッケージの詳細を表示]の横にあるチェックボックスをオンにします。 「Android SDK Build Tools」の項目を探して展開し、Android SDK Build-Tools 23.0.1が選択されていることを確認します。

最後に、「適用」をクリックしてAndroid SDKおよび関連するビルドツールをダウンロードしてインストールします。

次にパスの設定を行います。

コマンドの設定ファイル(~/.profileなど)に以下を追記します。

export ANDROID_HOME=${HOME}/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

追記して保存したあと、

source ~/.profile

をコマンドで実行します。

設定し終わったら適当なプロジェクトを作成してエミュレータを起動させましょう。

アプリをビルドして実行する | Android Studio

エミュレータの作成方法などはここに書いているので、端末やAndroid OSのバージョンはお好きなものを使用しておいてください。

※因みに、実機でデバックする場合はUSBでPCと繋いで置くだけでいいです。

Xcodeのインストー

Xcode - Apple Developer

Macのみでしか残念ながらインストールできません。

App Storeからインストールするか、上記ディベロッパサイトのダウンロードからインストールしてください。

すでにXcodeをインストールしている場合はXcodeのバージョンが8以上であることを確認しておいてください。

Welcome to React Native !!

ここまできたらもう何も心配はいりません。

早速、React Nativeを始めて見ましょう。

react-native init AwesomeProject
cd AwesomeProject
react-native run-ios

最後には勝手にiOSのシュミレーターが起動して下記が表示されると思います。

f:id:kokiKono:20170524221648p:plain

Androidではエミュレータなどの実行準備をし、下記コマンドをプロジェクト配下で実行させます。

react-native run-android

f:id:kokiKono:20170524225003p:plain

実行するとiOSと同じような画面が表示されます。

まとめ

かなり長くなりましたが、これで環境構築は終了です。

Android Studioあたりがかなりめんどくさいですが、まあ頑張ってください。

最近になってこういう開発にはMacが強いなと感じました。 

 

React Nativeしてみた。

自己紹介

ひょんなことからReactNativeでアプリ開発するようになってから、しばらく立つのでここで記事にまとめようと思います。

React Nativeとは

facebook.github.io

React Nativeとは、かの有名なFaceBookさんが作ったJavaScriptとReactを使用したネイティヴアプリ開発です。

React Nativeで開発されたアプリケーションはiOSAndroidの両方で動作しますが、ハイブリットアプリやHTML5アプリとは大きく違い、Objective-CまたはJavaで構築されたアプリと同様のUIを実現してくれます。

そして、実際に多くのアプリがReact Nativeで作成されており、柔軟かつ高性能な機能を実装しています。

FacebookAirbnbInstagramなど身の回りにあふれたネイティヴアプリがReact Nativeで構築されており、見た目だけでもスゴそうなのがわかります。

 

ここでAndroid開発しかしたことない私がReact Nativeって良くね?って感じたことを列挙していこうと思います。(プログラムよりの話です)

  1. JSXで書くコードなので、layout.xmlを書く必要がない。
  2. ListViewなどAdapterやListenerを書いていましたが、React Nativeでは本質的な処理(タップされて何するの?)だけでいい。
  3. スタイル調整や文言を変えたい時、いちいち再コンパイルしなくていい。
  4. 気に入っていたOSSライブラリを使おうと思えば使える点。

JSXなので、layout.xmlやActivityを別々に書く必要がない。

f:id:kokiKono:20170522224656p:plain

 例えば、Androidでこのような簡単なListViewを表示したいとします。

  •  listview_layout.xml
  • ListViewActivity.java
  • ArrayAdapterなど

上記の三つのファイルが必要になります。

おまじないのようにfindViewByIdやsetAdapterなど、おなじみのコードを必要があります。

これをReact Nativeではわずか数行書くだけで実現でき、そしてそれはiOSでも同様の動作をします!

(因みにiOSの画面)

f:id:kokiKono:20170522224306p:plain

 <List 
dataArray={items} renderRow={(item) =>
<ListItem> <Text>{item}</Text> </ListItem> }></List>
ListViewなどAdapterやListenerを書いていましたが、React Nativeでは本質的な処理(タップされて何するの?)だけでいい。

つまり、コードで語るなら

<TouchableOpacity

     onPress={()=>{

             console.log('タップ!');

    }/>

と言った具合に簡単です!

スタイル調整や文言を変えたい時、いちいち再コンパイルしなくていい。

これは、Android Studioで開発中に少しレイアウトを変えたりした後にEmulatorに反映させるにはBuild→実行が必要ですが、React Native(mac)ではRボタンを連打(1回では更新されず連打していますw)だけで更新され、また、Enable Live Reloadという機能がサポートされており自動更新も可能です。

気に入っていたOSSライブラリを使おうと思えば使える点。

facebook.github.io

構築は公式ページを参照してください。

 

例えば、AndroidでFloatingActionButtonの素晴らしいライブラリをどこかの天才プログラマが作っていたとして、それをReact Nativeで使いたい!と思った場合、React Nativeから呼び出すことができ、細かい処理をReact Nativeで書くことも可能です。

私は書いたことはありませんが、React Nativeの一部のライブラリはネイティブソースをReact Nativeに適用させているものもあります。

まとめ

若干、ネイティブ言語をディスるような内容でしたが、React Nativeを各OSのデザインルールに適用させるのが若干めんどくさいところはあります。

なので、これからどんなUI,UXを考えているかによってはネイティブ言語が最適な場合もあります。

ひとえにワンソースで書けて楽なことだけが全てではありません。

ただ、コンポーネント思考であったり、すごく面白い言語?なので一度触れて見ることはおすすめします。