3分で簡単にわかるReactとReact nativeの違い！仮想DOMも現役エンジニアがわかりやすく解説

ライター／おおつけ

現役システムエンジニア兼ライター。前職は貿易商社の営業マン。知らない言葉は徹底的に調べるクセがあり、独自の単語帳を作っている。日々たくわえた広い知識を、わかりやすく紹介していく。

Reactとは

image by iStockphoto

ReactとはWebサイトやWebアプリケーションの、主にUI（ユーザーインターフェイス）部分の開発に特化したJavascriptライブラリのこと。ライブラリとはエンジニアがシステム開発をしやすくなるよう、あらかじめ機能単位でまとめられたソースコード群のことです。

簡単でわかりやすい！ReactとNext.jsの違いとは？使い分けや学び方もプログラマーが詳しく解説

3分でわかる「Java」と「JavaScript」の違い！何で似た名前なの？文法や用途の違いも現役エンジニアがわかりやすく解説

JavaScriptとPHPの違いとは？仕組みや特徴もプログラマーがわかりやすく解説

3分でわかるJavaScriptとjQueryの違い！jQueryはもう使わない？jQueryに代わるライブラリも現役エンジニアがわかりやすく解説

Reactの特徴

Reactの大きな特徴として、先進的なデザインのUIを手軽に実装できる点が挙げられます。ソースコーディングの点で言えば、Reactは「宣言型」と呼ばれる言語タイプたのため、「手続き型」や「命令形」と呼ばれる言語よりも効率的にコーディングが可能に。

またReactではデータを更新すると、HTML（画面を描画するためのマークアップ言語）の内容も自動で更新されます。データの更新とHTMLの書き換えの処理を両方行わなくてもいいので処理も効率的です。

5分で分かる！HTMLとCSSの違いとは？定義や役割・読み込み方も現役エンジニアがわかりやすく解説

HTML5とXHTMLの違いとは？HTMLの歴史やXMLとの関係までプログラマーがわかりやすく解説

簡単でわかりやすい！PHPとHTMLの違いとは？静的と動的？仕組みや特徴もプログラマーが詳しく解説

Reactの歴史

ReactはFacebook社（現meta社）のソフトウェアエンジニアであるJordan Walke氏によって開発されました。PHP向けのHTMLコンポーネントフレームワークであるXHPの影響を受け、最初はFacebookで、続いてInstagramで使用されるようになりました。現在ではその使いやすさから世界中のWebシステム開発現場で使用されています。

FacebookとInstagramの違いは？特徴や連携するメリットもSNS大好きライターが詳しくわかりやすく解説

ReactとReact nativeの違い

image by iStockphoto

Reactの特徴や歴史はおわかりいただけたことでしょう。では本題として、ReactとReact nativeはいったい何が違っているのかを解説していきます。名前が似ているということは、Reactの強化版だったりするのでしょうか。

React nativeとは

React nativeとはFacebook社（現meta社)が開発したクロスプラットフォームのアプリ開発用フレームワークです。クロスプラットフォームとはどのOSでも安定して動作すること。簡単にいえばAndroidとiOSのどちらでも開発できるプラットフォームだと考えてください。

React nativeは何が違うのか？

Reactがライブラリであったのに対して、React nativeはフレームワークです。フレームワークとはサイトやアプリケーションが機能するための土台として機能するソフトウェアのことを指します。つまりReactはシステム開発の手助けをするためのもので、React nativeはシステム開発の土台そのものなのです。

React nativeの特徴

image by iStockphoto

Reactは仮想DOM（Document Object Model）を使用してWebブラウザ上でコードをレンダリングしています。これに対してReact nativeはネイティブAPI（使用しているOSに組み込まれたAPI）を使用しているため、OSにより実行環境が異なるのです。

APIとライブラリの違いとは？プログラムの中と外？特徴から使い分けまでプログラマーがわかりやすく解説

3分で簡単に分かる！SDKとAPIの違いとは？ライブラリとの違いについてもITオタクの会社員ライターが解説

React nativeのメリット

React nativeのメリットは開発や修正が効率的になるという点です。クロスプラットフォームのため、AndroidとiOSアプリが同時に開発できます。ソースコードの大部分を共通化することで工数やリソースの削減が可能。またホットリロードといい、ソースコードを書き換えても再コンパイルをせずに実行できるためスムーズな修正ができます。

React nativeのデメリット

Reactのデメリットはエラー解決の難易度が高い点が挙げられます。ネイティブAPIを使用しているため、アップデートが発生するたびに現在の実行環境との相性的な不具合が発生するかもしれません。またエラーが発生した際、ネイティブAPI側で生じているのかJavascript上で発生しているのか見極めるのに時間がかかります。