6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ES6でJavascriptが簡単にかける!便利な追加機能とは?

Last updated at Posted at 2019-03-06

ES6とは

ES6とは、ECMAScriptのバージョン6のことです。
現在では標準化され、正式にはES2015と呼びます。

ECMAScriptとは、、Javascriptの仕様、ルールのようなものです。

ES6から加わった機能

constとlet

今まで変数宣言はvarだけで行っていました。
しかし、新しく以下の2つが追加されました。

  • let :再宣言NG
  • const :再宣言NG再代入NG

変数のスコープ

  • var :関数内
  • let :ブラケット{}のブロック内
  • const :ブラケット{}のブロック内

関数functionのスコープもブロックスコープになっています。

セミコロンは要らない?

文の最後は区切りとして、セミコロンを付けることが一般的でした。
しかし、ES6ではセミコロンがなくても正常に動くようになりました。

即時関数をブロックスコープで

即時関数ってこんなもの。

    ($function(){
        var num = 1;
    })

読み込んだらすぐに実行される。
ブロックスコープが使えなかったので、即時関数が必要でした。

ブロックスコープを使えば、

    {
        let num = 1
    }

で実行できます。

アロー関数

アロー関数とは、=>を使って関数リテラルを表現したものです。

var 関数名 = (関数リテラル)

一般的に関数リテラルは、
function(引数,…){関数の処理}
と書いていました。

アロー関数では、この関数リテラルを

(引数,…) => (関数の処理)

という風に簡単に表せます。

for of

    for(要素 of 反復できるオブジェクト(配列など)){
        各要素への処理
    }

関数のデフォルト引数

    function test(引数 = "デフォルト値"){
        処理
    }
    test();
    test("hoge");

関数の仮引数の定義で、値を代入しておくと、引数がなかった場合のデフォルト値として使えます。

6
4
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?