お疲れ様です。
この記事は、すごく個人的な学習週次報告です。
自分自身の「目標の明確化」「学んだこと・わからないことの整理」「成長記録」のために書いています。

今回は、僕のプログラミング学習における "現在地点"、"ゴール"、"逆算して今何をすべきか"
を明示しておこうと思います。

ゴール

現在のフリーターという職業から、フロントエンドでエンジニア転職。
もちろん、実務をやり始めてからが本当の学習スタートだと思っているので、
ベストは、フロントからバックまで包括的に学べそうな「自社開発企業への就職」だと考えている。
あくまで、僕が重要視するポイントは「自分のスキルをいかに伸ばせるか」、
仮に、高い収入、安定（最悪はアルバイトでもいい）、が見込めなかったとしても、
実際に身になることをやらせてもらえる会社に入りたい。

現在地

• コールバック関数はある程度理解 （コードを追える、書ける。でもまだ、人に説明しずらく感覚的）
• 非同期処理はある程度理解（Promiseやasync/awaitの簡単なコードを書ける）
• React、ReacrRauterは調べながらなら簡単なものを書ける（多分）
• Redux、ReactRedux、ReduxThunkはコピペレベルでまだあまりよくわかっていない

今何をすべきか

Redux、ReactRedux、ReduxThunkを復習しつつ、
一度静的でいいから「自己紹介サイト」を作り、GitHubPagesで公開までやっていこうと思う。
いろんな方が仰っているのが、「ある程度基礎をさらったら何か制作してみること」、
さらに、僕のゴールは「ポートフォリオを作って、ひたすら就活ひたすらブラッシュアップ」
で達成できる、という仮説を立てているので。
サイトができたら、少しバックエンドの勉強もしつつ動的なアプリを作って、就活のポートフォリオにする。

---

内容は以上です。
みなさん緊急事態宣言下で大変ですが、お互いに一歩ずつ一歩ずつ頑張りましょう。

概要

以前にreact-hook-formでの値登録に関する記事を投稿しました。formに値登録する仕組みは分かったのですが、では変更画面のような用途を想定して事前にformに値をセットするにはどうすれば良いかというのが今回の記事です。

対応

こちらのドキュメントにある通り、useFormを使った宣言部分でdefaultValuesを設定します。setValueでも値自体は設定できるのですが、Validationと連動しないので適切な値を入れた状態にしてもValidationの結果がfalseとなっている状態になります。

実装サンプル

IDと名前を入力する実装サンプルです。

sample.js

export default function UserRegisterComponent(prop) {
  const { register, handleSubmit, errors, formState, setValue } = useForm({
    mode: "onChange",
    defaultValues: {
      id: "initial_id",
      name: "初期値の名前",
    },
  });
  function submitData(data) {
    // submit以降の処理は割愛・・
  }

  return (
    <div>
      <Form onSubmit={handleSubmit(registerUser)}>
        <Form.Label>ユーザID</Form.Label>
        <Form.Control
          id="id"
          type="text"
          name="id"
          placeholder="ユーザID"
          isInvalid={errors.id}
          style={{ width: "300px" }}
          ref={register({
            required: "IDは入力必須です",
          })}
        />
        {errors.id && (
          <Form.Control.Feedback type="invalid">
            {errors.id.message}
          </Form.Control.Feedback>
        )}
        <br />
        <Form.Label>名前</Form.Label>
        <Form.Control
          id="name"
          type="text"
          name="name"
          placeholder="名前"
          isInvalid={errors.name}
          style={{ width: "300px" }}
          ref={register({
            required: "名前は入力必須です",
          })}
        />
        {errors.name && (
          <Form.Control.Feedback type="invalid">
            {errors.name.message}
          </Form.Control.Feedback>
        )}
      </Form>
    </div>
  };
}