ナビゲータのEVEです。
昨日は、 PHP の コーディング規約 について紹介しましたが、本日は、 JavaScript のコーディング規約について紹介したいと思います。
ただ、先ほどまで全く考えていなかったので、まずは、 ChatGPT に、 Google JavaScript コーディング規約を調べてもらおうと思います。
[Google JavaScriptコーディング規約]
2024年9月12日に、EVE VProjectのJavaScriptコーディング規約を、どこのコーディング規約に揃えるかという話しをしました。その検討の結果、Googleになったのですが、決まったことだけを報告しどのようなコーディング規約にするのか検討・報告していませんでした。まっ、この検討をしている時には既に、既存のJavaScriptをすべてクラス変換した後だったので、今までは検討する必然性がなかったからなのですが・・・。ただ、昨日PHPのコーディング規約を決めた結果を、ChatGPTに評価してもらったところ、PHP、JavaScript双方に関連する変更点が出てきたため、今回、JavaScriptの検討をすることにしました。
それでは、早速Googleのコーディング規約について、ChatGPTに聞いてみましょう！
GoogleのJavaScriptコーディング規約は、コードの可読性と一貫性を高め、チームでの共同作業をスムーズに進めるためのルールセットです。以下に、主要なポイントを詳細に説明します。
?スタイルとインデント
1)インデント: 2スペースを使用します。タブは使用しません。
?変数の宣言
1)constとletの使用:
2)可能な限りconstを使用し、再代入する必要がある場合のみletを使用します。
3)varは使わず、ES6で導入されたconstやletを推奨します。
4)スコープ: 変数は可能な限り宣言のスコープを限定します。グローバル変数は避け、ブロックや関数スコープ内で定義します。
?命名規則
1)変数名や関数名: キャメルケース（例: camelCase）を使用します。
2)クラス名: パスカルケース（例: PascalCase）を使用します。
3)定数: 定数は全て大文字でアンダースコアで単語を区切ります（例: MAX_COUNT）。
?関数のスタイル
1)矢印関数: 短い関数は、ES6の矢印関数（=>）を使って簡潔に記述します。
2)関数の宣言と式: 宣言形式（function foo() {}）と関数式（const foo = function() {}）の両方が使用されますが、必要に応じて使い分けます。矢印関数は短く、thisをバインドする必要がない場合に推奨されます。
?オブジェクトと配列のリテラル
1)オブジェクト: オブジェクトリテラルは短縮プロパティ名やメソッドの略記法を使用します。
2)配列: 配列リテラル（[]）を使用します。new Array()は使いません。
?コメント
1)ブロックコメント: 複数行の説明が必要な場合は、/* */を使ってブロックコメントを書きます。
2)行コメント: 1行コメントは//を使用します。
3)JSDoc: 関数やクラスにはJSDoc形式でドキュメントコメントを追加し、パラメータや戻り値を記述します。
?クラスとメソッド
1)クラス名はパスカルケースで記述します。
2)プライベートメソッドやフィールドには、ES2020で導入された#記号を使います（例: #privateField）。
3)コンストラクタでクラスのフィールドを初期化します。
?エラーハンドリング
エラーハンドリングにはtry-catchを使用し、エラーオブジェクトに詳細な情報を含めます。
?セミコロンの使用
1)JavaScriptは自動セミコロン挿入（ASI）機能を持っていますが、明示的にセミコロンを付けることが推奨されます。
?イミュータブル性
1)可能な限りオブジェクトや配列はイミュータブルに保ち、Object.freeze()やスプレッド演算子（...）を使ってコピーを作成します。
?テンプレート文字列
文字列の結合には+ではなく、バックティック（`）を使ったテンプレートリテラルを使用します。
?ES6+ 機能の使用
1)ES6以降で導入された機能（例: const, let, アロー関数、テンプレートリテラル、classなど）を使用します。
2)importとexportを使ってモジュールを分割し、コードをモジュール化します。
意味不明な記述もあるのですが、この規約を、昨日作ったPHP規約とマージします。
[Google JavaScriptコーディング規約とEVE VProjectPHPコーディング規約のマージ]
以下が、Google JavaScriptコーディング規約とPSRをもとにして作成した、EVE VProjectのJavaScriptのコーディング規約です。やはり、Google JavaScriptコーディング規約と PSR は、似ているといった印象です。JavaScriptもPHPもどちらも、 秀丸 で製造しているので、間違えてしまいそうです。
まだ、明確に理解していない点が多々あるため、暫定的な規約だとご承知ください。
【クラス】
★Class機能概要
・1ファイル1クラスで記述する
・1要素、1インスタンスで処理をする。
→処理対象の要素1つに対して、1インスタンスで操作する。
★クラス命名規約
・パスカルケースで記述する。
・クラス名の最後にClassとつける
・ファイル名と同一名とする。
★クラス記述規約
・クラスの開始ブレース（{）は、クラス名の次の行 に配置します。
・クラスのプロパティとメソッド間には、1行の空行を挿入します。
・引数は1行ずつ記述し、70バイト目にその名称を記述する。
★クラス変数
・コンストラクタでクラスのフィールドを初期化します。
【コンストラクタ】
★コンストラクタ機能
・引数は必ず入力データチェックを行う。
・引数として取得した値は、クラスの変数として設定する。
・Classの特性をよく理解し、取得した引数のプロパティ情報を取得し、クラス変数として管理する。
【メソッド】
★メソッド機能
・引数は必ず入力データチェックを行う。
・正常時には目的の値を返却するが、異常の場合は、必ずfalseを値として返却する。
・異常時の詳細な情報は、クラス変数として管理し、必要に応じて内容を確認できるように製造する。
・異常時の場合は、処理の途中で中断できるが、正常な場合は、メソッドの最終行で値を返却する。
・返却値としてメソッド内で共通の変数を利用した場合、rtnとする。
★メソッドの記述
・引数は1行ずつ記述し、70バイト目にその名称を記述する。
・メソッド内使用変数はメソッドの先頭にすべて記述する。
・変数名は、変数名のみを記述し、場合によって、初期化する。
・メソッドの開始ブレース（{）は、メソッド名の次の行 に配置します。
・メソッドの引数リストが長い場合、複数行に分けることができます。この場合、各引数は新しい行に配置し、カンマで区切ります。
・返却値の型は引数と行を別にする。
・返却値の型はメソッドの{と同じ列に記述する。
★メソッド命名規約
・キャメルケースで記述します。
・privateメソッドの場合先頭に、#をつける。
【関数】
・HTML内JavaScriptは、function関数で製造します。
・矢印関数: 短い関数は、ES6の矢印関数（=>）を使って簡潔に記述します。
・関数宣言は矢印関数を推奨します。特にコールバックや匿名関数には矢印関数を使います。
・名前のある関数には function キーワードを使うこともありますが、通常は const を使い、矢印関数を利用します。
【プロパティ】
・キャメルケースで記述します。
★クラス変数機能
・クラス変数の設定は、同一クラス外から設定する場合、setメソッドを製造する。
・クラス変数の取得は、同一クラス外から取得する場合、getメソッドを製造する。
★クラス変数命名規約
・privateプロパティの頭に#をつける
★定数
・定数名：定数名はすべて大文字で、単語の区切りにアンダースコア（_）を使用します。
★メソッド内変数
・メソッド内の処理結果を格納する変数は、何も制約がない場合ansにする。
・Boolean変数には is、has、should などのプレフィックスを付けて、真偽値を表していることが明確になるようにします。
・プライベートプロパティには先頭に#をつけて、他のコードから直接アクセスしない意図を示します
*プライベートプロパティとは、PHP、Javaでいうprivate変数を指します。
・var は使わず、const または let を使う。const は再代入されない変数に使い、let は再代入が必要な変数に使います。
【文字列】
・文字列は必ずシングルクォート（'）を使用します。テンプレートリテラル（バッククォート）は、変数を含める場合に使用します。
【コメント】
・JSDoc: 関数やクラスにはJSDoc形式でドキュメントコメントを追加し、パラメータや戻り値を記述します。
/**
* This method sets the error message.
*
* @param string $errMsg Error message to set
* @return bool True on success, False on failure
*/
・クラス、メソッドのヘッダには、以下の内容を記述する。
┣ Class Name(クラス名)
┣ Function Name(メソッド名)
┣ Parameters(引数)
┣ Return Value(返却値)
┃┣ On Success(正常時)
┃┗ On Failure(異常時)
┣ Author(製造者)
┣ Creation Date(製造年月日)
┣ Update Date(更新年月日)
┣ Release Date(リリース日)
┣ Version(バージョン)
┣ Summary(概要)
┣ Remarks(備考)
┗ Notes(注意)概要 ← 必要に応じて
・コメントを1行で記述する場合は、同コメントは次行のプログラムを機能を説明するものでなければならない。
・コメントは、70バイト目から記述する
┗70バイト目から記述するコメントは、変数等の名称でなければならない。
・コメントの内容とプログラムが矛盾がないように記述する。
・コメントを//で記述する場合、//の後に1バイトスペースを挿入する。
【オブジェクト・配列】
★配列の記述
・配列は ショート配列構文 ([]) を使用します。
・配列が複数行にまたがる場合、各要素は新しい行に配置し、インデントします。
・配列は複数形の名前を使うことが推奨されています。これは配列に複数の要素が含まれることを意味するためです。
★配列処理
・forEach, map, filter, reduce など、組み込みの配列メソッドを積極的に使用します。
・可能な限りオブジェクトや配列はイミュータブルに保ち、Object.freeze()やスプレッド演算子（...）を使ってコピーを作成します。
★オブジェクトと配列
・オブジェクトリテラルや配列リテラルを使用する。
・オブジェクトプロパティや配列要素は適切なインデントで記述します。
*人の体と言ったら、頭、手といった形で変数を作るのではなく、配列で表現するという意味らしい？
【例外処理】
★例外処理
・例外処理は、try〜catchで記述し、エラーの場合は処理を終了する。
★例外処理の記述
・try、catch 句の開始ブレースは、同じ行に配置します。
・catch 句は、前の try ブロックと同じインデントレベルで記述します。
・クラス変数をすべて初期化する。
【共通記述方式】
・＝(イコール)の位置は、できるだけ、コンストラクタ内、メソッド内で先頭から同じ位置に記述する。
・if文で判定する場合、判定条件は1行ずつに記述し分かりやすく記述する。
・ファイルの終了行
┗ファイルの最後には必ず 空行を1行 入れます。
・キーワードや制御構造のスタイル
┣キーワード （if、else、while、switch など）の後には、スペース を入れます。
┣制御構造の条件式の前後にはスペースを入れます。
┣開始ブレース（{）は同じ行に配置します。
┗switch 文の case と default は、インデントされませんが、その内部のコードはインデントされます。break ステートメントは case 内でインデントします。
・常に文の終わりにセミコロンを付けます。
・ブロック内の文は必ず {} で囲みます。複数行の if や else の条件式には適切なインデントを使用します。
・ES6（ECMAScript 2015）以降の新機能を積極的に利用します。特に、const や let、arrow functions、class、template literals、destructuring などを使います。
javascript
・最大80バイトとするが、80バイトを越える場合120バイトまで許容する。
・120バイトを越える場合改行して記述する。
【インデント】
・1インデント、2バイトとする。
[あとがき]
昨日、ChatGPTに指摘された部分を、JavaScriptに取り入れました。 クラス ヘッダ、ヘッダの部分なのですが、PHPもJavaScriptも同じ記述方法なので、ここは揃えるまでもなく、既に製造した、EVEシステムを変更すべきでしょう？JavaScriptを1クラスこの仕様に基づいて作り変えた見たのですが、文字列置換だけで何とかなりそうです。
ブログをアップロード後、ちょっと休んでから、ChatGPTでのデバックをしながら、修正したいと思います。その前に、昨日公開したPHPのコーディング規約を修正する方が先ですか？
では、また！！！
■JavaScriptの世界標準規約 〜プログラム研究室〜2024年9月12日)
https://fanblogs.jp/bahamuteve/archive/488/0
【このカテゴリーの最新記事】
