![株式会社デジナーレ[designare]](https://designare.jp/wp-content/themes/designare_new/img/logo.svg){kind=logo}
Writer： tokuyasu 更新日：2023/09/19
こんにちは、デジナーレ福岡オフィスの徳安です。
この記事では、Reactを使うにあたって
知っておきたい基礎知識について説明します。
Reactとは
Reactとは、UI（ユーザーインターフェース）を構築するための
Facebook社が開発したJavaScriptライブラリーの一つ。
従来のJavaScripでは手続き的でわかりやすい反面
レンダリングコストに問題が生じやすかった。
また記述量が多いため、コードが肥大化してくると、
どの部分に記述したのか、どこを修正すれば良いのか
すぐにはわかりずらくなってしまうという問題があった。
こういった問題を解決する為に作られたのが仮想DOM。
仮想DOM
仮想DOMとはJavaScriptの
オブジェクトで作られた仮想的なDOM。
JavaScrip内部に仮想的なDOMを作成し、
変更箇所のみ実際のDOMに反映することで
DOMへの操作を最小限に抑えることが可能になった。
※変更差分のみ実際のDOMに反映
パッケージマネージャ
これまでのJavaScripでは
1つのJsファイルにすべての処理を記述していた。
そのため、コードが複雑になるにつれて、
コードの再利用化が難しく、肥大化してしまい、
エラーや修正が発生した場合に、
該当箇所を見つけ出すのが難しい、といった難点があった。
それを解決するために、JavaScripファイルを
大きな処理（コンポーネント）ごとに分割して管理し、
その分割したファイルを読みこんで使用するように改善された。
これによって、コードの再利用性、共通化ができるようになったが、
ファイルの読み込み順をきちんと意識していないと、
・エラーが発生してしまうといった問題や、
・使用している関数や変数が、どのファイルから読み込まれているのかわかりにくい、
といった問題があった。
こういった問題を解決するために作られたのが、
npm や yarn といったパッケージマネージャ－。
npm や yarnの内部ではnode.js
（サーバーサイドで実行されるJavaScrip）が動いている。
パッケージマネージャを利用することによって、
・依存関係を意識しなくても自動で解決してくれる
・import先が明示的にわかる
・チーム内でのパッケージの共有やバージョン統一が容易
・Webで公開されているパッケージをコマンド1つで利用可能
といったメリットがある。
モジュールバンドラー
モジュールバンドラーとは、
複数のJavaScriptファイル、CSS、画像
（モジュール）を1つにまとめてくれるツール。
開発の段階ではファイルを分けて行い、
本番用にビルドするときに、１つのファイルにまとめてくれるものを
モジュールバンドラーと呼ぶ。
JavaScripには、読み込み順による依存関係の問題がある。
開発者自身がファイルをまとめるのは、とても手がかかる作業であるが、
モジュールバンドラーを使用することで、
ビルドを実行する際に、
ファイルをまとめて、バンドル後のファイルを生成してくれる。
そのファイルを本番環境に反映することで、
プログラムを実行できる。
2023年現在の主流のモジュールバンドラーはwebpack。
vue.jsの開発者が2020年にリリースした、
viteも近年人気が上昇している。
viteは、高速ビルドで、HMR（Hot Module Replacement）
が標準搭載されているため。
※HMRとは
ページ全体を更新しなくても、実行時にブラウザ内のモジュールを
自動的に更新することで、開発者体験を向上させる仕組みのこと
トランスパイラ
トランスパイラとは、新しいJavaScripの記法では、
動作しないブラウザでも実行できるように、
変換してくれるもの。（2023年主流のトランスパイラはBabel）
SPA
SPA（Single Page Application）は、
基本的にHTMLファイルは1つのみで、
JavaScripで画面を書き換えることで
画面遷移等の動きを表現すること。
SPAで開発することで、
ページ遷移時の画面のちらつきがなくなり、
表示速度もあがることでユーザー体験（UX）も向上する。
またコンポーネントの分割が容易になることで
開発効率もアップするというメリットがある。
ここまで読み進めていただきありがとうございます。
