Articles

コーディングスタイル

by admin

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

それは実際にはプログラミングの芸術です–複雑なタスクを取り、正しいと人間が読める方法でそれをコード化します。 良いコードスタイルはそれを大きく助けます。

構文

ここにいくつかの推奨ルールを持つチートシートがあります（詳細については以下を参照）：

ここで、ルールとその理由を詳細に説明しましょう。ここでは何も設定されていません。

“あなたは必要です”ルールはありません。

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

中括弧

ほとんどのJavaScriptプロジェクトでは、中括弧は”Egyptian”スタイルで書かれており、新しい行ではなく、対応するキーワードと同じ行に中括弧が 

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

if (condition) doSomething()if (cond) return nullのように1行許可されます。

注釈付きのバリアントは次のとおりです。

非常に簡単なコードの場合は、if (cond) return null。 しかし、コードブロック（最後のバリアント）は通常より読みやすくなります。

行の長さ

誰も長い水平線のコードを読むのが好きではありません。 それらを分割することをお勧めします。たとえば、

// backtick quotes ` allow to split the string into multiple lineslet str = ` ECMA International's TC39 is a group of JavaScript developers, implementers, academics, and more, collaborating with the community to maintain and evolve the definition of JavaScript.`;

そして、ifステートメントの場合:

if ( id === 123 && moonPhase === 'Waning Gibbous' && zodiacSign === 'Libra') { letTheSorceryBegin();}

最大行の長さはチームレベルで合意する必要があります。 通常は80文字または120文字です。

インデント

インデントには二つのタイプがあります。

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

    水平方向のインデントは、2つまたは4つのスペースまたは水平方向のタブ記号（キータブ）を使用して作成されます。 どちらを選ぶかは古い聖戦です。 スペースは、今日ではより一般的です。

    タブに対するスペースの利点の一つは、スペースがタブシンボルよりも柔軟なインデントの設定を可能にすることです。

    たとえば、パラメータを開始括弧で整列させることができます。

    show(parameters, aligned, // 5 spaces padding at the left one, after, another ) { // ...}

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

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

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

    • コードを読みやすくするのに役立つ余分な改行を挿入します。 垂直インデントのないコードは、9行を超えてはいけません。

    セミコロン

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

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

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

    ネストレベル

    コードのネストを回避しようとすると、深すぎるレベルがあります。たとえば、ループ内では、余分なネストを避けるためにcontinueif条件を次のように追加する代わりに、

    for (let i = 0; i < 10; i++) { if (cond) { ... // <- one more nesting level }}

    次のように書くことができます:同様のことは、if/elsereturnで行うことができます。たとえば、以下の2つの構成要素は同一です。

    P>

    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;}

    二つ目のものは、

    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;}

    二つ目のものは、

    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;}

    二つ目のものは、

    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;}

    二つ目のものは、は早い段階で処理されます。 チェックが完了したら、追加のネストを必要とせずに”メイン”コードフローに進むことができます。

    関数の配置

    いくつかの”ヘルパー”関数とそれらを使用するコードを記述している場合、関数を整理するには三つの方法があります。

    ほとんどの場合、第二の変種が好ましい。これは、コードを読むときに、最初にコードが何をするのかを知りたいからです。 コードが最初に行く場合、それは最初から明らかになります。 次に、関数の名前が実際に何をしているのかを説明している場合は特に、関数をまったく読む必要はないかもしれません。

    スタイルガイド

    スタイルガイドには、使用する引用符、インデントするスペースの数、行の最大長など、コードの”書き方”に関する一般的なルールが含 マイナーなものがたくさん。

    チームのすべてのメンバーが同じスタイルガイドを使用すると、どのチームメンバーがそれを書いたかにかかわらず、コードは均一に見えます。

    もちろん、チームは常に独自のスタイルガイドを書くことができますが、通常はする必要はありません。 から選択する多くの既存のガイドがあります。いくつかの人気のある選択肢

    :/p>

    • Google JavaScriptスタイルガイド
    • Airbnb JavaScriptスタイルガイド
    • 慣用。JS
    • StandardJS
    • （さらに多くの）

    あなたが初心者の開発者であれば、この章の冒頭にあるチートシートから始めてください。 次に、他のスタイルガイドを参照して、より多くのアイデアをピックアップし、あなたが一番好きなものを決定することができます。

    自動化されたリンター

    リンターは、コードのスタイルを自動的にチェックし、改善の提案を行うことができるツールです。それらの素晴らしいところは、スタイルチェックが変数名や関数名のタイプミスのようないくつかのバグを見つけることもできるということです。 この機能のため、特定の”コードスタイル”に固執したくない場合でも、linterを使用することをお勧めします。

    よく知られているリンティングツールは次のとおりです。

    • JSLint–最初のリンターの1つ。
    • JSHint–JSLintよりも多くの設定。
    • ESLint–おそらく最新のものです。

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

    ほとんどのリンターは、多くの人気のあるエディタと統合されています: エディタでプラグインを有効にし、スタイルを設定するだけです。たとえば、ESLintの場合は、次の操作を行う必要があります。

    1. Install Node。js”を発表した。
    2. コマンドでESLintをインストールしますnpm install -g eslint（npmはJavaScriptパッケージインストーラです）。JavaScriptプロジェクトのルート（すべてのファイルを含むフォルダー）に.eslintrcという名前の設定ファイルを作成します。
    3. ESLintと統合されたエディタのプラグインをインストール/有効にします。 編集者の大半は1つを持っています。ここでは、.eslintrc"extends"は、設定が”eslint:recommended”設定セットに基づいていることを示します。 その後、私たちは独自のものを指定します。webからスタイルルールセットをダウンロードして、代わりにそれらを拡張することもできます。

      インストールの詳細については、http://eslint.org/docs/user-guide/getting-startedを参照してください。

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

      Summary

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

      “より良い”コードを書くことを考えるとき、私たちは自分自身に尋ねるべきです：”コードをより読みやすく、理解しやすくするのは何ですか？”と”何が私たちはエラーを回避することができますか？”これらは、コードスタイルを選択して議論するときに留意すべき主なものです。

      人気のあるスタイルガイドを読むと、コードスタイルの傾向とベストプラクティスに関する最新のアイデアを最新の状態に保つことができます。

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    You may like

    あなたの読書を追跡するための三つの最良の方法

    1月 7, 2022

    あなたの前部負荷洗濯機ドライブベルトを取り替える方法

    1月 7, 2022