- コーディング
【WordPress】データベースのデータを取得して動的に投稿ページを生成する
- #WordPress
- コーディング
【JavaScript】ES6で追加された機能・構文について
- #JavaScript
こんにちは！
まついちです。
スキルの幅を広げるために、最近、React.jsを勉強しています。
WEBサイトのデザイン、コーディング以外に、アプリケーションのUIデザイン、フロントエンドまでカバー出来るようになりたいなと思っています。
今回はES6がウル覚えなところもあったので、備忘録がてらまとめてみました。
ECMAScriptとは？
ECMASCriptはJavaScriptの標準仕様です。
国際的な標準規格団体であるECMAによって、標準化されました。
ES6（ECMAScript 2015）とは？
ECMAScript 6の略称で、正式にはECMAScript 2015（ES2015）とも呼ばれます。
2015年6月にリリースされました。
この年からECMA Script 2015と西暦がつくようになりましたが、それまでのバージョンに由来する呼び方でES6とも呼ばれています。
ES6で追加された機能、構文
let
「let」は再代入が可能で、再宣言が不可の変数宣言です。
関数を定義した際、「{}（ブラケット）」内でのスコープが有効となります。
※再代入・・・宣言した変数に値を設定し直すことを再代入と言います
※再宣言・・・一度宣言した変数を、同じ変数名で宣言し直すことを再宣言と言います
let area = "tokyo";
console.log(area); // => tokyo
//再代入
area = "chiba";
console.log(area); // => chiba
//再宣言
let area = "kanagawa"; // => 再宣言出来ず、エラーとなりますconst
「const」は再代入、再宣言ともに不可の変数宣言です。
const area = "tokyo";
console.log(area); // => tokyo
//再代入
area = "chiba"; // => 再代入出来ず、エラーとなりますアロー関数
従来の関数式（function）から「=>（アロー）」を使った記述式が追加されました。
「=>」は矢のように見えることから、アローと呼ばれています。
そのアローを使って定義していることからアロー関数と言われています。
従来の記述
var hoge = function(x, y) {
return x + y;
}アロー関数
const hoge = (x, y) => {
return x + y;
}
//単一式の場合は省略出来る
const hoge = (x, y) => x + y;テンプレート構文
「``（バッククォート）」を使用して、文字列を定義し、「`${}`」の内部に変数や式を埋め込むことができる構文です。
改行も反映出来、従来の記述より、簡潔に分かりやすくなります。
従来の構文
const name = "田中";
console.log("私の名前は" + name + "です"); // => 私の名前は田中ですテンプレート構文
const name = "田中";
console.log(`私の名前は${name}です`); // => 私の名前は田中です分割代入
配列やオブジェクトから値を取り出して、それらの値を変数に代入するための記述です。
従来の記述より、簡潔で特にオブジェクトや配列の内部の値を抽出する場面で非常に便利です。
従来の記述
//オブジェクト
var person = {name: "田中", age: 20};
var name = person.name; // => 田中
var age = person.age; // => 20
//配列
var colors = ["赤", "青", "黄"];
var color1 = colors[0]; // => 赤
var color2 = colors[1]; // => 青
var color3 = colors[2]; // => 黄分割代入
//オブジェクト
const person = {name: "田中", age: 20};
const {name, age} = person; // => 田中 20
//配列
const colors = ["赤", "青", "黄"];
const [color1, color2, color3] = colors; // => 赤 青 黄
スプレッド構文
スプレッド構文はオブジェクトや配列を展開して要素をコピーするための構文です。
新しいオブジェクトや配列を生成する際に、既存のオブジェクトや配列をコピーしたり、結合したりするのに役立ちます。
従来の構文
var numbers = [1, 2, 3];
var copyOfNumbers = numbers.slice(); // => [1, 2, 3]スプレッド構文
const numbers = [1, 2, 3];
const copyOfNumbers = [...numbers]; // => [1, 2, 3]for/of Loop
配列や反復可能なオブジェクトを反復処理することが出来る記述です。
従来の記述
var numbers = [1, 2, 3, 4, 5];
for(var i = 0; i < numbers.length; i++) {
var number = numbers[i];
console.log(number); // => 1 2 3 4 5
}for/of
const numbers = [1, 2, 3, 4, 5];
for (const number of numbers) {
console.log(number); // => 1 2 3 4 5
}まとめ
ES6では従来に比べて、記述が簡易的になり分かりやすくなっていました。
ソースコードの分かりやすさは保守性にも繋がるので、しっかり抑えていきたいと思います。
余談ですが、筆者はUdemyの「Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版」でReact.jsを勉強中です。
ご参考までに。
