Next.js入門３ 無記名関数 & イベントハンドラー

記事一覧

1. Next.js × Docker 最速環境構築
2. Next.js入門１ ページ追加
3. Next.js入門２ コンポーネント
4. Next.js入門３ 無記名関数 & イベントハンドラー
5. Next.js入門４ Hooks
6. Next.js入門５ Todoアプリ（タスク一覧）
7. Next.js入門６ Todoアプリ（タスク追加）
8. Next.js入門７ Todoアプリ（タスク詳細）
9. Next.js入門８ Todoアプリ（タスク編集, 削除）

無記名関数

無記名関数とは

名前が付けられていない関数

宣言型関数（通常）

function Func() {
  return "hello world";
}

無記名関数（通常）

// 無記名関数は代入して使用したり、直接使用する
() => {
  return "hello world";
}

// 使用例
const Func = () => { // Funcに代入
  return "hello world";
};

無記名関数（省略）

// 処理もしくは戻り値のどちらかが無い場合、省略できる
() => "hello world"
() => console.log("hello world")

イベントハンドラー

イベントハンドラーとは

ユーザーがWebページ上で行う操作に応じて実行される処理
（今回はよく使われるもの3つを紹介）

onClick

• page.tsx

// イベントハンドラーを使用する場合は、use clientを使用します。
"use client";

function Page() {
  return (
    <button
      className="w-fit p-3 rounded-xl border font-bold"
      // onClickはクリック時に実行される処理
      onClick={() => {
        alert("ボタンが押されました");
      }}
    >
      ボタン
    </button>
  );
}

export default Page;

ボタンを押すと、以下のようにアラートが出る。

onChange

• page.tsx

"use client";

function Page() {
  return (
    <input
      className="p-2 rounded-xl border"
      // onChangeは入力時に実行される処理
      onChange={(e) => {
        alert(e.target.value); // e.target.valueは入力された値
      }}
    />
  );
}

export default Page;

入力すると、以下のようにアラートが出る。

onSubmit

• page.tsx

"use client";

function Page() {
  return (
    <form
      // onSubmitは送信時に実行される処理
      onSubmit={() => {
        alert("送信しました");
      }}
    >
      <label htmlFor="name">名前: </label>
      <input className="p-1 rounded-xl border" name="name" />
      <button className="p-1 rounded-xl border">送信</button>
    </form>
  );
}

export default Page;

送信すると、以下のようにアラートが出る。