React Native入門!将来性やアプリ開発環境について解説
thumb_reactnative_01
React Native入門!将来性やアプリ開発環境について解説
開発ツール
アンドエンジニア編集部
2022.01.05
この記事でわかること
React Nativeとは、メタ・プラットフォームズ社が開発したクロスプラットフォームのモバイル端末向けアプリケーション開発用フレームワークである
React Nativeは開発言語にJavaScriptを用いるため、Webエンジニアにとって学習コストが低い
フロントエンド開発の主流となりつつあるUI構築コードに特化したReact.jsとの互換性が高く、React Native自身も将来性のあるフレームワークと言える

React Nativeとは

img_reactnative_01

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

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

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にできること・メリット

img_reactnative_02

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

Webエンジニアにも使いやすく人材確保が容易

前述のとおり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にできないこと・デメリット

img_reactnative_03

さまざまなメリットがある反面、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の環境構築

img_reactnative_04

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とは

参考:ダウンロード: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を学んでおこう

img_reactnative_05

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

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

JavaScriptの用途やできることを初心者向けに紹介!
気になる人のTwitterをフォローしよう!
アンドエンジニア公式LINEでは
新着記事やエンジニアに役立つ情報をお届け!
日々のキャッチアップをお手伝いします!
マイナビITエージェント

編集部オススメコンテンツ

ITパスポート
ITパスポートは不要な資格か?メリット・デメリット、活用について
アンドエンジニア編集部
2022.03.17

アンドエンジニアへの取材依頼、情報提供などはこちらから

お問い合わせ・情報提供

アンドエンジニアへの取材依頼、情報提供などはこちらから

Powered by マイナビ AGENT