覚書です。NextjsはNuxt.jsとほぼ同じですかね。
Next.js(React)ファイル名の命名規則
Next.js の公式ドキュメントやチュートリアルでは、ページコンポーネントのファイル名にはケバブケース（例：about-us.tsx）を使用することが推奨されています。しかし、それ以外のファイルやディレクトリ（例：ヘルパー関数、ライブラリ、コンポーネントなど）に関しては、Next.js は特定の命名規則を強制していません。
ただ、次のパターンが多いかもしれません。
- コンポーネント: パスカルケース（例：
UserProfile.tsx） - hooks:キャメルケース
- それ以外：ケバブケース
ヘルパー関数、ライブラリ、ユーティリティはキャメルケースやケバブケースを使用らしいけど、なるべくケバブケースを使いたい派。そのためfirebaseClient.ts ではなく firebase-client.ts。ページコンポーネントはもともとNext.jsケバブケース。
Next.js(React)のCSSはケバブケースorキャメルケース
少し悩むこともあります。
React、Next.jsでCSSモジュールのクラスを作ると、キャメルケースにしたくなるけど、stylelintではエラーが…。
— k_neko3 (@katana_neko3) February 22, 2022
stylelintのルールを複雑にするの嫌だな～と思ったので、tsで書く時にブラケット記法にすることで回避しました。
ケースの違いは意外と面倒ですな。#Nextjs#React#stylelint
GPT4君が
- htmlのClassNameをキャメルケースで書きます。
- CSSをケバブケースで書きます。
- そして自動変換されると主張します。
しかし、CSSが適用されません！どこも間違えていないんだって!両方ともケバブケース、もしくはキャメルケースにするとあっさりと効きます(´・ω・｀)
この問題は英語でぐぐったところ、CSS Modulesにそのようなオプションがないようです。
Next.js doesn’t provide an easy, built-in way to customise CSS Modules options yet
https://stackoverflow.com/questions/74038400/convert-css-module-kebab-case-class-names-to-camelcase-in-next-js
next.config.jsにコンバーターを書く方法もありますが、アップデート時に壊れる可能性があります。
NextJS configs, this may break with any updates.
https://github.com/vercel/next.js/discussions/11267
キャメルケースで統一するか、ブラケット記法でケバブケースで統一するかです。
Next.js allows you to use any form of CSS naming you prefer. If you're using CSS modules specifically, you can write kebab-case too. Doesn't need to be camelCase.
— Lee Robinson (@leeerob) May 30, 2021
import styles from './styles.module.css'
<div className={styles['my-class']} />
CSS ModulesをReactプロジェクトで使用する場合、キャメルケースとケバブケースの変換はWebpackの設定や特定のローダー（例えば、css-loader）のオプション設定によって行われるようですが、デフォルトのNext.jsセットアップではcss-loaderの設定を直接カスタマイズする機能は提供されていないようです。
…GPT4君に依存しすぎない方がよいでしょう。
Nuxt.js(Vue)ファイル名の命名規則
- コンポーネント: パスカルケースを使用します。
TheHeader.vue,UserProfile.vue - ページ: ケバブケースを使用します。これは、ページのファイル名がそのままルーティングのパスになるためです。
about-us.vue,user-profile.vue - プラグイン、ミドルウェア、ストア: ケバブケースまたはキャメルケースを使用します。
axios-setup.js,userAuth.js
Webはコンポーネント以外は、なるべくケバブケースにしたいですかね。覚えやすいので。
Unityのファイル名の命名規則
- ファイル名: パスカルケースが推奨されます。
- スクリプト:
PlayerController.cs,EnemyAI.cs - シーン:
MainMenu.unity,Level01.unity - プレハブ:
RedEnemy.prefab,HealthPickup.prefab
- スクリプト:
- フォルダ名: 一般的にはパスカルケースまたはケバブケース。
Scripts,Materials,Textures,Scenes
コメント