React Native 基本

 

現代のWebサービスは、次の3つのプラットフォームに対応づることが求められている。

・ブラウザ(Webアプリケーション)

Android

iOS

これらは同じやり方では作れない。

WebアプリケーションとAndroidアプリとiOSアプリの作り方は、考え方として近い部分は随所あるものの、基本的には大きく違うものです。

主な違い

・言語

・非自動的処理を実現するAPIの使い方

・日時を計算するAPIの使い方

・UIを組み立てる方法

・UIを更新する方法

・リリースする方法

・etc...

 

プラットフォームごとに適した標準的なお作法や、仕組み上の課題・問題、それに対するベストプラクティスがあります。

    ↓問題

提供するプラットフォームごとに人材が必要になる。

人が必要→お金がかかる時間もかかる

「できるだけ3プラットフォーム同時にリリースして」といった要件が加わるとさらに難易度があがる

1人で3プラットフォームをまかなえるスーパーマンを連れてきても解決できない。(KotlinでAndroidアプリを書きながら、同時にSwiftでiOSアプリを作ることはできない)

     ↓

「多少自由度を失ってもいいから、一度の実装で複数のプラットフォームにアプリを提供したい」というニーズが生まれる

     ↓

AndroidアプリとiOSアプリ(以降、モバイルアプリとまとめます)の同時開発の分野で、多くの試みがなされた

     ↓

3つのアプローチ

・ハイブリット型:WebViewの上でWebアプリケーションを動かす

・独自レンダラ型:独自の描画エンジンでUIを描画する

・ネイティブUI型:AndroidiOSのシステムを別の言語やフレームワークから操作する

 

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はブラウザの文化を受け継いでいる部分が多いので、基本的には情報を見るアプリに適している。