CodeZine(コードジン)

特集ページ一覧

React Nativeとは何か? 基本の仕組みと使いどころを理解する

基礎からはじめるReact Native入門 第1回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2018/12/26 11:00

目次

React Nativeとはどんな開発ツールなのか

 本連載では、React Nativeについて解説していきます。React Nativeは、Facebook社が中心になって開発が進められている、オープンソースのクロスプラットフォーム開発ツールです。

図1:React Nativeの公式サイト
図1:React Nativeの公式サイト

 Reactといえば、これもFacebook社がオープンソースで開発している、JavaScript向けのUI状態管理ライブラリです。その名を受け継いだReact Nativeは、Reactを活用してモバイルアプリを開発するためのツールになっています。React Nativeの主な特徴としては、次の3つが挙げられます。

  • JavaScript言語とReactでUIの状態管理を記述できる
  • Android SDKやiOS SDKが提供するビュー(ネイティブビュー)を内部実装として持つ、React向けの画面部品(コンポーネント)が利用できる
  • JavaScriptCoreとBabelにより、ブラウザと遜色ないJavaScript実行環境が提供されている

 それぞれの特徴について、解説していきます。

JavaScript言語とReactでUIの状態管理を記述できる

 React Nativeでは、ブラウザ向けにJavaScriptとReactによるシングルページアプリケーションの開発を行う場合と近い感覚で、モバイルアプリの開発を行えます。そのため、Reactの経験があれば、比較的導入しやすいツールになっているといえるでしょう。実際の例を挙げてみます(リスト1)。

[リスト1]React NativeのHello World
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

// HTMLのようなマークアップでレイアウトの構造を定義する
const App = (props) => (
  <View style={styles.container}>
    <Text>Hello, React Native!</Text>
  </View>
);

export default App;

// CSSライクな指定でスタイルを定義する
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

 ECMAScript 2015相当の言語仕様で書かれたJavaScriptに、Reactの特徴であるHTMLライクな記法「JSX」によるレイアウトが記述された、標準的なReactによる画面部品の実装になっています。リスト1をReact Nativeの画面として記述して実行すると、AndroidとiOSで、それぞれ図2の通りに画面が表示されます。

図2:リスト1を実行した結果(左:Android、右:iOS)
図2:リスト1を実行した結果(左:Android、右:iOS)

 画面を表示するのに必要なコードがリスト1のような短いもので済むのは、モバイルアプリの経験がある方からすると、驚くことかもしれません。詳しい解説は次回以降に譲りますが、Reactを活用することで、複雑な状態管理にも耐えうる堅牢なUIを実装できます。

ネイティブな画面部品

 JavaScriptで記述したHTMLライクなレイアウトが、実際に画面に表示されるわけなので、「これは、ブラウザをアプリ内に組み込む仕組みであるWebViewを利用しているのではないか」と考える方も多いと思います。

 しかし、それは違います。React Nativeが「ネイティブ」の名を冠しているのは、UIの描画をWebViewに任せずに、Android SDKやiOS SDKが提供している「本来の」画面部品を使って画面を構築していることに由来しています。

 例えば、リスト1でレイアウトの記述に利用した、<View><Text>の画面部品がありました。これらはそれぞれ、実行時にJavaScriptからAndroid SDKやiOS SDKへと、UIの描画を依頼します。その結果、<View>要素はAndroid SDKのandroid.view.ViewやiOS SDKのUIKitが持つUIViewに変換されますし、<Text>要素も同様にandroid.widget.TextViewUIViewへと変換されます(図3)。

図3:Reactコンポーネントはネイティブなビューに変換される
図3:Reactコンポーネントはネイティブなビューに変換される

 iOSアプリ開発の経験がある方は「あ、<Text>は UILabelじゃないんだ」と思われたかもしれません。これは<Text>要素はネストができるという特殊な事情により、こういった実装になっていると思われます。

 このように、JavaScript側で定義したレイアウトは、すべてネイティブなビューに変換されて描画されます。この特徴によって、カメラのプレビューなどのブラウザでは困難だったビューも描画することができ、ブラウザ製アプリに対する大きなアドバンテージになっています。

JavaScript実行環境はブラウザに準拠

 ブラウザを使っていないのはわかりましたが、となると、独自のJavaScript処理系を積んでいるのでしょうか。いつも使っている、あのグローバル関数は使えるのでしょうか。普段からJavaScriptの多様性につらい思いをしているWebフロントエンドエンジニア諸氏が、一番気になっているところでしょう。次の3つの観点で見ていきましょう。

  • JavaScript(ES5)を解釈する
  • ES201xを解釈する
  • 組み込み関数の実装を提供する

 まず、現代のブラウザ向け開発で最低限の言語仕様となっているECMAScript 5(ES5)への対応の観点です。これについては、特に問題ありません。React Nativeは、JavaScriptを実行する際に、SafariのエンジンであるWebKitの、さらに一部であるJavaScriptCoreを、JavaScriptを解釈するためのライブラリとして利用します。

 iOS SDKでは、JavaScriptCoreが標準ライブラリとして提供されており、それを使う形になるので、事実上、Safariと同等の文法が解釈できることになります。Android向けには、JavaScriptCoreをC++ライブラリとしてポーティングしたものが使われています。こちらはAndroidから見てサードパーティのライブラリになるため、更新が遅くなりがちです。今後の改善に期待したいところです。

 次に、最新のブラウザ向け開発における言語仕様となっている、ECMAScript 201xへの対応の観点です。これについては、JavaScriptのコンパイラであるBabelがビルドツールに組み込まれています。JavaScriptCoreが読み込める言語仕様まで、ソースコードをBabelがダウングレードしてくれるので、プログラマーは気兼ねなく新しいバージョンのJavaScriptを記述することができます。React Native向けのBabelのプリセットで提供される、言語仕様については、こちらの公式ページを参照してください。

 最後に、ブラウザが提供してくれていた組み込み関数は、React Nativeにもあるのかという観点です。基本的にはMDNのJavaScriptリファレンスで紹介されているような、Web標準のAPIで実装されています。ただし、ブラウザと同じように、React Nativeでも未実装のものがありますので、適宜、Polyfillな(代替実装の)ライブラリを用意する必要があることにはご留意ください。言語仕様の話題で紹介した公式ページに、実装されている標準ライブラリの一覧がありますので、実装状況の確認はこちらを参照してください。

[コラム]組み込み関数の内部実装もネイティブ

 これに関連した、React Nativeの面白い点として、ネイティブブリッジという仕組みがあります。これにより、JavaScriptの関数の内部実装を、ネイティブ、つまりAndroid SDKやiOS SDKで持つことができるのです。setTimeoutsetIntervalなら、JavaやObjective-Cで記述されたタイマー実装がされています。また、XMLHttpRequestも、Android SDKやiOS SDKにおける標準的なネットワーク実装になっています(React NativeではfetchXMLHttpRequestのラッパーという扱いです)。

 ただし、こういった関数の内部実装がJavaScript製でないことは、特別なことではありません。Google ChromeのDevToolsでコンソールを開き、関数の名前を直接打ち込んで、エンターキーを押してみてください。

図4:ブラウザの関数もネイティブな内部実装を持っている
図4:ブラウザの関数もネイティブな内部実装を持っている

 関数の実装が[native code]といった表記になっています。これは、ブラウザの標準関数も、JavaScriptではない言語(C++など)で記述されていることを表しています。こういった面からも、React NativeがWebの文化に寄り添おうと心がけていることが垣間見えますね。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:基礎からはじめるReact Native入門

もっと読む

著者プロフィール

  • WINGSプロジェクト 中川幸哉(ナカガワユキヤ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5