Image

TECH I.S.

TECH I.S
TECH I.S
TECH I.S
TECH I.S

JavaScript スタイルガイド

すべてのJavaScriptプロジェクトで常に同じコーディング規則を使用してください。

JavaScriptコーディング規約

コーディング規約は、プログラミングのスタイルガイドラインです。通常、以下の内容がカバーされます。

  • 変数と関数の命名規則と宣言規則。
  • 空白、インデント、およびコメントの使用に関する規則。
  • プログラミングの実践と原則。

コーディング規約により品質が確保されます

  • コードの可読性を向上させる
  • コードのメンテナンスを容易にする

コーディング規約は、チームが従うべき文書化されたルールである場合もあれば、単に個人のコーディング慣行である場合もあります。


このページでは、TECH I.S.で使用される一般的なJavaScriptコード規則について説明します。また、次の章の「ベストプラクティス」も読んで、コーディングの落とし穴を回避する方法を学んでください。




変数名

TECH I.S.では、識別子名 (変数と関数) にキャメルケースを使用します。

すべての名前は文字で始まります。

このページの下部には、命名規則に関する広範な議論が記載されています。

firstName = "John"; lastName = "Doe"; price = 19.90; tax = 0.20; fullPrice = price + (price * tax);


オペレータの周囲のスペース

演算子( = + - * / )の前後とカンマの後には必ずスペースを入れてください。

例:

let x = y + z; const myArray = ["Volvo", "Saab", "Fiat"];

コードのインデント

コードブロックのインデントには常に2つのスペースを使用します。

機能：

function toCelsius(fahrenheit) {   return (5 / 9) * (fahrenheit - 32); }

インデントにタブ(タブレータ)を使用しないでください。エディターが異なれば、タブの解釈も異なります。

ステートメントルール

単純なステートメントの一般規則:

  • 単純なステートメントは常にセミコロンで終了します。

例:

const cars = ["Volvo", "Saab", "Fiat"]; const person = {   firstName: "John",   lastName: "Doe",   age: 50,   eyeColor: "blue" };

複雑な(複合)ステートメントの一般規則:

  • 最初の行の末尾に左括弧を置きます。
  • 左括弧の前にスペースを1つ入れます。
  • 先頭にスペースを入れずに、閉じ括弧を新しい行に置きます。
  • 複雑なステートメントをセミコロンで終了しないでください。

機能：

function toCelsius(fahrenheit) {   return (5 / 9) * (fahrenheit - 32); }

ループ:

for (let i = 0; i < 5; i++) {   x += i; }

条件:

if (time < 20) {   greeting = "Good day"; } else {   greeting = "Good evening"; }

オブジェクトのルール

オブジェクト定義の一般規則:

  • オブジェクト名と同じ行に開き括弧を置きます。
  • 各プロパティとその値の間にコロンと1つのスペースを使用します。
  • 数値ではなく文字列値を引用符で囲みます。
  • 最後のプロパティと値のペアの後にコンマを追加しないでください。
  • 閉じ括弧を新しい行に配置します。 先頭のスペース。
  • オブジェクト定義は必ずセミコロンで終了してください。

例

const person = {   firstName: "John",   lastName: "Doe",   age: 50,   eyeColor: "blue" };

短いオブジェクトは次のように、プロパティ間にのみスペースを使用して1行に圧縮して記述することができます。

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};


線の長さ< 80

読みやすくするために、80文字を超える行は避けてください。

JavaScriptステートメントが1行に収まらない場合、演算子またはカンマの後ろで区切るのが最適です。

:::example {.techis-example}
### 例

:::code {.techis-code .notranslate .language-javascript}
document.getElementById(&quot;demo&quot;).innerHTML =<br/> &quot;Hello Dolly.&quot;;
:::code

:::example

命名規則

すべてのコードで常に同じ命名規則を使用してください。例えば：

  • キャメルケースで書かれた変数名と関数名
  • 大文字で書かれたグローバル変数(私たちは大文字ではありませんが、非常に一般的です)
  • 大文字で書かれた定数(PIなど)

変数名にはhyp-hens、CamelCase、または under_scoresを使用する必要がありますか?

これは、プログラマーがよく議論する質問です。答えは、誰に尋ねるかによって異なります。

HTMLとCSSのハイフン:

HTML5属性はdata-(data-quantity、data-price)で始めることができます。

CSSはプロパティ名(font-size)にハイフンを使用します。


ハイフンは、減算の試みと誤解される可能性があります。 JavaScriptの名前にハイフンを使用することはできません。


アンダースコア:

多くのプログラマーは、特にSQLデータベースではアンダースコア(date_of_birth)を使用することを好みます。

アンダースコアは、PHPドキュメントでよく使用されます。

パスカルケース:

PascalCaseは、多くの場合、C言語プログラマーに好まれます。

キャメルケース：

camelCaseは、JavaScript自体、jQuery、およびその他のJavaScriptライブラリによって使用されます。


名前を$記号で始めないでください。多くのJavaScriptライブラリ名と競合することになります。




JavaScriptをHTMLに読み込む

外部スクリプトをロードするための単純な構文を使用します(type属性は必要ありません)。

<script src="myscript.js"></script>


HTML要素へのアクセス

"乱雑"なHTML スタイルを使用すると、JavaScriptエラーが発生する可能性があります。

これら2つのJavaScript ステートメントは、異なる結果を生成します。

const obj = getElementById("Demo") const obj = getElementById("demo")

可能であれば、HTMLで(JavaScriptと)同じ命名規則を使用してください。

HTML スタイル ガイドにアクセスする

ファイル拡張子

HTMLファイルには.html拡張子が必要です ( .htmは許可されます)。

CSSファイルには.css拡張子が必要です。

JavaScriptファイルには.js拡張子が必要です。

小文字のファイル名を使用する

ほとんどのWeb サーバー(Apache、Unix)は、ファイル名の大文字と小文字を区別します。

london.jpgはLondon.jpgとしてアクセスできません。

他のWebサーバー(Microsoft、IIS)では、大文字と小文字が区別されません。

london.jpg は、London.jpgまたはlondon.jpg としてアクセスできます。

大文字と小文字を組み合わせて使用​​する場合は、一貫性を保つ必要があります。

大文字と小文字を区別しないサーバーから大文字と小文字を区別するサーバーに移行すると、小さなエラーでもWebサイトが壊れる可能性があります。

これらの問題を回避するには、常に小文字のファイル名を使用してください(可能な場合)。

パフォーマンス

コーディング規約はコンピューターでは使用されません。ほとんどのルールは、プログラムの実行にほとんど影響を与えません。

小さなスクリプトでは、インデントと余分なスペースは重要ではありません。

開発中のコードでは、読みやすさが優先されます。大規模な本番スクリプトは最小限に抑える必要があります。



プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう！

スクールの詳細

チュートリアル