スマートデバイスアプリ開発のあれやこれや

ReactNative事始め

 必要に迫られてReactNativeを最近触っています。慣れるとサクサク画面が作れるので,ちょっと可能性を感じています……! SwiftやKotlinといったNative言語での開発も愉しいですが,こういった高速開発がしやすいツールも使えると活躍の幅が広がるのではないかと思っています。プロトタイピングの時なんかに使ってもいいんじゃないでしょうか。※本開発でも使える品質だと思いますが。

ReactNativeとは?

 ReactNativeは,facebookが開発しているオープンソース(MIT)のスマートデバイスアプリ開発ツールです。SPA開発ツールであるReact.jsの知識をベースにして,iOSAndroidのNativeアプリケーションをワンソースで開発可能です。facebookアプリやInstagramアプリ,AirBnBアプリといった有名アプリの開発でも採用されており,十分実用に耐えうる品質を備えたツールだと思います。そんなReactNativeの特徴は以下です。

  • Reactの知識をベースに開発できる
  • NativeのUIコンポーネントが利用できる
  • ホットリロードで高速開発できる

(1) Reactの知識をベースに開発できる

 Reactの特徴として「Learn once write anyware」という言葉がよく使われます。Javaも昔似たようなことを言われてましたね。一度流儀を理解すれば,それを他の開発(スマホアプリやVRアプリ)でもいい感じに活用できる……というのがコンセプトで,ReactNativeもその流儀に則ったツールと言えます。

  • ReactNative: Reactの流儀でNativeアプリが作れる
  • ReactVR: Reactの流儀でWebVRアプリが作れる
  • ReactNative for Web: Reactの流儀で抽象化された開発方式でWebアプリが作れる

 Reactを触ったことがあるならば,少ない学習コストで開発をスタート出来ることは間違いないです。JavaScriptの知識ではなく,Reactの知識が前提になる点は注意です。

(2) NativeのUIコンポーネントが利用できる

 ReactNativeでは,Apache CordovaのようなHybridアプリ開発とは違い,画面描画をNativeの技術で行います。具体的に言うと<Button>タグを使った場合,iOSではUIButtonクラスを使って画面描画されますし,AndroidではButtonクラスが使われます。アプリ側が勝手に作った非標準のUIコンポーネントではなく,利用者が慣れ親しんだ標準UIコンポーネントで画面を作れる――パフォーマンスやユーザビリティの面でも大きなメリットがある方式です。

(3) ホットリロードで高速開発できる

 Nativeアプリを開発する際に困るのがビルド時間が長くなることです。ちょっとした修正でもリビルドで数分待たされるとヤル気が下がるのではないでしょうか。ReactNativeは,ホットリロードという仕組みを採用しており,JavaScriptファイルの差し替えだけでアプリが更新されるので,サクサク高速にアプリ開発を進められます。

f:id:cross-xross:20180606215811p:plain

ReactNativeの始め方

 cliコマンドから雛形プロジェクトを生成出来るので活用しましょう。

npm install -g react-native-cli

 他のcliツールとしてcreate-react-native-appも在るのですが,Nativeコードを含むReactNative用のOSSライブラリの導入が面倒だったり細やかな変更が難しい点からreact-native-cliの方を推奨したいです。※create-react-native-appだと変更頻度が低いファイルを隠蔽した形で雛形が生成されるため,初心者が混乱しにくいというメリットも存在します。

react-native init MyProject
cd MyProject
react-native run-ios

 上記のコマンドで雛形アプリが起動します。

react-native run-android

 Androidの場合は先にAndroidエミュレータを起動しておく必要がある点に注意です。