React Nativeとは
React Nativeとは、クロスプラットフォームのアプリケーション開発用フレームワークの1つです。ここではReact Nativeの概要や将来性について紹介します。
React Nativeの概要
React Nativeとは、メタ・プラットフォームズ社(旧Facebook社)が開発したクロスプラットフォームのアプリケーション開発用フレームワークです。クロスプラットフォームなのでiOS・Android両端末で動作するアプリケーションを開発できます。
React Nativeは現行のWeb開発の主流であるJavaScriptを開発言語としています。したがって、Webアプリケーション開発のノウハウを活かした開発が可能です。関連性が高いものにReact.jsというJavaScriptのUIライブラリーがあります。
参考:React Native Learn once, write anywhere
React.jsとは
React.jsとは、JavaScriptで使えるUI構築用コードに特化したライブラリーです。React Nativeと同様にメタ・プラットフォームズ社によって開発され、Reactとも呼ばれます。多くの企業がシステム・アプリケーション開発にReact.jsを導入しており、フロントエンド開発の主流となりつつあります。
React Nativeは、Webアプリケーション用のReact.jsをモバイル端末向けアプリケーション開発に使えるように作られたものです。ライブラリーであるReact.jsに対し、React Nativeはフレームワークなので役割は大きく異なるものの、コードの表記方法をはじめ多くの共通点があります。
参考:React ユーザーインターフェース構築のためのJavaScriptライブラリ
React Nativeの将来性
近年はAirbnbなどの大企業がReact Nativeを使用しなくなったこともあり「React Native離れ」が始まっていると言う声も聞かれます。この背景には、クロスプラットフォームからネイティブ開発への切り替えや、同じクロスプラットフォームのFlutterの人気が高まっていることなどがあります。
一方、前述のReact.jsは世界中で導入企業を増やしており、今後主流となる可能性があります。そのReact.jsとReact Nativeを合わせれば、Web・iOS・Android向けのアプリケーションを共通のノウハウで開発可能です。その利便性からReact Nativeは将来性のあるフレームワークであると言えます。
React Nativeにできること・メリット
React Nativeには、同じクロスプラットフォームのFlutterなどと比較した場合にいくつかのメリットがあります。ここでは、React Nativeにできることや独自のメリットについて解説します。
Webエンジニアにも使いやすく人材確保が容易
前述のとおりReact NativeはJavaScriptを開発言語にしており、Webアプリケーション開発との互換性が高いフレームワークです。したがって、普段JavaScriptを使っているエンジニアであれば、ネイティブ開発の経験がなくても開発業務にアサインしやすいと言えます。
開発言語がJavaScriptである点は、Google独自の言語であるDartを使うFlutterや、ネイティブ開発言語であるSwift・kotlinにはないReact Nativeを導入する大きなメリットです。すでにJavaScriptを使える人や勉強中の人で、モバイル端末向けアプリケーション開発に携わりたい人におすすめです。
ホットリロードにより修正が容易
React Nativeにはホットリロードという機能があり、コードの修正が容易である点もメリットの1つです。ホットリロードとは、コードを変更するたびに変更内容がUIに反映される機能です。
React Nativeにできないこと・デメリット
さまざまなメリットがある反面、React Nativeにはデメリットもあります。ここでは、React Nativeにできないことやデメリットについて紹介します。
ネイティブエンジニアには学習コストが高い
JavaScriptを開発言語に採用している点がメリットであることは説明しましたが、裏を返せば、普段からネイティブ開発用言語を使っているエンジニアには学習コストがかかると言えます。iOS向けのSwift、Android向けのKotlinが使えても、React Nativeを使う際にスキルの転用は困難です。
逆にReact Nativeを導入してアプリケーション開発をしていた企業・エンジニアが、ネイティブ開発向け言語に切り替える際も同様に学習コストが発生します。React Nativeの導入を検討するときは、チーム内のWebエンジニア・ネイティブエンジニアの比率をチェックしておくことが大切です。
エラー箇所の特定に時間を要する
React Nativeのようなクロスプラットフォームでアプリケーション開発を行う場合、エラー箇所の特定に手間と時間がかかるというデメリットがあります。React Nativeで言えば、エラーがネイティブレイヤーとJavaScriptレイヤーのどちらで発生しているのかを特定する必要があるためです。
加えて、iOS・Android両OS向けのアプリケーションが開発できますが、どちらか一方のOSでのみ発生するエラーもあるため注意が必要です。エラーの発生場所・原因が何パターンも考えられ、容易には解決できにくい点は、React Nativeの弱点です。
React Nativeの環境構築
React Nativeでアプリケーションを開発するには環境構築が必要です。ここでは、React Nativeの開発環境構築について説明します。
参考:Setting up the development environment - React Native
Node.jsとWatchmanをインストールする
まずは、JavaScriptのランタイムとして使うNode.jsをインストールします。Node.jsを使えば、JavaScriptをサーバサイドで実行可能です。Node.jsは公式ページからダウンロードできます。
続いて、同様にWatchmanをインストールします。Watchmanとはその名のとおりファイル監視サービスです。Watchmanは、指定したファイルが変更された際に実施するアクションを設定できます。公式サイトからダウンロード可能です。
参考:Node.jsとは
参考:Watchman A file watching service - Meta Open Source
Expo CLIまたはReact Native CLIをインストールする
次にExpo CLIまたはReact Native CLIをインストールします。公式ドキュメントによれば、モバイル端末向けアプリケーション開発の習熟度によって奨励するCLIが異なります。初めて開発する人や慣れていない人はExpo CLI、慣れている人はReact Native CLIを利用してください。
Xcode・Android Studioをインストールする
開発者向けツールとしてXcode・Android Studioをインストールします。iOS向けのアプリケーション開発ならXcode、Android向けならAndroid Studioが必要です。いずれも公式サイトから無料でインストールできます。XcodeはAppStoreからのダウンロードも可能です。
参考:Xcode 13の概要 - Apple Developer
参考:Android Studio のインストール | Android デベロッパー
CocoaPodsをインストールする
ライブラリ管理ツールであるCocoaPodsをインストールしておくと、さまざまなライブラリーを使って開発をする際の手間を軽減できます。iOS・Mac向けアプリケーションを開発する人は、公式サイトからインストールしておくことをおすすめします。
参考:CocoaPods
JavaScriptが使えるならReact Nativeを学んでおこう
React Nativeは、JavaScriptを開発言語とするモバイル端末向けアプリケーション開発用のフレームワークです。Webエンジニアにとって学習コストを抑えながら、アプリケーション開発を始めるのに適しています。
また、フロントエンド開発において主流になりつつあるReact.jsとの互換性が高い点も特徴です。今後、モバイル端末向けのアプリケーション開発に携わりたいWebエンジニアをはじめ、JavaScriptを扱えるエンジニアは、ぜひReact Nativeを学んでみることをおすすめします。
編集部オススメコンテンツ
アンドエンジニアへの取材依頼、情報提供などはこちらから