Presenter構成について書いていきます。・AtomicDesign以外のコンポーネント設計を知りたい。Presenter構成について知りたい。こんな人に読んでいただけると幸いです!ディレクトリの責務について本業の方で、このディレクトリ構造でコードを書き始めたので、備忘録がてらアウトプットをしていきます。参考にした記事はこちらです。図もあって非常にわかりやすかったです!まず、全体像から説明していきます。アプリケーションはシンプルな数字のカウントアプリをイメージしてください。それぞれのファイルの責務の概要はこんな感じです。src/pagesindex.tsxここはルーティングの責務です。src/componentsCounter.page.tsxここはレイアウトコンポーネントでラップし、ブラウザ情報などmeta要素を付与するためのコンポーネントです。HTMLタグのmainタグ以外の部分の描画の責務を担っています。src/componentsCounter.container.tsxここはロジック部分の責務を担うコンポーネントです。src/componentsCounter.hooks.tsxここはhooksロジックのみを記述する部分です。containerも同じ責務では?」と思われるかもしれません。containerにはhooks以外のロジックも多々書く場合があり、カスタムフックだけでもまとめると可読性がよくなるので、containerに差し込んでいます。src/componentsCounter.presenter.tsxここはUIの描画のみを記述する部分です。全体の責務としてはこのような感じです。downしていくイメージです。各コンポーネントのコードについて全体像がわかったところで、各コンポーネントのコードを見ていくとより一層、理解が深まり、イメージもしやすくなるのではないかと思います。)}NextPageTypeとあるように、このコンポーネントはNext.jsの基本機能であるルーティングのみを担っています。SSGやSSRでデータフェッチングするならここに記述し、components配下のpage.tsxにデータをpropsで渡します。CounterPageCounter.page.tsxはHTMLタグのmainタグ以外の部分の描画を担っています。ここではCounter.container.tsxをLayout.tsxコンポーネントでラップしています。Layout.tsxは単に、HeadコンポーネントにSSRで取得したブラウザのタブの変数をセットしているだけの責務です。Layout.tsxも載せておきます。LayoutCounter.page.tsxには、そのほかに、例えば、このコンポーネントの中で、Counter.container.tsxをheaderコンポーネントでラップしたり、footerコンポーネントでラップしたりなどをしたりするとよいと思います。CounterContainerいよいよタイトルにもある通り、containerの登場です。長い道のりでしたね(^^;ここはロジックの責務を主に担当しています。詳しくいうと、ロジックをpresenter.tsxにpropsで渡す役割です。コードを見てみると、そこまでゴリゴリとロジック書いていないことがわかります。今回のアプリケーションではほとんどのロジックはカスタムフックで記述できるので、後述するhooks.tsxに任せています。本来なら、containerには、例えば、page.tsxからpropsで渡されたデータを整形したり、加工したりするロジックが書かれていたりします。ロジックの本体を記述。}}今回のアプリケーションではロジックの本体がこのファイルに記述されています。いわゆるカスタムフックと同じです。decrementの関数がここに記述されています。今回のサンプルコードでは説明の都合上、書かれていませんが、本来なら、useCallbackを用いて、パフォーマンス改善措置をした方がよいですね。表示に関わるものを記述する。ロジックは記述しない。CounterPresenterいよいよ最後です。ここがHTMLのmainタグの中のUIを担当する部分になります。ここではロジックは全くかかず、親コンポーネントからpropsで渡された関数や変数を用いて表示をしていくのみの責務です。CSSを当てたりして、スタイリングする部分はこのファイルになります。presenterのディレクトリ構造の一例です。SOA-C02(SysOpsアドミニストレーター)に落ちました。