# Web ページをコンポーネントに分割してみよう コンポーネントは、React における最重要コンセプトのひとつです。 コンポーネントはマークアップと CSS と JavaScript をアプリのための再利用可能な UI 要素にまとめるための方法です。 適切にコンポーネントの分割ができればコンポーネントを再利用することで簡単に UI を構築して開発速度がアップさせたり、すでにあるコンポーネントに簡単に機能追加ができるようになります！ # 課題 1 ## 課題 1-1 「コンポーネント」について理解を深めるために、以下のページに目を通してください。 - [初めてのコンポーネント](https://ja.react.dev/learn/your-first-component) - [コンポーネントのインポートとエクスポート](https://ja.react.dev/learn/importing-and-exporting-components) ## 課題 1-2 1 つのファイルに 1 つのページに使用されている JSX が全て書いてあるとどのような不都合があるでしょうか？ # 課題 2 この課題では「Web ページを作ってみよう」で模写した Web ページをコンポーネントに分割していきます！ ## 課題 2-1 App.tsx に書いたコードをいくつかのファイルに分割してみましょう。 このときコンポーネントに切り出したファイルは src ディレクトリに直接配置するのではなく分割されたディレクトリに配置するようにしてみましょう。 分割する際、「このディレクトリにはこんなコンポーネントだけを入れる」など、それぞれのディレクトリに意味を持った分け方のルールを設けてみましょう。 自分が考えたルールをチームに共有して、お互いの違いを確認してみてください。 💡例えば、表示する大元のデータを全て page 層にまとめておいて「page ディレクトリは API など外部モジュールとやり取りしたデータを保存したり加工するための層」といった役割を持たせられるかもしれません 💡例えば、「ui 層は他のプロジェクトでも使いまわせるコンポーネントだけの層」といった役割を持たせられるかもしれません。こうすれば他のプロジェクトにも使いまわせるコンポーネントライブラリが作れるので今後の作業時間の短縮につながります！ 💡具体例が欲しい場合は、[bulletproof-react](https://github.com/alan2207/bulletproof-react/blob/master/docs/project-structure.md) などを参考にしてみてもいいでしょう ## （任意課題） 以前「テスト」の課題領域で紹介した StoryBook を使い、分割したコンポーネントにストーリーを書きながら進めてみましょう。 ## 課題 2-2 コンポーネントの分類の方法論として [アトミックデザイン](https://bradfrost.com/blog/post/atomic-web-design/) という考え方があります。 アトミックデザインは大変有名な考え方ですが、現在では新規のプロジェクトにアトミックデザインを採用したという話はほとんど聞かなくなりました。アトミックデザインのコンポーネントの切り方は適切だと思うか、チームで話し合ってみましょう。