こんにちは、編集長の白石です。

この記事は、9月24日に開催されるHTML5 Conference 2017に登壇するエキスパートに、予定しているセッションのトピックを中心に、様々な技術的なお話を伺おうというものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。

今回お話を伺ったのは、アシアル株式会社 代表取締役社長の田中正裕さんです。

田中さんのセッションは「Web技術でネイティブアプリを開発する話」（ホール 14:20-15:00）です。 （現在HTML5 Conferenceは定員オーバーの状態ですが、無料イベントということもあってキャンセルも多めに出るらしいので、あきらめずにキャンセル待ちすることをお勧めします！）

Webとネイティブ境目が曖昧になってきた

白石: 田中さんは、ずっとWebとネイティブのハイブリッドアプリの分野で活躍してらっしゃいます。そんな田中さんから見て、最近のWebやモバイルアプリ開発についてはどのように見ていらっしゃいますか？

田中: はい、まずはそもそも最近Webがネイティブにかなり近づいてきたな、と思っています。

例えば実現できる機能。以前はWebとネイティブはできることに差がありましたが、最近はWebにできることがすごく増えてきています。Service Workerの登場で、以前はWebでは実現が難しかった、プッシュ通知やバックグラウンド処理なども可能になってきている。

ネイティブはコードがバイナリにコンパイルされて高速に動く、という点でも、Web Assemblyの登場により、今後は目立ったディスアドバンテージではなくなっていくでしょう。そもそも、端末速度の向上とブラウザエンジンの高速化で、速度差自体が目立たなくなってきています。

白石: Web Assemblyは期待ですよね。そのうち、フルWeb AssemblyのWebアプリフレームワークが出たりするのではないか、と期待しています。

田中: きっと出るでしょうね。iOS 11がWeb Assemblyに対応したことも、すごく大きな意味を持っていると思います。

他には、アプリの起動方法も違いとしてよく挙げられていましたが、Webはブラウザからアクセスするもので、ネイティブはインストールして使用するもの、という区分けも最近意味がなくなってきました。例えばProgressive Web Appsなんかはその象徴ですよね。ブラウザがWebアプリを端末にインストールしたら、あとはネイティブアプリと遜色なく動作する。

白石: Safariには昔から、ホームスクリーンにWebサイトへのブックマークを追加する機能がありますが、それがもっとスマートな形で実現しそうですね。

田中: そして、Web技術を使ってアプリを作る方法自体が今や多様化していて、以前のような「Webかネイティブか」という単純な二分法じゃなくなっているんですよね。

Electron

白石: はい、その多様化したアプリ開発手法を本日は伺いに参りました。一つ一つ教えてください。

田中: カンファレンスのセッションではコード例を挙げながらお話しようと思いますが、今日は口頭による説明で進めましょう。

ではまず最初に、Electronの紹介からいきたいと思います。クロスプラットフォームなデスクトップアプリを開発するためのフレームワークで、元々はGitHubが開発した「Atom Shell」というツールでした。

田中: 特徴としては、Chromiumを組み込んだブラウザレイヤーと、Node.jsによるネイティブレイヤーの二層構造になっているという点が挙げられるかと思います。WebViewはもちろん、Node.jsもクロスプラットフォーム性の非常に高いプラットフォームですので、Electronを用いると、クロスプラットフォームなアプリを簡単に開発することができます。

白石: 著名なところでいうと、SlackはElectronで書かれているんですよね。

田中: そうです。Slack、Visual Studio Code、そしてもちろんGitHub製のエディタであるAtomと、著名なベンダーもElectronの採用には積極的ですね。

白石: Electronの将来は明るそうですね。Electronの欠点とかはあるんでしょうか？

田中: WebViewの上で動作するので、やはりパフォーマンスやメモリ使用量の面では不利になりますね。ただ実際には、PCはモバイルに比べると速度面で優位ですので、そこまで気にするところでもありません。

さっき挙げた例で言うと、SlackやAtomは重いなあ…と感じることが多いですが、Visual Studio Codeはすごく軽快に動作します。なんでElectron開発元が開発しているAtomがあんなに重いのか(笑)。VS Codeの軽快さは、相当な技術力のなせる業なのかもしれません。

白石: さすがマイクロソフトってところですね。

Cordova

田中: では次はCordovaについてですが、これは説明の必要もないくらい有名なフレームワークですね。Electronのモバイル版と言ってもいいかなと。WebViewと、ネイティブ機能を利用するためのCordovaプラグインという「二層構造」であるところも同様です。

Electronと違うところは、よりベースとなるOSの依存度が高いというところが挙げられると思います。WebViewは基本的にOSネイティブのものを使用しますし、Cordovaプラグインは通常ネイティブの開発言語で開発します。（Electronの場合はWebViewは組み込みのChromium、ネイティブ部分はNode.js）

白石: 田中さんはMonacaの開発者でもあり、Cordovaのことは誰よりも知りつくしていらっしゃるかと思いますが、利点や欠点を教えていただけますか？

田中: 利点はやはりクロスプラットフォーム性です。複数のモバイルOS上で動作するアプリを、ほぼ1ソースで書くことができます。

欠点は昔から言われているように、パフォーマンスが遅いという点。ただ先程も申し上げたように、端末もブラウザも速度が向上していて、「遅さ」はあまり気にならないレベルになっていると思います。少なくとも、Monacaのユーザーに限って言うと、ほとんどの方が問題ないとおっしゃってますね。

白石: ぼくも、もうそういう段階なんじゃないかな…とは思っていたのですが、田中さんに言われると説得力が違いますね。

田中: 今では、Cordovaを使っていても、ユーザーが気付くこともほとんどないと思います。例えば、◯◯（某ECアプリ）も実はCordovaを使っているようなんです。

白石: えっ！あの◯◯が！ぼくもよく使っていますが、全然気づきませんでした。

田中: そうなんです。意外と広がっているんですよね。今後もその存在感は増していく…と言ってもいいんじゃないでしょうか。

React Native

田中: では次はReact Nativeです。Facebookが作っているモバイルアプリ用のフレームワークで、一言で言えばReactを使ってモバイルアプリを作るためのツールですね。Reactの仮想DOMを、ネイティブのUIコンポーネントを利用してレンダリングするものです。

白石: React Nativeは最近人気急上昇中ですよね。その理由は何なんでしょうか？

田中: React自体に人気があるということと、そしてFacebookが自ら使用しているのが大きいですね。React Nativeは、元々Instagramのチームが作っていたそうです。

白石: React Nativeの利点や欠点はなんでしょうか。

田中: WebViewの上で動作するのではなく、ネイティブに動作するアプリが作れるというのは大きな利点ですね。パフォーマンス上の問題も生じにくいし、ネイティブのルック＆フィールをそのまま利用できる。

また、UIスレッドとJavaScriptのUIスレッドが最初から分かれているのも利点だと思います。JavaScriptの処理がUIスレッドの動作を阻害しないので、UIが60fpsを維持しやすい。

白石: では、React Nativeには欠点といえるものはありますか？

田中: 作ってみると分かるのですが、結構作り方に癖があるんですよね。それに慣れるのが少し大変かもしれません。コードの共通化は促進されるものの、クロスプラットフォームじゃないというところも、議論が分かれるところです。

白石: Facebookは「Learn Once Write Anywhere」（一度学べばどこでも書ける）と言っていますね。

田中: そうですね。クロスプラットフォームは最初から目指していない。そこもCordovaとは大きな違いです。

CordovaはWebそのものですから、ブラウザを使って開発し、ブラウザの機能が増えてネイティブと遜色なくなれば、なくなって当然のものという前提でした。React Nativeは、ネイティブアプリをJavaScriptで作るという発想です。なので、開発にはネイティブの知識が必要になります。JavaScriptを使用するので、開発体験自体はWebに近いものがあるのですが、やはりHTMLやCSSを使ったUI開発とは別物です。

NativeScriptとWeex

田中: あとはNativeScript、あとWeexというフレームワークを紹介していこうと思います。

白石: ここらへんまで来ると、聞いたことないという人も多そうですね〜。

田中: NativeScriptは、ネイティブで動作するアプリをJavaScriptで書けるフレームワークです。「React NativeからReactを抜いたもの」と考えてもいいでしょう。

白石: ぼくもNativeScriptの名前は聞いたことがあったのですが、Angularの界隈で耳にしました。

田中: そう、Angularと組み合わせて使えるというのを一つのウリにしています。Angularのイベントとかにも積極的に出ていて、Angularチームとの関係は良好そうです。

白石: 利点や欠点を教えていただけますか？

田中: 利点はやはりネイティブのパフォーマンスで動くこと、そしてAngularと組み合わせて使えることでしょうね。ただ、「組み合わせて使える」と言っても、React Nativeほどスムーズには使えないのが悩ましいところですが。

欠点は…なんといってもユーザーが少ないことですね。採用事例とかも探したのですが、今のところ見つかっていない状態です。GitHub上ではかなりの人気なのですが （筆者注: 2017/9/16時点で11,076のスターを集めている）。

あと、開発していたTelerikという会社がProgressという大企業に買収されてしまって。その後ちょっと開発が停滞してしまっているように見えるんですよね。それもちょっと心配なところです。

白石: 買収あるあるですね(笑)。

田中: 最後はWeexをご紹介しましょう。

これはVue.jsを使ってネイティブアプリを作れるというフレームワークです。React NativeのVue版と言っても差し支えないかと思います。

白石: では、利点もReact Nativeなどと同様に、ネイティブの速度で動く、ネイティブのUIコンポーネントが使えると言ったところですよね、きっと。

田中: はい、あと面白いのは、これってアリババが開発に携わっているんです。なので、実は中国ではすでに事例が多いそうなのですよね（筆者注: Weexのサイトに、「Who uses it」というセクションで採用企業の一覧がある）。

白石: おお、それはNativeScriptとは違うところですね。アリババが付いているとなると、開発リソースも割けそうだし、事例もどんどん増えていきそうです（筆者注: 元々アリババのGitHubリポジトリ上で開発されていたが、Apache Software Foudationに寄贈された）。

田中: Vue自体もすごく人気がありますしね。Vueに関心のある方にとっては、注目に値するプロダクトだと思います。

Web技術を用いたネイティブアプリ開発は広まるか？

白石: では最後にまとめとして、Web技術を使ってネイティブアプリを作るという手法は、今後も広がっていくのかどうかをお聞きしたいです。

田中: そうですね、今回取り上げた各プロダクトのnpmのダウンロード数とかを見ると、右肩上がりではあるんです。ただ、その事実を以て、Web技術によるアプリ開発の人気が高まっていると言い切れるかは微妙です。アプリ開発市場そのものも、まだまだ拡大していっていますからね。

個人的には、Web技術によるアプリ開発が、ネイティブの開発手法よりも人気が上回るようなことにはならないと思います。OSの開発元がオフィシャルに推進しているわけでも、何かを保証しているわけでもありませんし。これまでiOSやAndroidの開発者を雇って、アプリ開発を行っていたような企業が、Cordovaを選ぶようなことは、今後もあまり起きないと考えています。

白石: なるほど、冷静なご意見。

田中: ただ一つだけ言えるのは、Web技術者による、フロントエンドのアプリケーション開発が今後も伸びていくのは間違いないということです。それが純粋なWeb技術だけを用いてProgressive Web Appsを作るのか、先程紹介した技術のどれかを利用してモバイルアプリを作るのかについては、あまり変わらないと思います。

だから、元々Webをやっていた会社にとっては、既存のスキルセットや資産を使って、やれることの選択肢が増えてきているのは間違いありません。

Web技術の進化も、Webブラウザによる実装もまだまだ続いていますし、Webの未来にはまだまだ期待しています。

白石: よくわかりました。田中さん、今日はWeb技術を使ってネイティブアプリを作るテクノロジーについて、幅広く教えていただきありがとうございました。大変勉強になりました。

モバイルアプリ開発におけるWeb技術の可能性を探る特集・第一弾でご紹介するのはReact Native。その生い立ち、チュートリアルから、コードベースやUIを記述する言語、パフォーマンスまで解説します。

概要

React Nativeは2013年にFacebook社内のハッカソンで生まれたプロジェクトです。2014年にiOSアプリのFacebook Ads ManagerをReact Nativeを用いて開発し、2015年3月にオープンソースとして公開されました。そして、半年後の2015年9月にAndroidをサポートし、今年のF8では、MicrosoftがReact NativeでWindowsプラットフォーム（PC, Mobile, Xbox）の開発ができます、という発表がありました。また、macOSアプリの開発、Ubuntuアプリの開発など他のプラットフォームの開発もできるようにするプロジェクトも走っているようです。

React Nativeのコンセプトは、”Write Once, Run Anywhere”(一つのコードでどこでも動く）ではなく、”Learn Once, Run Anywhere”(一度学べば、どこでも動かせる）です。一度React Nativeを理解すれば、どのプラットフォーム上でも同様のコーディングを行って、プラットフォームネイティブなアプリケーションを開発することが出来ます。Githubのスター数は35,000を超え、リリースの頻度も多く、グローバルな視点でみると、非常に熱い技術であると言えます。

（編集部注: 「Write Once, Run Anywhere」は、あらゆるプラットフォームで同一のコードが動作するという、Javaが喧伝していたコンセプトです）

Hello, World

以下は、macOS上で開発することを前提としたチュートリアルです。

React Native開発に必要なものは、 Node.js, React Nativeのコマンドラインツール、Watchman（Facebookによって開発されているファイル監視ツール）になります。Homebrewで下記のようにインストールします。

$ brew install node $ brew install watchman $ npm install -g react-native-cli $ npm -v 3.6.0 $ node -v v5.0.0

iOS

iOSの場合はXcodeが必要です。XcodeはMac App Storeからインストールしましょう。　準備が整ったところで、プロジェクトを作って走らせてみます。

$ react-native init AppByWebTech2016 $ cd AppByWebTech2016 $ react-native run-ios

Android

Androidの場合は、Android Studioが必要なのでインストールしておきます。アプリの起動には、実機をUSBで繋げておくか、Emulatorが必要なので適宜用意します。今回は、Genymotion(個人利用は無料）を起動しておいて, 下記のコマンドを走らせます。

$ react-native run-android

NativeBaseを使う

これだけだと味気ないので、NativeBaseを用いてUIを作ってみたいと思います。NativeBaseはWebでいうBootstrapのようなものです。ボタン等のUIを自分でデザインする必要がなく見栄えの良いインターフェイスを簡単に作ることができます。

では、NativeBaseをインストールしてみましょう。(※react-nativeのバージョンは0.32)

$ cd AppByWebTech2016 $ npm install native-base --save $ react-native link react-native-vector-icons

index.ios.jsを下記のように変更すると、

import React, { Component } from 'react';
import { Container, Content, Button, Header, Title, List, ListItem, Badge } from 'native-base';
import { Col, Row, Grid } from 'react-native-easy-grid';
import { AppRegistry, Text, View } from 'react-native';

class AppByWebTech2016 extends Component {
  render() {
    return (
      <Container>
        <Header>
          <Title>Hello World</Title>
        </Header>
        <Content>
          <List>
            <ListItem >
              <Badge>1</Badge>
            </ListItem>
            <ListItem>
              <Badge primary>2</Badge>
            </ListItem>
            <ListItem>
              <Text>List 3</Text>
            </ListItem>
          </List>
          <Grid>
            <Row>
              <Col>
                <Button style={{margin:10}}> Click Me! </Button>
              </Col>
              <Col style={{backgroundColor: '#204d74'}}>
                <Text style={{fontSize: 20, color: 'white', margin: 10}}>React Native!</Text>
              </Col>
            </Row>
            <Row style={{backgroundColor: '#00c497'}}>
              <Text style={{fontSize: 24, color: '#333', margin: 10}}>Learn once, Write anywhere</Text>
            </Row>
          </Grid>
        </Content>
      </Container>
    );
  }
}

AppRegistry.registerComponent('AppByWebTech2016', () => AppByWebTech2016);

スタイルのことを気にせずボタンを作ることができ、グリッドなども簡単に使用できます。プロトタイピングなどにはもってこいのモジュールとなっています。

プラットフォーム／ライブラリの特徴

※コミュニティがサポート

以下に、上の表を補足します。

対応プラットフォーム

私が確認したのはiOSとAndroidですが、前述した通り、下記のプラットフォームでReact Nativeの方法でNativeアプリを動かすことができるようです。

• iOS
• Android
• Windows(PC, Mobile, Xbox)
• MacOS
• Ubuntu
• Browser※1

※１React Native for WebというChrome, Firefox, Safari >= 7, IE 10, Edge.のBrowser上でReact Nativeコードを動かすというプロジェクトさえ存在します。

コードベースは（ほぼ）完全に統一できるか？

残念ながら完全には統一できません。現実には各プラットフォームの作法（例えば、iOSはtabbarは下部、Androidは上部） が存在し、完全に同じにすべきかというのは別の議論が必要な気がします。ただ85%は同じコードを再利用できたといった話もないわけではありません。ビジネスロジック部分は統一させ、UIは個別のコードで実現するというのが、コードの再利用＋ネイティブの作法の両面を考慮に入れたReact Nativeの流儀だと言ってよいでしょう。

UIを記述する言語

コードはJavaScript(ES6), コンポーネントはReact, デザインはスタイルシートを用いて記述していきます。 スタイルシートはCamel記法となるのでCSSのbackground-colorがbackgroundColorという属性になり、非常に馴染みの深いものになります。 React Nativeは、レイアウトを行うためにFlexboxを用います。最近のWebブラウザでは広くサポートされているので、ご存じの方も多いことでしょう。

ES6やReactは確かに学習コストがあります。しかし、Web業界で生きているひとは少なくとも触っておくべき技術でしょう。React Nativeでのアプリ開発の経験が逆にWebに生かすというようなことも起きるかもしれません。

パフォーマンス

ネイティブのコンポーネントを利用する限り、ネイティブと同等のパフォーマンスになると言ってよいでしょう。パフォーマンスの最適化を開発者に意識させないようにすることがReact Nativeが実現しようとしていることです。

しかし、公式のドキュメントによると、現実には何点か難しい箇所があると述べられています。

React Nativeは下図のようにスレッドが走っています。

React.js Conf 2016 – Tadeu Zagallo – Optimising React Native: Tools and Tipsより転載

端的に言うと、JavaScriptのビジネスロジックが動くJSスレッド上で時間のかかる処理を行うと、UI出力時に遅延が起きてしまうケースがあります。 もしパフォーマンスに影響が出たときは、このJSスレッドを意識してコードを見直してみる必要があります。

今年のReact Confの発表でも言及されていましたが、Facebookは社内にReact Nativeのパフォーマンスチームを作ってパフォーマンスを継続的に改善しています。彼らがリソースを割いて注力している部分でもあるので、これからも改善されていく部分だと思います。

UIはネイティブか、Webか

WebViewを使わないという観点でWebではありません。ネイティブのライブラリを呼び出すAPIが多いですが、JSとのコードのハイブリッドといったイメージでしょうか。UIの動作は非常にネイティブライクです。

ネイティブな機能を呼び出す方法

React Nativeとネイティブ間を受け渡すようなAPIが用意されています。 これを使うことで容易にネイティブからの値を受け取ったり、受け渡したりすることができます。 この程よい抽象化があることで、現行のiOSアプリにも組み込むことが可能となります。 実際、Facebookのアプリでも一部はReact Nativeで書かれてると言っています。

今回は非常に簡単な例ですが、React Native側で２つの数字を渡しネイティブ側で和を求めて返すメソッドを用いて説明します。(今回はiOS）

まずは、Xcodeでios/AppByWebTech2016.xcodeprojをOpenし、新規作成からCocoaClassを選び、適当なSubクラスを選びます。

すると、AppNativeSum.hとAppNativeSum.mができると思います。 このファイルを下記のように書き換えます。RCT_*(ReaCTの略らしい）の接頭辞がついたAPIをReact Nativeが提供しています。Callbackを用いて返す方法もありますが、今回はPromiseを使います。

#import "RCTBridgeModule.h"

@interface AppNativeSum : NSObject <RCTBridgeModule

@end

#import "AppNativeSum.h"

@implementation AppNativeSum

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(sumNumber:(int)val1 val2:(int)val2 resolver:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject)
{
  NSInteger val3 = val1 + val2;
  NSString *val3Str = [NSString stringWithFormat:@"%ld", (long)val3];
  resolve(val3Str);
}

@end

このメソッドの戻り値は、JavaScriptのPromiseです。通常のPromiseと同様に、async/awaitを使って非同期処理の結果を処理することも可能です。

import { NativeModules } from 'react-native';
var AppNativeSum = NativeModules.AppNativeSum;

class AppByWebTech2016 extends Component {

  constructor(props){
    super(props);
    this.state = {
      sum: 0
    }
  }

  async componentDidMount(){
    let sum = await AppNativeSum.sumNumber(1,2);
    this.setState({sum: sum});
  }
...

ネイティブコードに精通していれば、公式ドキュメントにあるAPIに渡すだけで容易にReact Nativeとネイティブのやりとりができます。

まとめ

マレーシアの友人が、彼の国では企業がReact Nativeエンジニアの採用をしていると言っていました(中国でも似たような状況にあるとか)。 日本でもちらほらReact Nativeを採用する会社がでてきているようです。一年半以上経過し、リリース速度が多少遅くなっているといってもどんどん新しいバージョンが出てきて、かつよりよいUIモジュールもでてきています。今こそ、React Nativeを始めてみてはいかがでしょうか。