JavaScriptだけで画面を動かせるなら、
なぜわざわざ新しく React を学ぶ必要があるのでしょうか？
理由はとてもシンプルで、
アプリが複雑になればなるほど、JavaScriptだけでは管理が難しくなってしまうからです。
今回は、Reactが生まれた背景と、
なぜ今のWeb開発で選ばれているのかを、順を追って見ていきましょう！
純粋なJavaScript（バニラJS）の限界
「Web進化の歴史」で見てきたように、
JavaScriptを使えば画面の一部を更新できます。
ただし、ブラウザ標準の機能のみで記述するため、機能が増えてくるとコードはどんどん複雑になってしまいます。
また、特別な仕組みを使わない分、自由度は高いのですが、
そのぶん開発者自身がすべての処理を管理しなければなりません。
純粋なJavaScriptでの記述例
// 1. HTMLの中から、操作したい場所を「探してくる」
const button = document.getElementById("add-btn");
const list = document.getElementById("todo-list");
// 2. ボタンが押された時の処理を「事細かに指示する」
button.addEventListener("click", () => {
const newItem = document.createElement("li"); // 要素を新しく作って
newItem.innerText = "新しいタスク"; // 中身の文字を決めて
// 3. 画面のどこに追加するか、命令を積み重ねる
list.appendChild(newItem); // リストの末尾にくっつける
});
このように
「要素を探して → 作って → くっつける」
という手順をすべて自分で書くスタイルを手続き型と呼びます。
小さな機能なら問題ありませんが、
画面が増え、状態が増え、データが増えると、
- どこで何を変えたのか分からない
- 修正したら別の画面が壊れる
- バグの原因が追えない
といった問題が起きがちです。
こうした「管理の難しさ」を解決するために、
Web開発の方法も、それに合わせて進化してきました。
バニラJSとは？
ライブラリやフレームワークを使わず、素のJavaScriptだけで書くことを指します。
ライブラリ・フレームワークの進化
この大変さを減らすために、
時代ごとにさまざまな道具が登場しました。
| 時代 | 名前 | 役割 |
|---|---|---|
| 昔〜今 | jQuery | DOM操作を簡単にしてくれた革命的存在 |
| 少し前 | Backbone.js / Angular | データ管理の仕組みを導入し、大規模開発に対応 |
| 現在主流 | React / Vue.js | コンポーネント単位で管理できるモダン設計 |
こうしたツールは、
DOM操作の手間を減らしたり、データ管理の仕組みを整理したりと、
開発の負担を少しずつ軽くしてきました。
つまりWeb開発の歴史は、「もっと楽に」「もっと壊れにくく」作りたい
というエンジニアの願いの積み重ねでもあります。
そしてその進化の先にあるのが、
今もっとも広く使われているReactです。
ライブラリ、フレームワークとは？
ライブラリとは、よく使う処理を再利用できるようまとめた便利な部品集のことで、
フレームワークは、アプリの構造そのものを整えてくれる設計の土台です。
どちらも開発を効率化するための道具ですが、
フレームワークの方がより広い範囲を支える仕組みと言えます。
なぜReactが選ばれているのか
Reactが支持されている理由は、主に3つあります。
① 宣言的に書ける
従来のJavaScriptでは、
更新のたびに「何をどう変えるか」という手順を細かく指示する必要がありました。
Reactではその手順を書く代わりに、
「この状態ならこう表示される」と結果を宣言する形で記述します。
更新処理の流れはReactが内部で調整してくれるため、
開発者は状態と表示の関係に集中できるようになります。
このように完成形を定義する書き方を、宣言的な記述と呼びます。
② 仮想DOMによる高速更新
通常のDOM更新はブラウザにとって重い処理です。
Reactはメモリ上に仮想DOMを作り、
変更された部分だけを計算して画面に反映します。
そのため、
- 更新が速い
- 無駄な描画が減る
- UIが滑らかに動く
というメリットがあります。
Reactはこの仕組みを使うことで、
変更があった部分だけを効率よく更新できるため、
大規模な画面でも高速で滑らかな表示を実現できます。
仮想DOMとは？
実際の画面を書き換える前に、メモリ上に作られる軽量なHTMLのコピーのことです。
Reactはこの仮想DOM同士を比較し、
変更があった部分だけを本物の画面に反映します。
これにより、無駄な再描画を減らし高速なUI更新を実現しています。
③ 圧倒的な利用者数と将来性
Reactは Meta （旧Facebook）が開発したライブラリで、
世界中の開発現場で使われています。
利用者が多いことから、
- 情報が見つかりやすい
- ライブラリが豊富
- 学習資産として価値が高い
といった強みがあります。
こうした背景から、Reactは開発効率と保守性の両面でメリットが大きく、
長く使われ続けている、信頼性の高い技術として広く使われています。
まとめ
JavaScriptだけで開発する場合の限界と、
Reactがなぜ必要とされているのか、その理由が見えてきたのではないでしょうか？
＼＼ 今回のまとめ ／／
・ 純粋なJavaScriptだけでも画面は作れるが、規模が大きくなると管理が難しくなる
・ その課題を解決するために、開発を整理する仕組みとしてReactが登場した
・ Reactは「宣言的UI」「仮想DOM」といった仕組みによって、壊れにくく効率的な開発を実現している
・ 世界中で使われているため、学習価値が高く将来性のある技術となっている
だからこそReactは今も広く使われ続けており、
身につけておくことでWeb開発の選択肢を大きく広げてくれる技術と言えます。
次は、環境構築をしなくてもブラウザだけでReactを試せる方法をご紹介します -`📣⋆
Reactを動かす環境がまだない方は、必ずチェックしてくださいね！
コメント