Posted on 12月 20, 2021
JavaScript ES2015 (ES6) メモ
この記事は個人的なJavaScriptの学習メモになります。最低限知る必要があると感じたものや、これは必ず使うと思ったことのメモです。いざ調べはじめると、膨大な量のドキュメントに圧倒されますが、 TypeScript, Reactを始める前に必要な知識であるので、少しずつまとめることにしました。JavaScriptの学習を始めたい場合は、mozillaのドキュメントがわかりやすいのでこちらがおすすめです。
https://developer.mozilla.org/ja/docs/Web/JavaScript
他のプログラミング言語経験者やJS久しぶりの人は、先にJavaScript「再」入門に目を通して、知りたいところだけ詳細なドキュメント読むのがおすすめです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/A_re-introduction_to_JavaScript
目次
変数宣言(var, let, const)
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Grammar_and_Types#declarations
var
var name = "なまえ";
// 上書き可能
name = "ナマエ";
// 再宣言可能
var name = "";let
// 再宣言不可
let name = "なまえ";
// 上書き可能
name = "ナマエ";const
// 再宣言不可
// 上書き不可
const name = "なまえ";基本的にはconst定義を使用する。const宣言でもオブジェクト、配列は変更可能。
// オブジェクト
const obj = {
name: "なまえ",
email: "test@example.com"
};
obj.email = "noreply@example.com";
// 配列
const arr = ["なまえ", "sample@example.com"];
arr[0] = "ナマエ";アロー関数 () => {}
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions
functionを使わず関数宣言する
// function
function showName(name) {
return name;
}
// アロー関数
const showName = (name) => {
return name;
};
// アロー関数の省略記法
// 引数１つの場合のみ括弧を省略できる
// １行で書く場合はreturnを省略できる
const showNameLength = name => name.length;
// デフォルト値
const showName = (name = "なまえ") => console.log(name + "さん");
> showName("ナマエ");
ナマエさん
> showName();
なまえさん分割代入
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
オブジェクトからプロパティを取り出して個別の変数に代入する。特にオブジェクトの扱いが便利になる。Reactなどのフレームワークを使う場合は必須。
オブジェクトの分割代入
const user = {
name: "なまえ",
email: "test@example.com"
};
const {name, email} = user;
// 必要なプロパティのみ取り出す
const {email} = user;配列の分割代入
const user = ["なまえ", "test@example.com", "tokyo"];
// 不要な値は無視できる
const [name, , city] = user;
// 後半部分をまとめて取得(スプレット構文)
const [name, ...arg] = user;スプレット構文
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax
…で反復可能オブジェクトを展開できる。
// 配列
const [name, ...arg] = ["なまえ", "test@example.com", "tokyo"];
console.log(arg); // [ "test@example.com", "tokyo" ]
// オブジェクト
const {name, ...arg} = {name: "なまえ", email: "test@example.com", city: "tokyo"};
console.log(arg); // { email: "test@example.com", city: "tokyo" }
// プロパティ名で取得した場合
const {email, ...arg} = {name: "なまえ", email: "test@example.com", city: "tokyo"};
console.log(arg); // { name: "なまえ", city: "tokyo" }テンプレートリテラル (旧テンプレート文字列)
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals
文字列を連結(+)したり出力する場合に変数展開できて、文字列中でJSをそのまま実行できる
// バッククォートで囲む
`文字列のテストです`
// ${}構文で{}内をJSとして扱う
const test = "テスト";
console.log(`文字列の${test}です`); // 文字列のテストです
// 複数行
const num = 1;
const lines = `これは
複数行のテストです。
${num + 1}もできる`
console.log(lines);
> console.log(lines);
これは
複数行のテストです。
2もできるArray.prototype.map()メソッド
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map
map()メソッドで、配列の全ての要素に対して呼び出して戻り値を新しい配列に格納する。
ドキュメントでは戻り値の配列を使用しない場合は、コールバックの戻り値がない場合は、forEach, for-ofの使用を推奨しています。
const cities = ["sapporo", "tokyo", "nagoya", "oosaka", "fukuoka"];
const saiAndKo = cities.map(city => `${city}最&高`);
console.log(saiAndKo)
// [ 'sapporo最&高', 'tokyo最&高', 'nagoya最&高', 'oosaka最&高', 'fukuoka最&高' ]
// 構文
let new_array = arr.map(function callback( currentValue[, index[, array]]) {
// 新しい配列の要素を返す
}[, thisArg])
// 第2引数のindexを確認（配列の添字）
const saiAndKo = cities.map((city, index) => `${index}番の${city}最&高`);
//
[
'0番のsapporo最&高',
'1番のtokyo最&高',
'2番のnagoya最&高',
'3番のoosaka最&高',
'4番のfukuoka最&高'
]Array.prototype.filter()メソッド
filterメソッドはmapとは異なり、評価が真の場合のみ新しい配列に値を保存する
const cities = ["sapporo", "tokyo", "nagoya", "oosaka", "fukuoka"];
const longNames = cities.filter(word => word.length > 6);
console.log(longNames);
// [ 'sapporo', 'fukuoka' ]