📂
JavaScript(ES6) 備忘録
本記事は、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の場合は、１つのみクラスや値のエクスポートが可能です。また、自動的に「export default 値」が渡されるので、インポート先と名前が異なっていても大丈夫です。
export default animal;
import ani from "./animal.js";
名前付きエクスポート
名前付きエクスポートでは複数のクラスや値をエクスポートできます。また、インポート先での名前は同じである必要があります。
下記のように、カンマ(,)区切りで複数の値を指定可能です。
export {name1, name2, age1, age2};
import {name1, name2, age1, age2} from "./member.js";
サンプル
実際に、クラスで紹介したプログラムを３つのファイルに分割してみると下記のようになります。
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