Forem: hirooka kazuya

dev diary 20251124

hirooka kazuya — Tue, 25 Nov 2025 00:07:02 +0000

frustration to voice talking

i sometimes voice talk with AI chat, feel like, wanna make conversation with AI more smooth. now there is frustration with it.

bad turn taking process
not promote and built conversation but just answer to question
just repeat same contents to my opinion

background

the voice talking is more natural and stress free communication for human, so far there are several service like siri, areksa and so on. but they are not mutual conversation but just one-direction process, request and answer something.
but if we use current AI technology, we can build more natural and powerful tool specialized for conversation, that realize same experiences of human-to-human conversation.

dev diary 20251123

hirooka kazuya — Mon, 24 Nov 2025 00:10:57 +0000

organizing app UI

i organized the UI of application and then built menu button and slide bar to show user name, existing table and sign out all in one.

the policy of UI

i have to make policy of UI. button click, input text, font, color, and so on. if there is already some general policy in this field, i'll check it.

read and understanding code

i built almost the all coding with ai, so don't understand detail, i have to read and comprehend them. in order to make countermeasure at trouble shooting, or expand some function on them.

basement for future application

i regard this front and backend code as basement and i wanna develop new application on it. this has basic CRUD function, list page and detail edit page, sidebar for menu.

dev diary 20251122

hirooka kazuya — Sun, 23 Nov 2025 02:53:19 +0000

getting user information after sign in.

with AWS amplify gen2 and next.js, how to get user information after sign in ? in previous version of amplify gen1, Authenticator's user object has all the user information and can be get ,for example, by 'user.attribute.nickname'. but now actually i can't get with this user object.

user information from 'fetchUserAttributes'

instead, i use 'fetchUserAttributes' to get user profile. the code is following;

import { fetchUserAttributes } from 'aws-amplify/auth';

interface UserAttributes {
  [key: string]: string;
}

const [userAttributes, setUserAttributes] = useState<UserAttributes | null>(null);

const getUserAttributes = useCallback(async () => {
  try {
    const attributes = await fetchUserAttributes();
    setUserAttributes(attributes as UserAttributes); 
  } catch (error) {
    console.error('Error fetching user attributes:', error);
    setUserAttributes(null);
  }
}, []);

this userAttributes has the information. and we get it with 'userAttributes.nickname' by each property.

div diary 20251121

hirooka kazuya — Sat, 22 Nov 2025 00:30:36 +0000

i studied the auth/resouce.ts and the corresponding frontend.

// app/page.tsx

'use client'
import { Authenticator } from '@aws-amplify/ui-react';
// 💡 以下は、ご自身のプロジェクト構成に合わせてインポートパスを確認してください
import NotesList from '../app/dashboard/page'; 
import UserProfileEditor from './setting/userProfileEditor';

// 💡 stylesのインポートも、ご自身のファイルパスに合わせて確認してください
import styles from './app.module.css';

export default function DashboardPage() {
  return (
    <Authenticator>
      {({ signOut, user }) => {

        // --- ログイン中のユーザー情報をコンソールに出力 ---
        console.log("--- ログイン中の User オブジェクト ---");
        // この user オブジェクトに、ユーザー情報や属性が含まれています
        console.log(user); 
        console.log("---------------------------------------");

        // --- 表示名の取得 ---
        // user?.attributes?.nickname を優先的に使用し、存在しない場合は 'Guest' を表示名とする
        // user?.username は sub の値（UUID）になるため、ここでは nickname を使用します
        const displayNickname = user?.attributes?.nickname ?? 'Guest';

        return (
          <main>
            {/* <h1>Hello, {user?.username}!</h1> をニックネーム表示に変更 */}
            <h1>Hello, {displayNickname}!</h1>

            <UserProfileEditor user={user} />

            <NotesList /> {/* 👈 NotesListコンポーネントを配置 */}

            <button 
              className={styles.signOutButton} 
              onClick={signOut}
            >
              sign out
            </button>
          </main>
        );
      }}
    </Authenticator>
  );
}

by this console.log, the result is following,

{
    "username": "******",
    "userId": "******",
    "signInDetails": {
        "loginId": "***mail.adress",
        "authFlowType": "USER_SRP_AUTH"
    }
}

this object don't have the "attribute", it should be. now i'm confirming. i guess need to use import { fetchUserAttributes } from 'aws-amplify/auth'; current spec.

dev diary 20251120

hirooka kazuya — Fri, 21 Nov 2025 00:16:45 +0000

today i didn't sleep well, so my brain doesn't work. at least once a week there are such a days, stand with some music, soft drink, ect...

setting user name in app

on site display, there is the "hello ! ****" this user name is something kind of hash code because i don't set the username in this app. so i study how to set the username in this app,
in /amplify/data/resouce.ts

import { defineAuth, secret } from "@aws-amplify/backend";

export const auth = defineAuth({
  loginWith: {
    email: true,
  },
  userAttributes: {
    nickname: {
      required: true, 
      mutable: true, 
    },

    familyName: { 
      required: false, 
      mutable: true,
    },
    givenName: { 
      required: false, 
      mutable: true,
    },
  },
});

and in app/setting/userProfileEditor.tsx

// app/setting/UserProfileEditor.tsx
'use client'
import React, { useState } from 'react';
import { updateUserAttributes } from 'aws-amplify/auth';

// 実際のAmplifyの型に合わせて詳細に定義しても良いですが、
// ここでは必要な構造だけを持つシンプルなインターフェースを定義します。
interface UserAttributes {
  nickname?: string;
  // 他に必要な属性（familyName, givenNameなど）があればここに追加
  [key: string]: any; // その他の属性を許容
}

interface UserProps {
  // Amplifyのユーザーオブジェクトはより複雑ですが、
  // attributesとusernameがあれば表示と更新には十分です。
  attributes?: UserAttributes;
  username?: string;
}

const UserProfileEditor = ({ user }: { user: UserProps }) => {
  // ユーザーの現在のニックネームを取得（未設定なら空文字）
  // 属性名はバックエンドの定義と同じ「nickname」を使用
  const initialNickname = user?.attributes?.nickname || '';
  const [nickname, setNickname] = useState(initialNickname);
  const [message, setMessage] = useState('');

// src/components/UserProfileEditor.tsx (handleUpdate 関数内)

const handleUpdate = async () => {
  setMessage('');
  try {
    // 戻り値のオブジェクト全体を受け取る
    const output = await updateUserAttributes({
      userAttributes: {
        nickname: nickname,
      },
    });

    // 💡 修正点 1: nextStep の有無と、その中のプロパティを確認する
    if (output.isUpdated) {
      // isUpdated プロパティが true の場合、更新が完了したことを示します
      setMessage('ニックネームが更新されました！');

    } else if (output.nextStep && output.nextStep.updateAttributeStep === 'CONFIRM_ATTRIBUTE_WITH_CODE') {
      // 💡 修正点 2: output.nextStep が存在し、
      // その中の updateAttributeStep プロパティを確認します

      // 確認コードが必要な場合の処理を記述
      setMessage('更新には確認コードの入力が必要です。'); 
      // 例: 確認コード入力フォームを表示する処理など

    } else {
       // その他の状態 (基本的に属性の更新では発生しにくい)
       setMessage('更新処理は完了しましたが、状態が確認できませんでした。');
    }

  } catch (error) {
    console.error('属性の更新に失敗しました:', error);
    // TypeScript環境下でエラーメッセージを使用する際、errorはunknown型になることがあるため、
    // 明示的にError型として扱うか、シンプルにメッセージを表示します。
    setMessage(`更新失敗: ${error instanceof Error ? error.message : '不明なエラー'}`);
  }
};

  return (
    <div>
      <h2>プロフィール編集</h2>
      <p>現在のニックネーム: {initialNickname || '未設定'}</p>
      <input
        type="text"
        value={nickname}
        onChange={(e) => setNickname(e.target.value)}
        placeholder="新しいニックネーム"
      />
      <button onClick={handleUpdate}>ニックネームを保存</button>
      {message && <p>{message}</p>}
    </div>
  );
};

export default UserProfileEditor;

but now error occur at output.nextStep.updateAttributeStep

dev diary 20251119

hirooka kazuya — Thu, 20 Nov 2025 00:27:50 +0000

ideation for web app

i generated the ideas for web app with Miro stickies. the Several ideas are written.

notes to add revision with red color.
notes without thinking integration
automatically data analysis, multi step thinking with AI

format for CRUD

i already built the pipe line to develop full stack app with aws amplify. and as the next step, i wanna prepare basic CRUD function as template for general usage. and i made it.
[https://github.com/hirookakazuya/20251119_app]

make the development folder clear

each dev folder have storage of 1.2GB and the most of it is in node_modules folder. as chatAI information, this node_module folder can be deleted and restored again with install npm when i use it. i didn't try it.

cursor or claude code ?

now i' using the cursor. but the limitation of monthly use come. i study which tool i should select for code assistant. for basic use for dev, free ai chat bot is enough like chatGPT, Gemini. in these tool, i don't care about the limitation.

dev diary 20251118

hirooka kazuya — Wed, 19 Nov 2025 00:41:37 +0000

ideation for web application

i completed preparation of development too, then started to generate idea of application. with Miro. but i don't take so long time to do it. the plan is just plan. i wanna build some concrete things without consider detail.

getting new insight from AI

i use chatGPT, Gemini, Copilot, Claude or Perplexity everyday. but i guess there are more efficient way of use. especially, now i just input one question or reflection and get answer, but with AI agent, set multi steps, might get more deep reflection.

the status of the AI know everything i know

if ai know everything about me, have all the information of myself, ai can think and judge same as me. ai hear everything i heard, read everything i read, have all the set of my input and output and work as RAG.

AI reflect like human

human encounter some issues, think and try to find how to shoot, but can't solve quickly, the day end, sleep, then next morning, sometimes the problem is solved, some solutions appear automatically. in the night, in brain, the issue is cultivated. such process can work in AI. input question and get answer, check, abstract task from it, and rethink, over and over.

production deploy completed !

hirooka kazuya — Tue, 18 Nov 2025 00:24:52 +0000

AWS Amplify Gen2 deployment

i tried to production deploy test code with amplify. I have already check the developing application work in sandbox. it' OK.

in amplify gen2, the deploy of production is executed not by command prompt like the other process, but with aws console.

after opening the aws amplify in aws console, it's easy to deploy along with the guide. the local application link to amplify through github repository.

trouble shooting

i tried production deployment like above, the deployment failed because of variant type of "moduleResolution". then my countermeasure is;
the tsconfig.ts in project root folder

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    //"module": "esnext",
    "module": "NodeNext", // 変更
    "moduleResolution": "NodeNext", // 変更

    // ----------------------------------------------------------
    // 💡 修正 1: .ts拡張子のインポートを許可する設定を追加
    "allowImportingTsExtensions": true,

    // 💡 修正 2: Next.js + Amplify Gen 2で推奨される設定に調整
    "moduleResolution": "NodeNext", 
    // ----------------------------------------------------------

    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",

the original setting is default of next.js project. so in future at every time i build develop folder, it's necessary.

aws amplify gen2 pipe line completed !!

in this process, i completed the product pipeline. if i update the application, i change the local file and then;
git add . staging upload
git commit -m "changing description" commit to local git
git push push to remote repository

i can reflect the local change to product just with this !!

prepare to full stack app dev

i have already prepared the full stack app dev. i keep this dev folder as template for the next.
and now i have to focus on generate idea of my app.

dev diary 20251116

hirooka kazuya — Mon, 17 Nov 2025 00:32:43 +0000

I can't access the AWS console right now, so I'll go ahead and write yesterday's development log. Since it was a holiday and I had time, I think I made relatively good progress. I believe I can now set up the AWS Amplify Gen 2 sandbox with almost no issues (I gave up on real-time updates, though).

Next, I proceeded with implementing the production environment deployment and subsequent updates, but I hit an error and stopped. I felt that if the sandbox works but the production deployment fails, then the sandbox is pointless, but I have to deal with it. I ended the day yesterday after repeating the build process several times at that point.

Once this production deployment is complete, I should just be able to copy and paste the code and proceed with operations. Since Wednesday is a public holiday this week, I'll be able to dedicate time to this task then.

In parallel with this work, I also need to spend time brainstorming application ideas. I'll create a workflow where I build and brainstorm simultaneously.

summary of git management

hirooka kazuya — Sun, 16 Nov 2025 04:06:52 +0000

initial build of git repository

local git

cd (project root directory)

git init

git add .

git commit -m "Initial commit"

git hub on web

making github repository on my account

copying the URL of the repository

git remote add origin (URL)

git remote -v

git push -u origin main

update of existing git repository

git status

git add .

git commit -m "コミットメッセージ"

git push

Roadmap to Full-Stack Application Completion with AWS amplify gen2 and Next.js

hirooka kazuya — Sun, 16 Nov 2025 03:40:30 +0000

🗺️ ロードマップ: DynamoDB前提 (Amplify Gen 2 & Next.js)

アプリケーション開発は、主に バックエンド定義・デプロイ、フロントエンド開発、デプロイ・運用 の3つのフェーズで進行します。

🌟 Phase 1: バックエンド定義とデプロイ (Amplify Gen 2)

このフェーズでは、アプリケーションの核となるクラウドインフラストラクチャをコードとして定義し、AWS上に構築します。

詳細ステップ

1. データスキーマの定義 (DynamoDB/AppSync)

amplify/data/resource.ts で、GraphQLスキーマとしてデータモデル（例: Todo）を定義します。
a.model() を使用してスキーマを記述するだけで、AWSの DynamoDB テーブル と AppSync API が自動的に生成されます。
認証ルール（例: allow.publicApiKey() や allow.owner()）もこのファイルで定義します。

2. 認証リソースのコード定義 (Cognito)

amplify/auth/resource.ts などのファイルで、ユーザー登録、ログイン、パスワード回復などの 認証機能 (Cognito) をコードで定義します（例: Eメールログインを有効化）。

3. ローカル環境の検証 (Sandbox)

npx ampx sandbox を実行し、開発リソースをAWSアカウント内にデプロイします。
デプロイ後、認証機能と DynamoDB へのデータアクセス（CRUD操作）が正しく機能するか検証します。 * ****

4. 設定ファイルの取得

サンドボックス実行によって生成される amplify_outputs.json ファイルを取得します。このファイルには、フロントエンドがバックエンドに接続するために必要な情報（API URL、Cognito IDなど）が含まれます。

💻 Phase 2: フロントエンド開発 (Next.js / aws-amplify)

このフェーズでは、ユーザーインターフェース (UI) とロジックを実装し、バックエンドと連携させます。

詳細ステップ

1. Amplify 設定の初期化

Next.js アプリケーションのエントリーポイント (app/providers.tsxなど) で、aws-amplify ライブラリと手順4で取得した amplify_outputs.json を使用して初期設定を行います。

2. 認証 UI の統合

@aws-amplify/ui-react ライブラリを使用して、サインアップ/ログイン画面を実装し、バックエンドの Cognito 認証機能と連携させます。

3. データアクセスレイヤーの実装

Amplify Data Client (aws-amplify/data から生成) を使用し、Next.jsのコンポーネント内で GraphQL を介して DynamoDB に直接アクセスする機能（データの表示、登録、更新など）を実装します。
- ※RDSの場合と異なり、Lambdaを経由せず、直接データアクセスが可能です。

4. UI/UX の完成

画面レイアウト、デザイン、ナビゲーションを含む、すべてのユーザー向け機能（CRUD操作）を完成させます。

🚀 Phase 3: デプロイと本番運用 (Amplify Hosting)

このフェーズでは、アプリケーションをグローバルに公開し、継続的な改善を行うための環境を整備します。

詳細ステップ

1. Amplify Hosting の設定

プロジェクトを GitHub などのバージョン管理システムにプッシュします。
AWSコンソールまたは npx ampx pipeline コマンドを使用して Amplify Hosting を設定し、リポジトリに連携させます。

2. CI/CD パイプラインの実行

Git Pushをトリガーとして、Amplifyが自動的に以下の処理を行うパイプラインを開始します。
- バックエンドデプロイ: Amplify Gen 2 (CDK) 定義に基づき、本番用の AWSリソース（DynamoDB, AppSync, Cognito）をデプロイします。
- Next.js ビルド: フロントエンドコードをビルドします。
- ホスティング: ビルドされたアプリをデプロイします。

3. ドメインと SSL の設定

アプリケーションにカスタムドメインを設定し、HTTPS接続（SSL証明書）を有効化します。

項目	RDS (変更前)	DynamoDB (変更後)
データベース	PostgreSQL / MySQL	DynamoDB (NoSQL)
データアクセス層	Lambda (VPC内) 経由	AppSync (GraphQL) 経由
VPC設定	必須	不要
ビジネスロジック	Lambda (複雑)	AppSync Resolver (シンプル) または Lambda (必要な場合のみ)
開発の複雑性	高	低

review of preparing dev project of aws amplify gen2 and next.js

hirooka kazuya — Sun, 16 Nov 2025 02:29:51 +0000

in these days, i prepare the developing envioromnent with aws amplify gen2 and next.js. this is the summary.

install AWS CLI on [https://awscli.amazonaws.com/AWSCLIV2.msi]

Set up authentication credentials

aws configure

AWS Access Key ID: あなたのアクセスキー
AWS Secret Access Key: あなたのシークレットキ
Default region name: 例 ap-northeast-1 (東京)
Default output format: json (Enter でOK)

confirm AWS CLI

aws --version

Install node.js on https://nodejs.org/ja/download

Move to current directory

cd (current directory)

Recreate npm Project / Project Setup

npx create-next-app@latest

Install Amplify Backend and Frontend SDKs in the Next.js Project Root Directory

npm install @aws-amplify/backend

npm install @aws-amplify/data-schema

npm install aws-amplify

npm install @aws-amplify/ui-react

npm install @aws-amplify/backend-cli --save-dev

Create Directories and Files

mkdir amplify

mkdir amplify\data

mkdir amplify\auth

type nul > amplify\backend.ts

type nul > amplify\data\resource.ts

type nul > amplify\auth\resource.ts

Open the created amplify/backend.ts file and add the following content:

// amplify/backend.ts
import { defineBackend } from '@aws-amplify/backend';
// 認証リソースをインポート
// aws公式サイトを見ても.tsがついていないが、npx ampx sandobxのときにtsがついていないとエラーが出る
import { auth } from './auth/resource.ts'; 
import { data } from './data/resource.ts'; 

// The Amplify backend definition.
defineBackend({
  auth, // ここにインポートした 'auth' を追加
  data, // ここにインポートした 'data' を追加
});

Open the created amplify/data/resource.ts file and add the following content:

// @aws-amplify/backend から必要なモジュールをインポートします。
// a: スキーマ定義のためのヘルパー (例: a.model, a.string)
// defineData: データリソース全体を定義するための関数
// type ClientSchema: フロントエンドでの型付けに使用されるユーティリティ型

import { a, defineData, type ClientSchema } from '@aws-amplify/backend';

// データのスキーマを定義します。これはGraphQLスキーマの定義に相当します。
// a.modelと定義するだけで、query(取得)、mutation(更新)も自動で定義。
const schema = a.schema({
  // 'Todo' という名前のデータモデルを定義します。
  // これは AWS DynamoDB のテーブルに対応します。
  Todo: a.model({
    // 'content' というフィールドを定義します。型は文字列 (String) です。
    content: a.string(),


    // 'isDone' というフィールドを定義します。型は真偽値 (Boolean) です。
    isDone: a.boolean()
  })
    // このモデルに対するアクセス許可（認可ルール）を定義します。
    // ここでは、パブリックな API キー (publicApiKey) を持つユーザー（クライアント）にアクセスを許可しています。
    //.authorization(allow => [allow.publicApiKey()])
    .authorization(allow => [
      allow.publicApiKey(), 
      // 修正後のコード: 認証済みユーザーなら誰でもOK (操作限定はできない)
      allow.authenticated() 
      // もしくは
      // allow.private()
    ])

});

// Used for code completion / highlighting when making requests from frontend
// フロントエンド (Amplify クライアント) でリクエストを行う際、
// スキーマの型補完やハイライト表示に使用するためにエクスポートされる型です。
export type Schema = ClientSchema<typeof schema>;

// defines the data resource to be deployed
// デプロイされるデータリソース（AppSync APIとDynamoDBテーブルなど）を定義し、設定します。
export const data = defineData({
  // 上で定義した GraphQL スキーマを設定します。
  schema,
  // 認証モードを設定します。
  authorizationModes: {
    // デフォルトの認証モードとして 'apiKey' を設定します。
    defaultAuthorizationMode: 'apiKey',
    // API Key 認証モードの詳細設定です。
    apiKeyAuthorizationMode: {
      // API キーの有効期限を30日に設定します。
      expiresInDays: 30
    }
  }
});

Open the created amplify/auth/resource.ts file and add the following content:

// amplify/auth/resource.ts
import { defineAuth, secret } from "@aws-amplify/backend";

/**
 * The Amplify Auth resource definition.
 */
export const auth = defineAuth({
  loginWith: {
    // ユーザー名とパスワードによるログインを有効化
    email: true,
  },
});

Create Directories and Files

type nul > app\providers.tsx

type nul > app\useAmplifyClient.ts

type nul > components\TodoList.tsx

Open the app/layout.tsx file and add the following content:

// app/layout.tsx

// ★ "use client" はここに書かない（Server Componentのままにする）

import './globals.css' // グローバルCSSのインポート

// 新しく作成した Client Component ラッパーをインポート
import Providers from '../app/providers' 

//ここは、ログイン前の画面のroot

export default function RootLayout({
  children,
}: {
  children: React.ReactNode // ★ childrenを受け取る形式が必須
}) {
  return (
    <html lang="ja">
      <body>
        {/* Providers (Client Component) でラップ */}
        <Providers>{children}</Providers> 
      </body>
    </html>
  )
}

Open the app/page.tsx file and add the following content:

// app/page.tsx

'use client'
import { Authenticator } from '@aws-amplify/ui-react';
import TodoList from '../components/TodoList';// TodoListコンポーネントを切り出す

export default function DashboardPage() {
  return (
    <Authenticator>
      {({ signOut, user }) => (
        <main>
          <h1>Hello, {user?.username}!</h1>
          <TodoList /> {/* 👈 Todoリストコンポーネントを配置 */}
          <button onClick={signOut}>サインアウト</button>
        </main>
      )}
    </Authenticator>
  );
}

Open the app/providers.tsx file and add the following content:

// app/providers.tsx

'use client' // ★ これをファイルの先頭に記述！

import '@aws-amplify/ui-react/styles.css'
import { Amplify } from 'aws-amplify'
import outputs from '../amplify_outputs.json'


//ここで、Providersコンポーネントを定義している
//React.ReactNodeとは何だろうか、上記のimoprtのどれかに要素が入っているのだろうが

// ここで設定を一回だけ実行する
// SSR環境での二重実行を防ぐための簡易チェック

    Amplify.configure(outputs)


export default function Providers({ children }: { children: React.ReactNode }) {
  // ここでContext Providerなどを提供してもOK
  return <>{children}</>
}

Open the app/useAmplifyClient.ts file and add the following content:

// src/hooks/useAmplifyClient.ts (例)
'use client'

import { useState, useEffect } from 'react';
import { generateClient, Client } from 'aws-amplify/data';
import type { Schema } from '../amplify/data/resource'; // 👈 パスに注意

// クライアントを生成し、その状態を返すカスタムフック
export function useAmplifyClient() {
  // clientの状態を管理し、初期値はnullにする
  const [client, setClient] = useState<Client<Schema> | null>(null);

  // コンポーネントがマウントされたら、クライアントを生成する
  useEffect(() => {
    // Amplifyの設定が Providers.tsx で完了していることを期待
    setClient(generateClient<Schema>());
  }, []);

  return client; // client (または null) を返す
}

Open the components/TodoList.tsx file and add the following content:

// app/components/TodoList.tsx (または page.tsx)

'use client'

import { useState, useEffect } from "react";
// スキーマはフック内で使用されるため、ここでは不要（フックが内部でインポートしている）
// import type { Schema } from "../../amplify/data/resource"; 
// import { generateClient, Client } from "aws-amplify/data"; 

// 🚨 【重要】Todoリストの処理に必要なSchema型だけはインポートし直す
import type { Schema } from "@/amplify/data/resource"; 
import { useAmplifyClient } from '@/app/useAmplifyClient'; // 👈 カスタムフックをインポート

export default function TodoList() {
    // 🎉 クライアントの初期化ロジックをフックに任せる
    // clientにはバックエンドの全情報が入っている
    // しかし、clientは読み込み時にnull ->値に変わるが、
    // createのタイミングなどそれ以外では不変
    const client = useAmplifyClient();

    // todosがメモの配列、それをsetTodos関数で更新する
    // ()内は初期値で、今回は空配列[]
    // <>内はtypescriptの型定義

    // Schemaはamplify/data/resource.tsで定義したもの
    // プロパティでTodo,typeをたどっている
    // ただし、あくまでtodosのリストなので最後に[]をつけている
    // でも結局は配列のどの要素も型は同じ
    // 型にも引数にも[]をつけて単一の値と区別する
    const [todos, setTodos] = useState<Schema["Todo"]["type"][]>([]);

    // 以降、ロジックはシンプルになる

    // データ取得関数、データベースからデータを読み込む
    const fetchTodos = async () => {
        if (!client) return;

        // await client.models.Todo.list()で返されるオブジェクトのイメージ
        // {
        //     data: [ // 実際のTodoの配列
        //         { id: "1", status: "牛乳を買う", isDone: false },
        //         { id: "2", status: "メールをチェック", isDone: true }
        //     ],
        //     // その他の情報（トークンなど、データ取得のメタ情報）
        //     nextToken: null 
        // }       

        // 分割代入 上記のうち、dataプロパティだけを取得する
        // だからamplify/data/resource.tsで正しく定義する必要あり

        const { data: items } = await client.models.Todo.list();

        // 以下でitemsを使った状態の更新が行われ、
        // 状態が更新されると、UIの更新が行われる(reactの基本機能)
        setTodos(items);
    };

    // 画面読み込み時クライアントがセットされた後、データをフェッチする
    // clientが読み込み後にnull ->値に変化することに対応している
    // useEffectはUIと関係ない処理の実行に使う
    // 二個引数を取っている
    // 一つ目は実行したい処理
    // 二つ目がトリガー
    // これは、読み込み時のclientがnull->値に変わった時の動作
    // それ以降はclientはcreateの際も不変
    useEffect(() => {
        if (client) {
            fetchTodos();
        }
    }, [client]); 

    // データ作成関数
    const createTodo = async () => {

        if (!client) return;

        // client.models.Todo.createでデータベースにhttpリクエスト
        // window.pronpt()はブラウザの標準機能の利用
        await client.models.Todo.create({
            content: window.prompt("Todo content?"),
            isDone: false,
        });
        fetchTodos();
    }

    // クライアントが生成されるまでローディング表示をする
    if (!client) {
        return <div>データを読み込み中...</div>;
    }

    // {...}:JSX内でJavascriptの式を埋め込み
    // key=idはUIには現れないが必須
    return (
        <div>

            <button onClick={createTodo}>Add new todo</button>
            <ul>
                {todos.map(({ id, content }) => (
                    <li key={id}>{content}</li>
                ))}
            </ul>
        </div>
    );
}

execute the sandbox
npx ampx sandbox

when finish sandbox, Ctrl+C, and then npx ampx sandbox delete

reference

in amplify gen2 guide, sandbox can execute hot reload, the change of local code automatically link to AWS console. but it can't be realized in my developing environment. i give it up.
alternately, by executing sandbox again, Ctrl+C and "npx ampx sandbox", the change can reflect to aws console. it can be confirmed at console of AWS AppSync Schema.

Production deployment

🖥️ AWSコンソールからのデプロイ手順（推奨）これが、Amplify Gen 2でNext.jsアプリをGitHubと連携させ、CI/CDパイプラインを確立するための最も推奨される手順です。

AWS Amplify コンソールに移動: AWSマネジメントコンソールにログインし、Amplify サービスを開きます。

新しいアプリケーションの作成: 「新しいアプリを作成」または「Deploy an app」を選択します。

ソースコードプロバイダーの選択: 「GitHub」を選択し、指示に従ってGitHubアカウントと連携します。