JavaScriptの構文とコード構造を理解する
序章
話し言葉で書くことを学ぶ前に、まず文法の規則を学ぶ必要があります。 英語で見つかる可能性のあるルールの例を次に示します。
- 文は大文字で始まります。
- 文はピリオドで終わります。
- 新しい段落がインデントされます。
- 音声ダイアログは二重引用符で囲まれています。
同様に、すべてのプログラミング言語は、機能するために特定のルールに準拠する必要があります。 プログラミング言語の正しい構造を決定するこの一連の規則は、構文として知られています。 多くのプログラミング言語は、構文が異なる類似の概念で主に構成されています。
このチュートリアルでは、JavaScriptの構文とコード構造の多くの規則と規則について説明します。
機能性と読みやすさ
JavaScriptを使い始めるときに、機能性と読みやすさは、構文に焦点を当てる2つの重要な理由です。
JavaScriptの機能に必須の構文規則がいくつかあります。 それらに従わない場合、コンソールはエラーをスローし、スクリプトは実行を停止します。
「Hello、World!」の構文エラーについて考えてみます。 プログラム:
// 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"
これは、特に大規模なプログラムのコンテキスト内でコードを検討する場合に、コードを記述するための最も一般的に使用され、最も読みやすい方法です。
コーディングプロジェクト全体のスタイルの一貫性を保つことが重要です。 組織ごとに、従うべきさまざまなガイドラインに遭遇するため、柔軟性も必要です。
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() { }
}
コードを確実に読み取れるようにするには、プログラムファイル全体で明らかに異なる識別子を使用するのが最善です。
予約キーワード
また、識別子は予約済みのキーワードで構成されていてはなりません。 キーワードは、JavaScript言語の単語で、次のような機能が組み込まれています。 var
, if
, for
、 と this
.
たとえば、という名前の変数に値を割り当てることはできません。 var
.
var var = "Some value";
JavaScriptは理解しているので var
キーワードになると、構文エラーが発生します。
SyntaxError: Unexpected token (1:4)
完全なリファレンスについては、この予約キーワードのリスト(MDN)を参照してください。
結論
この記事では、JavaScriptの基本的な構文とコード構造の概要を説明しました。 構文は、プログラムを適切に実行するためにも、自分自身とコードの共同作業者の両方にとって読みやすさと保守性のためにも重要です。
この記事では、JavaScriptの構文とスタイルに関する多くの一般的な規則を確認しましたが、結局のところ、覚えておくべき最も重要なことは、柔軟性があり、チームや組織と一貫性があることです。