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

  0-3 設計

このパートでは、実際に作成するアプリケーションの設計について説明します。

アプリの構成


このアプリはフォームの 1 画面のみを作成することを目的としています。

編集できる項目


  • 基本情報
  • 住所
  • 学歴
  • 職歴

上記 4 つの項目を作成します、コンポーネントはこの項目ごとに作成します。

また、ややこしくなるので記載していませんが、上記の図にあるコンポーネントとは別に Alert のコンポーネントも実装します。

ディレクトリ構成


.
├── components
├── domain
│   ├── entity
│   └── services
└── store
    ├── alert
    ├── colleges
    ├── profile
    └── validation

このような構成で作成していきます。上記の構成はディレクトリのみを示しています。

components/

表示に関わるコンポーネントを配置している場所です。全て単体のファイルで構成されています。表示だけを行い、状態の管理やロジックは内包しません。

domain/entity/

データ構造を定義する場所です。profile やバリデーションの項目がどのようなデータを持っているのかを定義しています。

domain/services/

ビジネスロジックを記載しています。具体的には、郵便番号に関わる処理や定数などを定義しています。この層があることでビューとロジックを分離できます。

store/

状態管理を行う場所です。redux の action や reducer を記載します。それぞれの状態がどのような目的を持つのかは教材の中で随時説明していきます。

redux の状態


このアプリでは、以下の 4 つの状態を管理しています。

  • alert
  • colleges
  • profile
  • validation

これらの状態に関しては、出てきたときに説明していきます。

非同期処理


このアプリでは一部外部の API を使うため非同期処理の扱いについても学びますが、あくまでメインはフロントでの状態管理で入力内容をどこか別のサーバー等に保存するといった内容は含まれません。

議論

0 質問

このコースの評価は?