はじめに
現在自己学習でReactを学習しています。
技術の基本について説明することができずに学習を続けていても効率が悪いと感じたので、記事にアウトプットすることで理解を深めたいと思い本記事を投稿しました。
対象読者
- Reactをこれから知ろうとしている人
- Reactを学び始めたが何ができるかよくわかっていない人
基本情報
ReactはUIを構築するためのJavaScriptライブラリとして、Meta社(旧Facebook社)によって開発されました。
UI(User Interface)とは、Wikipediaでは以下のように説明されています。
機械、特にコンピュータとその機械の利用者（通常は人間）の間での情報をやりとりするためのインタフェースである。
Webアプリにおいてはサイトのデザイン・フォントなどのユーザーの視界に触れる情報のことであり、ReactではこれをVanilla JS(素のJavaScript)より効率的かつ柔軟に記述できるようになっています。
得意なこと
リッチなWebアプリを手軽に記述できる
現代のWebアプリでは、FacebookやTwitterのように現在のページに最新情報を追加で読み込んだり、各種サイトの登録画面でIDを入力する際に一意であることを入力中にチェックしたりと、複雑な操作を行うものが多く存在します。
Vanilla JSでも実装は可能ではありますが、作成難易度が高く、コードがあちこちに散らばってしまい可読性の低いコードとなってしまいます。
Reactでは、UIの中でもボタンや文字列等の細かい部品単位で切り分けレゴブロックのように組み立てることによって、やがてはユーザー情報、やがては記事全体の様にWebページを作るコンポーネントという仕組みを持っています。
コンポーネントを使うことによって宣言的な記述ができるので、複雑な操作でも手軽に可読性の高いコードを書くことができるのです。
宣言的(Declarative)とは?
対義語は命令的(Imperative)とのことで、"いちいち細かく指示をする"といったニュアンスがあります。
それと比べ、宣言的は細かい指示をせずに目的だけを示すといった意味になります。
例えばコーヒーを注文する時に、器具や淹れ方を指定せずともコーヒー(目的)を注文できるといった状態なのです。
ページ上の操作が高速
Reactには、ページの一部を更新する時に前回の表示から変更となった部分のみを検知して更新することができます。
ページの一部を変更するにも、ページ全体のリロードを挟んでしまうと処理が重く更新に時間がかかってしまいます。
この仕組みを使えば、変更したい一部の部分だけ瞬時に変えることができるので処理を高速で行うことができます。
SPAの作成を行うことができる
SPA(Single Page Application)とは、最初に読み込んだページだけで操作や画面遷移が行える、まるでネイティブアプリ(スマホアプリの様なイメージ)の様に操作することができるWebアプリのことを指します。
なんらかの操作をするにしても画面遷移を行うにしてもスムーズに動作するので、ユーザーのストレスが溜まりづらくなります。
こちらの仕組みは、読み込み処理が最初しか行われず、画面遷移も既に読み込んでいる情報を描画することによって実現しています。
Reactでは、先に述べたようにページの一部のみを更新することを得意としています。この仕組みがSPAを構築する上で重要となってくるため、SPA開発にReactが選ばれやすくなっています。
使われているWebサイト
FacebookやInstagram、Twitter、Slack等、様々な有名サイトがReactを採用して作られています。
WebサイトにReactが採用されているかはGoogle Chromeの拡張機能、
React Developer Toolsを使うことで確認することができるので、みなさんも是非様々なWebサイトを確認してみてください。
おわりに
Reactの基本についてイメージできたでしょうか。
これからReactを始める人や、Reactを深く知りたい人にとって理解の助けになれば幸いです。
最後まで記事を読んでいただきありがとうございました。
参考サイト
React公式サイト
React を深く知るための入り口
宣言的？ Declarative?どういうこと？
WebサイトにReactが使われているか確認する