React useStateを利用したいいねボタン

成果物

丸いアイコンをクリックすることで、アイコンの色とそれに対応した文字が出力されます

プログラム概要

• App.js:メインの処理を記述するプログラム
• index.js:AppコンポーネントをDOMに変換し、HTMLにレンダリングする
• Styles.css:デザイン

useState

stateはコンポーネントが内部で保持する状態のことで、画面上に表示されるデータなどのアプリケーションが保持している値を指します。stateが更新されると、stateを管理するコンポーネントが再描画されることにより画面上のUIや挙動が変更する。

今回の場合、stateの値が変化するとstateを管理しているAppコンポーネントが再描画される

関数コンポーネントではstateの管理をフックであるuseState()を利用している

レンダリング

Reactにおけるレンダリングとは、現在のpropsとstateをもとにコンポーネントがどのように画面上に表示されるか、変更前と変更後の仮想DOMを構築して変更差分を検出することで、実際にDOMに変更を加える必要があるかどうかを知るためのプロセス。
レンダリングは以下のタイミングで実行されます

• コンポーネントの初回レンダリング時
• コンポーネント内の状態（state）が変化したとき
• 親コンポーネントがレンダリングされたとき
• カスタムフックからコンポーネントが受け取っている変数が変化したとき

コード解説

index.js

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

App.js

// useStateをApp.js内で使用できるようにする
import React, { useState } from "react";

// styles.cssを適用する
import "./styles.css";

// 「export default function App(){}」で他のファイルでApp.jsを使用できるようにする
export default function App() {

  // 関数コンポーネントの一番上で宣言する
  // likedは現在の「いいね」の状態、setLikedはlikedの状態を更新するための関数
  // 初期値は「false」
  const [liked, setLiked] = useState(false);

  // ボタンが押された際に実行する
  // likedの値がtrueの場合、falseに変更する
  // likedの値がfalseの場合、trueに変更する
  const toggleLiked = () => setLiked(!liked);

  return (
    // Reactは最上位の階層に複数の要素を記述することができないため、<></>で囲む
    <>
      // HTML内にJavaScriptのコードを埋め込むためには{}で囲む
      <button
        // likedがtrueの場合、ボタンを赤色にする
        // likedがfalseの場合、ボタンを青色にする
        className={liked ? "btn red" : "btn blue"}

        // ボタンが押された場合、toggleLiked関数を実行する
        onClick={toggleLiked}
      ></button>

        // likedがtrueの場合、「いいね済み」を表示する
        // likedがfalseの場合、「いいね前」を表示する
      　<p>{liked ? "いいね済み" : "いいね前"}</p>
    </>
  );
}

styles.css

.btn {
  padding: 10px;
  border-radius: 50%;
  border: none;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}