Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

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

 WebブラウザとAndroid、iOSが、アプリの動作環境としてそれぞれ市民権を得た現代では、サービスを1つ作るだけでも、各プラットフォームに対してアプリを提供することが当たり前のように求められます。本連載では、この問題に立ち向かうため、ReactとJavaScriptによるWebアプリケーション開発に近いお作法でAndroidやiOSのアプリ開発ができるツール「React Native」を紹介します。まずは、React Nativeというツールがどういった仕組みで動いているのか、また、どういった分野に向いているのかを解説します。

目次

対象読者

  • JavaScriptとWeb開発の基礎に理解がある方
  • Reactを用いたJavaScriptアプリケーション開発の経験者
  • Androidアプリ開発の経験者
  • iOSアプリ開発の経験者

前提環境

 本記事の内容は、React Native v0.57.4の実装を元にして解説しています。

プラットフォームの多様化とそれに伴う課題

 2010年代のエンドユーザー向けクライアントアプリケーション開発は、激動の時代でした。企業や個人がインターネットを通じてユーザーにサービスを提供しようとしたとき、一昔前ならばWindowsアプリケーションを作って、Webサイトを通じてexeファイルを配布していました。

 それが現在では、すべてがブラウザ上で完結する、Webアプリケーションとして提供することが当たり前になってきています。また、携帯電話(フィーチャーフォン)よりもインターネットとの親和性が高いスマートフォンが普及したことにより、サービスをAndroidアプリやiOSアプリからも利用できることが当たり前になってきました。

 つまり、現代のWebサービスは、次の3つのプラットフォームに対応することが求められていることになります。

  • ブラウザ(Webアプリケーション)
  • Android
  • iOS

 もちろん、現実的にはサービスが実現したいことや特性(いわゆる「要件」)によって、ブラウザ向けのサービス展開が必要がないケースもありますし、時間とお金(≒人数)が足りないなどの問題で、Androidアプリだけを先行開発するケースもあることでしょう。それでも、時間とお金がある限りは、「できるだけ3つのプラットフォームすべてにアプリケーションを提供してほしい」といった要件が増えてきていると、筆者は感じています。

開発の作法の違いから来る人材不足

 さて、ビジネス上の要求として、1つのサービスに付き3つのアプリケーションを作ることになったとしましょう。これらは同じやり方で作ることができるのでしょうか。

 答えはNoです。WebアプリケーションとAndroidアプリとiOSアプリの作り方は、考え方として近い部分は随所にあるものの、基本的には大きく違うものです。これは、ブラウザやAndroid SDKやiOS SDKが提供している、開発ツールの文化が違うことに由来しています。筆者が少し考えただけでも、次のような点は違いとして挙げられます。

  • 言語
  • 非同期処理を実現するAPIの使い方
  • 日時を計算するAPIの使い方
  • UIを組み立てる方法
  • UIを更新する方法
  • リリースする方法
  • etc…

 プラットフォームごとに適した標準的なお作法や、仕組み上の課題・問題、それに対するベストプラクティスがあります。各プラットフォームのアプリケーション開発で活躍するエンジニアたちは、自分が専門とするプラットフォームの特性を把握しながら、日々、技術の進化に追従しているわけです。

 これには、困ったことがあります。提供するプラットフォームごとに人材が必要になるので、1つのプラットフォームだけを開発する場合に比べると、単純に3倍の数のプラットフォーム専門家たちを用意しないといけないことになります。採用の特性も変わってくるので、採用コストはそれなりのものになります。

 もし、すべてを1人でまかなえる人を見つけられれば、そういった人たちだけを集めてチームを組むこともできるかもしれません。しかし、Webアプリケーションも、Androidアプリも、iOSアプリも作って、リリースして、運用できる。そんな人材がいるでしょうか。いないことはないのですが、残念ながらそれは希少な人材です。採用するにしても、育成するにしても、一定のコストは覚悟する必要があります。

開発の作法の違いから来る工数の増大

 また、各プラットフォーム向けのアプリケーションをそれぞれ組み上げる都合上、その開発にかかる時間(いわゆる工数)が、1プラットフォーム分だけを作る場合のそれよりも圧倒的に多くなることは、想像に難くないでしょう。開発の作法は違うのに、同じように動く形で機能を実現しなければいけません。ここに、「できるだけ3プラットフォーム同時にリリースして」といった要件が加わると、さらに難易度が上がります。

 こればかりは、1人で3プラットフォームをまかなえるスーパーマンを連れてきても、解決できません。KotlinでAndroidアプリを書きながら、同時にSwiftでiOSアプリを作ることは、できないからです。

 1つのサービスが、WebアプリケーションとAndroidアプリとiOSアプリをそれぞれ提供する、というのは、それなりに体力を要するのです。

クロスプラットフォームという選択肢

 もちろん、各プラットフォーム向けに別々のアプリケーションを作れば、プラットフォームごとに違ったUIを用意することもできるくらいに、自由度が高くなります。それはそれで素晴らしいことです。

 しかしながら、コストや人材を考えると、「多少自由度を失ってもいいから、一度の実装で複数のプラットフォームにアプリを提供したい」というニーズが開発現場から生まれてくることも、妥当なものではないでしょうか。そういった理由から、AndroidアプリとiOSアプリ(以降、モバイルアプリとまとめます)の同時開発の分野で、多くの試みがなされました。大別して、3つのアプローチがあったと筆者は認識しています。各アプローチと、代表的な開発ツールについて、簡単に挙げてみましょう。

  • ハイブリッド型: WebViewの上でWebアプリケーションを動かす
  • 独自レンダラ型: 独自の描画エンジンでUIを描画する
  • ネイティブUI型: AndroidやiOSのUIシステムを別の言語やフレームワークから操作する

 どれも、モバイルアプリの発展に寄与してきた、偉大なツールたちです。本連載はReact Nativeのためのものなので、他のツールを細かく解説することはできませんが、もし本連載を読んで、React Nativeが肌に合わないと感じたときには、その他のツールを参照してみるとよいでしょう。


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

著者プロフィール

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

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

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

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

バックナンバー

連載:基礎からはじめるReact Native入門
All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5