GitHub Copilotで、ReactのuseStateを完全に理解した

Last updated at 2025-01-07Posted at 2025-01-05

はじめに

これの続きです。

STEP

・要件整理（画面デザイン作成）　
・フロンドエンド開発
　・静的画面
　・表示切り替え（useState）　 ←いまここ
　・画面遷移（useRouter）
　・APIモック作成
・バックエンド開発

今回のやることとゴール

このSTEPではひとつ前の工程作成したログイン画面に
ログイン画面とアカウント登録画面の切り替え（useState）処理を実装してみたいと思います。

開発開始

ログイン画面とアカウント登録画面の切り替え（useState）

完成画面イメージ

ログイン画面はこちら

「新規作成はこちら」をクリックした際の画面はこちら
システムタイトルは固定で入力テキストボックスのエリアが切り替わります。

ルートページのコード

page.tsx

'use client'

import LoginForm from './login/page'

export default function Home() {

  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center p-4 font-noto-sans">
      <div className="bg-white rounded-lg shadow-lg p-8 w-full max-w-md">
        <h1 className="text-2xl font-bold text-center mb-8 text-gray-800">
          連絡帳システム
        </h1>
        <LoginForm />
      </div>
    </div>
  )
}

表示切替処理を追加

ルートページファイルをCopilotの編集に追加

以下呪文を唱える

React の useState フックを使用して、ビュー（画面表示）の状態を管理してください。

ログイン状態の場合、
LoginFormコンポーネントを表示し、

アカウント登録状態の場合、
LoginFormコンポーネントを非表示にして、固定文字「アカウント登録ページは準備中>です」を表示したいです。
またその文字の下にはログイン状態に戻す用のリンクを表示してください。

動作確認

テスト用のボタンを追加して動作確認します。

Toggle to Loginリンクをクリック

ちゃんと表示が切り替わりました。

ログインページに戻るボタンも動作しました。

テストレコードの作成

コードは生成できましたが、うまくファイルを新規作成できませんでした。
手動でファイルを保存してください。
またエラーが出た場合は、Copilotに質問しながら解消します。

自動生成されたコードは以下

今回自動生成したファイルには、モック化とimportしたコンポーネントの辻褄が合わない箇所がありますが、
必要に応じて修正してください。

page.test.tsx


import { render, screen, fireEvent } from '@testing-library/react'
import '@testing-library/jest-dom'
import Home from './page'
import LoginForm from './login/page'

jest.mock('./login/page', () => {
    return jest.fn(() => <div data-testid="mock-login-form">Login Form</div>)
})

describe('Home component', () => {
    it('renders heading text', () => {
        render(<Home />)
        expect(screen.getByText('連絡帳システム')).toBeInTheDocument()
    })

    it('shows login form by default', () => {
        render(<Home />)
        expect(screen.getByTestId('mock-login-form')).toBeInTheDocument()
    })

    it('toggles between login and register views', () => {
        render(<Home />)
        
        // Click toggle button to show register view
        fireEvent.click(screen.getByText('Toggle to Login'))
        expect(screen.getByText('アカウント登録ページは準備中です')).toBeInTheDocument()
        
        // Click back to login button
        fireEvent.click(screen.getByText('ログインページに戻る'))
        expect(screen.getByTestId('mock-login-form')).toBeInTheDocument()
    })
})