100日後にAIを叱れるWebエンジニアになる26歳学生：Day2

今日も積み上げやっていきます。

• AtCoder
• React復習(フォーム作成とバリデーション Day1の復習)

AtCoder

今日は2日前のコンテストで解いて、さらに昨日復習したABC 418 BとABC 390 Aを再度解きました。はい、思ったよりスラスラできずなんなら両方とも自分で設けた時間内に解けませんでした。

他にも新たに解きましたができなかった上２つを再度載せます。

ABC 418 B 問題

418 B.py

# 復習2回目だが7分内に解けず、実行時エラー

# 理由
# ・iとjが2つ以上離れている必要があるという条件を見落としていた
# ・Sは3文字以上という保証がないという要件を見落としていた
# ・for文内では毎回Sを初期値として代入する必要がある、for文を回すごとに更新されてしまっていた

# 問題のあるコード

# S = input()
# f_max = 0
# l = len(S)

# for i in range(l - 2):
#   for j in range(i + 2, l):
#     if(S[i] == "t" and S[j] == "t") and (j - i) > 1:
#       S = S[i : j + 1]
#       l = len(S)
#       f = (S.count("t") - 2) / (l - 2)
#       if(f_max < f):
#         f_max = f

# print(f_max)

# 再度復習して改善コード

S = input()
f_max = 0
l = len(S)

if l > 2:
  for i in range(l - 2):
    for j in range(i + 2, l):
      if(S[i] == "t" and S[j] == "t") and (j - i) > 1:
        S_sub = S[i : j + 1]
        l_sub = len(S_sub)
        f = (S_sub.count("t") - 2) / (l_sub - 2)
        if(f_max < f):
          f_max = f

print(f_max)

もうね、何度同じことを繰り返すんかと。あれだけ気をつけなきゃいけない変数代入でミスしてしまっていました...

for文内ではあくまで任意のtで挟まれた文字列を取り出してそれを繰り返してるに過ぎないのに、Sを毎回更新してしまうのは悪手。解いてる最中もその辺りは考えたつもりでしたが曖昧でしたね。

それとまだB問題を7分で解けるレベルには達してなさそうなので制限時間見直しが必要そうです。

ABC 390 A 問題

390 A.py

# 3分以内に解けず実行時エラー
# 理由

# ・copy()の書き方を最初間違えていた
# ・単純に時間が足りなかった
# ・for文で毎回YesとNoを出力していた、Yesの段階で操作は終わらせなきゃいけない
# ・Bに代入するのを忘れていた

# 問題のあるコード

A = list(map(int, input().split()))

for i in range(4):
  B = copy(A)
  if not A[i] == i + 1:
    A[i], A[i + 1] = A[i + 1], A[i]
    if B == [1, 2, 3, 4, 5]:
      print("Yes")
    else:
      print("No")

# 改善したコード

A = list(map(int, input().split()))

for i in range(4):
  B = A.copy()
  if not B[i] == i + 1:
    B[i], B[i + 1] = B[i + 1], B[i]
    if B == [1, 2, 3, 4, 5]:
      print("Yes")
      exit()

print("No")

こちらはまず最初にcopy()の使い方をミスっていました。正しくは

B = A.copy()

ですよね。その他にもまだまだ初歩的なミスが目立ちます。こちらも同様3分という制限時間はまだまだ自分にはハードルが高かったようです。まだ5~10分かけないとACまで辿り着けなさそうなのでまずは制限時間を緩めてみますか。

React復習

さて、今日も引き続きDay1と同じフォームのバリデーションをやりました。本当は新機能をつけようと思ったんですが、朝から晩まで忙しくDay1の再現をするだけで終わってしまいました。

Day2.ts

// Day2(まずはDay1の復習)
import { useState} from 'react';

type Form = { name: string, email: string, age: string};
type Errors = Partial<Record<keyof Form, string>>;

const emailRe = /^\S+@\S+\.\S+$/;
const numRe = /^\d+$/;

export default function App() {
  const [form, setForm] = useState<Form>({ name: "", email: "", age: ""});
  const [errors, setErrors] = useState<Errors>({});
  const [busy, setBusy] = useState(false);

  const validate = (f: Form): Errors => {
    const e: Errors = {};
    if (!f.name.trim()) e.name = "必須";
    if (!emailRe.test(f.email)) e.email = "形式";
    if (!numRe.test(f.age)) e.age = "数字" ;

    return e;
  }

  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const k = e.target.name as keyof Form;
    const next = { ...form, [k]: e.target.value};
    setForm(next);
    setErrors(validate(next));
  }

  const onSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const v = validate(form);
    setErrors(v);
    if (Object.keys(v).length) return;

    setBusy(true);
    await new Promise((r) => setTimeout(r, 300));
    console.log("payload", { ...form, age: Number(form.age)});
    setBusy(false);

    setForm({ name: "", email: "", age: ""});
    setErrors({});
  }

  return (
    <div>
      <form onSubmit={onSubmit}>
        <h1>フォーム</h1>
        <div>
          <input
            name="name" 
            placeholder="Name"
            value={form.name}
            onChange={onChange}
           />
           {errors.name && <span style={{ color: 'red', fontSize: '0.875rem'}}>{errors.name}</span>}
        </div>
        <div>
          <input
            name="email" 
            placeholder="Email"
            value={form.email}
            onChange={onChange}
            inputMode="email"
           />
           {errors.email && <span style={{ color: 'red', fontSize: '0.875rem'}}>{errors.email}</span>}
        </div>
        <div>
          <input
            name="age" 
            placeholder="Age"
            value={form.age}
            onChange={onChange}
            inputMode="numeric"
           />
           {errors.age && <span style={{ color: 'red', fontSize: '0.875rem'}}>{errors.age}</span>}
        </div>
        <button
          type="submit"
          disabled={busy || Object.keys(errors).length > 0}
        >
          {busy ? "送信中" : "送信"}
        </button>
      </form>
    </div>
  );
}

まあ昨日に比べてだいぶ説明はできるようになりましたね。最初に型定義から始まって、正規規格の定義、バリデーション定義、フォーム入力時の制御、送信処理といった流れをイメージすることができ、おおまかに理解することができるようになりました。

ただ、細かい関数の書き方が抜けたり、送信処理は非同期とするのにasyncが抜けてしまったせいでエラーを吐かれ、しばらく頭がフリーズしたり。でも少しずつ成長を感じることができています。

インターンや家事をこなしながら他のこともしているとあっという間に一日が過ぎていくので大事に過ごさなきゃですわ。今回は少なめとなってしまいましたが、淡々とこなしていきましょう。

Day3の記事はこちら → 100日後にAIを叱れるWebエンジニアになる26歳学生：Day3