JavaScriptガイドパート2：コードスタイルとプログラム構造

本日、JavaScriptチュートリアルの次の部分の翻訳を公開しています。 ここでは、コードのスタイルとプログラムの字句構造について説明します。

→ パート1：最初のプログラム、言語機能、標準
→ パート2：コードスタイルとプログラム構造
→ パート3：変数、データ型、式、オブジェクト
→ パート4：機能
→ パート5：配列とループ
→ パート6：例外、セミコロン、ワイルドカードリテラル
→ パート7：厳格モード、このキーワード、イベント、モジュール、数学計算
→ パート8：ES6機能の概要
→ パート9：ES7、ES8、およびES9標準の概要

プログラミングスタイル

「プログラミングスタイル」または「コーディング標準」または「コードスタイル」は、プログラムを作成するときに使用される一連の規則です。 これらは、コード設計の機能とあいまいな構成を使用する手順を管理します。 私たちのケースでは、JavaScriptで書かれたプログラムについて話しています。 プログラマが自分で特定のプロジェクトに取り組む場合、彼が使用するコードスタイルは、自分との「契約」を表しています。 チームについて話している場合、これらはすべてのチームメンバーが使用する契約です。 特定のルールセットを使用して記述されたコードは、ソフトウェアプロジェクトのコードベースを統一し、コードの可読性とわかりやすさを向上させます。

多くのスタイルガイドがあります。 JavaScriptの世界で最も一般的に使用されている2つを以下に示します。

• Google JavaScriptスタイルガイド
• AirBnb JavaScriptスタイルガイド

それらのいずれかを選択するか、独自のルールを考え出すことができます。 最も重要なことは、特定のプロジェクトで作業するときに同じルールを一貫して使用することです。 さらに、たとえば、1つのルールセットを順守し、作業する必要がある既存のプロジェクトで独自のルールを使用する場合、プロジェクトのルールを順守する必要があります。

コードを手動でフォーマットするか、このプロセスに自動化ツールを使用できます。 実際、JSコードのフォーマットと起動前のチェックは、別の大きなトピックです。 関連するツールとその使用機能に特化した出版物の1つを次に示します。

このガイドで使用されているスタイル

この資料の著者は、彼自身のスタイルガイドの例として、コードを記述するときに従おうとする一連の規則を示しています。 彼は、例のコードは最新バージョンのブラウザで利用可能な標準の最新バージョンに焦点を合わせていると言います。 つまり、このようなコードをレガシーブラウザーで実行するには、Babelなどのトランスパイラーを使用する必要があります。 JSトランスパイラーを使用すると、言語の新機能を使用して記述されたコードを変換できるため、これらの新機能をサポートしていないブラウザーで実行できます。 トランスパイラーは、まだ標準ではない、つまり、最新のブラウザーでも実装されていない言語機能のサポートを提供できます。

問題のルールのリストは次のとおりです。

• アライメント。 コードのブロックを整列するには、スペースが使用されます（1レベルの整列ごとに2つのスペース）、タブは使用されません。
• セミコロン。 セミコロンは使用されません。
• 行の長さ 80文字（可能な場合）。
• 1行のコメント。 このようなコメントはコードで使用されます。
• 複数行のコメント。 これらのコメントは、コードを文書化するために使用されます。
• 未使用のコード。 未使用のコードは、後で必要になる場合に備えて、プログラム内でコメント化されたままになりません。 そのようなコードは、まだ必要な場合、バージョン管理システム、使用されている場合、またはそのようなコードを保存することを意図したプログラマーのメモのようなもので見つけることができます。
• コメントルール。 明らかなことについてコメントする必要はありません。コードの本質を理解するのに役立たないコメントをコードに追加してください。 適切に選択された関数名と変数名、および関数のJSDoc記述のおかげでコード自体が説明されている場合、このコードに追加のコメントを追加しないでください。
• 変数宣言。 グローバルオブジェクトの汚染を防ぐため、変数は常に明示的に宣言されます。 varキーワードは使用されません。 プログラムの実行中に変数の値を変更する予定がない場合は、 constキーワードを使用して、定数の形式で宣言されます（同様の定数は「変数」とも呼ばれます）。デフォルトで使用します-変数の値を変更する場合を除きます。 このような場合、 letキーワードが使用されます。
• 定数 プログラムの一部の値が定数である場合、それらの名前は大文字で構成されます。 たとえば、 CAPSです。 複数の単語で構成される名前の部分を区切るには、アンダースコア（ _ ）が使用されます。
• 機能 関数宣言は矢印構文を使用します。 通常の関数宣言は、特別な場合にのみ適用されます。 特に、オブジェクトのメソッドまたはデザイナー。 これは、 this機能のために行われます。 関数はconstキーワードを使用して宣言する必要があり、可能であれば、関数から作業の結果を明示的に返す必要があります。 メインコードからいくつかの補助メカニズムを隠すために、ネストされた関数の使用は禁止されていません。

以下に、単純な矢印関数のペアの例を示します。

 const test = (a, b) => a + b const another = a => a + 2 

• エンティティの命名。 オブジェクトの関数、変数、およびメソッドの名前は常に小文字で始まり、複数の単語で構成される名前はキャメルスタイル（ camelCaseなどの名前）を使用してcamelCase 。 コンストラクター関数とクラスの名前のみが大文字で始まります。 エンティティの命名に特別な要件があるフレームワークを使用する場合は、それによって規定されているルールを使用してください。 ファイル名は小文字で構成する必要があり、名前の個々の単語はダッシュ（ - ）で区切られます。
• 式を構築およびフォーマットするためのルール。

の場合 。 条件付きifを作成する方法は次のとおりです。

 if (condition) { statements } if (condition) { statements } else { statements } if (condition) { statements } else if (condition) { statements } else { statements } 

のために 。 ループを整理するには、標準のforコンストラクトを使用します（その例を以下に示します）、またはfor ofループを使用します。 for in .hasOwnProperty()は避ける必要があり.hasOwnProperty()構成で使用しない限り。 これがforループ図です。

 for (initialization; condition; update) { statements } 

ながら 。 while概略例を次に示しwhile 。

 while (condition) { statements } 

やる doループの構造は次のとおりです。

 do { statements } while (condition); 

スイッチ 以下は、条件付きswitch図です。

 switch (expression) { case expression:   statements default:   statements } 

試してください 。 try-catchコンストラクトの設計オプションは次のとおりです。 最初の例は、 finallyブロックのないこの構造を示し、2番目の例はそのようなブロックを示しています。

 try { statements } catch (variable) { statements } try { statements } catch (variable) { statements } finally { statements } 

• スペース 。 スペースは賢明に使用する必要があります。つまり、コードの可読性の向上に貢献する必要があります。 そのため、スペースはキーワードの後に​​開き括弧が続き、2つのオペランド（ + 、 - 、 / 、 * 、 &&など）に適用される演算子で囲まれます。 forループ内ではforセミコロンの後にスペースが使用され、ループヘッダーの各部分が互いに分離されます。 コンマの後にスペースが置かれます。
• 空行 。 空の行は、互いに論理的に接続された操作を含むコードブロックを示します。
• 引用符 。 文字列を操作する場合、二重引用符（ " ）ではなく、単一引用符（ ' ）が使用されます。通常、二重引用符はHTML属性で使用されるため、単一引用符を使用すると、HTML文字列を操作する際の問題を回避するのに役立ちます。 、たとえば、連結、テンプレートリテラルを使用する必要があります。これは、バックティック（ ` ）を使用して描画されます。

JavaScriptコードの字句構造

JavaScriptコードの構成要素について話しましょう。 特に、Unicodeエンコードの使用、セミコロン、スペース、文字の大文字小文字の区別、コメント、リテラル、識別子、予約語についてです。

▍Unicode

JavaScriptコードは、Unicodeエンコードを使用して表されます。 これは、特に、コードで、たとえば絵文字を変数名として使用できることを意味します。 もちろん、そうすることはお勧めできません。 ここで重要なのは、特定のルールに従って識別子の名前を任意の言語、たとえば日本語や中国語で記述できることです。

▍セミコロン

JavaScriptシンタックスはCシンタックスに似ており、各行の最後にセミコロンがある多くのプロジェクトを見つけることができます。 ただし、JavaScriptの行末のセミコロンはオプションです。 ほとんどの場合、セミコロンなしで実行できます。 JSより前に、セミコロンが適用されていない言語を使用していた開発者は、JavaScriptでそれらを使用しない傾向があります。

コードを書くときに、奇妙な構造を使用したり、括弧や角括弧で行を開始したりしない場合、99.9％のケースで間違いを犯しません（もしあれば、リンターがエラーの可能性を警告できます）。 たとえば、 "奇妙なデザイン"の場合、これを次のように属性付けできます。

 return variable 

セミコロンを使用するかどうかは、すべてのプログラマーにとって個人的な問題です。 たとえば、このマニュアルの著者は、不要な場合はセミコロンを使用しないことに決めたため、ここで示した例ではセミコロンが非常にまれであると述べています。

▍ギャップ

JavaScriptはスペースに注意を払いません。 もちろん、特定の状況では、スペースが存在しないとエラーが発生します（また、あるべきではない不適切なスペースもあります）が、多くの場合、プログラムの特定の部分にスペースが存在しないことと1つ以上のスペースが存在することとの間に違いはありません。 同様の記述は、スペースだけでなく、改行、およびタブにも当てはまります。 これは、たとえば縮小コードで特に顕著です。 たとえば、 クロージャコンパイラで処理されたコードがどのようになるかを見てください。

一般に、プログラムコードをフォーマットする際には、極端なことをせずに、特定のルールセットを遵守することをお勧めします。

▍大文字と小文字の区別

JavaScriptは大文字と小文字を区別する言語です。 これは、たとえば変数の名前somethingとSomething区別することを意味します。 同じことがすべての識別子に当てはまります。

▍コメント

JavaScriptでは2種類のコメントを使用できます。 最初のタイプは単一行コメントです。

 //   

名前が示すように、それらは1行にあります。 //文字に続くものはすべてコメントと見なされます。

2番目のタイプは複数行コメントです。

 /*   */ 

ここでは、記号/*と*/の組み合わせの間にあるすべてのものがコメントと見なされます。

▍リテラルと識別子

リテラルは、プログラムのソースコードで記述された特定の値です。 たとえば、文字列、数値、論理値、またはより複雑な構造-オブジェクトリテラル（中括弧でフォーマットされたオブジェクトの作成を許可）または配列リテラル（角括弧でフォーマットされた配列の作成を許可）です。 以下に例を示します。

 5 'Test' true ['a', 'b'] {color: 'red', shape: 'Rectangle'} 

このような構成要素に遭遇するプログラムを起動しても、特に利点はありません。 プログラムでリテラルを使用するには、最初にリテラルを変数に割り当てるか、関数に渡します。

識別子は、変数、関数、オブジェクトを識別するために使用できる一連の文字です。 文字、ドル記号（ $ ）、またはアンダースコア（ _ ）で始まり、数字、および必要に応じて絵文字のようなUnicode文字を含むことができます（既に述べたように、これを行わない方が良いです）。 識別子の例を次に示します。

 Test test TEST _test Test1 $test 

ドル記号は、DOM要素への参照を格納する識別子を作成するときに一般的に使用されます。

▍予約語

以下は、言語によって予約されている単語のリストです。 これらを識別子として使用することはできません。

• break
• do
• instanceof
• typeof
• case
• else
• new
• var
• catch
• finally
• return
• void
• continue
• for
• switch
• while
• debugger
• function
• this
• with
• default
• if
• throw
• delete
• in
• try
• class
• enum
• extends
• super
• const
• export
• import
• implements
• let
• private
• public
• interface
• package
• protected
• static
• yield

まとめ

今日は、JavaScriptで作成されたプログラムのスタイルと構造について説明しました。 次回は変数、データ型、式、オブジェクトについて説明します。

親愛なる読者！ どのJavaScriptスタイルガイドを使用していますか？