Reactとは？JavaScriptとの関係やライブラリ・フレームワークについても解説！

WEBページを作成する方法を調べていく中で、Reactと呼ばれるライブラリの紹介を見たことある人も少なくないのではないでしょうか？

本記事ではReactとは何かを説明し、混同されやすいライブラリやフレームワークといった言葉の解説、そもそもJavaScriptとはなんなのかといったことを解説していきます。

ReactとはJavaScriptのライブラリ

Reactとはユーザーインターフェースを構築するためのJavaScriptライブラリです。ユーザーインターフェースとは、メールフォームやお問合せフォームのようなユーザーが目にするもの、操作するもののことを指します。

ユーザーが操作する画面と言うと簡単そうな印象を受けますが、システム的には以下のように複雑な要素を含みます。

・ボタンや入力フォームといった「要素の表示」 ・入力された情報の保持やエラーを表示するなど「入力値の制御」 ・ボタンを押すと情報を保持しながら次の画面に遷移するなど「ユーザー操作の制御」

 

Reactを用いることで、これらの機能を網羅したWEBページを実装することができます。

 

JavaScriptとは

JavaScriptとはWEBページに動きをつけるためのプログラミング言語です。

私たちが普段目にしているWEBページは、HTMLと呼ばれるWEBページを作成するための言語と、CSSと呼ばれる余白や色、背景色といったデザイン部分を作成するための言語の二つを組み合わせて作成されています。HTMLとCSSだけでは、動きのあるWEBページを作ることができませんが、JavaScriptを用いることで画像にマウスを当てると拡大されたり、ページを離れる際に表示されるポップアップウィンドウなど動きのあるWEBページを作ることができます。

JavaScriptや、JavaScriptを用いたライブラリであるReactで実装されるWEBブラウザ機能は、フロントエンドと呼ばれます。

 

ライブラリとは？

ライブラリとは特定の機能を持ったプログラムを他のプログラムから呼び出し、別のプログラムでも利用できるように部品化し、一つのファイルに収納したもののことです。Reactの場合、主にHTMLとJavaScriptを組み合わせてコードを書くことができるプログラムが提供されます。

Reactを用いない場合、HTMLとJavaScriptはそれぞれ独立したファイルにコードを書いて実装することになります。例えば、郵便番号を入力し、ボタンをクリックすると自動で住所を記載するシステムを実装するとしましょう。

Reactを用いない場合では、HTMLで郵便番号と住所を入力するためのフォームとクリックするためのボタンを用意します。JavaScriptのファイルでは、ボタンをクリックしたら郵便番号のフォームの入力値を取得するプログラム、取得した郵便番号に対応した住所を取得するためのプログラム、対応する住所の情報を住所の入力フォームに転記するためのプログラムを記述します。

Reactを用いる場合、HTMLとJavaScriptを組み合わせてコードを記述できるため、郵便番号、住所を入力するフォーム、クリックしたら入力された郵便番号を取得し、対応する住所情報を住所の入力フォームへ転記する機能を持ったボタン、といった形でWEBページに表示する要素と、その要素によって実現したい動きを併せたコードを記述することが可能です。

 

フレームワークとは？

フレームワークとライブラリは似たもの、あるいは同じものと認識している人も多いと思います。フレームワークとは「構造・骨組み」を意味し、そのフレームワークを用いることで特定の簡易的な機能の全てを実装できるようなテンプレートのようなプログラムになります。

例えば、ショッピングアプリを開発する場合、ユーザーのログイン機能、決済機能、購入する情報を保持するカート機能、販売する商品情報を入力する管理者機能などが必要になります。フレームワークというのはこれらの機能が全て簡易的に実装されており、フレームワークのルールに従ってコードを記述することで機能をカスタマイズして実装を進めることができます。

ライブラリは開発者が使いたい機能をピックアップして使えるのに対し、フレームワークではフレームワークのルールに従って、決められた枠組みの中でシステム開発を行うのが特徴です。

Reactの3つの特徴

これまで、Reactはフロントエンドの機能を実装するためのJavaScriptのライブラリであると説明を行なってきました。

それでは、Reactの以下の3つの特徴を見ていきましょう。

処理速度が速い 実現したい機能とコードを一致させやすい スマートフォンアプリ開発も行える

 

処理速度が速い

reactは「仮想DOM」というものを採用しており、処理速度が速いです。DOMとはDocument Object Modelの略で、JavaScriptでHTMLを操作する際に使用する仕組みです。

仮想DOMを用いないWEBページでは、JavaScriptなどで要素の変更をおこなった場合、変更された情報をもとにHTMLの作成（DOMの作成）を行い、画面に表示するため画面全体の描画を行います。一方Reactなどの仮想DOMを用いた場合、実際のDOMではなく、バーチャルでDOMの作成を行い、実際のDOMとの比較を行い、差分がある箇所のみを描画するため、処理が高速です。

 

実現したい機能とコードを一致させやすい

Reactを用いずにHTMLとJavaScriptで実装した場合、HTMLでボタンを作成、JavaScriptで動作を記述してボタンに紐付けを行わないといけないので、コードを見るだけでは何を実現したいのかがわかりづらい問題がありました。

その問題に対し、ReactではHTMLの要素とJavaScriptの動きを同じコードの中で記述することが可能なため、実現したい機能と実際に記述するコードの内容を一致させることができます。

例えば、システム全体で頻出するような登録ボタンや戻るボタンなどを実装する場合、「RegisterButton」や「BackButton」のような命名で部品を作り、登録するための処理や前の画面に戻るための処理が一緒になったボタンを作成することができます。Reactでは作成した部品を使用したいファイルで呼び出して使うことで、一目でどの機能を持ったボタンなのか、ということがわかります。

コードを一目見ただけでどの機能を持った部品かわかることで、実際の動きを想像することができコードの修正も行いやすくなり、部品の共通化や、バグの修正なども行いやすくなります。

 

スマートフォンアプリ開発も行える

Reactを学習することでReact Nativeと呼ばれるスマートフォンアプリ開発を行うフレームワークを利用することも可能です。React NativeはReactを使用してAndroidやiOSのスマートフォンアプリを開発することができるフレームワークです。

AndroidやiOSのスマートフォンアプリを開発する場合、Androidでは「Java」や「Kotlin」、「C#」といった言語で開発を行い、iOSでは「Swift」や「Objective-C」といった言語で開発を行います。AndroidとiOSで使用する言語に互換性はなく、どちらか一方のスマートフォンアプリしか開発ができません。

しかし、React Nativeではどちらのプラットフォームにも対応したスマートフォンアプリを開発することが可能です。React Nativeのような異なるプラットフォーム上で同じ仕様で動作するプログラムのことをクロスプラットフォームといいます。

質の高いユーザーインターフェースが実装可能

Reactはユーザーインターフェースを実装するためのJavaScriptのライブラリであり、処理速度が速く、学習を行うことでWEBページだけでなくスマートフォンアプリ開発も行えるようになるのが特徴でした。

現在JavaScriptを習得している人であればReactのルールを覚えるだけで質の高いユーザーインターフェースを実装することができます。また、WEBページだけにとどまらず、スマートフォンアプリの開発も行えるようになるので、興味がある人は学習してみましょう。