コーディングスタイル

私たちのコードはできるだけ綺麗で読みやすいものでなければなりません。

それはまさにプログラミングの芸術です – 複雑な処理を正しく、人が読める形でコーディングすることです。

それを助ける一つが、良いコードスタイルです。

構文

ルールに基づいたチートシート(より詳細は下)です:

では、これらのルールと理由について詳細を説明します。

“変えてはいけない” ものはここにはありません。すべてはオプションであり、変更することが出来ます: それらはコーディングの好みであり、宗教的な教義ではありません。

波括弧

ほとんどのJavaScriptのプロジェクトでは、波括弧は新しい行ではなく、同じ行に書かれます。いわゆる “エジプト” スタイルです。また開始の括弧の前にはスペースがあります。

このようになります:

if (condition) {
  // do this
  // ...and that
  // ...and that
}

1行の構造も重要なエッジケースです。我々は括弧を使うべきでしょうか?その場合どうなるでしょうか?

次にいくつか注釈付きでパターンを示します。あなた自身でその可読性を判断してみてください:

まとめると:

  • 本当に短いコードであれば、if (cond) return null のように1行が許容されます:。
  • しかし、複数の文がある場合には、通常は括弧内の各文ごとに行を分けるのが良いです。

行の長さ

行の最大長は制限されるべきです。誰も横に長い行は好きではありません。それよりも行を分ける方が良いです。

行の最大長はチームで決められますが、通常は 80 もしくは 120 文字です。

インデント

2つのタイプのインデントがあります。:

  • 水平なインデント: 2(4)個のスペース

    水平なインデントは 2 または 4 つのスペース、もしくは “タブ” 記号を使います。どれを選ぶかは好みの問題です。最近はスペースが一般的です。 タブよりもスペースの方がよい点の1つは、スペースは “タブ” 記号よりもより柔軟なインデントの設定ができることです。

    例えば、このように、開始の括弧に対して引数を並べることができます:

    show(parameters,
         aligned, // 左から 5 つのスペース
         one,
         after,
         another
      ) {
      // ...
    }
  • 垂直のインデント: コードを論理ブロックに分割するための空行

    1つの関数の中でさえ、しばしば論理的な塊に分割されます。下の例では、変数の初期化、メインのループと結果返却は垂直に分かれています。:

    function pow(x, n) {
      let result = 1;
      //              <--
      for (let i = 0; i < n; i++) {
        result *= x;
      }
      //              <--
      return result;
    }

    コードがより読みやすくするために新しい行を挿入しましょう。垂直インデントなしで、コードの行が9行を超えるべきではありません。

セミコロン

セミコロンは、たとえ省略できるとしても各文の末尾に存在するべきです。

セミコロンが本当にオプションである言語がありますが、その言語はほとんど使用されていません。また、JavaScriptでは改行がセミコロンとして解釈されないケースがあり、プログラミングエラーの可能性を残します。

プログラマとしてより成熟するにつれて、セミコロンなしのスタイルを選ぶかもしれません、StandardJS, しかし、それはあなたがJavaScriptをよく知っており、かつ落とし穴があることを理解している場合にのみです。

ネストレベル

ネストのレベルが多くなり過ぎてはいけません。

if(..) { ... } で余分なネストを避けるために、ループで"continue"ディレクティブを使うことは、時には良いアイデアです。:

次の代わりに:

for (let i = 0; i < 10; i++) {
  if (cond) {
    ... // <- 1つネストレベルが増える
  }
}

このように書けます:

for (let i = 0; i < 10; i++) {
  if (!cond) continue;
  ...  // <- 余分なネストレベルなし
}

同様のことが、if/elsereturn でもできます。

例えば、下の2つの構造は同一です。

1つ目:

function pow(x, n) {
  if (n < 0) {
    alert("Negative 'n' not supported");
  } else {
    let result = 1;

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

    return result;
  }
}

2つ目:

function pow(x, n) {
  if (n < 0) {
    alert("Negative 'n' not supported");
    return;
  }

  let result = 1;

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

  return result;
}

n < 0 というエッジケースは早い段階で処理されるため、余分なネストがないメインのコードフローとなります。そのため、2つ目はより読みやすいです。

コードの下の関数

もしいくつかの "ヘルパー関数"と、それを使うコードを書く場合、それらを配置する方法が3つあります。

  1. ヘルパー関数を使うコードの上に関数を記述する:

    // 関数宣言
    function createElement() {
      ...
    }
    
    function setHandler(elem) {
      ...
    }
    
    function walkAround() {
      ...
    }
    
    // 関数を使用するコード
    let elem = createElement();
    setHandler(elem);
    walkAround();
  2. コードが最初で、その後に関数を記述

    // 関数を使用するコード
    let elem = createElement();
    setHandler(elem);
    walkAround();
    
    // --- ヘルパー関数 ---
    
    function createElement() {
      ...
    }
    
    function setHandler(elem) {
      ...
    }
    
    function walkAround() {
      ...
    }
  3. ミックス: 初めて使われる場所で関数を記述する

たいていの場合、2つ目がより好まれます。

なぜなら、コードを読むとき、私たちは最初に “何をするか” を知りたいからです。コードが最初にくるとその情報を得ることができます。そしてそれらの関数名が行うべきことに相応しいものであれば、関数の中身を読む必要は全くないかもしれません。

スタイルガイド

スタイルガイドは “書き方” についての一般的なルールを含みます: どの引用符を使うか、インデントするスペースの数、改行を置く場所など、多くの細かいことがあります。

全体でチーム全員が同じスタイルガイドを使うとき、コードは画一的になります。チームの誰がそれを書いても、同じスタイルになります。

もちろん、チームは自分たちのスタイルガイドを作ることができます。 ただしほとんどの場合、必要ありません。既に多くの実証済みの選択肢があるので、これらのうちの1つを採用するのが通常は最善の策です。

例えば:

あなたが新米の開発者であれば、この章の始めにあるチートシートから始めるとよいでしょう。その後、他のスタイルガイドを参照し、一般的な原則を知った上で最も好きなものを選択するのが良いでしょう。

自動 linter

コードのスタイルを自動でチェックできるツールがあります。それらを “linter” と呼びます。

それらの素晴らしい点は、スタイルチェックは変数や関数名の中のタイポなど、いくつかのバグも見つけることです。

なので、たとえ “コードスタイル” に固執したくない場合でも、それを導入することを推奨します。それらはタイポを見つけるのに役立ち – それだけで既に十分です。

もっとも知られているツールは:

  • JSLint – 最初の linter の1つ
  • JSHint – JSLint よりも多くの設定が可能
  • ESLint – 恐らく最も新しい linter

これらどれでも利用できます。著者は ESLint を使ってます。

ほとんどの linter はエディタに統合されます: エディタのプラグインを有効にし、スタイルの設定をするだけです。

例えば、ESLint では次のようなことをします。:

  1. Node.JS をインストールします。
  2. npm install -g eslint コマンドで ESLint をインストールします(npm は Node.JS パッケージインストーラです)
  3. あなたのJavaScriptプロジェクト(すべてのファイルを含むフォルダ)のルートに .ellintrc という名前の設定ファイルを作ります

.eslintrc の例です:

{
  "extends": "eslint:recommended",
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "rules": {
    "no-console": 0,
  },
  "indent": 2
}

ここで、ディレクティブ "extends" は “eslint:recommended” の設定に基づいていることを示し、次に我々自身の設定を指定します。

次に、ESLint と統合されたエディタで、プラグインのインストール/有効化をします。多くのエディタはそれを持っています。

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

上でも言いましたが、linter を使うと素晴らしい副次効果があります: linter はタイポを見つけます。例えば、未宣言変数へのアクセスがあった場合、linter はそれを検出し、(もしもエディタと統合してれば)それをハイライトします。ほとんどのケースでそれはタイプミスです。よってすぐに直すことができます。

そのような理由から、たとえスタイルについて関心がなくても、linter を利用することを強く勧めます。

また、特定のIDEは組み込みの linter をサポートしています。それも良いですが、ESLintの方がより柔軟なチューニングが可能です。

サマリ

このチャプターとスタイルガイドのすべての構文ルールは、可読性を高めるのが狙いなので、すべて議論の余地があります。

私たちが “より良く書くための方法” について考えるとき、唯一の基準は “コードをより読みやすく理解しやすくすること、エラーを回避するのに役立つこと” です。それがスタイルを選んだり、どちらがより良いかを議論する時に心に留めておく重要なことです。

それに関して最新の考えを知るためにスタイルガイドを読み、あなたが見つけた最高のアイデアに従いましょう。

タスク

重要性: 4

下のコードスタイルの何が悪いでしょうか?

function pow(x,n)
{
  let result=1;
  for(let i=0;i<n;i++) {result*=x;}
  return result;
}

let x=prompt("x?",''), n=prompt("n?",'')
if (n<=0)
{
  alert(`Power ${n} is not supported, please enter an integer number greater than zero`);
}
else
{
  alert(pow(x,n))
}

直してください。

あなたは次のような事に気づけます:

function pow(x,n)  // <- 引数の間にスペースがない
{  // <- 別の行に波括弧がある
  let result=1;   // <- = の両側にスペースがない
  for(let i=0;i<n;i++) {result*=x;}   // <- スペースがない
  // { ... } のコンテンツは新しい行に書くべきです
  return result;
}

let x=prompt("x?",''), n=prompt("n?",'') // <-- 技術的には可能ですが,
// 2行にしたほうがよいです。またスペースもありません。 ; もないです。
if (n<0)  // <- (n < 0) の中にスペースがありません。また、その上に余分な行があるべきです。
{   // <- 波括弧が別の行に分かれています
  // 下は -- 1行が長いです。2行に分けたほうがよいです
  alert(`Power ${n} is not supported, please enter an integer number greater than zero`);
}
else // <- "} else {" のように1行で書いたほうがいいです。
{
  alert(pow(x,n))  // spaces と ; がありません。
}

直したバリアントです:

function pow(x, n) {
  let result = 1;

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

  return result;
}

let x = prompt("x?", "");
let n = prompt("n?", "");

if (n < 0) {
  alert(`Power ${n} is not supported,
    please enter an integer number greater than zero`);
} else {
  alert( pow(x, n) );
}
チュートリアルマップ

コメント

コメントをする前に読んでください…
  • 自由に記事への追加や質問を投稿をしたり、それらに回答してください。
  • 数語のコードを挿入するには、<code> タグを使ってください。複数行の場合は <pre> を、10行を超える場合にはサンドボックスを使ってください(plnkr, JSBin, codepen…)。
  • 記事の中で理解できないことがあれば、詳しく説明してください。