ホーム>Web デザインのチュートリアル>JavaScript チュートリアル

コーディングスタイル

著者：Eve Cole 更新時間：2025-01-06 14:19:37

コードは可能な限りクリーンで読みやすくする必要があります。

これは実際にはプログラミングの技術であり、複雑なタスクを処理し、それを正確かつ人間が読める方法でコーディングすることです。優れたコード スタイルは、これに大いに役立ちます。

構文

以下に、いくつかの推奨ルールを記載したチートシートを示します (詳細については以下を参照してください)。

それでは、ルールとその理由について詳しく説明していきます。

「必ずしなければならない」というルールはありません

ここでは何も決まっていません。これらはスタイルの好みであり、宗教的な教義ではありません。

中括弧

ほとんどの JavaScript プロジェクトでは、中括弧は「エジプト」スタイルで記述され、左中括弧は新しい行ではなく、対応するキーワードと同じ行に置かれます。次のように、左括弧の前にもスペースが必要です。

 if (条件) {
  // これを実行してください
  // ...そしてそれ
  // ...そしてそれ
}

if (condition) doSomething()などの単一行の構造は、重要なエッジ ケースです。そもそも中括弧を使用すべきでしょうか?

以下に注釈付きのバリアントを示しますので、読みやすさをご自身で判断してください。

  1. ?初心者は時々そうします。悪い！中括弧は必要ありません。

     if (n < 0) {alert(`Power ${n} はサポートされていません`);}

  2. ?中括弧なしで別の行に分割します。新しい行を追加するときに間違いが発生しやすいので、決して行わないでください。

     if (n < 0)
  alert(`パワー ${n} はサポートされていません`);

  3. ?中括弧なしの 1 行 – 短い場合でも許容されます。

     if (n < 0)alert(`Power ${n} はサポートされていません`);

  4. ?最良のバリエーション:

     if (n < 0) {
  alert(`パワー ${n} はサポートされていません`);
}

非常に短いコードの場合は、1 行が許可されます (例: if (cond) return null 。ただし、通常はコード ブロック (最後のバリアント) の方が読みやすいです。

線の長さ

長い水平行のコードを読みたくない人はいません。それらを分割することをお勧めします。

例えば：

 // バックティック引用符 ` を使用すると、文字列を複数の行に分割できます
str = ` にしておきます
  ECMA International の TC39 は JavaScript 開発者のグループです。
  実装者、学者などがコミュニティと協力
  JavaScript の定義を維持し、進化させるため。
`;

そして、for ifステートメントは次のようになります。

もし （
  ID === 123 &&
  MoonPhase === '下弦のギブス' &&
  星座 === 「天秤座」
) {
  letTheSorceryBegin();
}

ラインの最大長についてはチームレベルで合意する必要があります。通常は 80 文字または 120 文字です。

インデント

インデントには次の 2 種類があります。

  • 水平方向のインデント: 2 つまたは 4 つのスペース。

    水平方向のインデントは、2 つまたは 4 つのスペース、または水平タブ記号 (キーTab ) を使用して作成されます。どちらを選ぶかは古き聖戦。最近ではスペースがより一般的になっています。

    タブに対するスペースの利点の 1 つは、スペースを使用すると、タブ記号よりも柔軟にインデントを構成できることです。

    たとえば、次のようにパラメータを左括弧に揃えることができます。

     show(パラメータ,
     aligned, // 左側に 5 つのスペースが埋め込まれます
     1つ、
     後、
     別の
  ) {
  // ...
}

  • 垂直インデント: コードを論理ブロックに分割するための空行。

    単一の機能であっても、多くの場合論理ブロックに分割できます。以下の例では、変数の初期化、メインループ、および結果を返す処理が垂直に分割されています。

    関数 pow(x, n) {
  結果 = 1 とします。
  // <--
  for (let i = 0; i < n; i++) {
    結果 *= x;
  }
  // <--
  結果を返します。
}

    コードを読みやすくするために追加の改行を挿入します。垂直インデントのないコードは 9 行を超えてはなりません。

セミコロン

スキップできる可能性がある場合でも、各ステートメントの後にセミコロンが存在する必要があります。

セミコロンが本当にオプションであり、めったに使用されない言語もあります。ただし、JavaScript では改行がセミコロンとして解釈されない場合があり、コードがエラーに対して脆弱になります。詳細については、「コード構造」の章を参照してください。

経験豊富な JavaScript プログラマーであれば、StandardJS のようなセミコロンのないコード スタイルを選択することもできます。それ以外の場合は、起こり得る落とし穴を避けるためにセミコロンを使用することをお勧めします。大多数の開発者はセミコロンを入れます。

ネストレベル

コードをあまりにも多くのレベルに入れ子にしないようにしてください。

たとえば、ループ内では、余分な入れ子を避けるためにcontinueディレクティブを使用することが良い場合があります。

たとえば、次のようにネストされたif条件を追加する代わりに、次のようにします。

 for (i = 0; i < 10; i++) {
  if (条件) {
    ... // <- もう 1 つのネスト レベル
  }
}

次のように書くことができます:

 for (i = 0; i < 10; i++) {
  if (!cond) 継続;
  ... // <- 追加のネストレベルなし
}

同様のことをif/elseとreturnで実行できます。

たとえば、以下の 2 つの構成は同一です。

オプション 1:

関数 pow(x, n) {
  if (n < 0) {
    alert("負の 'n' はサポートされていません");
  } それ以外 {
    結果 = 1 とします。

    for (let i = 0; i < n; i++) {
      結果 *= x;
    }

    結果を返します。
  }
}

オプション 2:

関数 pow(x, n) {
  if (n < 0) {
    alert("負の 'n' はサポートされていません");
    戻る;
  }

  結果 = 1 とします。

  for (let i = 0; i < n; i++) {
    結果 *= x;
  }

  結果を返します。
}

2 番目の方法は、 n < 0の「特殊なケース」が早い段階で処理されるため、より読みやすくなっています。チェックが完了したら、追加のネストを必要とせずに「メイン」コード フローに進むことができます。

機能の配置

複数の「ヘルパー」関数とそれらを使用するコードを作成する場合、関数を整理するには 3 つの方法があります。

  1. 関数を使用するコードの上で関数を宣言します。

     // 関数宣言
関数 createElement() {
  ...
}

関数 setHandler(elem) {
  ...
}

関数 walkAround() {
  ...
}

// それらを使用するコード
let elem = createElement();
setHandler(elem);
walkAround();

  2. 最初にコードを作成し、次に関数を作成します

    // 関数を使用するコード
let elem = createElement();
setHandler(elem);
walkAround();

// --- ヘルパー関数 ---
関数 createElement() {
  ...
}

関数 setHandler(elem) {
  ...
}

関数 walkAround() {
  ...
}

  3. 混合: 関数は最初に使用される場所で宣言されます。

ほとんどの場合、2 番目のバリアントが優先されます。

それは、コードを読むとき、まずそれが何をするのかを知りたいからです。コードが最初にある場合は、最初から明らかです。そうすれば、特に関数の名前が実際に何をするのかを説明している場合には、関数をまったく読む必要がなくなるかもしれません。

スタイルガイド

スタイルガイドには、コードの「書き方」に関する一般的なルールが含まれています。たとえば、どの引用符を使用するか、インデントするスペースの数、行の最大長などです。多くの細かい事項が含まれています。

チームのメンバー全員が同じスタイル ガイドを使用すると、コードをどのチーム メンバーが作成したかに関係なく、コードは均一に見えます。

もちろん、チームはいつでも独自のスタイル ガイドを作成できますが、通常はその必要はありません。選択できる既存のガイドが多数あります。

一般的な選択肢としては次のようなものがあります。

  • Google JavaScript スタイルガイド

  • Airbnb JavaScript スタイルガイド

  • Idiomatic.JS

  • 標準JS

  • (他にもたくさんあります)

初心者の開発者は、この章の冒頭にあるチートシートから始めてください。その後、他のスタイル ガイドを参照して、より多くのアイデアを見つけて、どれが最も気に入ったかを決定することができます。

自動リンター

リンターは、コードのスタイルを自動的にチェックし、改善の提案を行うことができるツールです。

これらの優れた点は、スタイル チェックで変数名や関数名のタイプミスなどのバグも検出できることです。この機能のため、特定の「コード スタイル」に固執したくない場合でも、リンターを使用することをお勧めします。

よく知られているリンティング ツールをいくつか紹介します。

  • JSLint – 最初のリンターの 1 つ。

  • JSHint – JSLint より多くの設定。

  • ESLint – おそらく最新のものです。

全員がその仕事をすることができます。著者は ESLint を使用しています。

ほとんどのリンターは多くの一般的なエディターと統合されています。エディターでプラグインを有効にしてスタイルを構成するだけです。

たとえば、ESLint の場合は次のことを行う必要があります。

  1. Node.jsをインストールします。

  2. コマンドnpm install -g eslintを使用して ESLint をインストールします (npm は JavaScript パッケージ インストーラーです)。

  3. JavaScript プロジェクトのルート (すべてのファイルが含まれるフォルダー内) に.eslintrcという名前の構成ファイルを作成します。

  4. ESLint と統合するエディターのプラグインをインストール/有効にします。大多数の編集者はそれを持っています。

.eslintrcファイルの例を次に示します。

 {
  "extends": "eslint: 推奨",
  "環境": {
    "ブラウザ": true、
    "ノード": true、
    "es6": true
  }、
  「ルール」: {
    「コンソールなし」: 0、
    「インデント」: 2
  }
}

ここで、ディレクティブ"extends"は、構成が「eslint:recommended」設定セットに基づいていることを示します。その後、独自に指定します。

Web からスタイル ルール セットをダウンロードして、代わりに拡張することもできます。インストールの詳細については、https://eslint.org/docs/user-guide/getting-started を参照してください。

また、特定の IDE には lint 機能が組み込まれており、これは便利ですが、ESLint ほどカスタマイズ可能ではありません。

まとめ

この章 (および参照されているスタイル ガイド) で説明されているすべての構文規則は、コードの可読性を高めることを目的としています。それらはすべて議論の余地があります。

「より良い」コードを書くことを考えるとき、自問すべき質問は次のとおりです。「コードをより読みやすく、理解しやすくするものは何か?」 「エラーを回避するには何が役立つでしょうか?」コード スタイルを選択したり議論したりする際に留意すべき主な点は次のとおりです。

人気のスタイル ガイドを読むと、コード スタイルの傾向とベスト プラクティスに関する最新のアイデアを常に把握できます。

タスク

悪いスタイル

重要度: 4

以下のコードスタイルのどこが間違っているのでしょうか?

関数 pow(x,n)
{
  結果 = 1 にします。
  for(let i=0;i<n;i++) {result*=x;}
  結果を返します。
}

let x=prompt("x?",''), n=prompt("n?",'')
if (n<=0)
{
  alert(`Power ${n} はサポートされていません。0 より大きい整数を入力してください`);
}
それ以外
{
  アラート(pow(x,n))
}

修正してください。

次の点に注意してください。

 function pow(x,n) // <- 引数の間にスペースはありません
{ // <- 別行の図括弧
  結果 = 1 にします。   // <- 前後にスペースは入れません =
  for(let i=0;i<n;i++) {result*=x;} // <- スペースは使用できません
  // { ... } の内容は新しい行に置く必要があります
  結果を返します。
}

let x=prompt("x?",''), n=prompt("n?",'') // <-- 技術的には可能、
// ただし、スペースや欠落がないように 2 行にしたほうがよいでしょう。
if (n<=0) // <- (n <= 0) の中にスペースはなく、その上に余分な行が必要です
{ // <- 別行の図括弧
  // 以下 - 読みやすさを向上させるために、長い行を複数の行に分割できます
  alert(`Power ${n} はサポートされていません。0 より大きい整数を入力してください`);
}
else // <- "} else {" のように 1 行で書くこともできます
{
  alert(pow(x,n)) // スペースや欠落はありません。
}

修正されたバリアント:

関数 pow(x, n) {
  結果 = 1 とします。

  for (let i = 0; i < n; i++) {
    結果 *= x;
  }

  結果を返します。
}

let x = プロンプト("x?", "");
let n = プロンプト("n?", "");

if (n <= 0) {
  alert(`Power ${n} はサポートされていません。
    ゼロより大きい整数を入力してください`);
} それ以外 {
  アラート( pow(x, n) );
}
関連記事