4
Help us understand the problem. What are the problem?

posted at

updated at

【JavaScript】JavaScriptとは

概要

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の実行コンテキストにはScriptModuleが存在する。

実行コンテキスト(※一部抜粋 e-words)
同じコード記述やプログラム上の要素が、その置かれているプログラム内での位置や、
実行される際の内部状態などによって異なる振る舞いをしたり、
異なる制約を受けたりすることを指してコンテキストということがある。

Scriptの実行コンテキスト

  • Scriptの実行コンテキストは多くの実行環境でデフォルトの実行コンテキストとなっている。
  • 前項のstrict modeはデフォルトで無効となっている。

Moduleの実行コンテキスト

  • Moduleの実行コンテキストは、JavaScriptをモジュールとして実行するために、ECMAScript 2015で導入された。
  • 前項のstrict modeはデフォルトで有効となっている。
  • モジュールの機能はModuleの実行コンテキストでしか利用できない。

◆参考
JavaScript入門(ECMAScriptモジュール①)
JavaScript入門(ECMAScriptモジュール②)
JavaScript入門(ECMAScriptモジュール③)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
4
Help us understand the problem. What are the problem?