次のチャプターであるAtoms/Input以降に作成するパーツは、これまで作成したパーツに比べてどんどん複雑になっていきます。

ここではTodoアプリから一旦離れて、コンポーネント作成の助けになる設計の読み方について学習します。

目次

（React課題における）設計とは

課題作成者が想定する、コンポーネントの設計図です。 設計のとおりにコーディングすれば、要求されるReactコンポーネントを作成することが可能です。

ただし、あくまでの一つの設計案なので、設計の通りに実装しなくても問題ありません。 自分でより適切な実装を考えられる場合は、是非チャレンジしてみましょう。

なお、このような設計図は課題の実装をスムーズに行うために講師が独自に用意したものです。 実際の案件では、このような詳細な設計図を事前に用意することは一般的ではないので注意してください。

設計の読み方

まずは各項目について説明します。

実際の設計例と、その通りに作った場合の実装は後に示します。

なお、StateやRefなど、この段階では聞き馴染みのない単語がいくつか出てきますが、気にせず読み進めてください。

Props

このコンポーネントで受け取る props の定義。