イベントハンドラ

onChange

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

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

  return (
    <div>
      <h1>パスワードジェネレーター</h1>
      <PasswordForm />
    </div>
  )
}

function PasswordForm() {
  const [length, setLength] = useState(12)
  const [hasNumbers, setHasNumbers] = useState(true)
  const [hasSymbols, setHasSymbols] = useState(true)

  return (
    <form>
      <label>
        パスワードの長さ：
        {/* 問題1. パスワードの長さを変化させよう */}
        <label>
          <input
            type="radio"
            value="12"
            name="length"
            checked={length === 12}
            onChange={(event) => setLength(parseInt(event.target.value))}
          />
          12
        </label>
        <label>
          <input
            type="radio"
            value="24"
            name="length"
            checked={length === 24}
            onChange={(event) => setLength(parseInt(event.target.value))}
          />
          24
        </label>
      </label>
      <br />
      {/* 問題2. 数字と記号を含めるかどうかを変化させよう */}
      <label>
        数字を含める：
        <input
          type="checkbox"
          name="hasNumbers"
          checked={hasNumbers}
          onChange={(event) => setHasNumbers(event.target.checked)}
        />
      </label>
      <br />
      <label>
        記号を含める：
        <input
          type="checkbox"
          name="hasSymbols"
          checked={hasSymbols}
          onChange={(event) => setHasSymbols(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('')

  return (
    <div>
      <h1>パスワードジェネレーター</h1>
      <PasswordForm />
    </div>
  )
}

function PasswordForm() {
  const [length, setLength] = useState(12)
  const [hasNumbers, setHasNumbers] = useState(true)
  const [hasSymbols, setHasSymbols] = useState(true)

  return (
    <form>
      <label>
        パスワードの長さ：
        {/* 問題1. パスワードの長さを変化させよう */}
        <label>
          <input type="radio" value="12" name="length" />
          12
        </label>
        <label>
          <input type="radio" value="24" name="length" />
          24
        </label>
      </label>
      <br />
      {/* 問題2. 数字と記号を含めるかどうかを変化させよう */}
      <label>
        数字を含める：
        <input type="checkbox" name="hasNumbers" />
      </label>
      <br />
      <label>
        記号を含める：
        <input type="checkbox" name="hasSymbols" />
      </label>
      <br />
      <button type="submit">生成</button>
    </form>
  )
}

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


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

完成形を操作してみよう

<form>

関数コンポーネント

見た目を作ろう

useState

import文

stateを定義しよう

リファクタリングしよう

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

props

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

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

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

世界的にも人気なReactを使って、Webアプリケーションの作成について学んでいきます

Reactコース

【実践】最低限の知識を使って簡単なアプリを作ってみよう🚸

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