props

import ReactDOM from 'react-dom'
import React, { useState } from 'react'

function App() {
  const [password, setPassword] = useState('')

  const generatePassword = ({
    length = 12,
    hasNumbers = true,
    hasSymbols = true
  }) => {
    const alpha = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
    const numbers = '0123456789'
    const symbols = '!@#$%^&*_-+='

    let chars = alpha
    if (hasNumbers) {
      chars += numbers
    }
    if (hasSymbols) {
      chars += symbols
    }

    let newPassword = ''
    for (let i = 0; i < length; i++) {
      newPassword += chars[Math.floor(Math.random() * chars.length)]
    }
    setPassword(newPassword)
  }

  return (
    <div>
      <h1>パスワードジェネレーター</h1>
      {/* 問題1. パスワード生成処理を受け渡そう */}
      <PasswordForm generatePassword={generatePassword} />
    </div>
  )
}

// 問題1. パスワード生成処理を受け渡そう
function PasswordForm({ generatePassword }) {
  const [passwordData, setPasswordData] = useState({
    length: 12,
    hasNumbers: true,
    hasSymbols: true
  })

  // 問題2. 生成ボタンクリック時の処理を実装しよう
  const handleSubmit = (event) => {
    event.preventDefault()
    generatePassword({ ...passwordData })
  }

  return (
    <form>
      <label>
        パスワードの長さ：
        <label>
          <input
            type="radio"
            value="12"
            name="length"
            checked={passwordData.length === 12}
            onChange={(event) =>
              setPasswordData({
                ...passwordData,
                length: parseInt(event.target.value)
              })
            }
          />
          12
        </label>
        <label>
          <input
            type="radio"
            value="24"
            name="length"
            checked={passwordData.length === 24}
            onChange={(event) =>
              setPasswordData({
                ...passwordData,
                length: parseInt(event.target.value)
              })
            }
          />
          24
        </label>
      </label>
      <br />
      <label>
        数字を含める：
        <input
          type="checkbox"
          name="hasNumbers"
          checked={passwordData.hasNumbers}
          onChange={(event) =>
            setPasswordData({
              ...passwordData,
              hasNumbers: event.target.checked
            })
          }
        />
      </label>
      <br />
      <label>
        記号を含める：
        <input
          type="checkbox"
          name="hasSymbols"
          checked={passwordData.hasSymbols}
          onChange={(event) =>
            setPasswordData({
              ...passwordData,
              hasSymbols: event.target.checked
            })
          }
        />
      </label>
      <br />
      <button type="submit">生成</button>
    </form>
  )
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />)


code-lesson

import ReactDOM from 'react-dom'
import React, { useState } from 'react'

function App() {
  const [password, setPassword] = useState('')

  const generatePassword = ({
    length = 12,
    hasNumbers = true,
    hasSymbols = true
  }) => {
    const alpha = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
    const numbers = '0123456789'
    const symbols = '!@#$%^&*_-+='

    let chars = alpha
    if (hasNumbers) {
      chars += numbers
    }
    if (hasSymbols) {
      chars += symbols
    }

    let newPassword = ''
    for (let i = 0; i < length; i++) {
      newPassword += chars[Math.floor(Math.random() * chars.length)]
    }
    setPassword(newPassword)
  }

  return (
    <div>
      <h1>パスワードジェネレーター</h1>
      {/* 問題1. パスワード生成処理を受け渡そう */}
      <PasswordForm />
    </div>
  )
}

// 問題1. パスワード生成処理を受け渡そう
function PasswordForm() {
  const [passwordData, setPasswordData] = useState({
    length: 12,
    hasNumbers: true,
    hasSymbols: true
  })

  // 問題2. 生成ボタンクリック時の処理を実装しよう

  return (
    <form>
      <label>
        パスワードの長さ：
        <label>
          <input
            type="radio"
            value="12"
            name="length"
            checked={passwordData.length === 12}
            onChange={(event) =>
              setPasswordData({
                ...passwordData,
                length: parseInt(event.target.value)
              })
            }
          />
          12
        </label>
        <label>
          <input
            type="radio"
            value="24"
            name="length"
            checked={passwordData.length === 24}
            onChange={(event) =>
              setPasswordData({
                ...passwordData,
                length: parseInt(event.target.value)
              })
            }
          />
          24
        </label>
      </label>
      <br />
      <label>
        数字を含める：
        <input
          type="checkbox"
          name="hasNumbers"
          checked={passwordData.hasNumbers}
          onChange={(event) =>
            setPasswordData({
              ...passwordData,
              hasNumbers: event.target.checked
            })
          }
        />
      </label>
      <br />
      <label>
        記号を含める：
        <input
          type="checkbox"
          name="hasSymbols"
          checked={passwordData.hasSymbols}
          onChange={(event) =>
            setPasswordData({
              ...passwordData,
              hasSymbols: event.target.checked
            })
          }
        />
      </label>
      <br />
      <button type="submit">生成</button>
    </form>
  )
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />)


パスワード生成処理をformで実行できるようにしよう

完成形を操作してみよう

<form>

関数コンポーネント

見た目を作ろう

useState

import文

stateを定義しよう

イベントハンドラ

onChange

イベントハンドラを使って値を変化させよう

リファクタリングしよう

パスワード生成処理を実装しよう

生成ボタンクリック時にパスワードを表示させてみよう

Reactでセキュリティを考慮したパスワードを生成するジェネレーターを作成します。
ランダムな文字列の生成方法を学びます。

「Reactを使ったパスワードジェネレーター」レッスンの総復習クイズです。