📂

JavaScript(ES6) 備忘録

2023/01/13に公開約4,100字

本記事は、JavaScriptを勉強して時間が経った後に、見返すことで全般を思い出せるメモ的な用途で記述しています。

基本

変数

// 変数宣言
let num = 5;
// 定数(変更不可)
const name = "太郎";

テンプレートリテラル

文字列の途中に変数などの値を挟むときに使う。
※バッククォーテーション(`)を使う

let age = 3;
console.log("私は" + age + "歳です");  // 私は3歳です
console.log(`私は${age}歳です`);       // 私は3歳です

演算

通常                   省略形
x = x + 5    x += 5
x = x - 5    x -= 5
x = x * 5    x *= 5
x = x / 5    x /= 5
x = x % 5    x %= 5
a == b   // 等価演算
a === b  // 厳密等価演算(型も一致)

a && b   // かつ(a AND b)
a || b   // または(a OR b)

データ構造

配列

// 配列の宣言
const colors = ["red", "green", "blue"];

// 配列の要素数を取得
console.log(colors.length)  // 3

オブジェクト

// オブジェクトの宣言
const member = {name: "太郎", age: 20};

// オブジェクトを要素に持つ配列
const members = [
  {name: "太郎", age: 20},
  {name: "ニック", age: 50},
  {name: "mike", age: 15}
];
console.log(members[0]);      // {name: "太郎", age: 20}
console.log(members[0].age);  // 20

// 配列を要素に持つオブジェクト
const player = {
  name: "ジョージ",
  hp: 35,
  skill: ["従属", "聖なる力", "解毒"]
};
console.log(player.skill[2]);     // 解毒
console.log(player["skill"][2]);  // 解毒

関数

// 関数の定義
const add = function(num1, num2) {
  return num1 + num2;
};

// 省略形(アロー関数)
const add = (num1, num2) => {
  return num1 + num2;
};

let result = add(2, 5);
console.log(result);  // 7

制御構文

for文

const sweets = ["チョコ", "クッキー", "煎餅", "信玄餅"];
// for文(for...of)
for(const s of sweets) {
  console.log(s);
}

// for文(forEach)
sweets.forEach((sweet) => {
  console.log(sweet);
});

// チョコ
// クッキー
// 煎餅
// 信玄餅

mapメソッド

mapメソッドは、配列の全ての要素に与えられた処理を行い、新しい配列を作成します。

const numbers = [1, 2, 3, 4];
const doubleNum = numbers.map((number) => {
  return number * 2
});
console.log(doubleNum);

// [2, 4, 6, 8]

クラス

// クラスの定義
class Animal {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  getInfo() {
    console.log(`名前は${this.name}です`);
    console.log(`${this.age}歳です`);
  }
}


// Animalクラスを継承
// 継承した子クラスには親クラスの全を含む。
class Human extends Animal {
  // Animalクラスには無い初期値(hobby)を追加する場合はコンストラクタをオーバーライドする。
  constructor(name, age, hobby) {
    super(name, age);   // 親クラスのコンストラクターを実行
    this.hobby = hobby; // 子クラス独自の値を追加
  }
  // getInfoに趣味を追加したgetHumanを作成
  getHuman() {
    this.getInfo();
    console.log(`趣味は${this.hobby}です`);
  }
}

let human = new Human("太郎", 30, "スポーツ");
human.getHuman();   // 名前は太郎です
                   // 30歳です
                   // 趣味はスポーツです

ファイルの分割

ファイルを分割するには、ファルを分けた後、読込み先ではエクストポート、読込元のファイルからはインポートの記述が必要です。記述方法についても2種類あるので下記に示します。

記述方法

デフォルトエクスポート

export defaultの場合は、1つのみクラスや値のエクスポートが可能です。また、自動的に「export default 値」が渡されるので、インポート先と名前が異なっていても大丈夫です。
export default animal;
import ani from "./animal.js";

名前付きエクスポート

名前付きエクスポートでは複数のクラスや値をエクスポートできます。また、インポート先での名前は同じである必要があります。

下記のように、カンマ(,)区切りで複数の値を指定可能です。
export {name1, name2, age1, age2};
import {name1, name2, age1, age2} from "./member.js";

サンプル

実際に、クラスで紹介したプログラムを3つのファイルに分割してみると下記のようになります。

animal.js
class Animal {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  getInfo() {
    console.log(`名前は${this.name}です`);
    console.log(`${this.age}歳です`);
  }
}
// 他のファイルでも使用できるようにする
export default Animal;
human.js
// 他のファイルのクラスを読込む
import Animal from "./animal.js";

class Human extends Animal {
  constructor(name, age, hobby) {
    super(name, age);   // 親クラスのコンストラクターを実行
    this.hobby = hobby; // 子クラス独自の値を追加
  }
  getHuman() {
    this.getInfo();
    console.log(`趣味は${this.hobby}です`);
  }
}
// 他のファイルでも使用できるようにする
export default Human;
script.js
// 他のファイルのクラスを読込む
import Human from "./human.js";
let human = new Human("太郎", 30, "スポーツ");
human.getHuman();   // 名前は太郎です
                   // 30歳です
                   // 趣味はスポーツです

参考

Discussion

ログインするとコメントできます