JavaScriptの構文とコード構造に関する深い理解

概要

すべてのプログラミング言語は、機能するために特定のルールに従う必要があります。 プログラミング言語の正しい構造を決定する一連の規則を文法と呼びます。 多くのプログラミング言語は、構文のバリエーションはあるものの、ほとんどが類似した概念で構成されています。

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

機能性と読みやすさ

機能性と読みやすさは、JavaScript を使い始めるときに構文に重点を置く 2 つの重要な理由です。

JavaScript が機能するには、いくつかの構文規則が必要です。これらに従わないと、コンソールにエラーが表示され、スクリプトの実行が停止します。

「Hello, World!」の構文エラーについて考えてみましょう。プログラム：

// 壊れた JavaScript プログラムの例
console.log("こんにちは、世界!"

このコード例には閉じ括弧がないため、期待される「Hello, World!」がコンソールに出力される代わりに、次のエラーが表示されます。

キャッチされない構文エラー: 引数リストの後に ) がありません

スクリプトの実行を続行するには、不足している「)」を追加する必要があります。 これは、コードを実行するには正しい構文に従う必要があるため、JavaScript 構文エラーによってスクリプトが壊れる可能性がある例です。

JavaScript の構文と書式のいくつかの側面は、さまざまな考え方に基づいています。ただし、必須ではないため、コードの実行時にエラーが発生しないスタイル ルールや選択肢もいくつかあります。ただし、プロジェクトやコード ベース全体の開発者がこのスタイルに慣れていくため、従う価値のある共通の規則が多数あります。一般的な規則に従うと、読みやすさが向上します。

次の 3 つの変数割り当ての例を考えてみましょう。

const greeting="Hello"; // 変数と文字列の間に空白はありません
const greeting = "Hello"; // 代入後の空白が多すぎる
const greeting = "Hello"; // 変数と文字列の間には空白が 1 つ

上記の 3 つの例は出力ではまったく同じように機能しますが、3 番目のオプションの greeting = "Hello"; は、特に大規模なプログラムのコンテキストで考えると、最も一般的で読みやすいコードの記述方法です。

コーディング プロジェクト全体を通じて一貫したスタイルを維持することが重要です。組織ごとに異なるガイドラインに遭遇する可能性があるため、柔軟性も必要です。

以下では、JavaScript コードの構文と構造を理解し、疑問が生じたときにこの記事を参照できるように、いくつかのコード例を紹介します。

空白

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

const userLocation = "ニューヨーク市、" + "NY";
const userLocation="ニューヨーク市、"+"NY";
const userLocation = "ニューヨーク市、" + "NY";

スクリプトにどのスタイルが記述されていても、userLocation は「New York City, NY」を表します。また、タブまたはスペースで記述されているかどうかに関係なく、JavaScript には影響しません。

最も一般的な空白の規則については、数学や言語の文法と同じ規則に従うのがよい経験則です。

このスタイルの注目すべき例外は、複数の変数への割り当て時です。次の例では、= の配置に注意してください。

const 会社名 = "DigitalOcean";
const companyHeadquarters = "ニューヨーク市";
const companyHandle = "digitalocean";

すべての代入演算子 (=) は、変数の後にスペースを入れて 1 行に配置されます。このタイプの構成はすべてのコード ベースで使用されるわけではありませんが、読みやすさを向上させるために使用できます。

JavaScript は余分な改行を無視します。通常、コメントの上とコード ブロックの後に追加の改行が挿入されます。

括弧

if、switch、for などのキーワードの場合、括弧の前後にスペースを追加するのが一般的です。次の比較とループの例を観察してください。

// if文の構文の例
もし （） { }
// 数式をチェックし、コンソールに文字列を出力します
（4 < 5）の場合{
    console.log("4 は 5 より小さいです。");
    }
// 例 
for ループ構文for () { }
// 10 回繰り返し、各繰り返し回数をコンソールに出力します
(i = 0; i <= 10; i++ とします) {
    コンソールにログ出力します。
    }

If ステートメントと for ループでは、括弧の両側にスペースが入ります (括弧内にはスペースがありません)。

コードが関数、メソッド、またはクラスに属している場合、括弧は対応する名前に触れます。

// 例 
関数関数関数名() {}
// 立方体の体積を計算する関数を初期化します
関数cube(数値) {
    Math.pow(数値、3)を返します。
}
// 関数を呼び出す
キューブ(5);

上記の例では、cube() は関数であり、括弧 () のペアには引数またはパラメータが含まれます。この場合、引数はそれぞれ数値または 5 になります。余分なスペースのあるcube()は有効ですが、コードは期待どおりに実行されるため、ほとんど目立ちません。これらを一緒にしておくと、関数名を括弧のペアおよび関連する渡されたパラメータに簡単に関連付けることができます。

セミコロン

JavaScript プログラムは、文章の段落が一連の文で構成されているのと同じように、ステートメントと呼ばれる一連の命令で構成します。文はピリオドで終わりますが、JavaScript ステートメントは通常セミコロン (;) で終わります。

// 単一のJavaScript文
const now = 新しい Date();

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

// 現在のタイムスタンプを取得し、コンソールに出力します
const now = new Date(); console.log(now);

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

// 改行で区切られた2つの文
const now = 新しい Date()
console.log(現在)

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

// 改行とセミコロンで区切られた2つの文
const now = 新しい Date();
console.log(現在);

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

for (初期化; 条件; 増分) { 
   // ループを実行する
}

if、for、do、while、class、switch、function などのブロック ステートメントの後にはセミコロンは含まれません。これらのブロック ステートメントは中括弧で囲まれます。次の例に注目してください。

// 正方形の面積を計算する関数を初期化する
関数 square(数値) {
    Math.pow(数値、2)を返します。
}
// 0より大きい数の面積を計算する
（数値＞0）の場合{
    平方(数);
}

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

// サンプルオブジェクト
オブジェクト名を定数で指定します。
// 三角形オブジェクトを初期化する
定数三角形 = {
    タイプ: "右",
    角度: 90,
    サイド: 3、
};

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

インデント

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

以下は、1 行に記述されているか、改行とインデントを使用して記述されている条件付き if/else ステートメントの例です。

// 1行に書かれた条件文
if (x === 1) { /* true の場合はコードを実行 */ } else { /* false の場合はコードを実行 */ }
// インデント付きの条件文
(x === 1)の場合{
    // true の場合はコードを実行する
    }それ以外 {
        // false の場合はコードを実行する
        }

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

上記の例のように、最初の行の末尾に開き中括弧を含めることは、JavaScript ブロック ステートメントとオブジェクトを構築する通常の方法です。ブロック ステートメントを記述する別の方法として、中括弧を独自の行で使用する方法があります。

// 改行に中括弧が付いた条件文
(x === 1)の場合{
    // true の場合はコードを実行する
    }それ以外{
    // false の場合はコードを実行する
    }

このスタイルは、JavaScript では他の言語ほど一般的ではありませんが、まったく知られていないわけではありません。

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

// 関数を初期化するfunction isEqualToOne(x) {
    // x が 1 に等しいかどうかをチェックする
    if (x === 1) { // 成功した場合はtrueを返す
        true を返します。
    } そうでない場合は false を返します。
    }
}

読みやすさを維持し、乱雑さを減らすには、適切なコードのインデントが不可欠です。このルールの例外として、圧縮されたライブラリでは不要な文字が削除されるため、ファイル サイズが小さくなり、ページの読み込み時間が短縮されることに注意してください (jquery.min.js や d3.min.js など)。

身元

変数、関数、またはプロパティの名前は、JavaScript では識別子と呼ばれます。識別子は文字と数字で構成されますが、$ と u 以外の記号を含めることはできず、数字で始まることもできません。

大文字と小文字を区別

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

var myVariable = 1;
var 変数 = 2;

JavaScript の名前の規則は CamelCase で記述することです。つまり、最初の単語は小文字ですが、その後の単語はすべて大文字で始まります。グローバル変数または定数が、アンダースコアで区切られた大文字で記述されている場合もあります。

定数INSURANCE_RATE = 0.4;

このルールの例外はクラス名で、通常は各単語の先頭が大文字 (PascalCase) で記述されます。

// クラスを初期化する
クラス ExampleClass {
    コンストラクタ() { }
}

コードが読みやすくなるように、プログラム ファイル内で個別の識別子を使用することをお勧めします。

予約キーワード

識別子には予約キーワードを含めることもできません。キーワードは、var、if、for、this など、JavaScript 言語に組み込まれた機能を持つ単語です。

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

var var = "何らかの値";

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

構文エラー: 予期しないトークン (1:4)

上記は、JavaScript の構文とコード構造を深く理解するための詳細な内容です。JavaScript の構文と構造の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。