React習得への道1

プログラミング,勉強

こんにちは！ジュンです！

今年から日々の勉強のアウトプットをしていきより成長できるようにしていきます！

まずはReactを習得すべく勉強していきます！

Reactとは

・Facebook（現在のMeta）が開発した、UI（ユーザーインターフェース）を構築するためのJavaScriptライブラリ。

・Webアプリやサイトの中で「表示の動きを管理する部分」に使われる。

・「フレームワーク」ではなく「ライブラリ」という位置づけ。

フレームワークとライブラリの違いとは

よく例えられるのが、車の設計である。

フレームワーク・・・エンジンやタイヤ、ナビ、ブレーキなどの必要な部品が用意されており、自分が必要な時に必要な部品を選んで、好きなタイミングで使える。

ライブラリ・・・車の骨組みや設計図が決まっており、「エンジンはここ」「タイヤはここ」など配置のルールが決まっているが、その分設計ミスがなく誰でも同じようなものが作れる。失敗しにくい。

Reactの特徴

・コンポーネント思考である。

・仮想DOMを使っている。

・JSXで開発ができる。

コンポーネント思考とは

ページ内の構成を再利用可能な部品として分けて考え、それらを組み合わせることで一つのページとして作成する考え方のこと。

例えば・・・

Webページを

・ヘッダー

・ボタン

・テキスト

・ボタン

のように分けて考えて、これらをそれぞれ呼び出し組み合わせることで、部品の集合として設計する。

同じ部品を使う際に何度も同じコードを書く必要がなく、修正に関してももともとの部品を修正すると、その部品を使っている箇所が全て修正されるため、修正が楽になる。

仮想DOMとは

ブラウザのDOMを操作するのではなくReactが管理する仮のDOMを使って画面を更新する仕組みのこと。

そもそもDOM（Document Object Model）とは

HTMLをブラウザ側が解析して作る親子関係を持ったツリー構造のデータ。JavaScriptで操作できるようにする仕組み。

<body><div><h1>タイトル</h1><ul><li></li></ul></div></body>

というコードがあったとき、ツリー構造を書くと下記になる。

body
└─ div
　　├─ h1
　　└─ ul
　　　└─ li

という構造になる。

仮想DOMのメリットは

仮想DOMが無かった場合、ボタンをクリックするなどのアクションがあった場合に、DOMを直接変更すると画面全体の再描画をする必要がある。

仮想DOMを使うと、その再描画の際に、変更があった箇所のみを変更するため、効率的な画面描画ができるようになり、速度が上がったりバグが減ったりする利点がある。

JSX（JavaScriptXML）とは

JavaScriptの中にHTMLのような記述ができる構文。

→後日詳細を記載予定。

次回からは、Reactを実際に使いながら勉強したことをアウトプットしていきます！

<
>

© 2024 Jun&Hana'sSite