CodeZine(コードジン)

特集ページ一覧

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

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

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

目次

React Nativeをどんなツールとして捉えるのか

 React Nativeの雰囲気が少しわかってきたところで、JavaScriptエンジニアやモバイルアプリエンジニアにとって、React Nativeをどんな存在として見ればいいのか、考えてみましょう。

JavaScriptエンジニアから見たReact Native

 既にReactの文化を理解しているJavaScriptエンジニアにとってのReact Nativeは、「ちょっとクセの強い、新しい種類のブラウザ」として捉えるとよさそうです。

図5:React Nativeを新種のブラウザと見なす
図5:React Nativeを新種のブラウザと見なす

 React NativeではHTMLファイルもCSSファイルも使いません。しかし、現代のReactによるシングルページアプリケーション開発では、Aphroditestyled-componentsのようにJavaScript側でスタイルを定義するライブラリが市民権を得ているのですから、そういった開発手法がデフォルトである、と受け入れてしまえば、そこまでブラウザ向けの開発からかけ離れたものではありません。Flexboxがデフォルトで縦方向に並ぶなど、スタイル上のクセはありますが、多くのスタイル記述はCSSと同じ名前で定義され、同じような効果をもたらします。

 あとは、DOM APIがない、<div>の代わりに<View>を使わないといけない、テキストは<Text>の中にしか書けない、といった文化に慣れれば、普通のReactによるWebアプリケーション開発に近い感覚で、取り組むことができるはずです。

モバイルアプリエンジニアから見たReact Native

 モバイルアプリ開発に慣れ親しんだエンジニアの皆さんにとってのReact Nativeは、「JavaScriptとReactというDSL(ドメイン固有言語)で、UIの状態管理を行うことができるUIライブラリ」と捉えるとよさそうです(図6)。

図6:React NativeはUIライブラリ
図6:React NativeはUIライブラリ

 図6で示したように、React Nativeは、基本的に1つの画面であるActivityUIViewControllerの上で、動的にビューを書き換えることで成り立っています。そこに乗っているのは、FrameLayoutUIViewです。JavaScriptからの更新指示を受け付けることができる特殊能力を持っているとはいえ、基本的にはモバイルアプリエンジニアが慣れ親しんだものです。「その動的なUI更新の制御を行うために、データバインディングの機能(次回以降に解説します)に強みを持つReactがUI記述言語として採用されている」と理解していただけると、React Nativeというテクノロジーの全貌が把握しやすいと思います。

 実際の開発現場では、UIだけではなくビジネスロジックの大半をJavaScript側に書いてしまうことが多いです。ただ、ネイティブブリッジを自作することでJavaScript側からJava製やObjective-C製のロジックを呼び出すのは、モバイルアプリに精通したエンジニアならば難しいことではありません。本連載では少し抽象化されたツールを通じてReact Nativeに触るため、ネイティブ側の深いところに触れることはありませんが、興味があればぜひReact Nativeをプレーンな形で利用してみてください。

事例から見る、React Nativeが向いている領域

 最後に、React Nativeの得意分野を解説します。React Nativeはブラウザの文化を踏襲している部分が多いため、基本的には情報を見るアプリに適しています。つまり、SNSやニュース系には強いということになります。実際の導入事例としては、写真共有SNS最大手「Instagram」のいくつかの画面がReact Nativeでできています。

 また、ゲームプレイヤー向けのテキストチャット&音声チャットとして最大手のサービス「ディスコード」のiOSアプリがReact Native製であることからも、SNS向けのパワフルなアプリを作成する際に強みがあることがわかります。

 一方で、OpenGLによるグラフィックを多用するゲームなどの領域では、React Nativeはあまり威力を発揮しません。こういった領域では、Unityなどの採用を検討した方がよいでしょう。

まとめ

 今回は、React Nativeの概要と魅力について紹介しました。ブラウザ、Android、iOSの3つのプラットフォームのアプリを開発していく際に、もっとも時間がかかるUI開発の学習コストを、JavaScriptとReactに寄せることで解決するアプローチは、開発効率の向上に大きく寄与するのではないでしょうか。

 次回以降は、React Nativeを少し抽象化したツール「Expo」を使って、実際の開発手法についての解説をしていきます。



  • 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