JavaScriptの構文とコード構造について

前書き

話し言葉で書くことを学ぶ前に、まず文法の規則を学ばなければなりません。 英語で見つけられるかもしれない規則のいくつかの例はここにあります:

  • 文は大文字で始まります。

  • 文はピリオドで終了します。

  • 新しい段落がインデントされます。

  • 音声対話は二重引用符で囲まれています。

同様に、すべてのプログラミング言語は、機能するために特定のルールを順守する必要があります。 プログラミング言語の正しい構造を決定するこのルールのセットは、*構文*と呼ばれます。 多くのプログラミング言語は、構文が異なる類似した概念で構成されています。

このチュートリアルでは、JavaScriptの構文とコード構造の規則と規則の多くについて説明します。

機能と読みやすさ

JavaScriptの使用を開始する際に、機能性と読みやすさが構文に焦点を当てる2つの重要な理由です。

JavaScript機能には必須の構文規則がいくつかあります。 従わない場合、コンソールはエラーをスローし、スクリプトは実行を停止します。

「Hello、World!」プログラムの構文エラーを考えてみましょう。

broken.js

// Example of a broken JavaScript program
console.log("Hello, World!"

このコードサンプルには閉じ括弧がありません。コンソールに期待される「Hello、World!」を出力する代わりに、次のエラーが表示されます。

OutputUncaught SyntaxError: missing ) after argument list

スクリプトが実行を続ける前に、欠落している「)」を追加する必要があります。 これは、コードを実行するために正しい構文に従う必要があるため、JavaScript構文の誤りがスクリプトを破壊する方法の例です。

JavaScriptの構文とフォーマットのいくつかの側面は、さまざまな考え方に基づいています。 つまり、必須ではなく、コードの実行時にエラーが発生しないスタイル上の規則または選択肢があります。 ただし、プロジェクトとコードベースの間の開発者はスタイルに精通しているため、従うのが賢明な多くの一般的な規則があります。 共通の規則を順守すると、読みやすさが向上します。

変数の割り当ての次の3つの例を検討してください。

const greeting="Hello";         // no whitespace between variable & string
const greeting =       "Hello"; // excessive whitespace after assignment
const greeting = "Hello";       // single whitespace between variable & string

上記の3つの例はすべて出力でまったく同じように機能しますが、3番目のオプションである `+ greeting =" Hello "+`が最も一般的に使用され、コードを記述する最も読みやすい方法です。より大きなプログラムのコンテキスト内で。

コーディングプロジェクト全体のスタイルを一貫させることが重要です。 組織ごとに、従うべきさまざまなガイドラインに遭遇するため、柔軟性も必要です。

JavaScriptコードの構文と構造を理解し、疑問がある場合はこの記事を参照するために、以下のコード例をいくつか見ていきます。

空白

JavaScriptの空白は、スペース、タブ、および改行で構成されます(キーボードの「+ ENTER +」を押す)。 前述のように、文字列の外側の余分な空白、および演算子と他の記号の間のスペースはJavaScriptによって無視されます。 これは、変数割り当ての次の3つの例の計算結果がまったく同じになることを意味します。

const userLocation      =    "New York City, "     +  "NY";
const userLocation="New York City, "+"NY";
const userLocation = "New York City, " + "NY";

`+ userLocation +`は、これらのスタイルのどれがスクリプトで記述されているかに関係なく、「ニューヨーク、ニューヨーク」を表します。また、空白がタブまたはスペースで記述されていてもJavaScriptに違いはありません。

最も一般的な空白の規則に従うことができる良い経験則は、数学や言語の文法で使われているのと同じ規則に従うことです。

たとえば、 `+ let x = 5 * y `は ` let x = 5 * y +`より読みやすいです。

このスタイルの注目すべき例外の1つは、複数の変数の割り当て中です。 次の例の `+ = +`の位置に注意してください。

const companyName         = "DigitalOcean";
const companyHeadquarters = "New York City";
const companyHandle       = "digitalocean";

すべての代入演算子( + = +)が並んでおり、変数の後に空白があります。 このタイプの組織構造は、すべてのコードベースで使用されるわけではありませんが、読みやすくするために使用できます。

余分な改行もJavaScriptによって無視されます。 通常、コメントの上とコードブロックの後に余分な改行が挿入されます。

括弧

「+ if」、「+ switch」、「+ four」などのキーワードの場合、通常、括弧の前後にスペースが追加されます。 以下の比較とループの例をご覧ください。

// An example of if statement syntax
if () { }

// Check math equation and print a string to the console
if (4 < 5) {
   console.log("4 is less than 5.");
}

// An example of for loop syntax
for () { }

// Iterate 10 times, printing out each iteration number to the console
for (let i = 0; i <= 10; i++) {
   console.log(i);
}

示されているように、 + if`ステートメントと + for`ループには、括弧の両側に空白があります(括弧内にはありません)。

コードが関数、メソッド、またはクラスに関係する場合、括弧はそれぞれの名前に触れます。

// An example function
function functionName() {}

// Initialize a function to calculate the volume of a cube
function cube(number) {
   return Math.pow(number, 3);
}

// Invoke the function
cube(5);

上記の例では、 `+ cube()`は関数であり、括弧のペア `()`にはパラメーターまたは引数が含まれます。 この場合、パラメーターはそれぞれ「 number 」または「+5」です。 コードが期待どおりに実行されるという点で、余分なスペースのある「+ cube()+」は有効ですが、ほとんど見られません。 それらをまとめておくと、関数名を括弧のペアと関連付けられた引数に簡単に関連付けることができます。

セミコロン

書かれた段落が一連の文で構成されているように、JavaScriptプログラムは、ステートメントとして知られる一連の命令で構成されています。 文はピリオドで終わりますが、JavaScriptステートメントは多くの場合セミコロン( +; +)で終わります。

// A single JavaScript statement
const now = new Date();

2つ以上のステートメントが隣り合っている場合は、セミコロンで区切る必要があります。

// Get the current timestamp and print it to the console
const now = new Date(); console.log(now);

ステートメントが改行で区切られている場合、セミコロンはオプションです。

// Two statements separated by newlines
const now = new Date()
console.log(now)

安全で一般的な規則は、改行に関係なくステートメントをセミコロンで区切ることです。 一般的に、エラーの可能性を減らすためにそれらを含めることは良い習慣と考えられています。

// Two statements separated by newlines and semicolons
const now = new Date();
console.log(now);

初期化、条件、および「+ for」ループの増分または減分の間にもセミコロンが必要です。

for (initialization; condition; increment) {
   // run the loop
}

セミコロンは、「+ if」、「+ for」、「+ do」、「+ while」、「+ class 」、「 switch 」、「 function i」など、あらゆる種類のブロックステートメントの後に含まれません。 これらのブロックステートメントは、中括弧 `+ {} +`に含まれています。 以下の例を注意してください。

// Initialize a function to calculate the area of a square
function square(number) {
   return Math.pow(number, 2);
}

// Calculate the area of a number greater than 0
if (number > 0) {
   square(number);
}

中括弧で囲まれたすべてのコードがセミコロンなしで終了するわけではないため、注意してください。 オブジェクトは中括弧で囲まれ、セミコロンで終わる必要があります。

// An example object
const objectName = {};

// Initialize triangle object
const triangle = {
   type: "right",
   angle: 90,
   sides: 3,
};

中括弧で終わるブロックステートメントを除くすべてのJavaScriptステートメントの後にセミコロンを含めることは、広く受け入れられている慣行です。

インデント

完全なJavaScriptプログラムは、技術的には1行で記述できます。 ただし、これはすぐに読み取りと保守が非常に難しくなります。 代わりに、改行とインデントを使用します。

以下は、条件付きの + if + / `+ else +`ステートメントの例です。1行で記述するか、改行とインデントを付けて記述します。

// Conditional statement written on one line
if (x === 1) { /* execute code if true */ } else { /* execute code if false */ }

// Conditional statement with indentation
if (x === 1) {
   // execute code if true
} else {
   // execute code if false
}

ブロック内に含まれるコードはインデントされていることに注意してください。 インデントは、2つのスペース、4つのスペース、またはタブ文字を押すことで実行できます。 タブまたはスペースを使用するかどうかは、個人的な好み(ソロプロジェクトの場合)または組織のガイドライン(共同プロジェクトの場合)に依存します。

上記の例のように、最初の行の終わりに開き括弧を含めることは、JavaScriptブロックのステートメントとオブジェクトを構造化する従来の方法です。 ブロック文が書かれているのを見る別の方法は、中括弧を独自の行に置くことです。

// Conditional statement with braces on newlines
if (x === 1)
{
   // execute code if true
}
else
{
   // execute code if false
}

このスタイルは、他の言語と同じようにJavaScriptではあまり一般的ではありませんが、前代未聞ではありません。

ネストされたブロック文はさらにインデントされます。

// Initialize a function
function isEqualToOne(x) {
   // Check if x is equal to one
   if (x === 1) {
       // on success, return true
       return true;
   } else {
     return false;
   }
}

コードを適切にインデントすることは、読みやすさを維持し、混乱を軽減するために不可欠です。 留意すべきこの規則の1つの例外は、圧縮ライブラリでは不要な文字が削除されるため、ファイルサイズを小さくしてページの読み込み時間を短縮できることです(https://jquery.com/download/[+jquery.minなど)。 js + `]およびhttps://d3js.org/ [ + d3.min.js + `])。

識別子

変数、関数、またはプロパティの名前は、JavaScriptでは* identifier *として知られています。 識別子は文字と数字で構成されますが、「+ $ 」と「 _ +」以外の記号を含めることはできず、数字で始めることはできません。

大文字と小文字を区別

これらの名前は大文字と小文字が区別されます。 次の2つの例、「+ myVariable 」と「 myvariable +」は、2つの異なる変数を参照します。

var myVariable = 1;
var myvariable = 2;

JavaScript名の規則では、キャメルケースで記述されています。つまり、最初の単語は小文字ですが、後続の単語はすべて大文字で始まります。 また、アンダースコアで区切られたすべて大文字で書かれたグローバル変数または定数が表示される場合があります。

const INSURANCE_RATE = 0.4;

この規則の例外はクラス名であり、多くの場合、すべての単語が大文字で始まるように記述されます(PascalCase)。

// Initialize a class
class ExampleClass {
   constructor() { }
}

コードが読み取り可能であることを確認するには、プログラムファイル全体で明確に異なる識別子を使用することが最善です。

予約済みキーワード

また、識別子は予約済みのキーワードで構成しないでください。 キーワードは、「+ var 」、「 if 」、「 for 」、「 this +」などの組み込み機能を備えたJavaScript言語の単語です。

たとえば、 `+ var +`という名前の変数に値を割り当てることはできません。

var var = "Some value";

JavaScriptは `+ var +`がキーワードであると理解しているため、構文エラーが発生します。

出力

SyntaxError: Unexpected token (1:4)

完全なリファレンスについては、https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Reserved_keywords_as_of_ECMAScript_2015 [予約済みキーワード(MDN)のリスト]をご覧ください。

結論

この記事では、JavaScriptの基本的な構文とコード構造の概要を説明しました。 構文は、プログラムを適切に実行するためと、コードの作成者と共同作業者の両方にとって読みやすさと保守性の両方にとって重要です。

この記事ではJavaScriptの構文とスタイルに関する多くの一般的な規則を確認しましたが、最後に覚えておくべき最も重要なことは、チームまたは組織との柔軟性と一貫性を保つことです。