My Portfolio Site

俺的コーディングの規則

ディレクトリ構成

下記を参考

Next.jsディレクトリ構成・設計再考（featuresが何を解決するか）

文字列

• 基本的に"「ダブルクォート」を使用する
• 文字列の中に"「ダブルクォート」が含まれる場合は'「シングルクォート」を使用する
• 文字列展開する必要があるときは`「バッククォート」を使用する

参考記事

• string | TypeScript入門『サバイバルTypeScript』

レイアウト調整

• 1,2個程度の（marginをつけたいなど）の場合はstyled-componentsの「css prop」を使いたい（なんかうまくできないので現状はコンポーネントを作っている）
• 複雑な場合はコンポーネント作成

参考記事

• スタイルを上書きできるコンポーネントはなるべく作らない方がいいという話
• styled-componentsを使ったCSS設計

エキスポート方法

• コンポーネントは「default export」
• 関数は「named export」

※named exportは有害だと考えられますとなぜ default export を使うべきではないのか？の記事を参考に、ともにメリットデメリットがあると判断しました。また、僕自身がまだ、それぞれメリットデメリットを感じれるほどの開発経験がないため、今回は、僕がNext.jsを学ぶ際に使わさせてもらったLearn Next.js | Next.js by Vercel - The React Frameworkの記事でやっている通りにしました。（上記の法則をこの記事でやっているのかわからないです。あくまで僕が見たかぎりそのように見えました。）

行末のカンマ

• 基本つける（下記記事に同意したため）

【JavaScript】オブジェクト・配列・関数引数の末尾カンマ

importについて

• 書くのが楽になりそうなので、aliasを設定の上、絶対パスにする
• 書く順番はライブラリなどを上、自作コンポーネントを下、オブジェクト全体>特定のオブジェクト

参考記事

• 【TypeScript】importする際相対パスではなくエイリアスを使用する

テストについて

画面遷移にアニメーションをつける予定で、Next.jsだと難しい印象があるので、一旦機能のテストなどはせずに、アニメーションが問題なく対応できるか開発を進めていく。（2023年12月7日）

その他

• Page Routerを選択した理由
  • ポートフォリオサイトを作り始めた当時（2023年12月頃?）Framer Motionでアニメーションをつけるときうまく動作しないものがあったため…（記事やYouTubeの解説で相性が悪そうなことが書かれていた、現在（2024年8月）はどうなのか調査はしてない）
  • できればApp Routerに移行したいので調査したいところ…