Clever Geek Handbook

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

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



→ パート1：最初のプログラム、言語機能、標準

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

→ パート3：変数、データ型、式、オブジェクト

→ パート4：機能

→ パート5：配列とループ

→ パート6：例外、セミコロン、ワイルドカードリテラル

→ パート7：厳格モード、このキーワード、イベント、モジュール、数学計算

→ パート8：ES6機能の概要

→ パート9：ES7、ES8、およびES9標準の概要







プログラミングスタイル



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



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





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



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



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



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



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





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



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




の場合 。 条件付き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 }




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要素への参照を格納する識別子を作成するときに一般的に使用されます。



▍予約語



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





まとめ



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



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





More articles:


All Articles