命名規則とハイフン区切りのケバブケースをダブルクリックで選択する方法。word separators設定。
命名規則を適切に整備する
プログラミングやソフトウェア開発のみならず、Web制作の工程においても変数や関数、クラスやファイルなどの識別子を適切に名付けるための命名規則ルールやガイドラインの作成は効率よく安定した開発環境を作るためには重要です。また、良い命名規則を遵守することはコードの可読性や保守性を高め、制作チーム全体でのコードの理解を得る重要な要素です。慣例的なルールや傾向に則った適切な適切な命名規則を心がけましょう。
命名規則ルールのポイントと傾向
意味の明確さ
識別子の名前は、その役割や機能を正確に表すようにしましょう。変数や関数の名前が意味的に関連していると、コードの理解が容易になります。
意味的なプレフィックス
識別子の前に、その要素がどのような役割を果たしているかを示す意味的なプレフィックスを付けることが重要です。例えば変数名に状態、 is や has を付けて真偽値を表す場合、isAdmin や hasPermission などがあります。
一貫性
プロジェクト全体で一貫した命名規則を採用することが重要です。同じ種類の識別子は同じ方法で命名するように心がけましょう。
適切な長さ
名前は適切な長さに保つことが大切です。短すぎると理解しづらく、長すぎると読みにくくなります。役割やコンテキストに合わせて適切な長さを選びましょう。
予約語との避ける
各プログラミング言語の予約語やキーワードと同じ名前は避けるようにしましょう。
コンテキストを考慮
コード内のコンテキストに合わせて命名を行います。例えば特定の関数やクラスがどのような処理を行うかに基づいて名前を付けます。
コメントとの連携
識別子の名前だけでなく、適切なコメントを付けることで、他の開発者がコードを理解しやすくなります。
| ケース | 概要 | 例 |
|---|---|---|
| キャメルケース | 先頭の単語は小文字、以降の単語は大文字で繋げる。主にjsやphpのクラス名、関数名などで使用される。（※ローワーキャメル） | lowerCamelCase |
| アッパーキャメルケース | 単語の先頭文字は全て大文字で繋げる。主にjsやphpのクラス名、関数名などで使用される。（※またはパスカルケース） | UpperCamelCase |
| スネークケース | 単語間をアンダーバーで繋げる。主にDB名、PHPやPythonの変数や関数名などに使用される。 | snake_case |
| ケバブケース | 単語間をハイフンで繋げる。主にHTMLやCSSのプロパティ名で使用される。 | kebab-case |
総じて、命名規則はコードの品質や可読性に大きな影響を与える重要な要素です。チーム全体で共通のルールを確立し、コードの保守性や協力を向上させるために適切に活用しましょう。
ハイフン区切りのケバブケースをダブルクリックで選択したい
ハイフン(-)繋ぎのケバブケースは通常エディタでは区切り文字（単語セパレータ）という扱いのためhtmlクラス名などに用いる場合、ダブルクリックでは選択できないため、ドラッグやキー操作を連打するなど手間が発生し、扱いづらい場面があると思います。「Editor: Word Separators」をカスタマイズして自分の開発環境に合わせましょう。
// setting.json
//初期設定
"editor.wordSeparators": "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/?",
// [-]を除外
"editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?",
// setting.json
// phpは[$]も除外
{
"[html]": {
"editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?",
},
"[php]": {
"editor.wordSeparators": "`~!#%^&*()=+[{]}\\|;:'\",.<>/?",
}
}
