始めに
現在Reactの学習をしているのですが、「そもそもReactって何？」をしっかり頭に入れておこう！と思い、備忘録的に記事にしました。
同じような初学者の方の参考になればうれしいです！
結論！
Reactとはズバリ…
コンポーネントに着目した「JavaScriptのライブラリ」！
コンポーネントとは
コンポーネントとは、画面の要素のことを指します。
Webページは「ボタン」「入力欄」「サイドバー」など色々な部品が組み合わさってできていますよね。
これらがまさにコンポーネントなわけです。
Reactでは、画面を構成する要素＝コンポーネントに着目し、それらを組み合わせることで画面を作っています。
では、コンポーネントを組み合わせて使うことでどんなメリットがあるのでしょうか？
コンポーネント化するメリット
再利用しやすい！
以下のコードは、sizeプロパティの値が違うだけです。
もしこれがもっとたくさんあったら…同じ要素を何度も書くのは意外と面倒です…。
<input type="text" size="5" required placeholder="入力してください" />
<input type="text" size="10" required placeholder="入力してください" />しかし、input要素をコンポーネント化すると、基本の形を使いまわしつつ、個別設定もできちゃいます！
/* Inputのコンポーネント */
export function Input({ size, required = true, placeholder = "入力してください" }) {
return (
<>
<input type="text" size={size} required={required} placeholder={placeholder} />
</>
)
}
/* sizeだけ変えて使いまわせる！ */
<Input size={5} />
<Input size={10} />可読性が上がる！
inputタグとコンポーネント化したInputのコードを比較します。
コンポーネント化したコードのほうがスッキリして見やすくなっていますね！
<input type="text" size="5" required placeholder="入力してください" />
<Input size={10} />1つ1つのコードが長くなりすぎないので、可読性も上がります！
保守性が上がる！
仕様変更があっても、コンポーネントを修正すれば全体に反映されます！
修正箇所がグッと減るので、修正漏れや修正によるバグを減らすことができますね。
宣言的UIとは
一言で言うと、『完成形を「こんな見た目にします！」と宣言的に記述すること』だそうです。
カウンターアプリで考えてみます。
ボタンを押すと表示される数が1ずつ増えるアプリです。
宣言的ではないUI
ボタンを押してカウントアップしながら表示させるためには以下のような手順を踏みました。
（もしかしたらもっと簡単にできるかもしれませんが…💦）
- 数を1増やす
- 表示するHTML要素を作成
- すでに表示されている場合はその要素を削除
- 2で作った要素を実際に追加
コードはこんな感じです。↓
宣言的ではないUIの書き方だと、「どんな手順を踏めば実装できるのか？」を考えて、その手順通りに記述しています。
そのため、「よく読めば理解はできるけど、記述が多くなればなるほど読みづらいし理解にも時間がかかりそう…」と感じました。
私がJavaScriptに苦手意識があったのは、この「わかりづらさ」が原因だと改めて感じました…💦
宣言的UI
Reactの機能を使って宣言的UIで記述してみました。
確かに、宣言的UIのほうがパッと見たときに「こんな画面になるのかな？」がイメージしやすいです！
処理の記述は各段に減り、何をしているのかもわかりやすくなりました。
また、HTML部分の記述量はたいして変わりありませんが、こちらの方が「numの部分に数値が表示されるんだな」と推測しやすくなっています。
こちらの記事が大変わかりやすく、大変学習の参考になりました！
あきひろ様 [宣言的UIが何か分からなかったので調べてみた]
https://zenn.dev/arei/articles/f59e263aa3edf2
仮想DOMとは
一言で言うと、『画面全体ではなく、変更点だけ描画しなおせる効率的な概念』だそうです。
ざっくり要点をまとめるとこんな感じ…。
そもそもDOMって？
DOMとは、HTMLを操作するための窓口のことです。
ブラウザはサーバーから受け取ったHTMLの情報を解析し、DOMに変換します。
そしてそのDOMを使ってブラウザを表示させるようです。
DOMは階層構造になっていて、先ほどのカウンターアプリだとこんな感じになります。
カウンターアプリでは右下のdivに対してJavaScriptで要素を追加しました。
このようにJavaScriptなどを使うことでDOMに対して操作ができ、画面の見た目を変更することができます。
ただDOＭ操作をすると、HTMLの解析をはじめたくさんのステップを経ないと画面を描画できないので、頻繁にDOM操作したり複雑なDOM操作をすると表示に時間がかかることがあるようです。
じゃあ仮想DOMって？
メモリ上に記録されているバーチャルなDOMを実際のDOMと同期させる概念のこと…。
なんだか難しいですが、「実際のDOM操作を効率化するのに便利な概念！」と考えるとイメージがしやすかったです。
この流れのおかげで変更がない部分は再描画せず済むので効率的なんですね！
こちらの記事が大変わかりやすく、大変学習の参考になりました！
aki様 [100秒で理解する仮想DOM]
https://zenn.dev/ak/articles/00616eb99523c2
まとめ
読んでいただきありがとうございました！
最後にまとめです🌟
まだまだ学習途中なので、間違っている部分がありましたら
教えていただけると嬉しいです！🙏
コメント