【初心者用】React Nativeについて

公開日: 2024/6/25

Reactは学んでいたのですが、主にWeb系のUI開発にしか使用ができないため、Android開発をしたい場合はできませんでした。

ですが、Reactには携帯用のアプリ開発言語があることを知ったので、改めて今回勉強の為にまとめておきたいと思います。

1. そもそもReact Nativeって何?


React NativeとはReact.jsというWeb系の開発で使用される言語をAndroidやiOSのなど、異なるプラットフォームでアプリ開発できるようになった言語です。

また、React Nativeの開発言語にはReact.jsと同じでJavaScriptが使用されています。


React.jsはWebサイトのUIを構築するためのJavaScriptライブラリで、コンポーネントベースのフレームワークとなっています。

仮想DOMを使用した高速なDOM操作と再利用可能なコンポーネントを作成することで、簡単にWebアプリケーションやWebサイトの開発や拡張が可能となっています。


React nativeはReact.jsとは違いネイティブAPIを使用してモバイルデバイス上でUIをレンダリングをしています。

React.jsは仮想DOMを使用してWebブラウザ上でレンダリングを行うため、React.jsとReact nativeは完全に別の開発用に使用されています。


基本的な機能はReact.jsと同じになっており、React nativeはモバイルアプリの開発や拡張のため再利用可能なコンポーネントを使用可能になっています。

また、React nativeはJavaScriptを元に開発されているため、モバイルアプリ開発でもJavaScriptさえ記述することができれば、AndroidでもiOSでもモバイルアプリ開発を行うことができます。


React nativeは有名なアプリ開発にも使用されており、言語としての人気も実績も多くここから先増々需要が増えていくと思われます。

JavaScriptをReact nativeがモバイルアプリ用に翻訳を行うため、ネイティブなユーザーインターフェースを動かすことも可能となっています。


モバイルアプリ開発でクロスプラットフォームに対応しているため、何かアプリを開発する際にはAndroid用だけではなくiOS用のアプリ開発も同時に進めることができます。

そのため、どちらかでしかリリースできないなどおこらないため、幅広いプラットフォームでの開発を行えます。

2. React nativeの特徴


React nativeの特徴として以下にいくつかまとめてピックアップします。

2-1. クロスプラットフォーム開発に対応

クロスプラットフォームとは、AndroidやiOS等の異なるプラットフォーム上で、同じアプリケーションを起動することができることを言います。

AndroidやiOS・windows等の複数のプラットフォームに対応したアプリケーションを1つの言語と環境で開発を行うことができるため、マルチプラットフォームとも呼ばれています。

React nativeもクロスプラットフォームに対応しているので、この言語の代表的な特徴といえるものです。

2-2. AndroidとIPhoneの両方で扱える

React NativeはJavaScriptで開発されており、モバイル開発でもJavaScriptを使用してアプリ開発を行うことができます。

本来であれば例えばAndroidはJavaで、iOSは専用言語であるSwiftなど別々の言語で開発を行わなければならないのですが、それを行わずにReact nativeのみ使用して両方開発を進めることができます。

ですので、SwiftやJavaなど他の言語を使用できない人でも、JavaScriptが記述することができれば同時に開発を進めることができます。

2-3. 通常よりも速く開発ができる

React nativeはクロスプラットフォームに対応しているので、通常の様にAndroidは特定の言語でIOSはまた別な言語を使用して開発をするという手間が省けます。

そのため、本来のAndroidとiOSなど異なるプラットフォームごとに、開発言語を分けて開発をしなくてよくなるため、開発時間の短縮や負担を軽減することができます。

2-4. 他プラットフォームでも再利用できる

React nativeはAndroidとiOSの両方とも対応できるので、ソースコード内で不具合やエラーがあった場合に、1回修正を行いアップデートすることで対応が可能になります。

ですので、一度コード修正したものを他プラットフォームでも再利用することができます。

3. React nativeのメリット・デメリット


React nativeを使用することで大きなメリットもありますが、当然デメリットもあります。

以下にReact nativeを導入するメリットとデメリットをまとめます。

3-1. React nativeのメリット

■簡単にアプリ開発を行える

React nativeは各端末ごとに書き換えるコードが少なく済み、大部分のコードを共通化できるため異なる言語で開発する必要がありません。

Web開発を元々しているエンジニアであれば、特に改めて学習をする必要もなく開発が可能となっています。
 

またコンポーネント毎に機能を分けているため、機能ごとに開発することで理解しやすく簡単に開発をすることができます。

■コードの修正が容易

React nativeではソースコードを編集した際に、そのコードの変更を実行中のアプリケーションに適用して表示するというホットリロード機能があります。

ホットリロード機能のおかげで、コンパイルをする必要がなく即時修正したコードが反映されるため、エラーの修正が効率的に進めることができます。

■Webアプリケーション開発との互換性が高い

React nativeはWebアプリケーションやWebサイトのUIパーツを構築するための、React.jsという言語を使用して開発をしています。

そのため、JavaScriptを使用してるWebエンジニアには学習コストが低いので扱いやすく、ネイティブアプリ開発にWebエンジニアも参加できるようになり、開発の人材確保が簡単になりました。

3-2. React nativeのデメリット

■学習コストが高いこともある

React nativeはWebエンジニアであれば、元々使用していたJavaScriptを使用できるので学習コストが低いのですが、Javaなどを使用してネイティブアプリを開発していたエンジニアに関しては、改めて学区州する必要があるので学習コストが高くなってしまいます。

ですので、Webエンジニアは学習コストが低いのですが、それ以外のエンジニアに関しては学習コストが高くなってしまいます。

■エラーの解決に時間がかかる

React nativeはエラー修正を行う際に、JavaScript側なのかネイティブ側で起きているエラーなのか特定するのに時間がかかってしまいます。

また、クロスプラットフォームに対応しているため、Androidのみエラーが起こるなどのOS特有のエラーがあるため、簡単にエラー原因を特定して解決することができない場合があります。

4. まとめ

モバイルアプリ開発もしたいと考えていたので、改めてReact nativeを学びなおせたためよかったです。

モバイルアプリ開発にどの言語を使用したいのか、一つの選択肢として考慮してもよいかと思います。