Reactを使えるようになろう！～Reactとは何か～

Web技術に触れてみよう！

はじめに

WebサイトやWebアプリケーションを作るには、HTMLやCSS、JavaScriptに触れる必要があります。
しかし、いちいちHTML/CSS/JavaScriptをそれぞれ始めていくと、正直時間がクソほどかかるので、

手っ取り早く実践的なコードがかけるよう、Reactというライブラリから触れていくことにします。
ここから、Next.jsというWeb開発フレームワークが使えるまでが目標となります。

Reactとは何か

さて、そのReactとは何なのか。

Reactというのは、

• Webサイトの基本構成を決めるHTMLのタグというもののまとまりをコンポーネントとして管理できる
• Webサイトの表示変更を高速化するため、仮想的なHTMLの木構造を内部に持ち、変更された差分だけを反映する高速な表示変更の仕組みがある
• Webサイトが持つ「状態」を管理する特別な関数がある

という特徴のあるライブラリになっています。

例えばどんな感じ？

仮に2列n行のカードを並べるレイアウトを作りたいとします。
このとき、カードのレイアウトはある程度のタグが組み合わされたもので構成することが決まっています。
表示するそれらのカードのタグをいちいち記述するのは非効率なので、そのカードを構成するタグの組み合わせを使いまわせると助かります。

ここで、その特定のタグの組み合わせをコンポーネントとすることによってタグの管理や、レイアウト作成が効率的に調整できるようになります。

また、カードとして扱う情報のソースをTwitterのように、あとから継ぎ足してローディングする方式をとる際、
取得するデータの情報は、状態として管理できます。そのため、その状態を管理する特別な関数を用いて、それらを容易に管理、制御することができるようになります。

また、それらの表示変更について、これまでのものだと、全体をいったん描画し直す必要がありました。
これを差分だけ変更表示できるようにしたことで効率的に変更できるようになりました。

これらが、Reactを使うときのイメージです。

次回予告

文章だけではわかりづらいと思うので、次はハンズオン形式をとって、
実際にコードを書いてもらいたいと思います！