目次
企業でのDX(デジタル・トランスフォーメーション)が進む昨今、モバイルアプリを開発することも必要となってきています。そのような中、アプリ開発のスピードも求められるようになってきており、それは企業によっては課題となっている現状もあります。この課題解決には、クロスプラットフォームを活用することがとても有益です。今回は、このいくつかあるクロスプラットフォームの中でもFacebook(現在のmeta)社が開発をしたReact Nativeというフレームワークについて解説をしていきたいと思います。
React Native（リアクト・ネイティブ）とは何か？
React Nativeとは、Swift（iOSアプリ用のアプリ開発言語）やKotlin、Android Java(Androidアプリ用のアプリ開発言語)を使用せずに、JavaScriptでモバイルアプリを開発することができるFacebook(meta社)が独自に開発したフレームワーク（以下、FWとします。）のことを指します。このReact Nativeを使うことで、iOS/Android/Webアプリをまとめて開発することができます。スマホアプリとWebアプリを一つのソースコードで開発できるのは大きなメリットと言えるでしょう。また、UIはネイティブのUIを採用しています。React Nativeが利用されているサービスの実例としては、Instagram、Twitter、NAVITIME、Progateなどが挙げられます。
React Nativeを活用するメリットとは？
このようなReact Nativeを活用することで、どのようなメリットがあるのでしょうか？主に以下の３点が考えられます。
・高速開発が可能
・ホットリロードにより、確認/検証作業時間を短縮できる
・「Learn once, Write anywhere」（一度学べば、どこでも書ける）
それでは、一つ一つメリットの詳細を見ていきます。
高速開発が可能
先述しましたように、React Nativeはクロスプラットフォーム開発用のFWです。iOSとAndroidのアプリを１つの言語で同時に開発を進めることができるので、開発工数を大幅に削減することができます。
ホットリロードにより、確認/検証作業を短縮できる
React Nativeには、コンパイルなしで変更が反映されるホットリロード機能があります。SwiftやJavaの場合、小さな修正をおこなっただけでも１からコンパイルして確認・検証する必要がありますが、React Nativeの場合、ソースコードの保存時に自動でリロードが行われるため、コンパイルが不要です。ホットリロードにより、開発がスムーズかつ容易に行える点も大きなメリットの一つでしょう。
アプリストアのリジェクトを回避できる
開発したスマホアプリをApp StoreやGoogle Playにアップロード（掲載）するためには、アプリストアを運営するApple Inc, Googleを運営するAlphabet Inc,による審査・レビューを受ける必要があります。アプリストア運営会社が公表するガイドライン等に抵触する場合、リジェクト（却下・不合格）判定を受け、アプリストア上へのアップロードが認められません。リジェクトを受ける理由は様々ですが、アプリ上に潜む些細なバグやリンク切れなどのシンプルなものであっても、改修してから再申請・再審査を受けるまでに数営業日待つケースもございます。このような実情に対し、Apple Inc,はJava Scriptをベースとした一部修正・一部変更に関しては、審査・レビューをしないことを公表しているため、React NativeのFWを利用する場合、アプリストア側によるリジェクトを回避することができます。これは大きな利点の一つと言えるでしょう。
「Learn once, Write anywhere」
Reactという言語は「Learn once, Write anywhere」という１度学べばどこでも使える、という考えの下、開発されたFWです。言い換えると、Reactを使える技術者はReactNativeも実装ができるという利点があります。考え方によって、複数の言語を使用できなくとも、開発を進めることができることから、プロジェクト自体を進めやすくなるという意味でも、React Nativeを使用する利点があるでしょう。
React Nativeのデメリットとは？
良い点が多いReact Nativeですが、ネイティブアプリと比較した場合のデメリットに関してもご紹介したいと思います。
・ネイティブのエンジニアは不向き
・エラーの修正に時間がかかる
・ゲーム開発には向いていない
・アップデートへの対応が手間に
ネイティブのエンジニアは不向き
SwiftやKotlinなどネイティブでの開発を得意とするアプリエンジニアにとっては、０からJavaScriptを学習することになるため、学習コストがかかります。Reactに精通しているエンジニアにとっては便利なReact Nativeですが、そうではないエンジニアにとっては、活用が難しいFWと言えるでしょう。
エラーの修正に時間がかかる
これは他のFWでも言えることですが、エラーが起きた場合に、ネイティブ側で発生しているのか、JavaScript側で発生しているのかを探す必要があります。また、iOSアプリではエラーは出ないが、Androidでは起きてしまうというケースも考えられるので、一筋縄では解決し得ない問題も起こり得るという点はデメリットと言えます。
ゲーム開発には向いていない
React Nativeはツール系のアプリ開発によく利用されます。ゲームの開発にはUnity、Robroxなどのプラットフォームが適しているといえます。
アップデートへの対応が手間にも
現状のReact Nativeは大規模なアップデートが頻繁に行われています。比較的新しいFWならではの問題と言えるでしょう。アップデートが行われる度、使用環境も全てアップデートをしていかなければならないことになります。アップデートが追いつかないことで、普段は問題なく動作していたアプリケーションが停止するといった、ユーザー離脱につながる事象が起きる可能性が出てきます。そうならない為にも、アップデートの都度、手元の使用環境もアップデートをかけることが重要です。
React Nativeを用いて開発されたアプリ事例
ここまでReact Nativeについて詳しく見てきましたが、実際に活用されて開発されたアプリの事例を見ていきたいと思います。中でもまだ事例の少ない国内のものに特化してご紹介していきます。
・NAVITIME
・Progate
NAVITIME
NAVITIMEは世界初のナビゲーション技術である「トータルナビ」をコアに、公共交通機関を始めとする自転車・バイクなど各移動手段ごとに最適化されたナビ情報を提供するというアプリケーションです。
NAVITIMEの事業のうちインバウンド事業部という部署が React Nativeを採用し導入しました。主に自治体向け観光アプリの開発や外国人観光客の誘致などのコンサルティングを行う部署です。React Nativeを導入した背景には、開発工数の削減やAppStoreのリジェクト回避という目的がありました。
活用した内容としては、実績がない状態では全てをReact Nativeにするのは難しいという背景から、簡単な画面からReact Nativeしていくこととなりました。地図の部分に関してはReact Nativeで動くようにはなっておらず、「ネイティブとReact Nativeのハイブリッドアプリ」として運用することに。
結果として、ネイティブの知識もあるエンジニアがいないと開発は難しいこともあるので、活かせる部分をうまく活かしてアプリケーションを開発するにはとても有効な手段であると語られています。
Progate
プログラミング初学者向けの学習プラットフォームを開発するProgateは、Web版のサービスはReactで開発をしていました。ゆえに、国内でまだ実績があまりなかったにも関わらずReact Nativeでのアプリ開発を決定。
Web版でのサービスが好評で軌道に乗っていたため、わざわざ開発コストを高くして、未経験者がネイティブツールの使い方をイチから勉強するのは時間がかかり過ぎ、Web版と同じ工程で開発ができるReact Nativeを活用することはリスクを取ることではあったそうですが、結果として成功だったと語っています。
「少数で・高速に・高品質に」の3つを常に追求しているProgateは、React Nativeのビルドの速さを特に評価しています。3秒もあれば動作確認ができるホットリロード機能が標準搭載であることは作業の効率化につながり、開発もしやすかったとのことです。
Instagram（インスタグラム）
ショート動画や画像、ストーリー投稿を中心として全世界に大ヒットした人気アプリ、Instagramは、２０１６年からReact Nativeの導入を開始しました。既存のInstagramのアプリがネイティブで開発されていたため、プロジェクト序盤は一部の機能に限定して開発がスタートしました。最もシンプルなUI機能、Push通知からReact Nativeによる実装をはじめ、徐々にその範囲を広げました。最終的には、Push通知の他、SMS（ショートメッセージサービス）キャプチャ＆チェックポイント、ポストプロモート、コメントモデレーション、リード・ジェネレーション広告機能にReact Nativeが活用されており、これらの機能はiOSアプリとAndroidアプリ間で約８０％～９９％の共通ソースコードが使用されています。
まとめ
いかがでしたでしょうか。
メリットの多いReact Nativeですが、まだまだ国内での資料が少なく開発をスムーズに行うのが困難だと感じる方も多いのが現状です。しかし、その一方でReact Nativeは開発コストが大幅に削減できます。海外では成果の得られているフレームワークでもあるため、開発の効率化が避けられない現状、国内でもどんどん活かしていく必要があります。私たちの普段使うアプリケーションでも活用されていることからも、ハイブリッドアプリ開発における良い選択肢と言えるでしょう。
—————————————————————————————————————
システム開発、アプリ開発、新規事業立ち上げ、DX化の推進でお困りではありませんか？
日本全国には開発会社が無数にありますが、Webサービスやアプリサービスのスケール（規模拡大）を実現するビジネス推進力やシステムの堅牢性、可用性を意識した設計力・技術力を合わせ持つ会社は、全国で見ても多くはなく、弊社は数少ないその一つ。お客様のご要望通りに開発することを良しとせず、お客様のビジネス全体にとって最適な解を模索し、ご提案ができるビジネス×テック（技術力）×デザインの三位一体型のシステム開発/アプリ開発会社です。ITやDX全般に関して、何かお困りのことがございましたら下記の「GeNEEへのお問合せ」フォームからお気軽にご連絡いただけたらと思います。
—————————————————————————————————————
