JavaScriptとは

主にWebブラウザ上の中で動くプログラミング言語
また、Webブラウザだけでなく、Node.jsというサーバ側のアプリケーションを作る仕組みでも利用されている

JavaScriptはECMAScriptという仕様によって動作が決められている
ECMAScriptという仕様ではどの実行環境でも共通な動作のみが定義されているため、基本的にどの実行環境でも同じ動作をする

JavaScriptの特徴

元々、Netscape Navigatorというブラウザのために開発されたプログラミング言語
C、Java、Self、Schemeなどのプログラミング言語の影響を受けて作られた

大部分がオブジェクトであり、そのオブジェクト同士のコミュニケーションによって成り立っている
オブジェクトには、ECMAScriptのしようとして定められたオブジェクト、実行環境が定義したオブジェクト、ユーザーの定義したオブジェクトが存在する

●大文字と小文字を区別する
●予約語を持つ
●文はセミコロンで区切られる
●strict mode（古く安全でない構文や機能が一部禁止される、use strictという文字列をファイルまたは関数の先頭に書く）

構文

// 一行コメント

/**
 * 複数行コメント
 */

変数と宣言

const、let、varの3つがある
varはもっとも古くからある変数宣言のキーワードで意図しない動作を作りやすい問題からECMAScript2015で、varの問題を改善するためにconstとletという新しいキーワードが導入された

// constは再代入できない変数を宣言するキーワード
const bookTitle = "JavaScript";
bookTitle = "New";  // => TypeError: invalid assignment to const 'bookTitle'

// constは定数ではない
const object = {
  key: "New"
};
// オブジェクトそのものは変更できる
object.key = "New2";


// letは値の再代入が可能な変数を宣言できる
let bookTitle = "Javascript";

// letはconstと異なり初期値を指定しない変数も定義できる
let bookTitle;  // => undefinedという値になる

データ型

JavaScriptは動的型付け言語に分類される言語であるため、静的型付け言語のような変数の型はない
文字列、数値、真偽値といった値の型は存在する
これらの値の型のことをデータ型と呼ぶ

データ型には２種類存在する
１、プリミティブ型（基本型）
２、オブジェクト（複合型）

●プリミティブ型（基本型）
　プリミティブ型（基本型）は、真偽値や数値などの基本的な値の型のこと
　プリミティブ型の値は、一度作成したらその値自体を変更できないというイミュータブル（immutable）の特性を持つ
　　真偽値（Boolean）: trueまたはfalseのデータ型
　　数値（Number）: 42 や 3.14159 などの数値のデータ型
　　巨大な整数（BigInt）: ES2020から追加された9007199254740992nなどの任意精度の整数のデータ型
　　文字列（String）: "JavaScript" などの文字列のデータ型
　　undefined: 値が未定義であることを意味するデータ型
　　null: 値が存在しないことを意味するデータ型
　　シンボル（Symbol）: ES2015から追加された一意で不変な値のデータ型

●オブジェクト（複合型）
　オブジェクトは複数のプリミティブ型の値またはオブジェクトからなる集合
　オブジェクトは、一度作成した後もその値自体を変更できるためミュータブル（mutable）の特性を持つ
　
　・プリミティブ型以外のデータ
　　オブジェクト、配列、関数、正規表現、Dateなど

// typeof演算子でデータ型を調べることができる
console.log(typeof true);  // => boolean

リテラル

プリミティブ型の値や一部のオブジェクトはリテラルを使うことで簡単に定義できるようになっている
リテラルとはプログラム上で数値や文字列など、データ型の値を直接記述できるように構文として定義されたもの

// " と " で囲んだ範囲が文字列リテラル
const str = "Hello";

リテラル表現がない場合はその値を作る関数に引数を渡して作成する形になる
そのような冗長な表現を避ける方法としてよく利用される主要な値にはリテラルが用意されている

ダブルクォートとシングルクォート

// \' のように \（バックスラッシュ）を使いエスケープしなければならない
"8 o\'clock";  //  => "8 o'clock"

オブジェクトリテラル

// オブジェクトリテラルは{}を書くことで新しいオブジェクトを作成できる
const obj = {};  // 中身がからのオブジェクトを作成

// keyというキー名とvalueという値を持つオブジェクトを作成
const obj = {
  "key": "value"  // オブジェクトが持つキーのことをプロパティと呼ぶ。この場合、objというオブジェクトはkeyというプロパティを持っている
};

// ドット記法
console.log(obj.key); // => value

// ブラケット記法
console.log(obj["key"]); // => value

配列リテラル

// [ と ]で値をカンマ区切りで囲み、その値を持つArrayオブジェクトを作成
const emptyArray = [];  // 空の配列を作成
const array = [1, 2, 3];  // 値を持った配列を作成

正規表現 リテラル

// 数値にマッチする特殊文字である\dを使い、1文字以上の数字にマッチする正規表現
const numberRegExp = /\d+/;

// numberRegExpの正規表現が文字列"123"にマッチするかをテスト
console.log(numberRegExp.test("123")); // => true

関数と宣言

// 仮引数に対応する引数が渡されていない場合に、デフォルトで代入される値を指定できる
function echo(x = "デフォルト値") {
    return x;
}

console.log(echo(1)); // => 1
console.log(echo()); // => "デフォルト値"

可変長引数

// Math.maxは可変長引数を受け取る関数で、受け取った引数の中で最大の数値を返す関数
const max = Math.max(1, 5, 10, 20);
console.log(max); // => 20

Rest parameters

Rest parametersは、仮引数名の前に...をつけた仮引数のことで、残余引数とも呼ばれる
Rest parametersには、関数に渡された値が配列として代入される

function fn(...args) {
    // argsは引数の値が順番に入った配列
    console.log(args); // => ["a", "b", "c"]
}
fn("a", "b", "c");

Arrow Function

// Arrow Functionを使った関数定義
const 関数名 = () => {
    // 関数を呼び出したときの処理
    // ...
    return 関数の返す値;
};

// 仮引数の数と定義
const fnA = () => { /* 仮引数がないとき */ };
const fnB = (x) => { /* 仮引数が1つのみのとき */ };
const fnC = x => { /* 仮引数が1つのみのときは()を省略可能 */ };
const fnD = (x, y) => { /* 仮引数が複数のとき */ };
// 値の返し方
// 次の２つの定義は同じ意味となる
const mulA = x => { return x * x; }; // ブロックの中でreturn
const mulB = x => x * x;            // 1行のみの場合はreturnとブロックを省略できる

コールバック関数

関数はファーストクラスであるため、その場で作った匿名関数を関数の引数（値）として渡すことができる引数として渡される関数のことをコールバック関数と呼ぶ一方、コールバック関数を引数として使う関数やメソッドのことを高階関数と呼ぶ

function 高階関数(コールバック関数) {
    コールバック関数();
}

const array = [1, 2, 3];
array.forEach((value) => {
    console.log(value);
});
// 1 2 3

メソッド

const obj = {
    method1: function() {
        // `function`キーワードでのメソッド
    },
    method2: () => {
        // Arrow Functionでのメソッド
    }
};

const obj = {
    method: function() {
        return "this is method";
    }
};
console.log(obj.method()); // => "this is method"

// メソッドの短縮記法
const obj = {
    method() {
        return "this is method";
    }
};
console.log(obj.method()); // => "this is method"

/**
 * const, letなどの変数宣言
 */
// var val1 = "var変数";
// console.log(val1);

// // var変数は上書き可能
// val1 = "var変数を上書き";
// console.log(val1);

// // var変数は再宣言可能
// var val1 = "var変数を再宣言";
// console.log(val1);

// let val2 = "let変数";
// console.log(val2);

// // letは上書きが可能
// val2 = "let変数を上書き";
// console.log(val2);

// // letは再宣言不可能
// let val2 = "let変数を再宣言";

// const val3 = "const変数";
// console.log(val3);

// // const変数は上書き不可
// val3 = "const変数を上書き";

// const val3 = "const変数を再宣言";

// constで定義したオブジェクトはプロパティの変更が可能
const val4 = {
  name: "test",
  age: 28,
};
val4.name = "taro";
val4.address = "JAPAN";
console.log(val4);

// constで定義した配列はプロパティの変更が可能
const val5 = ['dog', 'cat'];
val5[0] = "bird";
val5.push("monkey");
console.log(val5);

Yusuke Muramatsu

メモ

JavaScript基礎