体験を伝える―『ガジェット通信』の考え方

面白いものを探しにいこう 本物を体験し体感しよう 会いたい人に会いに行こう 見たことのないものを見に行こう そしてそれをやわらかくみんなに伝えよう [→ガジェ通についてもっと詳しく] [→ガジェット通信フロアについて]

JavaScriptとネイティブをつなぐ便利機能!──React Native ネイティブモジュールの作り方

bridgeとはどんな技術か

React Nativeに関する勉強会「React Native meetup#4」が、1月26日に渋谷のエンジニア&デザイナー向け無料イベントスペース「21cafe(ニイイチカフェ)」で開催された。

最初に登壇したのはキュア・アップ CTOの髙木健介(januswel)さん。

キュア・アップはアプリで病気を治療する未来を創造するというビジョンを掲げてビジネスを展開している医療ITベンチャーだ。

セッションタイトルは「discussion about bridge(邦題:詳解ブリッジ)」。
bridgeとは、JavaScriptの世界とネイティブアプリの世界をつなぐ橋のような役割をするものだ。

具体的にはネイティブモジュールを認識して使えるようにしたり、バンドルしたJavaScriptをロードして実行可能にしたり、JavaScriptとネイティブ関数のやり取りを仲立ちしたりする。

ネイティブモジュールとは、iOSならObjective-CやSwiftなどで書かれたもので、プラットフォーム特有の機能を使うことができる。

例えば地図や位置情報、NFCなどをJavaScript側から呼び出せるようにしたり、処理の重いタスクをネイティブ側で任せ、JavaScriptで受け取るというために使ったりする。React Nativeもネイティブモジュールで実装されている。

ではなぜ、ネイティブが必要なのか。例えばApache Cordovaを使えば、ネイティブっぽいUIを実装できるが、ネイティブが持つ本来のサクサク感の再現や、iOSの見た目を完全にエミュレートできないなどの問題がある。さらにiOSやAndroidがバージョンアップすると追随できないこともある。

とはいえ、ネイティブでの開発速度は遅くなりがちだ。画面要素をしっくりくる位置を探したいときに、書き換えてコンパイルするというループを繰り返す。

Titaniumというフレームワークではネイティブ側の機能は使えるが、画面部品の再配置でコンパイルが必要になりつらい思いをした人は多いだろう。

SCRIPTING NATIVEは、ネイティブのUIやロジックをスクリプト言語で扱えるようにしようという思想を持つ。だが次のような問題があった。
JavaScriptを描画用のスレッドでロックするような処理を走らせると、画面が固まったようになる
既存のプログラミングモデルは、リソースが競合する可能性があるためロックが起こりやすい。
マルチスレッドの場合、そのスレッド間のやり取りが固定的に発生して、オーバーヘッドになる。

これに対して、Facebookが提示した解決策が、bridgeである。bridgeはどのように動くのか、それを具体的にしたのが次の図だ。

立ち上がるとAppDelegeteに書かれている処理を行う。その途中でRCTRootViewが初期化されてbridgeを作成し、RCTBatchedBridgeがバンドルしたJavaScriptを触りにいく。

そしてJavaScript executorをセットして実行し、最後にCollectingでネイティブモジュールの認識をする。

ネイティブモジュールの作り方

1 2 3 4 5 6 7次のページ
CodeIQ MAGAZINEの記事一覧をみる
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。