Reactとはいってみよう
はじめまして、YOUです
システムエンジニアとして働きながら、コードをしっかり読めるようになりたくて日々もがいています。
前職は土木施工管理を4年、そこから未経験でシステムエンジニアに転職しました。現場に入ってまだ半年、チケット管理やリリース作業、オフショアチームとのやり取りが中心の毎日です。JavaScriptやReactを使うプロジェクトにいるのに、実はコードを自分で触ることはゼロ。だからこそ「しっかり読めて、評価できる」エンジニアを目指して、今JS/Reactを学び直し中です。
このnoteはその過程をそのまま発信していきます。たまに仕事で思ったことも発信していきます！
今回はReactの概要説明についてのスライドがまとまったのでこの記事を書いてみました。
AIで調べれば何でもわかる時代に、この記事にたどり着いていただき、ありがとうございます。
ただ検索して終わりではなく、できるだけかみ砕いて、自分がつまずいたところも含めて説明するように書いたので、ぜひ読んでみてください。
読んでいただいて、ここがわかりにくい、といった点があればコメントで教えていただけると嬉しいです。教材のブラッシュアップにも、私自身の勉強にもつながるので、気になることがあれば遠慮なくお願いします。
第1章 Reactとは
Reactって何?
一言でいうなら、Facebook(現Meta社)が開発したJavaScriptライブラリです。
主に2つの仕組みを持っています。
UIコンポーネント(画面の部品)を効率よく作るための仕組み
変更があった部分だけを自動で更新する仕組み(仮想DOM)
この「UIコンポーネント」と「仮想DOM」、Reactを理解する上でかなり重要な概念なので、この章でひとつずつ整理していきます。
UIコンポーネントとは?
一言でいうなら、画面のパーツを部品化して、組み合わせられるようにする仕組みです。
画面って、よく見るとヘッダー・フォーム・ボタン・フッターみたいな「パーツ」の組み合わせでできてますよね。
このパーツを部品として扱い、部品をグループ化することを
コンポーネント化と呼びます。
たとえば:
ヘッダー(コンポーネント)
フォーム(コンポーネント) / ボタン(コンポーネント)
フッター(コンポーネント)
こんな感じで、画面をパーツごとに分けて組み立てていくイメージです。
コンポーネント化のメリット
① 再利用が可能
1度コンポーネントを作れば、何度も使い回せます。プログラムをコピペしたり、A画面で作った部品をB画面でもそのまま使ったり、ということができるので効率が上がります。
② 1ヶ所直せば、すべて反映される
たとえば「ボタン」をコンポーネント化しておけば、ボタンのデザインを変えたいときは、その「ボタン」コンポーネントを編集するだけで、使われている全部のボタンのデザインが一括で変わります。管理がぐっと楽になります。
仮想DOM(ドム)とは
もうひとつの重要な仕組みが「仮想DOM」です。
一言でいうなら、変更があった部分だけを自動で更新する仕組みです。これのおかげで、画面の描画が速くなります。
DOMツリーの話
まず前提として、HTMLはタグごとに親子関係を持った「ツリー構造」になっています。
<html>
├─ <head>
│ └─ <title>
└─ <body>
└─ <header><main><footer>...
HTMLをこのツリー構造としてイメージしておくと、この後の話が理解しやすくなります。
仮想DOMの大まかな流れ
最初のHTMLをブラウザが読み込む
ブラウザがDOMツリーを作成する(画面に表示される)
Reactが、そのDOMのコピー(仮想DOM)をメモリ上に作成する
状態が変わる(データ更新など)
新しい仮想DOMをメモリ上に作成する
古い仮想DOM と 新しい仮想DOM を比較して、「差分」を特定する
差分だけを画面に反映して再描画する(これをレンダリングという)
この7番、「差分だけを反映する」というのが仮想DOMの一番重要なポイントです。
仮想DOMのメリット
変わった部分だけ更新するので、描画が速い
画面全体を再描画する必要がないので、画面がちらつかない
たとえば、商品名を「スニーカーA」から「スニーカーB」に変更したとします。ヘッダーやフッター、他の商品情報はそのままなのに、画面全体を作り直していたら無駄が多いですよね。仮想DOMは、変更前と変更後の仮想DOMを比較して「スニーカーBの部分だけ変わった」と特定し、実際のDOM(画面)もその部分だけを更新します。
まとめ
Reactは、UIコンポーネントと仮想DOMという2つの仕組みを持つJavaScriptライブラリ
UIコンポーネントは、画面のパーツを部品化して再利用しやすくする考え方
仮想DOMは、変更があった部分だけを自動で見つけて更新する仕組み
