【学習ログ】Next.jsプロジェクトのリファクタリング

• しまぶーさんのサロンで学んだことについて自分用メモ
• 随時更新

基本的な考え方

• リファクタリングは超重要
• 最初から過度に最適化を目指さず、作りながら直していく
• データと処理を分けると考えるとうまくいく

ディレクトリ構成

srcフォルダを作成して、componentsとpagesとstyleフォルダを入れる
あとは作業しながらわかりやすいように作っていく

ディレクトリ構成

.
├── .next
│   └── cache...
├── node_modules
│   └── @babel...
├── src
│   ├── components
│   ├── pages
│   └── styles
├── public
│   └── favicon.ico...
├── eslint.json
├── next.config.js
├── package.json
└── yarn.lock

jsとjsxについて

React関連ならjsxにした方が入力時に補完してくれるのでよい

絶対パスと相対パス

絶対パスにしておいた方が、ディレクトリ構造が複雑になった時にわかりやすい

1. jsconfig.jsonファイルを作るとそのファイルがある場所がルートになる
2. VScordを設定する（入力時の補完で相対パスが出てくるのをキャンセル）
   Import Module Specifier をnon-relativeにする

メソッドを書く場所

• onClickなどの中に書くのは×
• ややこしくならないなら、コンポーネントの外に書くのがよい
• コンポーネント内の変数を使うなどで書き方がややこしくなるならコンポーネントの中に書く
  ただし、コンポーネントの再レンダリング時に再生成されることになるため、パフォーマンスが落ちる
  これはuseCallBackを使って解決する

const handleClink = useCallBack(メソッド,[]);