前のパートに戻る 完了して次のパートへ  

  1-3 文字列を扱うフォームを作成しよう

このパートでは、「名前」と「自己紹介」の二つの文字列を扱うフォームを作成していきます。

本パートの目標物


このパートでは以下のようなフォームを作成します。

目標物を作成するまでの流れ


  1. コンポーネントの見た目を作ろう
  2. redux に接続しよう
  3. 定数を文理しよう

コンポーネントの見た目をMaterial-UIのドキュメントに従って作成して、そこに先ほど作った redux を接続していきます。

では実際に進めていきましょう。

1. コンポーネントの見た目を作ろう


まずは、必要なコンポーネントを作成しましょう。

$ touch src/components/Profile.tsx
$ touch src/components/Basic.tsx

Profileはフォーム全体のレイアウトや保存の処理を行うコンポーネントです。それぞれの入力項目はスコープごとにコンポーネントに分割しています。Basicは基本情報の入力を管理するコンポーネントです。この章ではこのコンポーネントを主に実装していきます。

TextFieldというコンポーネントを使うので公式ドキュメントを読んでみてください。

続いて、src/components/Basic.tsxを編集していきます。

スタイルについては、事前にこちらでsrc/components/styles.tsに定義しておいたのでそちらをご使用ください。(スタイルに関してはこの教材の対象でないので説明を省略します。)

2 つのTextFieldはほとんど同じですが、自己紹介の方では複数行の入力に対応しています。 rowsを指定することで何行分表示するかも指定できます。

props の指定の際に=以降を省略するとtrueが渡せます。TypeScript ではbooleanで定義されていない props にこの指定をするとエラーとなります。

続いて、src/components/Profile.tsxを編集していきます。このコンポーネントでは、TypographyContaienrというコンポーネントを使うのでTypographyの公式ドキュメントContainerの公式ドキュメントを読んでみてください。

Typographyは文字列を表示するためのコンポーネントです。今回は見出しに使っています。variantは大きさの指定、componentは実際に render される HTML タグです。colorはデフォルトのプライマリーカラー(青色)を指定しています。その下に先ほどのBasicを記載しています。

最後にsrc/components/App.tsxからこのProfileを表示できるようにしましょう。src/index.tsxは実行ファイルのためここに記載されていないコンポーネントは表示されません。

2. redux に接続しよう


続いて先ほど作成した redux に接続していきます。src/components/Basic.tsxを編集します。

まずは必要なdispatchするための関数と状態を保持しているprofileを用意しました。次に、src/components/Basic.tsxに実際の更新の処理とTextFiledに値を渡す部分を実装していきます。

ここで、useDispatch()という hooks がでてきました。redux の状態を更新するために新しい状態を送ることを dispatch というのですが、その dispatch をするための関数を作成してくれる hooks です。

handleChange()では、更新したい項目だけを受け取って reducer に dispatch しています。また、それぞれのTextFiledコンポーネントで value として store の値を、ハンドラとしてhandleChangeを渡しています。

handleChange()が 1 行しかないなら別に必要ないと思うかもしれません。実際、以下のようなコードにしても動作はします。

でも、イベントハンドラを分けて記述しておくことによって、「変更に発火した何か別の処理を実装したい」という要望が出てきたときにも簡単に対応ができます。なのでこのような実装にしています。

これで入力を redux で管理できるようになりました。

3. 定数を定義しよう


今回ラベルで使用した「名前」や「自己紹介」は他のところでも使う可能性があり、「お名前」に途中から変更したいといった話が出てくる可能性があります。そのため定数として定義しておくことにします。

$ mkdir src/domain/services
$ touch src/domain/services/profile.ts

src/domain/services/profile.tsを編集していきます。servicesディレクトリにあるファイルはロジックを記載していきます。services/profile.tsファイルはprofileに関わるロジックを定義していきます。この章で使う他の誕生日と性別も追加しています。

続いて、src/components/Basic.tsxでこの定数を使うように変更しましょう。

これで定数として管理できるようになりました。

動作確認


0-2 で説明した開発サーバーが起動していることを確認してそのサーバーの URL にアクセスしてみましょう。(デフォルトでは、localhost:8000

冒頭で示したように以下のような動作になっていたら完成です。

また、Dev Tool でも確認してみましょう。

上記のように dev tool を選択して、文字を入力したときに以下のように状態が更新されていることが確認できたら ok です。

このパートでは redux に接続する方法を学びました。これから何度も出てくる基本的な内容なのでしっかり理解しておいてください。

議論

0 質問

このコースの評価は?