trailhead.salesforce.com
あー来ちゃったよ日本語じゃないやつら（翻訳追いついてない奴ら）
Get Started with Modern JavaScript Development
モダンな JavaScript を始めよう。
ざっくり JavaScript の歴史を説明している。
重要なのは ES6 (ES2015 以降は年号)以降で一気に真価が加速した点だ。
モジュール化とかなんとかもこの辺から。
昨日が分からなくなったら ここ でどのブラウザが何に対応してるか分かる。
Trail では分からなくなったら Codepen で試そうとか言ってるけど、個人的に JSFiddle の方がシンプルで好きだ。
Explore New Syntax in JavaScript ES6
ES6 の新しい書き方を見ていこう。っても
var の様な関数スコープは昔からあるが、ブロック（{ ... } で囲まれた区間のこと）をスコープに持つ const, let の紹介。
展開書式の紹介とかその程度
let numbers = [1, 2, 3, 4];
let [one, two, three, four] = numbers;
console.log(one);
とか
const APPLE = {
type: 'red delicious',
color: 'red',
size: 'large'
}
const { type, color } = APPLE;
console.log(color);
とかアンパック構文（destructuring syntax）として使える。
ブロックスコープは管理が楽でええわー
Understand JavaScript Functions
JavaScript の関数を理解しよう
let result = (i,j) => i+j;
console.log(result(2,3));
こうじゃ！（関数はオブジェクトなので変数に突っ込めるで）というのと
let message = {
hello : 'Hello',
names : ['Sue', 'Joe'],
showMessage: function() {
this.names.forEach(function(name) {
console.log(this.hello + ' ' + name);
});
}
}
message.showMessage();
の this 分かりづらいでしょ…（ this.hello が undefined になってる）。
JavaScript の this はその処理の呼び出し元を意味するので、
this.names.forEach(function(name) {
});
なので
let message = {
hello : 'Hello',
names : ['Sue', 'Joe'],
showMessage: function() {
let self = this;
this.names.forEach(function(name) {
console.log(self.hello + ' ' + name);
});
}
}
message.showMessage();
が正しい書式になる。しかし、クロージャ構文（ => ）を使うと、宣言したスコープの this を内部でもバインド(束縛)するので
let message = {
hello : 'Hello',
names : ['Sue', 'Joe'],
showMessage: function() {
this.names.forEach(name => {
console.log(this.hello + ' ' + name);
});
}
}
message.showMessage()
これは意図通りに動く。
因みに可変長引数はこんな感じで定義・アクセスできる。
function testFunc(arg1, ...multiple) {
console.log(arg1);
console.log(multiple[0]);
console.log(multiple[1]);
}
続きを読む
