JavaScriptコーディングスタイル

このJavaScriptコーディングスタイルは、JavaScriptを使用するときに私が毎日使用する一連の規則です。これはライブドキュメントであり、私が従う主なルールセットが含まれています

構文に関しては、すべての言語に一連のルールがあります。

始めたとき、言語規則に違反することなく、プログラミングに注意を払わずに、ファイルにコードを追加する人もいます。スタイル

彼らはスタイルを気にしないからではなく、その重要性を認識するのに十分な経験がありません。

プログラミングは技術だと本当に信じています。絵画、木工、または創造性を伴うもののように、私たちのプログラムは多くのことを行うことができますが、スタイリッシュに行う必要があります。

すべてのプログラミング言語で有効なルールがいくつかあります。

コーディングスタイルはあなた自身とあなたのチームとの合意、プロジェクトの一貫性を保つため。

あなたがチームを持っていない場合、それはあなたとの合意、コードを常に標準に保つため。

コードの記述形式に固定のルールがあると、より読みやすくマネージコード

それらのかなりの数が周りにあります、ここに2つの最も一般的なものがありますJavaScript世界:

それらのいずれかに従うか、独自のスタイルガイドを作成するかはあなた次第です。

あなたが取り組んでいるプロジェクトと一貫性を保つ

一連のスタイルを好む場合でも、プロジェクトで作業するときは、そのプロジェクトスタイルを使用する必要があります。

GitHubのオープンソースプロジェクトは一連のルールに従う場合があり、チームで作業する別のプロジェクトはまったく異なるものに従う場合があります。

きれいコードのフォーマットを強制する素晴らしいツールです、それを使用してください。

私自身の好み

私自身のJavaScriptスタイルの見方は次のとおりです。

常に最新のESバージョンを使用してください。古いブラウザのサポートが必要な場合は、Babelを使用してください。

インデント:タブの代わりにスペースを使用し、2つのスペースを使用してインデントします。

セミコロン:セミコロンは使用しないでください。

線の長さ:可能であれば、80文字で行をカットしてみてください。

インラインコメント:コードでインラインコメントを使用します。ブロックコメントは文書化にのみ使用してください。

デッドコードなし:「万が一に備えて」古いコードをコメントのままにしないでください。後で役立ちます。今必要なコードだけを保管してください。バージョン管理/メモアプリはこれを目的としています。

有用な場合にのみコメントする:コードの動作を理解するのに役立たないコメントを追加しないでください。適切な変数と関数の命名、およびJSDoc関数のコメントを使用してコードが自明である場合は、コメントを追加しないでください。

変数宣言:グローバルオブジェクトの汚染を避けるために、常に変数を宣言します。絶対に使用しないでくださいvar。デフォルトはconst、のみ使用let変数を再割り当てした場合。

機能:オブジェクトメソッドやコンストラクターなど、通常の関数を使用する特別な理由がない限り、矢印関数を使用してください。this動作します。それらをconstとして宣言し、可能であれば暗黙の戻り値を使用します。

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

const another = a => a + 2

ネストされた関数を自由に使用して、コードの残りの部分にヘルパー関数を非表示にします。

名前:関数名、変数名、メソッド名は常に小文字で始まり(プライベートとして識別しない限り、以下をお読みください)、キャメルケースになっています。コンストラクター関数とクラス名のみを大文字で開始する必要があります。特定の規則を必要とするフレームワークを使用する場合は、それに応じて習慣を変更してください。ファイル名はすべて小文字で、単語はで区切る必要があります-

ステートメント固有の形式とルール

もし

if (condition) {
  statements
}

if (condition) { statements } else { statements }

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

ために

キャッシュするために、常に初期化で長さを初期化します。条件に挿入しないでください。

使用を避けるfor inと組み合わせて使用する場合を除きます.hasOwnProperty()。好むfor of(見るJavaScriptループ

for (initialization; condition; update) {
  statements
}

一方

while (condition) {
  statements
}

行う

do {
  statements
} while (condition);

スイッチ

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

試してみてください

try {
  statements
} catch (variable) {
  statements
}

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

空白:読みやすさを向上させるために空白を賢く使用する:キーワードの後に空白を置き、その後に(;二項演算の前後(+-/*&&..); forステートメント内、それぞれの後;ステートメントの各部分を分離するため。それぞれの後に,

新しい行:新しい行を使用して、論理的に関連する操作を実行するコードのブロックを分離します。

引用一重引用符を優先する'二重引用符の代わりに"。二重引用符はHTML属性の標準であるため、一重引用符を使用すると、HTML文字列を処理する際の問題を取り除くのに役立ちます。使用するテンプレートリテラル必要に応じて、変数補間の代わりに。

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のjsチュートリアル: