ES6(ECMAScript 2015)について ~いくつかのES6以降の仕様を説明!

ES6(ECMAScript 2015)について ~いくつかのES6以降の仕様を説明!

JavaScript の基本部分の仕様を定めているのが ECMAScript です。

ES6 以降もJavascriptはどんどん進化していて、いろいろな機能が追加され続けています。それを知っていないとプログラムの理解に時間がかかったりするので、ブラッシュアップが必要です。
私は、最近流行りのフロントエンドフレームワーク(React、Vue、Angularなど)を使うために勉強したとき、ES6以降の書き方を知らないことで理解が遅くなることを経験しました。
今回はいくつかのES6以降の仕様を説明したいと思います。

アロー関数

アロー関数式を使うことで関数リテラルによる関数定義をより簡略化して記述することができます。

通常の関数の例

function addOne(foo){
  return foo + 1;
}
console.log(addOne(10));

アロー関数の例

let addOne = (foo)=>{
  return foo + 1;
}
console.log(addOne(10))

配列の扱い方

プログラムで繰り返し処理を実施するには配列を使います。配列の中身を取り出して繰り返し処理を実行します。

基本的な繰り返し

最初に配列の処理で習う構文は for文 です。配列のインデックスを指定して配列の個数分繰り返します。

for文

const arr = [10, 20, 30, 40, 50];

for (let i = 0; i < arr.length; ++i) {
  console.log(arr[i]);
}

for-of

for-offor文 のあとに出てきた構文です。配列の個数を意識しなくても記述できるので、スッキリかけます。

const array = [10, 20, 30, 40, 50];

for (let item of array) {
  console.log(item); 
}

ArrayのforEachメソッド

配列にはメソッドが追加されることがあります。例えば forEach メソッドです。こちらはもっとスッキリと書けます。

const array = [10, 20, 30, 40, 50];

array.forEach(item => console.log(item));

ここにアロー関数が出てきています。item => console.log(item) の箇所です。

Arrayのfindメソッド

配列の中の任意の値があるかどうか見つけるならfindメソッドがあります。

const array = [10, 20, 30, 40, 50];

const find = array.find(item => item === 20);
console.log(find)

その他に、filter, map, reduceメソッドなどがあり用途に応じて使い分けると、ソースを見て何をしたいか分かる書き方になります。そのように使い分けると可読性があがります。

Template リテラル

テンプレートリテラルはバッククォート (`) で区切られたリテラルで、substitutionと呼ばれる埋め込み式が利用できます。

let name = "Bob", time = "today";
let foo = `Hello ${name}, how are you ${time}?`

Destructuring

分割代入 (Destructuring assignment) 構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式です。

// list matching
let [a, , b] = [1,2,3]
console.log(`a は${a} b は${b}`);
const objectMan = {
  myName: 'Ken',
  age: 42
};
// object matching
let {myName, age} = objectMan;

console.log(`myName は${myName}、 age は${age}`);

オブジェクトの扱い方

const objectMan = {
  myName: 'Ken',
  age: 42
};

//ドット記法でアクセス
console.log(objectMan.myName)
//角括弧による記述
console.log(objectMan['myName'])

//keyesメソッドで全部のキーを配列として返す
for (const key of Object.keys(objectMan)) {
  console.log(`keyは${key}`);
}

//valuesメソッドで全部のキーを配列として返す
for (const value of Object.values(objectMan)) {
  console.log(`valueは${value}`);
}

//entriesメソッドで全部のキーと値を配列として返す
for (const [key, value] of Object.entries(objectMan)) {
  console.log(`${key}: ${value}`);
}

その他

ブラウザで実行する環境

下記のHTMLと空の script.js を作成してブラウザで動作を確認して下さい。
エディタにVscodeを使うならLive Serverなどの拡張機能を使うとブラウザで更新する手間がかからないので便利です。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>JavaScript 練習</title>
  </head>
  <body>
    <script src="script.js"></script>
  </body>
</html>

Nodeで実行する環境(Nodejs

javascriptはブラウザで実行するプログラムです。ブラウザを使わなくてもNode.jsというjavascriptの実行環境があります。
簡単に動作を確認できます。Node.jsをインストールすればVscodeで、実行出来るので便利です。

vscodeの拡張機能(Handy Dandy Notebook

Node.jsの実行環境を手軽に実行できる拡張機能です。pythonなど他の実行環境がインストールされていればその言語でも動作させることが出来るようです。
Notebookと名のつくように、メモとしてプログラムの断片を書き留めて思い出しつつどのような動きをするか目で確かめられて便利です。
(Mac環境だと動作させられなかった。知っている人がいれば教えて欲しい。Macの場合はシンプルにNode.jsのプロジェクトを作ってデバッグ実行しても良いです。)

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

先頭に戻る