React Nativeとは

React Nativeとは、クロスプラットフォームのアプリケーション開発用フレームワークの1つです。ここではReact Nativeの概要や将来性について紹介します。

React Nativeとは、メタ・プラットフォームズ社（旧Facebook社）が開発したクロスプラットフォームのアプリケーション開発用フレームワークです。クロスプラットフォームなのでiOS・Android両端末で動作するアプリケーションを開発できます。

React Nativeは現行のWeb開発の主流であるJavaScriptを開発言語としています。したがって、Webアプリケーション開発のノウハウを活かした開発が可能です。関連性が高いものにReact.jsというJavaScriptのUIライブラリーがあります。

参考:React Native Learn once, write anywhere

JavaScriptに関するフレームワークについて徹底解説！

React.jsとは、JavaScriptで使えるUI構築用コードに特化したライブラリーです。React Nativeと同様にメタ・プラットフォームズ社によって開発され、Reactとも呼ばれます。多くの企業がシステム・アプリケーション開発にReact.jsを導入しており、フロントエンド開発の主流となりつつあります。

React Nativeは、Webアプリケーション用のReact.jsをモバイル端末向けアプリケーション開発に使えるように作られたものです。ライブラリーであるReact.jsに対し、React Nativeはフレームワークなので役割は大きく異なるものの、コードの表記方法をはじめ多くの共通点があります。

参考:React ユーザーインターフェース構築のためのJavaScriptライブラリ

近年はAirbnbなどの大企業がReact Nativeを使用しなくなったこともあり「React Native離れ」が始まっていると言う声も聞かれます。この背景には、クロスプラットフォームからネイティブ開発への切り替えや、同じクロスプラットフォームのFlutterの人気が高まっていることなどがあります。

一方、前述のReact.jsは世界中で導入企業を増やしており、今後主流となる可能性があります。そのReact.jsとReact Nativeを合わせれば、Web・iOS・Android向けのアプリケーションを共通のノウハウで開発可能です。その利便性からReact Nativeは将来性のあるフレームワークであると言えます。

React Nativeにできること・メリット

React Nativeには、同じクロスプラットフォームのFlutterなどと比較した場合にいくつかのメリットがあります。ここでは、React Nativeにできることや独自のメリットについて解説します。

前述のとおりReact NativeはJavaScriptを開発言語にしており、Webアプリケーション開発との互換性が高いフレームワークです。したがって、普段JavaScriptを使っているエンジニアであれば、ネイティブ開発の経験がなくても開発業務にアサインしやすいと言えます。

開発言語がJavaScriptである点は、Google独自の言語であるDartを使うFlutterや、ネイティブ開発言語であるSwift・kotlinにはないReact Nativeを導入する大きなメリットです。すでにJavaScriptを使える人や勉強中の人で、モバイル端末向けアプリケーション開発に携わりたい人におすすめです。

Kotlinとは？Android開発において、Javaと比較したKotlinの特徴とは

Appleの新しいプログラミング言語、Swift ― その概要や特徴、メリット・デメリットについて解説

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

まずは、JavaScriptのランタイムとして使うNode.jsをインストールします。Node.jsを使えば、JavaScriptをサーバサイドで実行可能です。Node.jsは公式ページからダウンロードできます。

続いて、同様にWatchmanをインストールします。Watchmanとはその名のとおりファイル監視サービスです。Watchmanは、指定したファイルが変更された際に実施するアクションを設定できます。公式サイトからダウンロード可能です。

参考:Node.jsとは

参考:ダウンロード:Node.js

参考:Watchman A file watching service - Meta Open Source

次にExpo CLIまたはReact Native CLIをインストールします。公式ドキュメントによれば、モバイル端末向けアプリケーション開発の習熟度によって奨励するCLIが異なります。初めて開発する人や慣れていない人はExpo CLI、慣れている人はReact Native CLIを利用してください。

開発者向けツールとしてXcode・Android Studioをインストールします。iOS向けのアプリケーション開発ならXcode、Android向けならAndroid Studioが必要です。いずれも公式サイトから無料でインストールできます。XcodeはAppStoreからのダウンロードも可能です。

参考:Xcode 13の概要 - Apple Developer

参考:Android Studio のインストール | Android デベロッパー

ライブラリ管理ツールであるCocoaPodsをインストールしておくと、さまざまなライブラリーを使って開発をする際の手間を軽減できます。iOS・Mac向けアプリケーションを開発する人は、公式サイトからインストールしておくことをおすすめします。

参考:CocoaPods

JavaScriptが使えるならReact Nativeを学んでおこう

React Nativeは、JavaScriptを開発言語とするモバイル端末向けアプリケーション開発用のフレームワークです。Webエンジニアにとって学習コストを抑えながら、アプリケーション開発を始めるのに適しています。

また、フロントエンド開発において主流になりつつあるReact.jsとの互換性が高い点も特徴です。今後、モバイル端末向けのアプリケーション開発に携わりたいWebエンジニアをはじめ、JavaScriptを扱えるエンジニアは、ぜひReact Nativeを学んでみることをおすすめします。

JavaScriptの特徴とは？何ができるのか、メリット・デメリットも解説

JavaScriptの用途やできることを初心者向けに紹介！