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

  0-1 【React/Redux/TypeScript】実践的なフォームの扱いを完全に理解しよう!

この教材では react を使った実践的なフォームの作成方法を学んでいきます。

フォームなんて基本だから大丈夫と思うかもしれませんが、実際のアプリケーションでのフォームは実は結構作るのが大変です。例えば、日付や選択など様々なデータ構造を扱ったり、入力内容のバリデーションをしたり、郵便番号から住所の自動補完をしたり、、、

また、気持ちよく入力できるための UX など他にも考えることはあります。(入力がしにくくてイライラした経験・気持ちよく入力できた経験どちらもあると思います。)

これらはこの教材で扱うフォームの一例ですが、なかなかいきなり実装をするのは難しいものばかりではないでしょうか?そしてこれらは当たり前のように Redux や TypeScript で実装されています。

「うっ。。」と思われた方もいらっしゃるのではないでしょうか?

ご安心ください。そのために本教材があります!

難しいということは逆に考えると、これをマスターすることで頭ひとつ抜け出せるのです。ぜひ、この教材でフォームの扱いを完全に理解しちゃいましょう!

学習内容


  • Redux/TypeScript を用いた実践的な React の開発
  • hooks を用いた最新の React での開発(Redux も hooks を用いて扱います)
  • 基本的なフォーム(文字列・日付・ラジオ・セレクト)の扱い
  • 住所フォーム(郵便番号による自動補完)の実装
  • 大学や学部・学科を扱うフォーム
  • 外部 API を用いた非同期処理
  • バリデーションによる入力内容の精査

受講における必要条件


  • ES6 の基礎知識 (コールバック関数やmapメソッドについて説明できる)
  • React の基礎知識 (コンポーネントを作ったり、propsについて理解している)
  • Redux の基礎知識 (Reduxを使ってコードを書いたことがある)
  • TypeScript の基礎知識 (型推論や型による開発環境へのメリットを理解している)

ES6 および React に関しては、 progate の JavaScript, es6, react の講座の受講をおすすめします。Redux と TypeScript に関してはこの教材の中で説明していますが、公式のドキュメントやチュートリアル、その他以下の参考サイトなどで基礎知識をつけたり参照しながら学習を進めるとスムーズです。

この教材の対象者


  • React での実戦的な開発を学びたい方
  • Redux/TypeScript を使った開発を勉強したい方
  • 様々なパターンのフォームの扱いを体型的に学びたい方

学ばないこと


  • HTML/CSS
  • デプロイ
  • サーバーでのデータの永続化

あくまでクライアントサイドでフォームをどう扱うかということにだけフォーカスした教材のため上記のようなことはこの教材の対象外です。

本教材の対応バージョン


  • Node.js 12 系
  • React 16.8.0 以降(hooks 使用のため)
  • TypeScript 3.7.0 以降 (Optional Chaining 使用のため)

作成するアプリケーションのイメージをつかもう



上記のようなフォームを作成していきます。

基本情報

基本情報は普通の文字列や日付・ラジオボタンを扱うフォームで構成されています。特に特殊な機能はありません。この章ではフォームの扱いもそうですが、TypeScript や Redux に慣れることも目的としています。

住所

住所の項目では普通の文字列の入力と住所の自動補完の実装方法を学びます。外部 API を用いた非同期処理も発生するので少しレベルが上がります。

学歴

この項目では、大学情報の入力を学びます。もう少し抽象的に言うと、非同期処理を含んだり状態によって UI が変わったりする複雑な仕様のフォームの作成方法を学びます。

職歴

この項目では、要素数を増やすことができるフォームの入力を学びます。職歴に関わらずよく出会うフォームです。

バリデーション

必須項目を設定し、保存のタイミングで入力内容が要件を満たしているかのチェックを行います。判定のタイミングやそもそもの設計が意外と難しいため一度実装を経験しておくことはすごく価値があります。

また、これらのアプリを実際にホスティングしているので、ぜひ実際に触ってみてください。

Demo

目次


0 章: はじめに

  • 0.1 この教材について
  • 0.2 環境構築
  • 0.3 設計
  • 0.4 0-4 React のための TypeScript 入門
  • 0.5 完成版のコードについて

1 章: 基本的なフォームの扱いをマスターしよう

  • 1.1 TypeScript&hooks での Redux の扱いを学ぼう
  • 1.2 profile を管理する redux を作成しよう
  • 1.3 文字列を扱うフォームを作成しよう
  • 1.4 Radio ボタンのフォームを作成しよう
  • 1.5 日付を扱うフォームを実装しよう

2 章: 住所を入力できるフォームを作ろう

  • 2.1 住所入力用の redux を作成しよう
  • 2.2 入力するためのフォームを作成しよう
  • 2.3 自動補完のための非同期処理を実装しよう ①
  • 2.4 自動補完のための非同期処理を実装しよう ②

3 章: 複数項目が追加できるフォームを作成しよう

  • 3.1 職歴を管理する redux を作成しよう
  • 3.2 職歴入力フォームを作成しよう
  • 3.3 追加の機能を実装しよう

4 章: 学歴の入力フォームを作成しよう

  • 4.1 学歴の管理を行う redux を作成しよう
  • 4.2 大学検索のための入力フォームと redux を作成しよう
  • 4.3 CORS の理解と対策をしよう
  • 4.4 非同期処理を実装しよう
  • 4.5 大学・学部・学科を選択できるようにしよう

5 章: バリデーションを実装しよう

  • 5.1 バリデーションのための redux を実装しよう
  • 5.2 基本情報と住所のバリデーションを実装しよう
  • 5.3 職歴と学歴のバリデーションを実装しよう
  • 5.4 要件を満たしたらエラーが消えるようにしよう
  • 5.5 エラーをユーザーにフィードバックしよう


議論

0 質問

このコースの評価は?