javascriptのES2015はご存知でしょうか？
ES2015を簡単に説明すると、javascriptの新しい機能・書き方を追加してよりシンプルなコードで今までの機能を実装することが可能になります。
ES2015の記述はブラウザによって上手く反応しないこともあるので、Babelなどのツールを使ってコンパイルする必要はありますが、今後主流になる記述方法なのでできるだけ早く習得するようにしましょう。
また、ES2015の記述はシンプルで書きやすいので、作業の効率化にも繋がります。
本記事では、ES2015の具体的な記述と共に説明していきます。
ES2015で追加された新機能
ES2015で新しく追加された新機能はこのようなモノです。
・letとconstによる変数宣言
・配列の便利メソッド
・関数と引数のデフォルト値
・分割代入
・テンプレート文字列
・Class
・可変引数
・アロー関数
それでは、1つずつ見ていきましょう。
letとconstによる変数宣言
javascriptの変数宣言といえば、「var」が一般的ですが、ES2015からは「let」と「const」を使って変数宣言することが可能です。
「let」は変数の再代入は可能で、再宣言ができません。
「const」は変数の再代入と再宣言の両方ができません。
ちなみに、「var」は再代入も再宣言も可能です。
「変数の再代入と再宣言ができるなんの縛りもないvarを使うのが一番楽なのでは？」っと思うかもしれませんが、プログラムの保守性を考えるならば、「let」や「const」を使った方が無難です。
なぜなら、変数の再代入や再宣言が可能になると、思いよもよらぬところで変数の値が変わっており、正しくプログラムが動かない可能性があるからです。
「let」や「const」を利用することで、そのような問題を未然に防ぐことができます。
具体的なコードはこのようになります。
var number = 100; //OK var number = 200; //OK let color = 'red'; //OK color = 'green';//OK let color = 'blue';//これはエラーになる const name = 'Mike';//OK name = 'Eri';//これはエラーになる
上記のコードのように「var」は変数を再代入・再宣言してもOKです。
「let」は、変数の再宣言した場合エラーになります。
なので一度変数を宣言しているcolorをもう一度宣言するとエラーが起こります。
上記のコードの場合「TypeError: unknown: Duplicate declaration “color”」というエラーメッセージが表示されます。
また、「const」は変数の再代入・再宣言ができないので「name」という変数に別の値を格納するとエラーになるのが特徴です。
上記のコードの場合「TypeError: Assignment to constant variable.」というエラーメッセージが表示されます。
「let」と「const」を上手に使い分けて記述しましょう。
配列の便利メソッド
ES2015から配列の時に使用する便利メソッドが追加されてました。
各メソッドを1つずつ紹介していきます。
forEachメソッド
forEachは配列の中身を1つずつ見ることができるメソッドです。
以前までは、for文を記述しなければならないコードもforEachを使うことで実装できるようになりました。
var numbers = [1,2,3,4,5];
var sum = 0;
numbers.forEach(function(number){
sum += number;
});
console.log(sum);//「15」と表示される
このように記述することで、numbersの中に格納されている配列をfor文を使わずに全て加算することができます。
また、このように記述することも可能です。
//forEachのコード
var numbers = [1,2,3,4,5];
var sum = 0;
function add(number){
sum += number
}
numbers.forEach(add);
このように記述しても結果が同じになります。
Mapメソッド
mapメソッドは配列を処理して新しい配列を作ることができるメソッドです。
具体的にはこのようなコードになります。
var numbers = [10,20,30];
var double = numbers.map(function(number){
return number * 2;
});
console.log(double);//[20,40,60]と表示される。
このように記述することで、配列の中に格納されている数字を2倍にすることができます。
また、このように記述することで同じような結果を得ることも可能です。
var numbers = [10,20,30];
var double = [];
for (var i = 0; i < numbers.length; i++){
double.push(numbers[i] * 2);
}
console.log(double);//[20,40,60]と表示される。
また、連想配列の場合でもmapメソッドを使用することができます。
var products = [
{name: 'スマートフォン', price: 20000},
{name: '掃除機', price: 40000},
{name: 'パソコン', price: 60000},
{name: '冷蔵庫', price: 30000},
{name: 'カメラ', price: 80000},
{name: 'クーラー', price: 40000},
{name: 'AIスピーカー', price: 60000},
];
var prices = products.map(function(product){
return product.price
});
console.log(prices);//[20000,40000, 60000, 30000, 80000, 40000, 60000]と表示される。
上記のコードは「price」のキーの値だけを取り出して、「prices」という新しい配列に格納しています。
filterメソッド
filterメソッドは名前の通り条件に合うものだけを抽出するメソッドです。
具体的なコードはこのようになります。
var products = [
{name: 'スマートフォン', price: 20000},
{name: 'スマートフォン', price: 30000},
{name: '掃除機', price: 40000},
{name: 'パソコン', price: 60000},
{name: '冷蔵庫', price: 30000},
{name: 'カメラ', price: 80000},
{name: 'クーラー', price: 40000},
{name: 'AIスピーカー', price: 60000},
];
var prices = products.map(function(product){
return product.price
});
var mobile = products.filter(function(product){
return product.name == 'スマートフォン';
});
console.log(mobile);//{name: 'スマートフォン', price: 20000}と{name: 'スマートフォン', price: 30000}が表示される。
このようにfilterメソッドを使うことで条件に合う配列だけを抽出できます。
findメソッド
findメソッドは、条件に一致する配列を抽出するメソッドです。
filterメソッドと似ていますが、一番最初に一致する配列だけを抽出します。
var users = [
{name: '田中', id: 1},
{name: '鈴木', id: 2},
{name: '山田', id: 3},
{name: '鈴木', id: 10}
];
var customer = users.find(function(user){
return user.name === '鈴木';
});
console.log(customer);//{"name":"鈴木","id":2}が表示される
このように最初に一致したモノだけを抽出します。
everyメソッドとsomeメソッド
everyメソッドとsomeメソッドは条件判定するためのメソッドです。
everyメソッドは全ての条件を満たすときにtrueの判定を返します。
(一部でも条件を満たさない場合は、falseになる)
someメソッドは一部でも条件を満たしていればtrueの判定を返します。
(全て条件を満たさない場合は、falseになる)
var products = [
{name: 'スマートフォン', price: 20000},
{name: 'スマートフォン', price: 30000},
{name: '掃除機', price: 40000},
{name: 'パソコン', price: 60000},
{name: '冷蔵庫', price: 30000},
{name: 'カメラ', price: 80000},
{name: 'クーラー', price: 40000},
{name: 'AIスピーカー', price: 60000},
];
var product = products.every(function(computer){
return products.price > 10000;
});
console.log(product);//「true」と表示される
上記のコードは「price」の値が全て「10000」以上なので、判定は「true」になります。
下記のコードは、someメソッドを使った場合です。
var products = [
{name: 'スマートフォン', price: 20000},
{name: 'スマートフォン', price: 30000},
{name: '掃除機', price: 40000},
{name: 'パソコン', price: 60000},
{name: '冷蔵庫', price: 30000},
{name: 'カメラ', price: 80000},
{name: 'クーラー', price: 40000},
{name: 'AIスピーカー', price: 60000},
];
var product = products.some(function(computer){
return products.price > 50000;
});
console.log(product);//「true」と表示される
「price」の値が50000を1つでも超えていれば「true」になるので、結果は「true」になります。
デフォルト引数
引数にデフォルトの値を与えることが可能になりました。
例えば、税込価格を表示させたい場合にこのようなコードを記述します。
function tax(a, b){
return a * b;
}
console.log(tax(1000, 1.08));//「1080」と表示される。
しかし、税金の「1.08」という値を毎回記述するのが面倒な場合、引数にデフォルトの値を与えると記述を省略できます。
function tax(a, b = 1.08){
return a * b;
}
console.log(tax(1000));//「1080」と表示される。
分割代入
配列の中身を複数に分割することが可能です。
配列の中身を複数に分割する場合、今までの場合はこのように記述します。
var person = {
name: 'たろう',
age: 20,
job: 'プログラマー',
address: '東京'
};
var name = person.name;
var age = person.age;
var job = person.job;
var address = person.address;
console.log(name, age, job, address);//「たろう 20 プログラマー 東京」と表示されます。
ES2015の場合は、このように記述します。
var person = {
name: 'たろう',
age: 20,
job: 'プログラマー',
address: '東京'
};
var {name, age, job, address} = person
console.log(name, age, job, address);//「たろう 20 プログラマー 東京」と表示されます。
テンプレート文字列
テンプレート文字列は、“(バッククォート)で囲むことで文字列内で変数を展開できます。
テンプレート文字列はこのように使用することが可能です。
var person = {
name: 'たろう',
age: 20,
job: 'プログラマー',
address: '東京'
};
function myself(greeting){
return `私の名前は${greeting.name}です。年齢は${greeting.age}歳で職業は${greeting.job}です。${greeting.address}に住んでいます。`
}
console.log(myself(person));//「私の名前はたろうです。年齢は20歳で職業はプログラマーです。東京に住んでいます。」と表示されます。
さらに、分割代入を使用することで、よりシンプル記述することが可能です。
var person = {
name: 'たろう',
age: 20,
job: 'プログラマー',
address: '東京'
};
function myself({name, age, job, address}){
return `私の名前は${name}です。年齢は${age}歳で職業は${job}です。${address}に住んでいます。`
}
console.log(myself(person));//「私の名前はたろうです。年齢は20歳で職業はプログラマーです。東京に住んでいます。」と表示されます。
class
ES2015からはjavascriptにclassが追加されました。
今までのjavascriptにはclassという概念がなく、「prototype」を使うことでクラスのようなモノを作成していました。
具体的なコードはこのようになります。
function Car(type) {
this.title = type.title;
}
Car.prototype.price = function(){
return 2000000;
}
var car = new Car({title: 'ベンツ'});
console.log(car.price)//「2000000」と表示される。
上記のコードは、Classを使うとこのようになります。
class Car{
constructor(type){
this.title = type.title;
}
price(){
return 2000000;
}
}
var car = new Car({title: 'ベンツ'});
console.log(car.price);//「2000000」と表示される。
また、「extends」を使うことで継承することも可能です。
class Car{
constructor(type){
this.title = type.title;
}
price(){
return 2000000;
}
}
class Mycar extends Car{
color(){
return 'bule';
}
}
var mycar = new Mycar({title: 'ベンツ'});
console.log(mycar.price, mycar.color);//「2000000 blue」と表示される。
このように「class」を使用することで今までのように「prototype」を使用する必要はなくなりました。
また、以前よりもシンプルなコードで実装することが可能です。
可変長引数
可変長引数は引数の値の前に「…」をつけることで引数を幾つでも受け取ることができます。
今までの場合は、受け取る値の数に合わせて引数を設定しなければなりません。
コードはこのようになります。
function numbers(...number){
return number;
}
console.log(numbers(1, 2, 3, 4, 5, 6, 7, 8, 9, 10));//「1, 2, 3, 4, 5, 6, 7, 8, 9, 10」と表示されます。
これを可変引数にしていない場合のコードはこのようになり、このような結果になります。
function numbers(number){
return number;
}
console.log(numbers(1, 2, 3, 4, 5, 6, 7, 8, 9, 10));//「1」と表示されます。
引数の値を何個も受け取りたいときに可変引数が便利です。
アロー関数
アロー関数は、「function」を「=>」に変えることで、よりシンプルに関数を定義する方法です。
まずは、従来の書き方によるコードを見てみましょう。
function tax(a, b){
return a * b;
}
console.log(tax(1000, 1.08));//「1080」と表示される。
上記のコードをアロー関数で書き直します。
var tax = (a, b) =>{
return a * b;
}
console.log(tax(1000, 1.08));//「1080」と表示される。
アロー関数を使うことでコードをシンプルに記述することができます。
また、一部ブラウザでは未対応なので注意してください。
まとめ
いかがでしたか？
ES2015は今までのjavascriptにはない、便利なメソッドや機能がたくさん追加されています。
見慣れない記述や機能があり、戸惑うかもしれませんが慣れればとても便利です。
ぜひ、この機会に習得してください。