普段は制作会社でマークアップエンジニアとして働いている私ですが、ひょんなことから、React Nativeの開発案件にアサインされることになってしまいました^^;

前職でReactを使った案件は何件かこなしたことはありましたが、React Nativeは遊び程度で触った程度で、実戦では初めて。。。

同じReactベースとはいえ、ブラウザベースのReact(ここではWEB版と呼びます)とReact Native(ここではネイティブ版と呼びます)で異なっていることが結構あったので、そのおさらいです。

React Nativeとは何か?

React Nativeとは、Facebookが開発したJavaScriptフレームワークです。
「Native」という名がついている通り、スマホのネイティブアプリを開発するために作られたフレームワークで、JavaScriptを使って、iOSとAndroid両方のアプリを1つのコードで開発することができます。
このように、1ソースマルチデバイスで開発することができるアプリを【ハイブリッドアプリ】と言います。
同じようにハイブリッドアプリを開発する仕組みとして、「Apache Cordova」というフレームワークがあります。

Apache Cordovaとの違いは何か?

Apache Cordovaは「WebView」というWebブラウザの機能を拡張して、Webブラウザ上に実装したJavaScriptのコードから、スマホのネイティブの機能(カメラやGPSといった各種センサー類など)にアクセスをする仕組みになっています。
UIはHTMLやCSSやJavaScriptといった、WebサイトやWebアプリを作る技術を使って実装を行います。
そのため、SwiftやJavaを使ってネイティブアプリを開発するよりも比較的かんたんにアプリの開発を行うことができます。

一方React Nativeは、Cordovaと同じようにJavaScriptを使って開発を行いますが、WebView上で動作するものではなく、iOSやAndroidのネイティブのコードを使って描画されます。
そのため、WebViewを使ったCordovaと比べて、パフォーマンスが高いと言われています。

WEB版とネイティブ版の違い

一応同じReactなので、コンポーネントの作り方や、ライフサイクルメソッドなどの記述方法は同じです。
ただ、以下の部分で若干記述が異なります。

  • HTMLタグを使わずにReact Nativeオリジナルのタグを使う
  • CSSの記述が若干異なる。

コードを書くとこんな感じです。

render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
render() {
    return (
      <View>
        <Text>
          If you like React on the web, you'll like React Native.
        </Text>
        <Text>
          You just use native components like 'View' and 'Text',
          instead of web components like 'div' and 'span'.
        </Text>
      </View>
    );
  }

画面を出力する部分なので、影響するのはコンポーネント内のrenderメソッドくらいかとは思いますが、
なれるまでは結構苦労すると思います。特に、提供されるタグの特性などを理解して実装しないとバンバンエラーが出てきます。。。

CSSも「px」などの単位を書かないとか、結構最初は戸惑います。

あと、CSS in JSな記述になると思うので、エディタ側でのCSSプロパティの補完が効かないというのが結構痛いです。
※これはエディタのプラグインなどで解決できるかもしれませんが。

ただ、描画部分以外のJavaScriptの処理やReactのライフサイクルメソッドなどは基本的に同じだし、Reduxなどの書き方なんかもWEB版と一緒なので、
WEB版の資産を流用することもできるし、今までReactを使ってきた人の場合は、学習コストはかなり低めかと思います。

これからアプリも作ってみたいと思っているフロントエンドエンジニアには、React Nativeはおすすめです!
自分ももっとこれから勉強していきたいと思います!