Javascript ES5,6 の新機能(letとconst,アロー関数,クラスなど)

公開日: : javascript

Javascript let const アロー関数 クラス

ESとはECMASCriptの略で、ECMA という国際的な標準化機関が定めた JavaScript の標準規格のこと。ECMASCript5は2009年12月、ECMASCript6(正式名ES2015)は2015年に標準化された。
今回はそこから分かりにくい変数定数宣言、アロー関数、クラスなどをメモっておこうと思います。

let と const

Javascript の変数宣言は var のみだったが、ES6 から let と const が採用された。

var、let、const の使い分け

  • var:変数の使用開始を明示的に宣言
  • let:ブロックの中だけで有効な局所変数宣言
  • const:定数宣言

var、let、const 再宣言と再代入

var a = 1;
let b = 1;
const c = 1;
var a = 2; // 再宣言OK
let b = 2; // 再宣言エラー
const c = 2; // 再宣言エラー
a = 3; // 再代入OK
b = 3; // 再代入OK
c = 3; // 再代入エラー

var、let、const ブロックスコープ

let と const は ブロック{}内のみで有効になる。

{
    var a = 1;
    let b = 2;
    const c = 3;
}
console.log(a); // 1 (出来る)
console.log(b); // undefined (出来ない)
console.log(c); // undefined (出来ない)

関数

デフォルト引数

引数を省略した場合のデフォルト値を指定できる。

function f(a, b = 2) { return a + b; }
console.log(f(1));//デフォルト値が2なので3が出力される

可変長引数

個数が変動する引数。関数に渡された全ての引数を arguments で取得できる。

var f = function(){
    for(let i = 0; i < arguments.length; ++i){ 
        console.log(arguments[i] * 2);
    }
};
f(0, 1, 2, 3);//0246

アロー関数

アロー関数は関数をより短く記述できる。

function () {} //通常関数
 ↓ 省略
() => {} //アロー関数
// 通常の無名関数
var f = function (a, b) { return a + b; };
 ↓ 省略
// アロー関数にできる
const f = (a, b) => { return a + b; };
 ↓ 省略
// 単一式の場合は{}やreturn を省略できる
const f = (a, b) => a + b;
 ↓ 
// {}やreturn を省略してオブジェクトを返したい場合はカッコ()で囲む
const f = (a, b) => ({ sum: a + b });
// 通常の無名関数
function (a) { return a + 2; };
 ↓ 省略
// アロー関数 引数が1個の場合は ( ) を省略可
a => { return a + 2; }
// 通常の無名関数
function () { return 10; };
 ↓ 省略
// アロー関数 引数が0個の場合は ( ) が必要
() => { return 10; }

※ 通常の関数では this の値は呼び出される時に決まるが、アロー関数では関数が宣言された時に確定するので注意。

クラス

クラスの定義

定義の方法は「クラス宣言文」と「クラス式」の2種類あります。

class クラス名 { }; //クラス宣言文
const 変数名 = class クラス名 { }; //クラス式
const 変数名 = class { }; //クラス式でクラス名の省略形

クラスの基本例

class Myclass {
    constructor(a, b) { //初期化関数コンストラクター
        this.a = a;
        this.b = b;
    }
}
let obj = new Myclass(1, 2);
console.log(obj.a);// 1

コンストラクタ(constructor)はオブジェクトを生成する際に最初に呼ばれるメソッド。
class 自身 は インスタンスオブジェクト(this)に代入される。

メソッド

class Myclass {
  f1(a) {
    this.a = a;
  }
  f2() {
    return this.a;
  }
}
var obj = new Myclass();
obj.f1("test");
console.log(obj.f2());//test

スタティックメソッド(static)

スタティック関数は、new でオブジェクトを生成しなくても呼び出すことができるメソッドです。

class Myclass {
  static f1() {
    console.log("test");
  }
}
Myclass.f1();    // test

ゲッター(getter)とセッター(setter)

ゲッターはプロパティとしてアクセスされた場合に実行される。
セッターはプロパティに値を代入された際に実行される。

class Myclass {
  get f1() {
    return this._a;
  }
  set f2(a) {
    this._a = a;
  }
}
var obj = new Myclass();
console.log(obj.a); // プロパティアクセスなので getter メソッドが呼ばれる
obj.a = "test"; // 代入なので setter メソッドが呼ばれる

外から直接読み書きしてほしくないプライベート的なプロパティを _(アンダーバー)を付けた書き方は、見やすくするだけのよく使われるルールで特に特性はない。

プロトタイプ(prototype)

定義済のクラスに変数やメソッドを追加することができる。

class Myclass { }
Myclass.prototype.f1 = "test1";
Myclass.prototype.f2 = function() {
  console.log("test2");
}
var obj = new Myclass.();
console.log(obj.f1); // test1
obj.f2(); // test2

継承(extends)

class Myclass {
  f1() { console.log("test1"); }
}
class Exclass extends Myclass {
  f2() { console.log("test2"); }
}
var obj = new Exclass();
obj.f1(); // test1
obj.f2(); // test2

参考サイト

JavaScript入門 – とほほのWWW入門

関連記事

Javascript ノード の取得や挿入

Javascript ノードの取得や挿入

ノードの取得 ノードの取得(ダイレクトアクセス) document.getElementById

記事を読む

画像の拡大・縮小 タッチイベント

画像の拡大縮小を javascript の touch イベントでやってみる

画像の幅と高さを取得 まずは、neko.jpg という画像を用意して、幅と高さを取得します。

記事を読む

Strict モード JavaScript

Javascript Strictモード “use strict”;

Strict モード(厳格モード) Strict モードとは、ECMAScript5(2009年1

記事を読む

javascriptで複数同じ名前のformの値を取得する

javascriptで複数同じ名前のformの値を取得するとエラー Cannot read property ‘value’ of undefined

Javascript で value の値を取得する このようなHTMLフォームがあった場合、

記事を読む

WordPress エラー:Failed to load plugin: table from url https://cdn.tinymce.com/4/plugins/table/plugin.min.js

WordPress エラー:Failed to load plugin: table from url https://cdn.tinymce.com/4/plugins/table/plugin.min.js

WordPress エラーの状態 WordPress 管理画面のテキスト入力欄で(ビジュアルタブの

記事を読む

画像加工 cropbox.js

写真をアップロードして切り抜きが出来るcropboxにタッチイベントを付けてみる

Git Hub の cropbox 写真をアップロードしてカット出来るjQueryのプラグイン c

記事を読む

canvas タグでお絵描き(レスポンシブ)

canvas タグでお絵描き(レスポンシブ)

簡単なメモ張みたいなものが欲しいので作ってみました。 canvas のレスポンシブが少しひっかかっ

記事を読む

Wordpress VR Test

WordPress で VR させて、360°のパノラマ画像を表示する

WordPress.com内ショートコードで VR させる WordPress.com内で、VR(

記事を読む

Three.jsで360°パノラマ画像を VR させる

Three.jsで360°パノラマ画像を VR させる

Three.jsで360°パノラマ画像を VR させる VRを作るのに前回のプラグイン「WP-VR

記事を読む

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

Javascript でマウスドラッグのテストをしていきます。 分かりやすいように、ボールを投げる

記事を読む

javascript

Message

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

WordPress エラー:Failed to load plugin: table from url https://cdn.tinymce.com/4/plugins/table/plugin.min.js
WordPress エラー:Failed to load plugin: table from url https://cdn.tinymce.com/4/plugins/table/plugin.min.js

WordPress エラーの状態 WordPress 管理画面のテキ

wordpress タイトルの変更
WordPress タイトルの変更

テンプレートタグ the_title(); get_the_title

All-in-One WP Migration で サーバ移動
「All-in-One WP Migration」プラグインで 簡単に WordPress のサーバー移行する手順メモ

1.移行元サイトでのデータエクスポート 「All-in-One WP

DNSサーバーとは
ドメインとは?DNSサーバーとは?

ドメインとは? ドメインとは? ドメインとは、インターネット上のネ

javascriptで複数同じ名前のformの値を取得する
javascriptで複数同じ名前のformの値を取得するとエラー Cannot read property ‘value’ of undefined

Javascript で value の値を取得する このようなHT

→もっと見る

    • 202411
      Mon Tue Wed Thu Fri Sat Sun
      123
      45678910
      11121314151617
      18192021222324
      252627282930
    にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
    にほんブログ村 FC2 Blog Ranking
    PAGE TOP ↑