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つの例はすべて出力でまったく同じように機能しますが、greeting = "Hello"
の3番目のオプションは、これまでで最も一般的に使用されており、コードを記述する最も読みやすい方法です。より大きなプログラムのコンテキスト。
コーディングプロジェクト全体のスタイルの一貫性を保つことが重要です。 組織ごとに、従うべきさまざまなガイドラインに遭遇するため、柔軟性も必要です。
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
、for
などのキーワードの場合、通常、括弧の前後にスペースが追加されます。 次の比較とループの例を確認してください。
// 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
。 これらのブロックステートメントは中括弧{}
で囲まれています。 以下の例に注意してください。
// 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ブロックステートメントとオブジェクトを構造化する従来の方法です。 ブロックステートメントが書かれているのを見るもう1つの方法は、独自の行に中括弧を付けることです。
// 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つの例外として、圧縮ライブラリでは不要な文字が削除されるため、ファイルサイズが小さくなり、ページの読み込み時間が短縮されます( jquery.min.jsやd3など)。 min.js )。
識別子
変数、関数、またはプロパティの名前は、JavaScriptでは識別子と呼ばれます。 識別子は文字と数字で構成されますが、$
および_
以外の記号を含めることはできず、数字で始めることもできません。
大文字と小文字を区別
これらの名前では大文字と小文字が区別されます。 次の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)
完全なリファレンスについては、この予約キーワードのリスト(MDN)を参照してください。
結論
この記事では、JavaScriptの基本的な構文とコード構造の概要を説明しました。 構文は、プログラムを適切に実行するためにも、自分自身とコードの共同作業者の両方にとって読みやすさと保守性のためにも重要です。
この記事では、JavaScriptの構文とスタイルに関する多くの一般的な規則を確認しましたが、結局のところ、覚えておくべき最も重要なことは、柔軟性があり、チームや組織と一貫性があることです。