こんにちは、ベイマックスにギュッ＆よしよしヾ(・ω・｀)されたいテノヒラです。
フロントエンドになってから業務で使ってたのはjQueryでしたが、最近生のJava Scriptを使う機会があってその際に「あれ、全然わからんやんけ」となり、ついこないだのReact勉強会で消えてしまいたいと思うくらい理解していないことが発覚しました
そんなこんなでES6を使い始める人たちと自分の成長のためにSrebalaji Thirumalai氏のES6 for beginnersを翻訳したものをシェアします。
ところどころ意訳をしていますが、もし致命的な翻訳ミスがありましたら編集リクエストしてください。
わたしと同じ様なビギナーに届け！この想い！！
##はじめに
この投稿はES6の新しい機能について紹介します。
ES6を始めたてやフロントエンドフレームワークの学習の際に役に立ちます。
トピックは下記の9点です。
- LetとConst
- アロー関数
- デフォルト引数
- forループ
- スプレッド属性
- Maps
- Sets
- 静的メソッド
- GettersとSetters
##LetとConst
###Let
letはvarと似ていますが、letはスコープを持っています。
letはブロックレベルでのアクセスのみと定義されています。
if (true) {
let a = 40;
console.log(a); // 40
}
console.log(a); // undefined
上記の例では、変数aはif文の中で定義されているので、関数の外からはアクセスできません。
他の例を見てみましょう。
let a = 50;
let b = 100;
if (true) {
let a = 60;
var c = 10;
console.log(a/c); // 6
console.log(b/c); // 10
}
console.log(c); // 10
console.log(a); // 50
###Const
Constは変数に定数値を指定するために使われます。
そして値は変更できず、固定されます。
const a = 50;
a = 60; // エラー。constの値は変えれません
const b = "Constant variable";
b = "Assigning new value"; // エラー
Consider another example.
const LANGUAGES = ['Js', 'Ruby', 'Python', 'Go'];
LANGUAGES = "Javascript"; // エラー
LANGUAGES.push('Java'); // できます
console.log(LANGUAGES); // ['Js', 'Ruby', 'Python', 'Go', 'Java']
これはちょっと分かりにくいかもしれませんね。
こう考えてみましょう。
const変数を定義するときはいつでも、Java Scriptはその変数に値のアドレスを参照します。
例にある変数［LANGUAGES］は実際には配列に割り振られたメモリを参照しています。
ですので、あとから他のメモリの参照するために変数を変えることはできません。
プログラムを通してずっと、その変数は決められた配列のみを参照します。
##アロー関数（var hoge = () =>）
ES6での関数はほんのちょっと変わりました。
あ、関数っていうか構文がね。
function oldOne() { //古い構文
console.log("Hello World..!");
}
var newOne = () => { //新しい構文
console.log("Hello World..!");
}
新しい構文はちょっとわかりにくいですよね。
でもワイはこの構文の説明をがんばってみるよ。
この構文には2パーツがあります。
- var newOne = ()
- => {}
最初のパーツは変数を宣言し、それに関数（）を代入しています。
そんで、2つめのパーツは関数自体を宣言しています。
中括弧付きの矢印部分は、関数の本体部分を定義します。
引数の例を出してみましょう。
let NewOneWithParameters = (a, b) => {
console.log(a+b); // 30
}
NewOneWithParameters(10, 20);
この例の説明は超わかりやすいから説明はいらないよね。
##デフォルト引数
もしRubyやPythonのような他のプログラミングができるなら、デフォルト引数は新しいことじゃないよね？
デフォルト引数は、関数の宣言中にデフォルトで与えられるパラメータです。
関数を呼び出すときには値を変えることができます。
例を見てみましょう。
let Func = (a, b = 10) => {
return a + b;
}
Func(20); // 20 + 10 = 30
上記の例はひとつの引数を渡しているだけです。
この関数はデフォルトの引数を使用して関数を実行します。
他の例も考えてみましょうか。
Func(20, 50); // 20 + 50 = 70
上記の例では、関数は2つのを取得して2番目の引数はデフォルトの引数とを置き換えています。
もういっちょ他の例を出しましょう。
let NotWorkingFunction = (a = 10, b) => {
return a + b;
}
NotWorkingFunction(20); // できません
関数で引数を呼んでいる時に順番に割り当てられます。
つまり、最初の値が最初の引数に割り当てられ、2番目の値が2番目の引数に割り当てられ、といった感じに続いていきます。
上記の例では、値20が引数［a］に割り当てられ［b］は値を持っていません。
だから出力しようとしてもなにもでてこないのです。
でもね！！！！
NotWorkingFunction(20, 30); // 50;
これだとちゃんと動きますよ！
##forループ（for...of）
for ofとfor inはちょっと違うだけでまあまあ同じです。
for ofはArrayみたいな要素のリストを繰り返し処理して、indexではない要素を1つずつ返していきます。
let arr = [2,3,4,1];
for (let value of arr) {
console.log(value);
// 出力：
// 2
// 3
// 4
// 1
}
注意することは変数［value］はindexではなく、配列の各要素を出力するということです。
他の例もみてみますか。
let string = "Javascript";
for (let char of string) {
console.log(char);
}
// 出力：
// J
// a
// v
// a
// s
// c
// r
// i
// p
// t
そう、これは文字列にも使えますよ。
##スプレッド属性（...）
スプレッド属性はその名のとおりその表現を広げるのに役立ちます。
簡単に言うと要素のリストを配列に変換したり、その逆の変換ができます。
下記はスプレッド属性の例です。
let SumElements = (arr) => {
console.log(arr); // [10, 20, 40, 60, 90]
let sum = 0;
for (let element of arr) {
sum += element;
}
console.log(sum); // 220.
}
SumElements([10, 20, 40, 60, 90]);
上記の例は簡単だよね。
配列を引数として受け取る関数を宣言し、その合計を返しています。
ほんとそれだけ、超シンプル。
じゃあスプレッド属性を含ませた同じ例をみて考えてみようか。
let SumElements = (...arr) => {
console.log(arr); // [10, 20, 40, 60, 90]
let sum = 0;
for (let element of arr) {
sum += element;
}
console.log(sum); // 220.
}
SumElements(10, 20, 40, 60, 90); // ここで配列を渡していないことに注意！！代わりに要素を引数として渡します
上記の例では、スプレッド属性は要素のリスト、つまり引数を配列に変換します。
他の例もみてみますか。
Math.max(10, 20, 60, 100, 50, 200); //200.
Math.maxは与えられたリストから最大の要素を返す簡単な方法です。
これは配列を受け入れません。
let arr = [10, 20, 60];
Math.max(arr); // できないよーん。arrayは受付ませーん。
そんじゃ我らの救世主、スプレッド属性様を使ってみますか！
let arr = [10, 20, 60];
Math.max(...arr); // 60
上記の例では、スプレッド属性は配列を要素のリストの変換してます。
##Maps
mapsはkey-valueのペアを保持しています。
配列と似ていますが、自分自身のindexを宣言することができます。
そして、indexはmapsのなかで唯一無二の存在になります。
例をみていきましょう。
var NewMap = new Map();
NewMap.set('name', 'John');
NewMap.set('id', 2345796);
NewMap.set('interest', ['js', 'ruby', 'python']);
NewMap.get('name'); // John
NewMap.get('id'); // 2345796
NewMap.get('interest'); // ['js', 'ruby', 'python']
まあ、見てわかるよね。
mapsの他のおもしろい機能は、全てのindexが唯一無二であるということです。
キーとしての値か値に使えます。
もういっちょ例をみますか。
var map = new Map();
map.set('name', 'John');
map.set('name', 'Andy');
map.set(1, 'number one');
map.set(NaN, 'No value');
map.get('name'); // Andy JohnはAndyによって置換
map.get(1); // number one
map.get(NaN); // No value
mapで使われる他の便利なメソッドは下記のとおりです。
var map = new Map();
map.set('name', 'John');
map.set('id', 10);
map.size; // 2 mapのサイズ
map.keys(); // キーのみを出力.
map.values(); // 値のみを出力
for (let key of map.keys()) {
console.log(key);
}
// 出力：
// name
// id
map.keys() はmapのキーを返していますが、イテレータオブジェクトで返しています。
つまり、そのまま表示することはできません。
反復することによってのみ表示されるべきなのです。
他の例をみてみましょう。
var map = new Map();
for (let element of map) {
console.log(element);
}
// 出力：
// ['name', 'John']
// ['id', 10]
一目瞭然だよね。このfor ofの繰り返しは配列の中のkey-valueペアを出力しています。
もう少し最適化することもできます。
var map = new Map();
for (let [key, value] of map) {
console.log(key+" - "+value);
}
// 出力：
// name - John
// id - 10
##Sets
setsは、どんな型のひとつしかない値を格納するために使います。
超シンプルやんけ..!
例をみていきましょう。
var sets = new Set();
sets.add('a');
sets.add('b');
sets.add('a'); // 重複した値を加える
for (let element of sets) {
console.log(element);
}
// 出力：
// a
// b
重複した値は表示されませんよ！
ひとつだけの値が表示されます。
setsがイテレータオブジェクトってことにも注意っす！
表示するには、要素を反復処理しなければいけません。
ほかの使えるメソッドは下記のとおりです。
var sets = New Set([1,5,6,8,9]);
sets.size; // 5
sets.has(1); // true
sets.has(10); // false
上記の例だとsizeって見たらすぐわかるよね。
このほかに、与えられた要素がsetにあるかどうか基づいてブール値を返すメソッド【has】があります。
##静的メソッド
静的メソッドについて既に聞いたことがあるひとは多いよね。
静的メソッドはES6に導入されています。
めっちゃ簡単に定義して使えるのです。
例を見てみますか。
class Example {
static Callme() {
console.log("Static method");
}
}
Example.Callme(); // Static method
classの中でfunctionを使ってないことに気が付きましたか？
そしてクラスのためにインスタンスを作らなくてもこの関数を呼ぶことができます。
##GettersとSetters
GettersとSettersはES6で導入された使える機能のひとつです。
もしJSでクラスを使ってるなら重宝しますよ！
（訳注：ES5で導入されました MDNのgetters MDNのsetters）
では最初にgettersとsettersを書かない例を見てみましょう。
class People {
constructor(name) {
this.name = name;
}
getName() {
return this.name;
}
setName(name) {
this.name = name;
}
}
let person = new People("Jon Snow");
console.log(person.getName()); //Jon Snow
person.setName("Dany");
console.log(person.getName()); //Dany
まあ、わかるよね。
Peopleのクラスに人の名前のsetとgetするためのふたつの関数を持っています。
gettersとsettersを含めた例を見てみましょう。
class People {
constructor(name) {
this.name = name;
}
get Name() {
return this.name;
}
set Name(name) {
this.name = name;
}
}
let person = new People("Jon Snow");
console.log(person.Name);
person.Name = "Dany";
console.log(person.Name);
上記の例では、Peopleのクラスの中に、getプロパティとsetプロパティを持つふたつの関数があります。
そのgetプロパティは変数の値を取得するために使われ使われ、setプロパティは変数に値を設定するために使わます。
また、getName関数とsetName関数は括弧なしで呼び出されます。これは、変数に値を代入するのと同じです。
時間を割いてくれてありがとう。この記事を楽しんでくれたことを願うよ :) :)
##さいごに
日本語が怪しいところがありますが、わかりやすい記事だったのかなと思います。
読んでいただきありがとうございます。