React Native 基本
現代のWebサービスは、次の3つのプラットフォームに対応づることが求められている。
・ブラウザ(Webアプリケーション)
・iOS
これらは同じやり方では作れない。
WebアプリケーションとAndroidアプリとiOSアプリの作り方は、考え方として近い部分は随所あるものの、基本的には大きく違うものです。
主な違い
・言語
・非自動的処理を実現するAPIの使い方
・日時を計算するAPIの使い方
・UIを組み立てる方法
・UIを更新する方法
・リリースする方法
・etc...
プラットフォームごとに適した標準的なお作法や、仕組み上の課題・問題、それに対するベストプラクティスがあります。
↓問題
提供するプラットフォームごとに人材が必要になる。
人が必要→お金がかかる時間もかかる
「できるだけ3プラットフォーム同時にリリースして」といった要件が加わるとさらに難易度があがる
1人で3プラットフォームをまかなえるスーパーマンを連れてきても解決できない。(KotlinでAndroidアプリを書きながら、同時にSwiftでiOSアプリを作ることはできない)
↓
「多少自由度を失ってもいいから、一度の実装で複数のプラットフォームにアプリを提供したい」というニーズが生まれる
↓
AndroidアプリとiOSアプリ(以降、モバイルアプリとまとめます)の同時開発の分野で、多くの試みがなされた
↓
3つのアプローチ
・ハイブリット型:WebViewの上でWebアプリケーションを動かす
・独自レンダラ型:独自の描画エンジンでUIを描画する
・ネイティブUI型:AndroidやiOSのシステムを別の言語やフレームワークから操作する
☆React Native とはどんな開発ツールか
Facebook社が中心になって開発が進められているオープンソースのクロスプラットフォーム開発ツール。
Reactといえば、こちらもFacebook社がオープンソースで開発している、JavaScript向けのUI状態管理ライブラリです。
React Nativeの主な特徴としては、次の3つがあげられます。
・JavaScript言語とReactでUIの状態管理を記述できる
・AndroidSDKやiOSSDKが提供するビュー(ネイティブビュー)を内部実装として持つ、React向けの画面部品(コーポーネント)が利用できる
・JavaScriptCoreとBabellにより、ブラウザと劣らないJavaScript実行環境が提供されている
□JavaScriptg言語とReactでUIの状態管理を記述できる
ReactNativeでは、ブラウザ向けにJavaScriptによるSPAの開発を行う場合と近い感覚で、モバイルアプリの開発を行えます。
※SPA(シングルページアプリケーション)・・・・・単一のWebページでアプリケーションを構成する設計構造の名称
単一のWebページでコンテンツ切り替えを行うことで、ページ遷移の必要がなく、ブラウザの挙動に縛られないWeb表現を可能にする
□ネイティブな画面部品
JavaScriptで記述したHTMLライクなレイアウトが、実際に画面に表示されるので、「これは、ブラウザをアプリ内に組み込む仕組みであるWebViewを利用しているのではないか」と思いますが、実際は、React Nativeの「ネイティブ」の名は、UIの描画をWebViewに任せずに、AndroidSDKやiOSSDKが提供している「本来の」画面部品を使って画面を構築していることに由来している。
例えば、レイアウトの記述に利用した、<View>と<Text>の画面部品がある。
これらはそれぞれ、実行時にJavaScriptからAndroidSDKやiOSSDKへと、UIの描画を依頼します。
その結果、<View>要素はAndroidSDKの android.view.ViewやiOSSDKの UIKitが持つ UIViewに変換されますし、<TExt>要素も同様にandoroid.widget.TextViewやUIViewへと変換されます。
JavaScript側で定義したレイアウトは、全てネイティブなビューに変換されて描画されます。これによって、カメラのプレビューなどのブラウザでは困難だったビューも描画できる。
□JavaScript実行環境へブラウザに準拠
ブラウザは使っていないのはわかりましたが、となると独自のJavaScript処理系を積んでいるのでしょうか。いつものグローバル関数は使えるのか?
次の3つの観点で見ていく
・JavaScript(ES5)を解釈する
対応問題なし。ジャバスクリプトを実行する際に、SafariのエンジンであるWebKitの、さらに一部であるJavaScriptCoreを、ジャバスクリプトを解釈するためのライブラリとして利用する。
・ES201xを解釈する
JavaScriptのコンパイラであるBabelがビルドツールに組み込まれている。
JavaScriptCoreが読み込める言語使用まで、ソースコードをBabelがダウンロードしてくれるので、プログラマーは気兼ねなく新しいバージョンのJavaScriptを記述することができる。
・組み込み関数の実装を提供する
基本的にはWeb標準のAPIで実装されているが、未実装なものもある。
☆React Native をどんなツールとして捉えるか
ReactNativeとはどんな存在か→「ちょっと癖の強い、新しい種類のブラウザ」
「JavaScriptとReactというDSL(ドメイン固有言語)で、UIの状態管理を行うことができるUIライブラリ」
ReactNativeはブラウザの文化を受け継いでいる部分が多いので、基本的には情報を見るアプリに適している。