Reactとはどんなものなのか軽くまとめる
Reactを触ったことなかったので、調べてみた内容を軽くまとめてみました。
初心者がまとめているため、間違っている可能性が十分あります。
ここ違っているよ！っていう箇所を見つけたら教えていただけるとありがたいです！
Reactとは
ReactとはFacebook社が開発したJavaScriptライブラリで、ユーザーインターフェースを構築するために用いられます。
Reactの特徴として、以下の点が挙げられます。
- 宣言的ビュー
Reactは宣言的ビューのアプローチを取っており、実装者が何をしたいかを記述するだけで内部の実装はReactが行なってくれます。以下はコード例です。
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
この関数はnameプロパティを受け取り値に応じたh1要素を返します。
こう記述するだけで、Reactはnameプロパティを監視し、変更があった際にはh1要素を再描画します。
重要なのは、ここではこんなh１要素が欲しいということを宣言的に記述しているだけだということです。
プロパティに変更があったときに再描画するといった処理は記述しなくてもReactが勝手にやってくれます。
-
コンポーネントベース
ReactではUIを独立した再利用可能なパーツ(コンポーネント)として管理します。
このコンポーネントを組み合わせることによって、ページ全体を表現します。
コンポーネントは自己完結しており、それ単体で完全な機能を持っているため、メンテナンスの際にも他のコンポーネントに影響を与えることなくメンテナンスを行うことができます。
また、コンポーネントを再利用することによってコードの重複箇所を減らすこともできます。 -
バーチャルDOM
DOMの操作はコストが高く、頻繁に更新されるページや大規模なページではパフォーマンスのボトルネックになりがちです。
Reactではそれを解消するためにバーチャルDOMという仕組みが採用されています。
バーチャルDOMとはメモリ上に構成された軽量な仮想DOMで、コンポーネントから生成されます。
ユーザーの入力やデータの更新によってUIに変更があると、Reactは新しいバーチャルDOMを生成し、以前のバーチャルDOMと比較します。
そして、変更があった箇所を特定すると実際のDOMの該当箇所のみを更新します。
こうすることで、DOMの操作を最低限に抑え、パフォーマンスを向上させることができます。 -
JSX
JSXはHTMLと非常によく似ていますが、実際はJavaScriptの表現です。
ReactではJSXを用いてUIコンポーネントを表現します。
JSXを用いることでHTMLを記述するのとは違い、動的に変化するコンポーネントを表現することができます。
Reactについての初心者の触感
Reactは従来のHTML開発とは全く別のアプローチを取られているのが非常に面白いと感じました。
コンポーネントベースの記述は実にプログラミング的で、書いていて気持ちいいんだろうなといった印象です。
Discussion