Reactとは
これまでの画面の書きかた
JavaScript で画面を変えるときは、要素を取ってきて中身を書きかえる、という手順を1つずつ書いていました。
const box = document.getElementById("profile");
const title = document.createElement("h1");
title.textContent = "あおいのプロフィール";
box.appendChild(title);これは「どうやって画面を組み立てるか」の手順書です。手順が正しい順番で並んでいるかぎり動きますが、表示するものが増えるほど手順も増えます。名前を変えたい、作品を1件足したい、と思うたびに「どの要素を取ってきて、どこに足して、どこを消すか」を自分で考えることになります。この書きかたを 命令的 と呼びます。
React の書きかた
React では手順ではなく、できあがりの形を書きます。
export default function App() {
return <h1>あおいのプロフィール</h1>;
}書いてあるのは「h1 に あおいのプロフィール と出ている状態」だけです。DOM をどの順番で組み立てるかは React がやります。このように「どうやるか」ではなく「どうなっていてほしいか」を書くやりかたを 宣言的 UI と呼びます。
何がうれしいのか
うれしいところは大きく3つあります。
- 画面の完成形とコードの見た目がほぼ一致するので、読めば結果が想像できる
- データが変わったときの書きかえ手順を、自分で書かなくてよい
- 画面の一部を部品として切り出し、別の場所で使い回せる
3つ目が React の中心にある考えかたで、この部品のことを コンポーネント と呼びます。さきほど書いた App も、すでに1つのコンポーネントです。関数の形をしていて、返すのは画面の形です。
つまずきどころ
宣言的と聞くと「命令的な書きかたは間違いだった」と読めてしまいますが、そうではありません。React も内部では同じように DOM を操作しています。違うのは、その手順を人が書くか React が書くかだけです。
そのため React を使っているあいだは、document.getElementById で要素を取ってきて直接書きかえる、ということはしません。人と React の両方が同じ画面をいじると、どちらの結果が残るのか分からなくなります。画面を変えたいときは「返す形」のほうを変える、と覚えてください。
演習
このコースでは、プロフィールサイトを React で作り直していきます。まずは返す形を書きかえて、画面が変わることを確かめます。