Zenn
✅

ゼロから学ぶ React, Next.js⑤【React Foundations】Chapter7, 8

2024/05/24に公開
Next.js
React
tech

公式チュートリアルはこちら
https://nextjs.org/learn/react-foundations/updating-state
https://nextjs.org/learn/react-foundations/from-react-to-nextjs

【Chapter7】 State で対話性を追加する

React が state とイベントハンドラを使用して対話性を追加する方法を見てみましょう。

例として、HomePage コンポーネント内に "Like" ボタンを作成しましょう。まず、return() ステートメント内に button 要素を追加します。

index.html
function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
 
  return (
    <div>
      <Header title="Develop. Preview. Ship." />
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
+      <button>Like</button>
    </div>
  );
}

イベントのリッスン

クリックしたときにボタンが何かをするようにするには、onClick イベントを使用できます。

index.html
function HomePage() {
  // ...
  return (
    <div>
      {/* ... */}
+      <button onClick={}>Like</button>
    </div>
  );
}

React では、イベント名はキャメルケースです。onClick イベントは、ユーザーの操作に応答するために使用できる多くの可能性のあるイベントの 1 つです。例えば、入力フィールドには onChange を、フォームには onSubmit を使用できます。

イベントの処理

イベントがトリガーされるたびに、イベントを "処理" する関数を定義できます。return ステートメントの前に、handleClick() と呼ばれる関数を作成します。

index.html
function HomePage() {
  // ...
 
+  function handleClick() {
+    console.log("increment like count")
+  }
 
  return (
    <div>
      {/* ... */}
	  <button onClick={}>Like</button>
    </div>
     )
   }

そして、onClick イベントがトリガーされたときに handleClick 関数を呼び出すことができます。

index.html
function HomePage() {
  // 	...
  function handleClick() {
+    console.log('increment like count');
  }
 
  return (
    <div>
      {/* ... */}
      <button onClick={handleClick}>Like</button>
    </div>
  );
}

ブラウザでこれを実行してみてください。開発者ツールでログ出力が増加していることに注目してください。
以下のようにボタンを押した回数分ログに出力されています。
like

State とフック

React にはフックと呼ばれる一連の関数があります。フックを使用すると、コンポーネントに state などの追加のロジックを追加できます。state は、通常はユーザーの操作によってトリガーされる、時間の経過とともに変化する UI 内の任意の情報と考えることができます。

state

state を使用して、ユーザーが "Like" ボタンをクリックした回数を保存し、増やすことができます。実際、state を管理するために使用される React フックは useState() と呼ばれています。

useState() をプロジェクトに追加します。これは配列を返し、配列の分割を使用してコンポーネント内でそれらの配列の値にアクセスして使用できます。

index.html
function HomePage() {
  // ...
+  const [] = React.useState();
 
  // ...
}

配列の 1 番目の項目は state の値で、任意の名前を付けることができます。どのような値なのかを説明する名前を付けることをお勧めします。

index.html
function HomePage() {
  // ...
+  const [likes] = React.useState();
 
  // ...
}

配列の 2 番目の項目は、値を更新するための関数です。更新関数には任意の名前を付けることができますが、更新している state 変数の名前の前に set を付けるのが一般的です。

index.html
function HomePage() {
  // ...
+  const [likes, setLikes] = React.useState();
 
  // ...
}

また、likes state の初期値を設定することもできます。

index.html
function HomePage() {
  // ...
  //初期値に0を設定
+  const [likes, setLikes] = React.useState(0);
}

次に、コンポーネント内で state 変数を使用して、初期 state が機能していることを確認できます。

index.html
function HomePage() {
  // ...
+  const [likes, setLikes] = React.useState(0);
  // ...
 
  return (
    // ...
+    <button onClick={handleClick}>Like({likes})</button>
  );
}

最後に、HomePage コンポーネントで state 更新関数 setLikes を呼び出すことができます。以前に定義した handleClick() 関数の中に追加しましょう。

index.html
function HomePage() {
  // ...
  const [likes, setLikes] = React.useState(0);
 
  function handleClick() {
+    setLikes(likes + 1);
  }
 
  return (
    <div>
      {/* ... */}
      <button onClick={handleClick}>Likes ({likes})</button>
    </div>
  );
}

ボタンをクリックすると、handleClick 関数が呼び出され、現在のいいね数 + 1 の単一の引数で setLikes state 更新関数が呼び出されます。

state の管理

これは state の紹介に過ぎず、React アプリケーションでの state とデータフローの管理についてさらに学ぶことができます。詳細については、React ドキュメントの インタラクティビティの追加 と state の管理 のセクションを確認することをお勧めします。

追加のリソース

【Chapter 8】From React to Next.js

これまでは、Reactの基本的な使い方について見てきました。最終的なコードは以下のようになりました。ここから始める場合は、このコードをコードエディタのindex.htmlファイルに貼り付けてください。

index.html
<html>
  <body>
    <div id="app"></div>
    
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    
    <script type="text/jsx">
      const app = document.getElementById("app")
      
      function Header({ title }) {
        return <h1>{title ? title : "Default title"}</h1>
      }
      
      function HomePage() {
        const names = ["Ada Lovelace", "Grace Hopper", "Margaret Hamilton"]
        
        const [likes, setLikes] = React.useState(0)
        
        function handleClick() {
          setLikes(likes + 1)
        }
        
        return (
          <div>
            <Header title="Develop. Preview. Ship." />
            <ul>
              {names.map((name) => (
                <li key={name}>{name}</li>
              ))}
            </ul>
            
            <button onClick={handleClick}>Like ({likes})</button>
          </div>
        )
      }
      
      const root = ReactDOM.createRoot(app);
      root.render(<HomePage />);
    </script>
  </body>
</html>

前章では、Reactの3つの重要な概念であるコンポーネント、props、stateについて紹介しました。これらの基本をしっかり理解することで、Reactアプリケーションの構築を始めることができます。

Reactを学ぶ上で、学習の一番の方法は実際に構築することです。<script>とこれまで学んだ知識を使って、既存のウェブサイトに小さなコンポーネントを追加することで、徐々にReactを導入することができます。しかし、多くの開発者は、Reactが実現するユーザーとデベロッパーの体験が十分に価値があると感じ、フロントエンドアプリケーション全体をReactで書くことを選択しています。

ReactからNext.jsへ

ReactはUIの構築に優れていますが、そのUIを完全に機能するスケーラブルなアプリケーションに独立して構築するには、ある程度の作業が必要です。また、サーバーコンポーネントやクライアントコンポーネントなど、フレームワークを必要とする新しいReact機能もあります。嬉しいことに、Next.jsはセットアップや設定の多くを処理し、Reactアプリケーションを構築するための追加機能を提供してくれます。

次に、ReactからNext.jsへの移行例を示し、Next.jsの仕組みについて説明し、サーバーコンポーネントとクライアントコンポーネントの違いを紹介します。

次の章

https://zenn.dev/gunjo/articles/408959031adcbe

Discussion