第2章 基本文法

コンソールへ出力

JavaScriptではコンソールに対して変数の値ｈや任意の文字列を出力する事ができます。

console.log、console.info、console.warn、console.errorの4つのメソッドが存在します。

Chromeでコンソールを確認する

CTRL+Shift+i または下記画像のようにメニューからデベロッパーツールを起動

chromeデベロッパーツール起動方法

下記のようなウィンドウが起動する

chromeデベロッパーツールウィンドウ


Firefoxでコンソールを確認する

CTRL+Shift+i または下記画像のようにメニューからウェブ開発ツールを起動

firefixウェブ開発ツール起動方法

下記のようなウィンドウが起動する

firefixウェブ開発ツールウィンドウ


edgeでコンソールを確認する

CTRL+Shift+i または下記画像のようにメニューから開発者ツールを起動

edge開発者ツール起動方法

下記のようなウィンドウが起動する

edge開発者ツールウィンドウ



変数と定数


var宣言

varは、ES6 (ECMAScript 2015) 以前のJavaScriptにおける変数宣言のためのキーワードです。

特性

  • 関数スコープ: var で宣言された変数は関数スコープを持ちます。これは、変数が関数内で宣言された場合、その変数はその関数の全体で利用可能ということを意味します。
  • 変数の巻き上げ (hoisting): var で宣言された変数は巻き上げられます。これは、変数宣言が実際に記述された位置よりも前で利用できるということを意味します。
function example() {
    console.log(a);  // undefined
    var a = 5;
    console.log(a);  // 5
}


let宣言

letは、ES6で追加された変数宣言のためのキーワードです。

特性

  • ブロックスコープ: let で宣言された変数はブロックスコープを持ちます。これは、{} で囲まれた範囲内でのみその変数が利用可能であるということを意味します。
  • letで宣言された変数も巻き上げられますが、初期化前のアクセスはエラーとなります。
if (true) {
    let b = 10;
}
console.log(b);  // エラー: b is not defined


const宣言

constは、ES6で追加された定数宣言のためのキーワードです。constで宣言された変数は再代入できません。

特性

  • ブロックスコープ: constもブロックスコープを持ちます。
  • 再代入不可: 一度値が代入されると、その後の再代入はできません。
  • オブジェクトのプロパティの変更は許可されます。
const c = 20;
c = 30;  // エラー: "c" is read-only


使い分け

  • var: 現代のJavaScript開発においては、var の使用は推奨されません。ES6以降の文法に慣れるため、let や const を利用することが望ましいです。
  • let: 再代入が必要な変数を宣言するときに使用します。
  • const: 値が変わらない変数や定数を宣言するときに使用します。初期のコーディングでは、まず const を使用し、再代入が必要になった場合に let に変更するという方針もあります。


データ型

JavaScriptは、動的型付け言語です。つまり、変数を宣言する際にそのデータ型を明示的に指定する必要はありません。しかし、内部的にはデータ型は存在し、以下のように分けられます。

プリミティブデータ型
  1. Number:整数や浮動小数点数を表現します。例: 42, 3.14
  2. String:文字列を表現します。例: 'Hello, World!', "JavaScript"
  3. Boolean:真偽値を表現します。true または false のいずれかの値を取ります。
  4. Undefined:変数が宣言されているが、値が代入されていない場合の型として使用されます。例: let x; // xの型はUndefined
  5. Null:特定のオブジェクトが「値なし」を持つことを意図的に示すための型。例: let y = null;
  6. Symbol (ES6で追加):ユニークかつ変更不可能な値を生成するために使用されます。オブジェクトプロパティのキーとしても使えます。例: const sym = Symbol('description');
  7. BigInt (ES2020で追加):大きな整数を表現するための型。数値の後ろにnをつけることでBigIntを表現します。例: const largeNumber = 1234567890123456789012345678901234567890n;
オブジェクトデータ型
  1. Object:キーと値のペアの集まりを表現します。オブジェクトは複数の値、関数、およびデータ構造を一つの値としてグループ化できます。
    2. const person = {
    name: 'Taro',
    age: 30,
    greet: function() {
        console.log('Hello!');
    }
};
  2. Function:処理のまとまりを表すオブジェクト。JavaScriptにおいて関数も第一級オブジェクトとして扱われます。
    3. function add(x, y) {
    return x + y;
}
  3. Array:値のリストを表現します。配列は0から始まるインデックスでアクセスされるオブジェクトです。例: const fruits = ['apple', 'banana', 'cherry'];

練習問題1.

次の指示に従い、コードを書いてください。

  1. letを使って変数myNameを宣言します。
  2. myNameにあなたの名前（文字列型）を代入します。
  3. console.logを使ってmyNameの値を出力します。

期待される出力

"あなたの名前"


練習問題2.

次の変数がどのデータ型か、typeof演算子を使って確認し、その結果をコンソールに出力してください。

const numberValue = 123;
const stringValue = "Hello, World!";
const booleanValue = true;

期待される出力

"number"
"string"
"boolean"


練習問題3.

次の指示に従い、コードを書いてください。

  1. letを使って変数isSunnyを宣言し、初めはtrueを代入します。
  2. console.logを使ってisSunnyの値を出力します。
  3. isSunnyの値をfalseに再代入します。
  4. 再度、console.logを使ってisSunnyの値を出力します。

期待される出力

true
false