概要
JavaScriptを学習、理解を深めるため「JavaScript Primer 迷わないための入門書」を読み、
理解した内容等を記載していく。
「【JavaScript】JavaScript入門一覧」に他の記事をまとめています。
この記事で理解できること
- JavaScriptはどのようなプログラミング言語なのか
- JavaScriptとECMAScriptの関係
- JavaScriptのstrict mode
JavaScriptとは
- 主に
ウェブブラウザ上(GoogleChromeやEdge、Safariなど)で動くプログラミング言語。 - ウェブサイトの
表示に変化(動き)を付けたり、サーバと通信しデータを取得するなどを行える。 - サーバ側で動く
Node.jsというプログラミング言語もJavaScriptが利用されている。
JavaScriptとECMAScript
- JavaScriptというプログラミング言語は
ECMAScriptという仕様によって動作が決められている。 - ECMAScriptは
どの実行環境でも共通な動作となる部分を定義している。 - ただし、サーバ側で動作するNode.jsはブラウザ側を操作するための機能は不要となるなど、
実行環境ごとに必要な機能については、環境ごとに定義(実装)されている。 - ECMAScriptの仕様は
毎年アップデートされ、新しい文法や機能が追加されている。 - ES2015(
2015年)で仕様の大きなアップデートがあった。
JavaScriptの特徴
JavaScriptの特徴には以下のようなものがある。
- 大文字と小文字を区別する
- 予約語を持つ
- 文はセミコロンで区切られる
- strict modeが存在する
大文字と小文字を区別する
// nameという変数を大文字・小文字で宣言してみる
// 全て小文字
const name = "Taro";
// 先頭のみ大文字
const Name = "Taro";
// 全て大文字
const NAME = "Taro";
// もう一度全て小文字
const name = "Taro";
// => 'name' を再宣言することはできない旨のエラーが発生する = 最初の変数以外は別物だと区別されている
予約語を持つ
- 前項の変数宣言時に使用した「const」のように、
JavaScriptが用意している特別なキーワードが存在する。 - また、その特別なキーワードは「
予約語」とも呼ばれる。 - この特別なキーワード（予約語）と同じ
変数名は使用できない。
※ECMAScript 2022の仕様書などで詳細を確認できる(英語)
// constという予約語と同名の変数名を宣言する
const const ... // => 予約語のため使用できない旨のエラーが発生する
文はセミコロンで区切られる
- JavaScriptは
文ごとに処理が行われる、セミコロン(;)によって文が区切られる。 - セミコロンが無い文も
暗黙的に行末に自動でセミコロンが挿入される仕組みとなっているが、意図しない挙動を避けるため、常に書くことが推奨されている。 - スペースやタブ文字は
空白文字(ホワイトスペース)と呼ばれ、いくつ置いても挙動に違いはない。
// セミコロンで文が区切られる
const name = "Taro";
const age = 24;
// 空白文字の数は挙動に違いはない
console.log(name + "は" + age + "です"); // => Taroは24歳です
console.log(name + "は" + age + "歳です"); // => Taroは24歳です
// ※別解：下記は「は 」という文字列と「で す」という文字列を指定しているのでそのまま反映されます
console.log(name + "は " + age + "歳で す"); // => Taroは 24歳で す
strict modeが存在する
- JavaScriptには
strict modeという(厳格な)実行モードが存在している。 - 有効にすると
古く安全でない構文や機能が一部禁止となる。 -
"use strict";(シングルコーテーション or ダブルコーテーションで囲う)をファイルまたは関数の先頭に書くことで、そのスコープにあるコードはstrict modeで実行される。
// strict mode無効状態
// nameを再代入したつもりが打ち間違え、グローバルな変数「naem」が生成される
let name = "Taro";
naem = "Hanako";
// strict modeを有効にする
"use strict";
let name = "Taro";
naem = "Hanako"; // => Uncaught ReferenceError: naem is not defined
実行コンテキスト(ScriptとModule)
- JavaScriptの実行コンテキストには
ScriptとModuleが存在する。
実行コンテキスト(※一部抜粋 e-words)
同じコード記述やプログラム上の要素が、その置かれているプログラム内での位置や、
実行される際の内部状態などによって異なる振る舞いをしたり、
異なる制約を受けたりすることを指してコンテキストということがある。
Scriptの実行コンテキスト
- Scriptの実行コンテキストは多くの実行環境で
デフォルトの実行コンテキストとなっている。 - 前項の
strict modeはデフォルトで無効となっている。
Moduleの実行コンテキスト
- Moduleの実行コンテキストは、
JavaScriptをモジュールとして実行するために、ECMAScript 2015で導入された。 - 前項の
strict modeはデフォルトで有効となっている。 - モジュールの機能は
Moduleの実行コンテキストでしか利用できない。
◆参考
JavaScript入門(ECMAScriptモジュール①)
JavaScript入門(ECMAScriptモジュール②)
JavaScript入門(ECMAScriptモジュール③)