if(true) {  let foo = "foo";  console.log(foo);  //foo}console.log(foo);  //Uncaught ReferenceError: foo is not defined//ブロックの外からアクセスしようとするとエラーになります。

let foo;  //宣言と初期化foo = "foo";  //値の代入console.log(foo);  //foofoo = "foo2";  //値の再代入console.log(foo);   //foo2let foo = "foo3";  //Uncaught SyntaxError: Identifier 'foo' has already been declared//同じ変数を再度宣言するとエラーになります。

function myfunc() {  console.log(foo); //Uncaught ReferenceError: Cannot access 'foo' before initialization  let foo = 'foo';}myfunc();

let foo = 'foo';console.log(window.foo);  //undefinedvar bar = 'bar';  //var キーワードで宣言console.log(window.bar);  //barboo = 'boo';  //キーワードなしで宣言。// "use strict" を指定している場合はエラー（ReferenceError: boo is not defined）console.log(window.boo);   //boo

if(true) {  const foo = "foo";  console.log(foo);  //foo}console.log(foo);  //Uncaught ReferenceError: foo is not defined//ブロックの外からアクセスしようとするとエラーになります。

const foo;  //エラー Uncaught SyntaxError: Missing initializer in const declaration

const foo = null;  //値がなく変更できない変数console.log(foo);  //null

const foo = 'foo';  //値を代入して初期化foo = 'new foo'; //エラー Uncaught TypeError: Assignment to constant variable.

const array = [ 'a', 'b', 'c' ];//const i の後に i++ があり再代入になる Uncaught TypeError: Assignment to constant variable.for(const i = 0; i < array.length; i++) {  //エラー  console.log(array[i]);}//以下のように let であればOKfor(let i = 0; i < array.length; i++) {  console.log(array[i]);}//以下の場合は問題ありません（for ループごとに新しいブロックとなるため）for(const val of array ) {  console.log(val);}

const foo = 'foo';const foo = 'new foo'; //Uncaught SyntaxError: Identifier 'foo' has already been declared

const array = [ 'a', 'b', 'c' ];for(let i = 0; i < array.length; i++) {  const value = array[i];  console.log(value);}

const foo = 'foo';console.log(window.foo);  //undefinedvar bar = 'bar';  //var キーワードで宣言console.log(window.bar);  //barboo = 'boo';  //キーワードなしで宣言。console.log(window.boo);   //boo// "use strict" を指定している場合はエラー（ReferenceError: boo is not defined）

const FOO = 'FOO';//FOO は常に'FOO'という値で変更できない

const foo = {  //オブジェクト  name: 'foo'};console.log(foo.name);  //foofoo.name = 'who';   //オブジェクトのプロパティ（name）を変更console.log(foo.name);  //whoconst bar = [1, 2, 3];  //配列console.log(bar[1]);  //2（2番めの要素の値）bar.forEach(function(value, index, array) {  array[index] = value * 2;  //配列の要素を変更（値を倍に）});console.log(bar[1]);  //4bar.shift();   //配列の要素を変更（先頭の要素を削除）console.log(bar[1]);  //6

関数`テンプレート`

function myTag(strings, url, link, target) {  // 第1引数 strings は以下の4つ要素を持つ配列  let str0 = strings[0]; // <a href="  let str1 = strings[1]; // ">  let str2 = strings[2]; // </a>  //let str3 = strings[3]; // この例の場合、最後の要素は空文字（使用しない）  if(target) {    return  `${str0}${url}" target="_blank" rel="noopener${str1}${link}${str2}`;  }else{    return  `${str0}${url}${str1}${link}${str2}`;  }}let url = 'http://example.com';let link = 'Example Doamain';let target = true;let output = myTag`<a href="${ url }">${ link }</a>${ target }`;console.log(output);//<a href="http://example.com" target="_blank" rel="noopener">Example Doamain</a>// target = false の場合は以下のような出力//<a href="http://example.com">Example Doamain</a>

function myTag(strings) {  console.log('strings.raw[0] :' + strings.raw[0]);  // raw プロパティ  console.log('strings[0] :' + strings[0]);}myTag`line 1 \n line 2`;//以下が出力strings.raw[0] :line 1 \n line 2  // \n は文字として出力される（raw プロパティ）strings[0] :line 1    // \n は改行として処理される line 2myTag`C:\Development\profile\about.html`;//以下が出力strings.raw[0] :C:\Development\profile\about.html   //入力された通り（raw プロパティ）strings[0] :C:Developmentprofileabout.html   //バックスラッシュが取り除かれている

function myTag(strings) {  for(let i = 0 ; i < strings.length; i++) {    console.log(strings.raw[i]); //配列の個々の要素の raw プロパティ  }  console.log(strings.raw); //配列全体（raw プロパティ）}myTag`line1 ${1} \n line2 ${2}`;//以下が出力（配列の個々の要素と配列全体）raw[0] : line1raw[1] :  \n line2raw[2] :["line1 ", " \n line2 ", ""] //3つの要素を持つ配列

const filePath = String.raw`C:\Development\profile\about.html`;console.log(filePath); //C:\Development\profile\about.html

const file = '\\about.html';const filePath = String.raw`C:\Development\profile${file}`;console.log(filePath);  //C:\Development\profile\about.html

const file = 'about.html';const filePath = String.raw`C:\Development\profile\${file}`;console.log(filePath);  //C:\Development\profile\${file}

function 関数名( 仮引数 = デフォルト値, 仮引数 = デフォルト値 ) {}

function divide(x = 10, y = 5) {  if(y !== 0) {    return x / y;  }else{    return 'cannot divide by 0 or null';  }}console.log( divide( 10, 2 ) );  //5console.log( divide( 3 ) );   //0.6console.log( divide( 3, undefined ) );   //0.6console.log( divide() );  //2

function add(x, y = 5) {  return x + y;}console.log( add( 10, 2 ) );  //12console.log( add( 10 ) );  //15console.log( add() );  //NaNconsole.log( add( undefined, 3) );  //NaN

function funcRest(...args) {  //args は配列  for(let i = 0; i < args.length; i++) {    console.log(args[i]);  }}funcRest('a', 'b', 3, 'c');//出力結果ab3c

function funcRest(...args) {  for(let val of args) {    console.log(val);  }}funcRest('a', 'b');//出力結果ab

function funcRest(arg1, arg2, ...args) {  console.log(arg1);  console.log(arg2);  console.log(args);}funcRest('a', 'b', 3, 'c');//出力結果ab[3, "c"]  //要素2つの配列

function funcRest(...args) {  let sortedArgs = args.sort();  return sortedArgs;}console.log(funcRest( 'x', 'a', 'e', 'c'));//出力結果["a", "c", "e", "x"]

const arr = [1, 2]; // この配列から値を取り出す// 変数 a に arr[0] の値、変数 b に arr[1] の値を代入const [a, b] = arr;console.log(a); // 1console.log(b); // 2

const arr = [1, 2];const a = arr[0];const b = arr[1];

let a, b;  //宣言と初期化[a, b] = [1, 2];   //値の代入console.log(a); // 1console.log(b); // 2

let a, b;//既定値を指定[a = 3, b = 5] = [7];console.log(a); // 7console.log(b); // 5（既定値）

function myFunc() {  return [1, 2];}let [a, b] = myFunc();console.log(a); // 1console.log(b); // 2

const [a, b, ...c] = [1, 2, 3, 4, 5];console.log(a); // 1console.log(b); // 2console.log(c); // [3, 4, 5]

let a = 1;let b = 2;[a, b] = [b, a];console.log(a); // 2console.log(b); // 1

const obj = {  foo: 'FOO',  bar: 'BAR'}const { foo, bar } = obj;console.log(foo);  //FOOconsole.log(bar);  //BAR

const obj = {  foo: 'FOO',  bar: 'BAR'}const foo = obj.foo;const bar = obj.bar;

const app = {  name: 'foo',  version: '1.0.0',  type: 'apps'}const name = app.name;const version = app.version;const type = app.type;

const app = {  name: 'foo',  version: '1.0.0',  type: 'apps'}const { name, version, type } = app;/* 以下と同じことconst name = app.name;const version = app.version;const type = app.type;*/

const {PI} = Math;//const PI = Math.PI  と同じことですが、PI を2回記述せずに済みますconsole.log(PI);  //3.141592653589793

const obj = {  foo: 'FOO',  bar: 'BAR'}const { bar, foo } = obj;console.log(foo);  //FOOconsole.log(bar);  //BAR

const obj = {  foo: 'FOO',  bar: 'BAR'}const { bar } = obj;console.log(bar);  //BAR

const obj = {  foo: 'FOO',  bar: 'BAR'}//既定値を指定const { foo = 'default1', bar = 'default2' , boo = 'default3'} = obj;console.log(foo);  //FOOconsole.log(bar);  //BARconsole.log(boo);  //default3（既定値）

const obj = {  foo: 'FOO',  bar: 'BAR'}let foo, bar;  //セミコロンが必要//代入文の周りを括弧で囲む({foo, bar} = obj);console.log(foo);  //FOOconsole.log(bar);  //BAR

const obj = {  foo: 'FOO',  bar: 'BAR'}//プロパティ名 : 変数名const { foo:a, bar:b } = obj;console.log(a);  //FOOconsole.log(b);  //BAR

const obj = {  foo: 'FOO',  bar: 'BAR'}const { foo:a= 'default1', bar:b= 'default2' , boo:c='default3' } = obj;console.log(a);  //FOOconsole.log(b);  //BARconsole.log(c);  //default3（既定値）

const obj = {  foo: {    name: 'Foo',    age: 20  },  bar: {    name: 'Bar',    age: 30  }}const { foo, bar } = obj;console.log(foo); //{name: "Foo", age: 20}console.log(foo.age); //20console.log(bar); //{name: "Bar", age: 30}console.log(bar.age);  //30

const obj = {  foo: {    name: 'Foo',    age: 20  },  bar: {    name: 'Bar',    age: 30  }}const {  foo: {age:foo_age}, bar: {age:bar_age}} = obj;console.log(foo_age); //20console.log(bar_age); //30

const obj = {  foo: 'FOO',  bar: 'BAR'}function func({ foo }) {    console.log(foo);}func(obj); //FOO

const obj = {  foo: {    name: 'Foo',    age: 20  },  bar: {    name: 'Bar',    age: 30  }}function func({ foo: {name:foo_name}, foo: {age:foo_age}} ) {  console.log(foo_name + ' is ' + foo_age + ' years old.');  //console.log(`${foo_name} is ${foo_age} years old.`);}func(obj); //Foo is 20 years old.

function func([a, b]) {  console.log(a); // 1  console.log(b); // 2  let c = a + b;  console.log(c);  // 3}const arr = [1, 2];func(arr);

//配列を生成let array  = ['a', 'b', 'c'];//メソッド [Symbol.iterator]() を実行してイテレータを取得let iterator = array[Symbol.iterator]();//イテレータを出力console.log(iterator);  //Array Iterator {}/* 以下はイテレータ（Array Iterator）をインスペクタで展開した内容 */Array Iterator {}  __proto__: Array Iterator    next: ƒ next()   // next() メソッドを持っている      Symbol(Symbol.toStringTag): "Array Iterator"    __proto__:      Symbol(Symbol.iterator): ƒ [Symbol.iterator]() //Symbol.iterator        arguments: (...)        caller: (...)        length: 0        name: "[Symbol.iterator]"      __proto__: ƒ ()      [[Scopes]]: Scopes[0]    __proto__: Object/* ここまで（イテレータをインスペクタで展開した内容） *///イテレータ の next() メソッドを実行して結果（IteratorResult）を取得let iteraotResult = iterator.next();//結果（IteratorResult）を出力console.log( iteraotResult );//出力：value と done プロパティを持つオブジェクト{value: "a", done: false}

let array  = ['a', 'b', 'c'];//配列のイテレータlet iterator = array[Symbol.iterator]();//next() メソッドを反復処理して結果を表示while(true){  // iteratorResult を取得  let iteratorResult = iterator.next();  //value プロパティと done プロパティの値をコンソールに出力  console.log(`value: ${iteratorResult.value}, done: ${iteratorResult.done}`);  //done プロパティの値が true になったら終了（break）  if(iteratorResult.done) break;}//出力value: a, done: falsevalue: b, done: falsevalue: c, done: falsevalue: undefined, done: true

Symbol.iterator の例

以下は独自の Symbol.iterator メソッドを実装してオブジェクトを反復可能（iterable）にする例です（機能を確認するためのもので実用的なものではありません）。

反復可能オブジェクトは Symbol.iterator というシンボルをキーとするメソッド [Symbol.iterator]() を持たなければなりません。

このメソッドはイテレータを返し、イテレータは next() というメソッドを実装し、以下のような value と done という2つのプロパティを持つ IteratorResult というオブジェクトを返します。

以下の例ではオブジェクトの要素（プロパティ）の数はObject.keys() で取得した配列の length を利用しています。

next() メソッドでは要素数以下の場合は done に false を設定し、要素数より大きい場合は true を設定しています。

また、value には this[keys[current]] でプロパティの値を表示するようにしています（アロー関数を使用しているので this はこのオブジェクト obj になります）。

//オブジェクトを作成var obj = {foo: 'FOO', bar: 'BAR', boo: 'BOO'};// オブジェクトを iterable に（Symbol.iterator を実装）obj[Symbol.iterator] = function(){  // イテレータオブジェクト  var iterator = {};  // カウンタ（現在の要素番号）  var current = 0;  // このオブジェクト（this → obj）のプロパティのキーの配列  var keys = Object.keys(this);  //イテレータの next() メソッド  iterator.next = ()  => {    // IteratorResult： value と done プロパティの定義    var iteratorResult = (current < keys.length)      //current が要素数以下の場合（done は false を指定）      ? { value: this[keys[current]], done: false }      //current が要素数より大きい場合（done は true を指定。value は省略可能）      : { value: undefined, done: true };    current++;    //next() は IteratorResult を返す    return iteratorResult;  };  // メソッドはイテレータを返す  return iterator;};

イテレータを実装すると、スプレッド構文やfor...of 文が使えます。

var obj = {foo: 'FOO', bar: 'BAR', boo: 'BOO'};//イテレータを実装obj[Symbol.iterator] = function(){  var iterator = {};  var current = 0;  var keys = Object.keys(this);  iterator.next = ()  => {    var iteratorResult = (current < keys.length)      ? { value: this[keys[current]], done: false }      : { value: undefined, done: true };    current++;    return iteratorResult;  };  return iterator;};//スプレッド構文console.log(...obj);   //FOO BAR BOO//for...of 文for(var value of obj) {  console.log(value);}/*FOOBARBOO*/

イテレータを持っていない場合は、以下のようなエラーになります。

var obj = {foo: 'FOO', bar: 'BAR', boo: 'BOO'};// スプレッド構文console.log(...obj);//エラー Uncaught TypeError: Found non-callable @@iterator//for...of 文for(var value of obj) {  console.log(value);}//エラー Uncaught TypeError: obj is not iterable

参考サイト

• MDN イテレーターとジェネレーター
• MDN 反復処理プロトコル
• 反復可能なオブジェクト
• JavaScript の イテレータ を極める！
• イテレータ
• Iterator について
• 反復処理の中身、IterableとIteratorについて仕様書を調べてみた

Array.from(arrayLike, mapFn, thisArg)

let foo = Array.from('foo'); //文字列から配列を生成console.log(foo);  //["f", "o", "o"]//Map 関数で大文字に変換let foo_capital = Array.from('foo', function(char) {  return char.toUpperCase();});console.log(foo_capital);  // ["F", "O", "O"]//Map 関数で各文字にインデックス番号を追加let foo_index = Array.from('foo', function(char, index) {  return index + ':' + char;});console.log(foo_index); // ["0:f", "1:o", "2:o"]

Array.from(document.getElementsByTagName('div'), (elem, i) => {  if(elem.id) {    //取得した div 要素に id が付与されていれば出力    console.log(elem.id);  }})// 上記は以下と同じこと// 配列のようなオブジェクトを取得const divElems = document.getElementsByTagName('div');// 配列のようなオブジェクトを配列に変換const divElemsArray = Array.from(divElems);// 配列のメソッド forEach() を使うdivElemsArray.forEach(function(elem) {  if(elem.id) {    console.log(elem.id);  }});//出力例/*headerheader_innersearch_boxnavicontainercontent・・・*/

const myArray = Array.from({length: 3}, (v, i) => i) ;console.log(myArray); // [0, 1, 2]

const myArray = Array.from({length: 3}).map((v, i) => i);

const myArray = [...Array(3)].map((v, i) => i);

[  { label: "H1", value: "h1" },  { label: "H2", value: "h2" },  { label: "H3", value: "h3" },  { label: "H4", value: "h4" },  { label: "H5", value: "h5" },  { label: "H6", value: "h6" }]

const headingTagOptions = [];for (let i = 1; i <= 6; i++) {  headingTagOptions.push({ label: `H${i}`, value: `h${i}` });}

const headingTagOptions = Array.from({ length: 6 }, (_, i) => ({  label: `H${i + 1}`,  value: `h${i + 1}`,}));

Array.of(element0, element1, ..., elementN)

let arrOf3 = Array.of(3);console.log(arrOf3);/*[3]  単一の要素を持つ配列0: 3length: 1 */let arr3 = Array(3);  //Array コンストラクタ（new を省略）console.log(arr3);/*(3) [empty × 3] length プロパティが3の空の配列length: 3*///以下の場合は同じconsole.log(Array.of(1, 2, 3)); // [1, 2, 3]console.log(Array(1, 2, 3));   // [1, 2, 3]console.log(Array.of('a', 'b', 'c')); // ["a", "b", "c"]console.log(Array('a', 'b', 'c'));  // ["a", "b", "c"]

console.log(Array.of(-1)); //[-1]console.log(Array(-1));  // Uncaught RangeError: Invalid array lengthconsole.log(Array.of(5.7));  //[5.7]console.log(Array(5.7));  //Uncaught RangeError: Invalid array length

arr.find(callback(element, index, array), thisArg)

const arr = [3, 12, 37, 8, 9, 22];const found = arr.find(function(elem) {  return elem > 8;});console.log(found);  //12

const arr = [3, 12, 37, 8, 9, 22];const found = arr.find(elem => elem > 8);console.log(found);  //12

const arr = [3, 12, 37, 8, 9, 22];//filter() は条件に合致する「要素の配列」を返すconst found = arr.filter(elem => elem > 8)[0];  //最初の要素console.log(found);  //12

const arr = [3, 12, 37, 8, 9, 22];//findIndex() は条件に合致する最初の要素の添字を返すconst foundIndex = arr.findIndex(elem => elem > 8);console.log(foundIndex);  //1

const myMembers = [  { id: '001', name: 'foo', age: 22 },  { id: '002', name: 'bar', age: 36 },  { id: '003', name: 'baz', age: 57 },];// id プロパティの値が の要素const id002 = myMembers.find(member => member.id === '002');console.log(id002.name);  //bar// age プロパティの値が 50 より大きい要素const over50 =  myMembers.find(member => member.age >= 50);console.log(over50.name);  // baz

arr.findIndex(callback(element, index, array), thisArg)

const fruits = ["apple", "banana", "cherry", "pineapple"];const index = fruits.findIndex(fruit => fruit === "pineapple");console.log(index); //3console.log(fruits[index]);  //pineapple

const fruits = ["apple", "banana", "cherry", "pineapple"];const index = fruits.indexOf("pineapple");console.log(index); //3console.log(fruits[index]);  //pineapple

const fruits = ["apple", "banana", "cherry", "pineapple"];const index = fruits.findIndex(fruit => fruit.length > 5);console.log(index); //1console.log(fruits[index]);  //banana

<ul id="myList">  <li>apple</li>  <li>banana</li>  <li class="foo">cherry</li>  <li>pineapple</li></ul><script>//li 要素の集まり（NodeList）を配列に変換const listItemsArray = Array.from(document.querySelectorAll('#myList li'));//class 属性の値が foo の最初の要素の位置（インデックス）を取得const index = listItemsArray.findIndex(item => item.className ==='foo');console.log(index); //2console.log(listItemsArray[index].textContent);  //cherry</script>

//期待通りに動作しない（オブジェクトとして return できない）const func = () => { foo: 123 }console.log(func());  // undefined

//括弧 () で囲むことでオブジェクトとして returnconst func = () => ({ foo: 123 })console.log(func());  // {foo: 123}//または以下でもOKconst func2 = () => { return {foo: 123} }console.log(func2());  // {foo: 123}

let obj = {  name: 'Three brothers',  members: ['foo', 'bar', 'boo'],  showObj() {    this.members.forEach(      //以下の this.name は obj.name と同じになる      member => console.log(this.name + ': ' + member)    );  }};obj.showObj();/* 出力Three brothers: fooThree brothers: barThree brothers: boo*/

let obj = {  name: 'Three brothers',  members: ['foo', 'bar', 'boo'],  showObj() {    //コールバック関数の外側のスコープで this を一時変数に代入    let that = this;    this.members.forEach(function(member) {      //that でアクセス      console.log(that.name + ': ' + member)    });  }};//以下の場合は undefined.name にアクセスするためエラーになりますlet obj = {  name: 'Three brothers',  members: ['foo', 'bar', 'boo'],  showObj() {    this.members.forEach(function(member) {      console.log(this.name + ': ' + member)  //エラー      //Uncaught TypeError: Cannot read property 'name' of undefined    });  }};

var obj = {foo: 'FOO', bar: 'BAR', boo: 'BOO'};//obj にイテレータを実装obj[Symbol.iterator] = function() { //関数リテラル  var iterator = {};  var current = 0;  var keys = Object.keys(this);  //this は obj  iterator.next = ()  => {  //アロー関数    var iteratorResult = (current < keys.length)      ? { value: this[keys[current]], done: false }  //this は obj      : { value: undefined, done: true };    current++;    return iteratorResult;  };  return iterator;};//8行目からのアロー関数を function() に書き換えobj[Symbol.iterator] = function() { //関数リテラル  var iterator = {};  var current = 0;  var keys = Object.keys(this);  var that = this;  // this を一時変数 that に代入  iterator.next = function()  { //関数リテラル    var iteratorResult = (current < keys.length)      ? { value: that[keys[current]], done: false }  //一時変数 that      : { value: undefined, done: true };    current++;    return iteratorResult;  };  return iterator;};//両方ともアロー関数に書き換えobj[Symbol.iterator] = () =>{ //アロー関数  var iterator = {};  var current = 0;  var keys = Object.keys(obj);  //this は Window  iterator.next = ()  => { //アロー関数    var iteratorResult = (current < keys.length)      ? { value: obj[keys[current]], done: false }  //this は Window      : { value: undefined, done: true };    current++;    return iteratorResult;  };  return iterator;};

//イベントを登録する要素を取得var btn = document.getElementById("btn");//要素にイベントリスナーを登録btn.addEventListener('click',function() {  //this は btn（クリックされるボタン要素）  alert(this.textContent);});

btn.addEventListener('click', () => alert(this.textContent) );

btn.addEventListener('click', (e) => alert(e.currentTarget.textContent) );

jQuery(function($){  $('h3').each( function() {    console.log($(this).text()); // 全ての h3 要素のテキストが表示される  });});

jQuery(function($){  $('h3').each( () => {    console.log($(this).text());  //想定外の表示になる  });});

jQuery(function($){  $('h3').each( (index, element) => {    console.log($(element).text()); // 全ての h3 要素のテキストが表示される  });});

名前付き

名前付きエクスポート（named export）

名前付きエクスポートは、モジュールごとに複数の機能（変数や関数、クラスなど）をエクスポートすることができます。

変数や関数、クラスの宣言の前に export を記述することで宣言と同時にそれぞれの機能を個別にエクスポートできます。

//変数をエクスポートexport const foo = 'foo';//配列をエクスポートexport let bar = [1, 2, 3];//関数をエクスポートexport function myFunc(val) {  console.log(val);}//関数をエクスポート（アロー関数）export const hello = () => console.log("Hello");

宣言とは別にエクスポートすることもできます。宣言済みの機能を以下のような書式でモジュールファイルの末尾に単一の export 文を使ってエクスポートすることもできます。

export { 機能のカンマ区切りリスト };

以下は前述の「宣言と同時に名前付きエクスポート」したのと同じ結果になります。

const foo = 'foo';  //変数の宣言let bar = [1, 2, 3];  //配列の宣言function myFunc(val) {  //関数の宣言  console.log(val);}const hello = () => console.log("Hello");  //関数の宣言//宣言済みの機能を export 文でリストで指定してエクスポートexport { foo, bar, myFunc, hello };

名前付きインポート（named import）

名前付きインポートはエクスポートされた機能の名前を指定してモジュールから選択的にインポートすることができます。

以下のように import 文に続けてインポートしたい機能のリストをカンマ区切りで { }内に指定し、from でモジュールファイルへのパスを指定します。

モジュールファイルへのパスは、サイトのルートからの（相対）パスを指定します。「現在の位置」を意味するドット (.) 記法を使うと簡潔に記述でき、可搬性もあります。

import { 機能のカンマ区切りリスト } from 'モジュールのパス';

以下は imports.js というファイルで、モジュール module_01.js から機能の名前を指定してインポートする例です。

//名前を指定してインポートimport {foo, bar, myFunc} from './module_01.js';//インポートした関数にインポートした変数を指定して実行myFunc(foo);  //foomyFunc(bar);  //[1, 2, 3]

上記のファイルを HTML ファイルで読み込むには src 属性に imports.js を指定し、type="module" を指定する必要があります。

<script src="imports.js" type="module"></script>

以下は直接 HTML ファイルにモジュール（module_01.js）から myFunc のみをインポートする例です。

<script type="module">import { myFunc } from './module_01.js';myFunc('Hello!');  //インポートした関数を実行</script>

全てのエクスポートをまとめてインポートすることもできます（モジュール名前空間オブジェクト）。

デフォルト

デフォルトエクスポート（default export）

デフォルトエクスポートは、モジュール毎に1つしかエクスポートできないエクスポートで、モジュールがデフォルトの機能（モジュール毎に1つの機能）を持つことができるように設計されたものです。

メイン（デフォルト）の機能の宣言の前に export default を記述することで宣言と同時にその機能をデフォルトとしてエクスポートできます（デフォルトエクスポートはモジュール毎に1つに限ります）。

※ デフォルトエクスポートは、名前付きのエクスポートと併用することができます。

//宣言と同時に関数 myFunc をデフォルトエクスポートexport default function myFunc(val) {  console.log(val);}

宣言と同時にデフォルトエクスポートする場合、関数やクラスの名前を省略することができます。

//宣言と同時に名前を省略して関数をデフォルトエクスポートexport default function(val) {  console.log(val);}

//宣言と同時にアロー関数をデフォルトエクスポートexport default () => console.log("Hello");

また、変数の作成なしで単一値（名前のない値）をエデフォルトエクスポートすることができます。

export default [1, 2, 3];

変数の場合は、宣言とデフォルトエクスポートを同時に行うことはできません。以下はエラーになります。

export default const foo = 'foo';  //エラー//Uncaught SyntaxError: Unexpected token 'const'//以下のように変数を作成せずに値のみをデフォルトエクスポートすることはできますexport default 'foo';

宣言とは別に、すでに宣言されている変数や関数をデフォルトエクスポートすることもできます。

デフォルトとしてエクスポートしたい機能を export default 文で指定します。{ } は付けません。

以下はすでに宣言されている変数をデフォルトエクスポートする例です。

const foo = 'foo';//宣言済みの変数をデフォルトエクスポートexport default foo;

以下はすでに宣言されている関数をデフォルトエクスポートする例です。

function myFunc(val) {  console.log(val);}//宣言済みの関数をデフォルトエクスポートexport default myFunc;

const hello = () => console.log("Hello");//宣言済みの関数をデフォルトエクスポートexport default hello;

デフォルトインポート（default import）

デフォルトインポートは、モジュールのデフォルトエクスポートに名前をつけてインポートします。

以下のように import 文に続けて名前を指定し、from でモジュールファイルへのパスを指定します。

指定する名前は任意の名前を付けることができます。デフォルトエクスポートはモジュールごとに1つしか作れないため、インポートする機能が何かはわかっています。

import 名前 from 'モジュールのパス';

デフォルトエクスポート同様、名前には { } は付けません。上記の書式は、実は以下の簡略表現です。

import {default as 名前} from 'モジュールのパス';

以下は imports_02.js というファイルで、モジュール module_02.js のデフォルトエクスポートをインポートする例です。

//デフォルトエクスポートexport default function myFunc(val) {  console.log(val);}

//デフォルトインポートimport myFunc from './module_02.js';//インポートした関数を実行myFunc('bar');

上記の例では、インポートする際の名前をデフォルトエクスポートの関数名と同じにしていますが、以下のように任意の名前を指定できます。

import foo from './module_02.js';//指定した名前でインポートした関数を呼び出すfoo('bar');//myFunc() が実行される

エイリアス

import 文や export 文の { } の中で、キーワード as と新しい名前（別名/エイリアス）を指定することで、その機能を使うときの名前を変更することができます。

異なる名前でエクスポート

エイリアスを使うと、宣言済みの変数や関数などを異なる名前でエクスポートできます。以下のように as の後にエクスポートしたい名前（エイリアス）を指定します。

const foo = 'foo';  //変数の宣言let bar = [1, 2, 3];  //配列の宣言function myFunc(val) {  //関数の宣言  console.log(val);}//as と新しい名前を指定してエクスポートexport { foo as f, bar as b, myFunc as mf };

インポートする側では、新しい名前（エイリアス）を指定します。

import {f, b, mf} from './module_03.js';mf(f);  //foomf(b);  //[1, 2, 3]

異なる名前でインポート

異なる名前でインポートすることもできます。インポートでも同様に、as の後に別名（エイリアス）を指定します。

const foo = 'foo';  //変数の宣言let bar = [1, 2, 3];  //配列の宣言function myFunc(val) {  //関数の宣言  console.log(val);}//名前付きエクスポートexport { foo, bar, myFunc };

//別名を指定してインポートimport {foo as f, bar as b, myFunc as mf} from './module_04.js';//別名を使って実行mf(f);  //foomf(b);  //[1, 2, 3]

モジュール名前空間オブジェクト

以下の構文を使うことで、全てのエクスポートをまとめてモジュール名前空間オブジェクト（単にモジュールオブジェクトとも言います）としてインポートすることができます。

これは、モジュールの中にある全てのエクスポートを取得して、それらをオブジェクト（モジュール名前空間オブジェクト）のメンバーとして利用できるようにします。

import * as オブジェクト from 'モジュールのパス';

また、オブジェクトのメンバーとして利用できるようにすることで独自の名前空間を持たせるような効果があります（名前の衝突を回避できます）。

以下はモジュール module_05.js の全てのエクスポートを取得する例です。

export const foo = 'FOO';  //名前付きエクスポートexport let bar = [1, 2, 3];  //名前付きエクスポートexport function myFunc(val) {  //名前付きエクスポート  console.log(val);}export default ['a', 'b', 'c']; //デフォルトエクスポート

//全てのエクスポートを myModule オブジェクトとしてインポートimport * as myModule from './module_05.js';// myModule オブジェクトのメンバーとしてアクセスmyModule.myFunc(myModule.foo); //FOOmyModule.myFunc(myModule.bar); //[1, 2, 3]//デフォルトエクスポートにもアクセス可能console.log(myModule.default); //['a', 'b', 'c']

名前の衝突の回避

例えば、以下のように同じ名前を持つ関数を異なるモジュールからインポートすると名前の衝突によるエラーが発生します。

const foo = 'foo';let bar = [1, 2, 3];function myFunc(val) {  console.log('x:' + val);}export { foo, bar, myFunc };

const foo = 'FOO';let bar = [100, 200, 300];function myFunc(val) {  console.log('y:' + val);}export { foo, bar, myFunc };

// 同じ名前の関数をインポートimport { myFunc } from './module_x.js';import { myFunc } from './module_y.js';//エラー Uncaught SyntaxError: Identifier 'xxxx' has already been declared

名前の衝突によるエラーを回避するにはインポートする際に、エイリアスを使ったり、モジュール名前空間オブジェクトを作成するなどの方法があります。

エイリアスを使う

以下のように同じ名前の機能を異なる名前でインポートすればエラーを回避できます。

import { myFunc as funcX } from './module_x.js';import { myFunc as funcY } from './module_y.js';funcX('Hello!');  //x:Hello!funcY('Hello!');  //y:Hello!

モジュール名前空間オブジェクトを作成

以下は全てのエクスポートをまとめてモジュール名前空間オブジェクトとしてインポートすることで、名前の衝突によるエラーを回避する例です。

// 同じ名前の関数を異なる名前でインポートimport * as modX from './module_x.js';import * as modY from './module_y.js';modX.myFunc(modX.foo);  //x:foomodY.myFunc(modY.foo);  //y:FOO

CommonJS の require

以下は JavaScript ES6 のモジュールとは直接関係はありません。

Node.js を使っている場合は import 文に似た require() 関数が使えます（JavaScript には require という関数や文はありません）。

require() は CommonJS と呼ばれるモジュールシステムのモジュールをインポートするための関数（構文）で Node.js で使うことができます。（関連ページ：Node.js の exports と module.exports）

以下は ES6（ES Modules）の export と import を使う例です。

//test という関数をエクスポートするファイル（モジュール）export const test = function() {  console.log('ログ出力');}

//test という関数をインポートして使用するファイル test.html<script type="module">  import { test } from './module.js'  test();  //ログ出力（コンソールに出力される）</script>

以下は同様なことを require を使って行う例です（Node.js がインストールされている必要があります）。

//module.exports を使って関数を定義（ES6 の export に対応）module.exports = function() {  console.log('ログ出力');}

エントリーポイントとなるファイルで require を使ってモジュールを読み込みます。

//require() を使用してモジュールを読み込むconst testModule = require('./node_module.js');testModule();

ターミナルで node コマンドの引数にエントリーポイントを指定して実行します。

Node.js の環境の場合、console.log の出力先は標準出力になります。

$ node main.jsログ出力  //ターミナル（標準出力）での表示

Node.js を使って ES Modules の import を使う場合はモジュールのファイルの拡張子を .mjs にするか、package.json というファイルで "type": "module" を指定する必要があります。

以下は拡張子を .mjs にしたモジュールを読み込む例です。

export const test = function() {  console.log('ログ出力');}

import { test } from './module.mjs'test();

ターミナルで node コマンドを実行するとモジュールの関数が実行されます。

$ node main.mjsログ出力  //ターミナル（標準出力）での表示

import(モジュール名)

export const foo = 'foo';export const bar = 3;export default () => console.log("Default Hello");

<script>  // response に名前空間オブジェクトが渡される  import('./module.js').then((response) => {    console.log(response.foo, response.bar); // foo 3    response.default(); // Default Hello  });</script>

import('./module.js').then(({foo, bar}) => {  console.log(foo, bar); // foo 3});

import('./module.js').then(({foo, bar}) => {  console.log(foo, bar);});console.log('同期的処理');// 同期的処理// foo 3

(async () => {  const response =  await import('./module.js');  console.log(response.foo, response.bar); // foo 3  response.default(); // Default Hello})();

<script type="module">  // ファイルがモジュールの場合（スクリプトの場合はエラーになる）  const response =  await import('./module.js');  console.log(response.foo, response.bar); // foo 3  response.default(); // Default Hello</script>

const flag = true;if (flag) {  import('./module.js').then(({ foo, bar }) => {    console.log(foo, bar);  });}

const url = './module.js';import(url).then(({ foo, bar }) => {  console.log(foo, bar);});

const sym = Symbol();  //Symbol を作成const obj = {  sym : 'foo'   //キー sym は文字列}console.log(obj.sym);  //foo （ . で文字列でアクセス）console.log(obj[sym]);  //undefined （シンボルでアクセス）

const sym = Symbol();  //Symbol を作成const obj = {}obj[sym] = 'foo'; //キー sym は Symbolconsole.log(obj[sym]);  //foo

const str1 = 'property', str2 = 'name';const obj = {  [str1 + str2] : 'bar' //[ ] の中の式が展開（計算）される}console.log(obj.propertyname);  //bar

const sym = Symbol();const obj = {  [sym] : 'foo'   //キー [sym] は Symbol}console.log(obj[sym]);  //foo

//中身が空の Map オブジェクトを作成const myMap = new Map();console.log(myMap);  //Map(0)console.log(myMap.size);  //0 （size が0）

new Map([[key, value] , [key, value] ...]);

//初期値に1つのエントリー（要素）を指定してマップを作成const myMap = new Map([['key1', 'value1']]);console.log(myMap);  //Map(1) {"key1" => "value1"}console.log(myMap.size);  //1（要素数）console.log(myMap.get('key1')); //value1 （key1 の値）//初期値に2つのエントリー（要素）を指定してマップを作成const myMap2 = new Map([['k1', 'v1'], ['k2', 'v2']]);console.log(myMap2); //Map(2) {"k1" => "v1", "k2" => "v2"}console.log(myMap2.size);  //2（要素数）console.log(myMap2.get('k1')); //v1（k1 の値）console.log(myMap2.get('k2')); //v2（k2 の値）

//キー・値の2次元配列let myArray = [["キー1", "値1"], ["キー2", "値2"]];//コンストラクタを使ってキー・値の2次元配列をマップに変換（マップを作成）let myMap = new Map(myArray);console.log(myMap.size);  //2console.log(myMap.get('キー1')); //値1console.log(myMap.get('キー2')); //値2

map.set(key, value)  //要素の追加map.get(key)  //値の取得

// 新しいマップの作成const myMap = new Map();// 新しい要素の追加myMap.set("key1", "value1");console.log(myMap.size); // 1console.log(myMap.get("key1")); //value1// 新しい要素の追加myMap.set("key2", "value2");console.log(myMap.size); // 2console.log(myMap.get("key2")); // value2// 要素の上書きmyMap.set("key1", "new value1");console.log(myMap.get("key1")); // new value1

// 新しいマップの作成let myMap = new Map();//キーと成る変数を作成let foo = { name: 'FOO' };let bar = function(val) { console.log(val); }let boo = 'boo';// マップに要素を追加して値を設定myMap.set(foo, "foo（オブジェクト）と結び付けられた値");myMap.set(bar, "bar（関数）と結び付けられた値");myMap.set(boo, "boo（文字列）と結び付けられた値");// キーにひもづいた値を取得（変数を指定）console.log(myMap.size);  //3console.log(myMap.get(foo));  //foo（オブジェクト）と結び付けられた値console.log(myMap.get(bar));  //bar（関数）と結び付けられた値console.log(myMap.get(boo));  //boo（文字列）と結び付けられた値// キーに文字列を指定（オブジェクトとは異なりキーは文字列には変換されない）console.log(myMap.get('foo'));  //undefined (foo !== 'foo')console.log(myMap.get('bar'));  //undefined (bar !== 'bar')console.log(myMap.get('boo'));  //boo（文字列）と結び付けられた値 (boo === 'boo')

// 新しいマップの作成let myMap = new Map();// set() をチェーンして呼び出して要素を追加myMap.set('key1', 'value1')     .set('key2', 'value2')     .set('key3', 'value3');console.log(myMap.size);  //3// 値を出力console.log(myMap.get('key1'));  // value1console.log(myMap.get('key2'));  // value2console.log(myMap.get('key3'));  // value3

map.has(key)  //存在するかを確認

// 新しいマップの作成let myMap = new Map();// set() をチェーンして要素を追加myMap.set('key1', 'value1')     .set('key2', null)     .set('key3', undefined)     .set('key4');console.log(myMap.size);  //4// 値を出力console.log(myMap.get('key1'));  // value1console.log(myMap.get('key2'));  // nullconsole.log(myMap.get('key3'));  // undefinedconsole.log(myMap.get('key4'));  // undefined（値が存在しない）console.log(myMap.get('key5'));  // undefined（要素が存在しない）// 要素の存在（有無）を確認console.log(myMap.has('key1'));  // trueconsole.log(myMap.has('key2'));  // true（値が null でも true）console.log(myMap.has('key3'));  // true（値が undefined でも true）console.log(myMap.has('key4'));  // true（要素は存在すれば値がなくても true）console.log(myMap.has('key5'));  // false（要素が存在しない）

map.delete(key) //指定した要素を削除map.clear() //全ての要素を削除

// 3つの要素を持つ新しいマップを作成let myMap = new Map([['key1','value1'],['key2','value2'],['key3','value3']]);console.log(myMap.size);  //3//キーが key2 の要素を削除myMap.delete('key2');console.log(myMap.has('key2'));  //falseconsole.log(myMap.size);  //2////全ての要素を削除myMap.clear();console.log(myMap.size);  //0console.log(myMap);  //Map(0) {}（空のマップ）

map.forEach(callback) //全ての要素をコールバック関数で挿入順に反復処理map.keys() //全ての要素のキーを挿入順に並べた Iterator オブジェクトを返すmap.values() //全ての要素の値を挿入順に並べた Iterator オブジェクトを返すmap.entries() //全ての要素を挿入順に並べた Iterator オブジェクトを返す

map.forEach(callback[, thisArg])

// 3つの要素を持つ新しいマップを作成const myMap = new Map([['key1', 'value1'],['key2', 'value2'], ['key3', 'value3']]);// マップの要素を挿入順に処理myMap.forEach(function(value, key) {  // キーと値をテンプレートリテラルで出力  console.log(`key: ${key} / value: ${value}`);})/*出力結果key: key1 / value: value1key: key2 / value: value2key: key3 / value: value3*/

// 3つの要素を持つ新しいマップを作成const myMap = new Map([  ['key1','value1'],  ['key2','value2'],  ['key3','value3']]);// コールバック関数の3つ目の引数（map）を使って自身の要素の値を変更myMap.forEach(function(value, key, map) {  // 値を大文字に変換  map.set(key, value.toUpperCase());})myMap.forEach(function(value, key, map) {  console.log(`key: ${key} / value: ${value}`);})/*出力結果（値が大文字に変換されている）key: key1 / value: VALUE1key: key2 / value: VALUE2key: key3 / value: VALUE3*/

const myMap = new Map([  ['key1','value1'],  ['key2','value2'],  ['key3','value3']]);//全ての要素のキーを挿入順に並べた Iterator オブジェクトconst myMapKeys = myMap.keys();//イテレータの next() メソッドの戻り値の value プロパティ（キー）を出力console.log(myMapKeys.next().value); //key1console.log(myMapKeys.next().value); //key2console.log(myMapKeys.next().value); //key3console.log(myMapKeys.next().value); //undefined// for...of を使って全ての要素のキーを挿入順に出力for(const key of myMap.keys()) {  console.log(key);}/*出力結果key1key2key3*/

const myMap = new Map([  ['key1','value1'],  ['key2','value2'],  ['key3','value3']]);//Array.from() に渡して配列に変換const keys_array = Array.from(myMap.keys());console.log(keys_array);  //["key1", "key2", "key3"]//キーの Iterator オブジェクトconst keys = myMap.keys();//スプレッド構文を使って配列に変換const keys_array2 =  [...keys];console.log(keys_array2);  //["key1", "key2", "key3"]

const myMap = new Map([  ['key1','value1'],  ['key2','value2'],  ['key3','value3']]);//全ての要素の値を挿入順に並べた Iterator オブジェクトconst myMapValues = myMap.values();//イテレータの next() メソッドの戻り値の value プロパティ（値）を出力console.log(myMapValues.next().value); //value1console.log(myMapValues.next().value); //value2console.log(myMapValues.next().value); //value3console.log(myMapValues.next().value); //undefined// for...of を使って全ての要素の値を挿入順に出力for(const value of myMap.values()) {  console.log(value);}/*出力結果value1value2value3*/// Array.from() に渡して配列に変換const values_array = Array.from(myMap.values());console.log(values_array);  //["value1", "value2", "value3"]//値の Iterator オブジェクトconst values = myMap.values();//スプレッド構文を使って配列に変換const values_array2 =  [...values];console.log(values_array2);  //["value1", "value2", "value3"]

const myMap = new Map([  ['key1','value1'],  ['key2','value2'],  ['key3','value3']]);//全ての要素のエントリーを挿入順に並べた Iterator オブジェクトconst myMapEntries = myMap.entries();//イテレータの next() メソッドの戻り値の value プロパティ（エントリー）を出力console.log(myMapEntries.next().value); // ["key1", "value1"]console.log(myMapEntries.next().value); // ["key2", "value2"]console.log(myMapEntries.next().value); // ["key3", "value3"]console.log(myMapEntries.next().value); //  undefined// for...of を使って全ての要素のエントリーを挿入順に出力for(const entry of myMap.entries()) {  console.log(entry);}/*出力結果["key1", "value1"]["key2", "value2"]["key3", "value3"]*/

const myMap = new Map([  ['key1','value1'],  ['key2','value2'],  ['key3','value3']]);// for...of と分割代入を使って全ての要素のキーと値を挿入順に出力for(const [key, value]  of myMap.entries()) {  console.log(`${key} : ${value}`);}/*出力結果key1 : value1key2 : value2key3 : value3*///マップを for...of で反復処理（上記と同じこと）for(const [key, value]  of myMap) {  console.log(`${key} : ${value}`);} /*出力結果（前の結果と同じ）key1 : value1key2 : value2key3 : value3*/// 以下も同じことfor(const [key, value]  of myMap[Symbol.iterator]()) {  console.log(`${key} : ${value}`);} /*出力結果（前の結果と同じ）key1 : value1key2 : value2key3 : value3*/

//3つの [key, value] から成る2次元配列const array = [  ['key1','value1'],  ['key2','value2'],  ['key3','value3']];// 上記配列を引数に指定して3つの要素を持つマップを作成const map = new Map(array);console.log(map.size); //3console.log(map.get('key2'));   //value2//Array.from を使って array と同じ配列を生成const array2 = Array.from(map);console.log(array2);/*(3) [Array(2), Array(2), Array(2)]0: (2) ["key1", "value1"]1: (2) ["key2", "value2"]2: (2) ["key3", "value3"]length: 3 *///スプレッド構文を使って array と同じ配列を生成const array3 = [...map];console.log(array3);/*(3) [Array(2), Array(2), Array(2)]0: (2) ["key1", "value1"]1: (2) ["key2", "value2"]2: (2) ["key3", "value3"]length: 3 */

//中身が空の Set オブジェクトを作成const mySet = new Set();console.log(mySet);  //Set(0) {}console.log(mySet.size);  //0 （size が0）

//配列（反復可能オブジェクト）を渡して Set オブジェクトを作成const mySet = new Set(['foo', 'bar', 'boo']);console.log(mySet);  //Set(3) {"foo", "bar", "boo"}console.log(mySet.size);  //3//重複した値を持つ配列を渡して Set オブジェクトを作成const mySet2 = new Set([1, 2, 3, 1]);//1 は重複するため片方は無視されるconsole.log(mySet2);  //Set(3) {1, 2, 3}console.log(mySet2.size);  //3 （サイズは3）

const array = [1, 2, 4, 2, 3 , 3, 2, 4, 5, 7, 5, 6, 1, 2];//配列をコンストラクタの引数に指定して重複のないセットを生成し、Array.from()で変換const unique_array = Array.from(new Set(array));console.log(unique_array);  //[1, 2, 4, 3, 5, 7, 6]//プレッド構文で配列に変換const unique_array2 = [...new Set(array)];console.log(unique_array2);  //[1, 2, 4, 3, 5, 7, 6]

const mySet = new Set();mySet.add(1);  //数値を追加mySet.add('a');  //文字列を追加let foo = {name: 'foo'};mySet.add(foo);  //オブジェクトの参照を追加console.log(mySet);  //Set(3) {1, "a", {…}}console.log(mySet.size);  //3mySet.add(2).add(3).add(4);  //チェーン呼び出しで要素を3つ追加console.log(mySet.size);  //6//特定の値を持っているかどうかを確認console.log(mySet.has(1));  //trueconsole.log(mySet.has('a'));  //trueconsole.log(mySet.has(foo));  //trueconsole.log(mySet.has({name: 'foo'})); //falsemySet.delete(foo);  //値（要素）を削除mySet.delete(1);  //値（要素）を削除console.log(mySet.size); //4mySet.clear();  //全ての値を削除console.log(mySet.size); //0

const mySet = new Set();  //空のセットを作成let foo = {name: 'foo'};let bar = {name: 'bar'};let boo = {name: 'boo'};//アクセスがある度にセットにユーザーを追加mySet.add(foo);mySet.add(bar);mySet.add(foo);mySet.add(bar);mySet.add(foo);mySet.add(bar);//セットはユニークな値のみを保持console.log(mySet.size);  //2//セットは for...of 文が使えますfor(const user of mySet) {  console.log(user.name);}/*foobar*/mySet.clear();  //全てのデータを削除console.log(mySet.size); //0

set.forEach(callback[, thisArg])

const mySet = new Set(['foo', 'bar', 'boo']);mySet.forEach(function(val) {  console.log('value: ' + val);})/*value: foovalue: barvalue: boo*/

const mySet = new Set(['foo', 'bar', 'boo']);// for...of 文を使って反復処理for(const val of mySet) {  console.log('value: ' + val);}/*value: foovalue: barvalue: boo*/// 以下でも同じ結果になります。for(const val of mySet.values()) {  console.log('value: ' + val);}/*value: foovalue: barvalue: boo*///.entries() は [value, value] になるので、以下の場合は値が重複して出力されますfor(const val of mySet.entries()) {  console.log('value: ' + val);}/*value: foo,foovalue: bar,barvalue: boo,boo*/

class MyClass {  constructor() {  // コンストラクタ    //処理の記述  }  ・・・その他のメソッド・・・}

// 名前なしlet MyClass = class {  constructor() {  // コンストラクタ    //処理の記述  }  ・・・その他のメソッド・・・};// 名前付き（MyClass2 は class の内側でだけ見えます）let MyClass = class MyClass2 {  constructor() {  // コンストラクタ    //処理の記述  }  ・・・その他のメソッド・・・};

class Person {  constructor(name) {  //コンストラクタ    this.name = name;  //インスタンス変数  }  hello() {  //メソッド（プロトタイプメソッド）    alert('My name is ' + this.name);  }}let foo = new Person("Foo"); //オブジェクトの生成（インスタンス化）は new を使いますconsole.log(foo.name);   //Foofoo.hello();  //My name is Foo

function Person(name) {  //コンストラクタ関数  this.name = name;}Person.prototype.hello = function() {  //プロトタイプメソッド  alert('My name is ' + this.name);}let foo = new Person("Foo");console.log(foo.name);   //Foofoo.hello();  //My name is Foo

class クラス {  プロパティ名 = プロパティの初期値;}

class Person {  // プロパティの宣言（初期値は省略可能）  name = 'no name'; // クラスフィールド  constructor(name) {     //引数の値があればその値でプロパティを初期化     if(name) {      this.name = name;     }  }  hello() {    alert('My name is ' + this.name);  }}

class Person {  constructor(name) {    this.name = name;    //インスタンスメソッド myMethod    this.myMethod = () => {      alert('Instance Method');    }  }  //プロトタイプメソッド myMethod  myMethod() {    alert('Prototype Method');  }}let foo = new Person("Foo");foo.myMethod(); //Instance Method（インスタンスメソッドが呼び出されます）

class Person {  // コンストラクタ  constructor(name) {    this.name = name;  }  //静的メソッド（引数に可変長のインスタンスを受け取る）  static makeFriends(...persons) {    // 以下の this はクラス自身（静的メソッドにおける this はそのクラス自身）    console.log('Message from ' + this.name + ' クラス');    for(let person of persons) {      //渡されたインスタンスの name プロパティを使って出力      console.log(person.name + ' is my friend.');    }  }}// インスタンスを生成let foo = new Person("Foo");let bar = new Person("Bar");let boo = new Person("Boo");// クラス名.メソッド名 で呼び出しPerson.makeFriends(foo, bar, boo);/* 出力Message from Person クラスFoo is my friend.Bar is my friend.Boo is my friend.*/

getter / setter

クラスでは ES5 で導入された getter や setter のアクセッサプロパティを定義できます。

通常のメソッドは メソッド名( )のように呼び出しますが、getter や setter はプロパティの参照や代入の際に .メソッド名で呼び出す「見た目は変数だけれど実際は関数」と言う特殊なメソッドです。

プロパティのように振る舞うのでアクセッサプロパティとも呼ばれます。

this.プロパティ名 は単なる変数ですが、getter や setter はメソッドなので値を取得する際に加工したり、設定時に値を検証するなどの処理を行うことができます。

以下が構文です。

get プロパティ名() { 値を取得する（返す）コード }set プロパティ名(value) { 値を設定するコード }

以下は MyGet クラスの name プロパティを定義する getter（ゲッター）の例です。

name プロパティは getter により生成される擬似的なプロパティで、実際に値を保持するのは this._name（ _name プロパティ）です。get name() でも取得して返しているのは this._name の値です。

class MyGet {  constructor(name) {    this._name = name;  // _name プロパティ  }  get name() {  // getter（name プロパティを定義）    return this._name;  //実際には _name を返す  }}let foo = new MyGet('Foo');// foo の name プロパティを取得（getter が呼び出される）console.log(foo.name); //Foo// 以下の代入はできない（setter を定義すれば代入可能）foo.name = 'bar';console.log(foo.name);  //Fooconsole.log(foo);/* 以下は上記の出力をブラウザのインスペクタで確認した結果MyGet {_name: "Foo"}  _name: "Foo"  // _name プロパティ  name: "Foo"  //getter により生成た name プロパティ  __proto__:    constructor: class MyGet    name: "Foo"    get name: ƒ name()*/

プロパティの値を保持する変数の名前（上記の場合は _name）は getter のプロパティ名（上記の場合は name）とは異なる名前にする必要があります。

this._name がアンダスコアで始まるのはクラスの外から利用してほしくないことを表す慣習的な書き方で、構文としての意味はありません（プライベートになるわけではありません）が運用上のルールとしてはわかりやすいものです。

例えば以下のように別の名前（myName）にすることもできます。

class MyGet {  constructor(name) {    this.myName = name;  // myName プロパティ  }  get name() {  // getter （name プロパティを定義）    return this.myName;  //実際には myName を返す  }}let foo = new MyGet('Foo');// foo の name プロパティを取得console.log(foo.name); //Fooconsole.log(foo);/* 以下は上記の出力をブラウザのインスペクタで確認した結果MyGet {myName: "Foo"}  myName: "Foo"  name: "Foo"  //getter により生成たプロパティ  __proto__:    constructor: class MyGet    name: "Foo"    get name: ƒ name()*/

実際の値を持つプロパティが、同時に getter や setter を持つことはできないので以下の場合、エラーになります。

//実際の値を持つプロパティと getter のプロパティ名が同じだとエラーclass MyGet {  constructor(name) {   //Cannot set property name of #<MyGet> which has only a getter    this.name = name;  // 実際の値を持つプロパティ（this.name）  }  get name() {  // getter の プロパティ名 name    return this.name;  }}

また、以下のように getter のプロパティ名 name() と取得するプロパティの名前 this.name が同じ場合、this.name は get name() を呼び出すので無限ループが発生してしまいます。

//無限ループが発生する例（6行目と8行目が同じ名前 name ）class MyGet {  constructor(name) {    this._name = name;  // _name プロパティ  }  get name() {  // getter（プロパティ名 name）    // エラーUncaught RangeError: Maximum call stack size exceeded    return this.name;  //取得するプロパティの名前 name  }}

以下は MySet クラスの name プロパティを定義する setter（セッター）の例です。

getter 同様、name プロパティは擬似的なプロパティで、実際に値を保持するのは this._name です。set name() でも値を設定しているのは this._name です。

class MySet {  constructor(name) {    this._name = name;  //  name プロパティ  }  set name(value) {  //  setter    if (value.length < 3) {      alert("Too Short!");      return;    }    this._name = value;  }}let foo = new MySet('Foo');// name プロパティを取得 → .name ではアクセスできない（getter を定義すれば取得可能）console.log(foo.name); //undefined// _name でアクセスできるconsole.log(foo._name);  //Foo//name プロパティに Bar を設定（setter が呼び出される）foo.name = 'Bar';console.log(foo._name);  //Barfoo.name = 'X';  //alert "Too Short!" が表示される

また、getter 同様、setter のプロパティ名 name() と設定するプロパティ名（10行目）を同じ値（this.name）にしてしまうと、setter が呼び出されると無限ループが発生します。

以下は getter と setter の実装例で、Person クラスの name プロパティ（擬似的なプロパティ）をアクセッサプロパティとして定義しています。

アクセッサプロパティで実際に読み書きしているのはアンダースコアが付いた this._name です。

class Person {  constructor(name) {    this._name = name;  //  name プロパティ  }  get name() {  // getter    return this._name;  }  set name(value) {  //  setter    if (value.length < 1) {      alert("無効です");      return;    }    this._name = value;  }}let foo = new Person("Foo");alert(foo.name); // Foo （getter が呼び出される）foo.name = '';  //無効です（setter が呼び出される）alert(foo.name);  //Foo（getter が呼び出される）foo.name = 'Bar'; //（setter が呼び出される）alert(foo.name);  //Bar（getter が呼び出される）

以下はアクセッサプロパティを使ってプロパティ width と height を定義する例です。

以下の場合も width や height プロパティは擬似的なプロパティで、実際に値を保持するのは this._width と this._height です。

getter では _width や _height プロパティが定義されていない場合は1を返し、setter では受け取った値が数値ではない場合は1を設定しています。

class Rectangle {  get width() {    return this._width || 1;  }  get height() {    return this._height || 1;  }  set width(w) {    if(isNaN(w)) {      this._width = 1;    }else{      this._width = w;    }  }  set height(h) {    if(isNaN(h)) {      this._height = 1;    }else{      this._height = h;    }  }  area() {    return this.width * this.height;  }}const foo = new Rectangle();console.log(foo.area());  // 1foo.width = 5;console.log(foo.area());  // 5foo.height = 3;console.log(foo);/* 以下出力の展開結果Rectangle {_width: 5, _height: 3}  _height: 1  _width: 5  height: 1  width: 5*/console.log(foo.area());  // 15foo.height = 'a';  //数値ではないので1が設定されるfoo.width = 'b';  //数値ではないので1が設定されるconsole.log(foo.area()); // 1console.log(foo);/* 以下出力の展開結果Rectangle {_width: 1, _height: 1}  _height: 1  _width: 1  height: 1  width: 1*/

• MDN ゲッター
• MDN セッター

class Animal {  constructor(name) {    this.name = name;  }  speak() {    console.log(`${this.name} speaks.`);  }}//Animal クラスを継承する Cat クラスclass Cat extends Animal {  //メソッドの追加  meow() {    console.log('meow meow meow');  }}let cat = new Cat('Mike');cat.speak(); // Mike speaks. 親のメソッドを使用可能cat.meow();  // meow meow meow 追加したメソッド

class Animal {  constructor(name) {    this.name = name;  }  speak() {    console.log(`${this.name} speaks.`);  }}class Cat extends Animal {  //メソッドのオーバーライド  speak() {    console.log('meow meow meow');  }}let cat = new Cat('Mike');cat.speak(); //  オーバーライドしたメソッドを実行//meow meow meow

class Animal {  constructor(name) {    this.name = name;  }  speak() {    console.log(`${this.name} speaks.`);  }}class Cat extends Animal {  //メソッドのオーバーライド  speak() {    //親メソッドの呼び出し    super.speak();    console.log('meow meow meow');  }}let cat = new Cat('Mike');cat.speak();  // オーバーライドしたメソッドを実行/*Mike speaks.meow meow meow*/

class Shape {  constructor(name) {    this.name = name;  }  print() {    console.log('This is ' + this.name);  }}let foo = new Shape('circle');foo.print();  //This is circle//Shape クラスを継承して Rectangle クラスを定義class Rectangle extends Shape {  //コンストラクタをオーバライド  constructor(height, width) {    //親クラスのコンストラクタ処理を実行    super(name);    // this にアクセス    this.name = 'Rectangle';    this.height = height;    this.width = width;  }  //親のメソッドをオーバーライド  print() {    //親メソッドの呼び出し    super.print();    //追加の処理    console.log(`width: ${this.width} height: ${this.height}`);  }  //メソッドを追加  area() {    return this.width * this.height;  }}let bar = new Rectangle(5,4);bar.print();  //This is Rectangle. width: 4 height: 5console.log(bar.area());  //20

class MyDate extends Date {  //独自のメソッド myWeek を追加（その他は Date のデフォルト）  myWeek() {    let week = super.getDay();    switch(week) {      case 0:        return '日曜日';        break;      case 1:        return '月曜日';        break;      case 2:        return '火曜日';        break;      case 3:        return '水曜日';        break;      case 4:        return '木曜日';        break;      case 5:        return '金曜日';        break;      case 6:        return '土曜日';        break;      default :        return week;    }  }}const today = new MyDate();  //インスタンスを生成console.log(today.myWeek()); //追加したメソッドを実行//水曜日console.log(today.toLocaleString());  // Date オブジェクトのメソッドを実行//2020/5/13 11:16:00const date2222 = new MyDate('2/22/2222');console.log(date2222.myWeek());//金曜日

// ES5var a = 'foo', b = 'bar', c = 'boo';//キー名 : 変数名（値）obj = { a: a, b: b, c: c };console.log(obj.a);  //fooconsole.log(obj.b);  //barconsole.log(obj.c);  //boo// ES6 短縮構文var a = 'foo', b = 'bar', c = 'boo';//キー名と値の変数名が同じ場合は以下のように省略可能obj = { a, b, c };console.log(obj.a);  //fooconsole.log(obj.b);  //barconsole.log(obj.c);  //boo

function getUser(name, age, gender) {  return {    name: name,    age: age,    gender: gender  };}let user = getUser('Mike', 28, 'male');console.log(user.name); // Mikeconsole.log(user.age);  //28console.log(user.gender);  //male

function getUser(name, age, gender) {  return {  // ES6 短縮構文    name,  // name: name と同じ    age,   // age: age と同じ    gender // gender: gender と同じ  };}let user = getUser('Mike', 28, 'male');console.log(user.name); // Mikeconsole.log(user.age);  //28console.log(user.gender);  //male

const val1 = 'foo', val2 = 'bar';const obj = {  [val1 + val2] : 'BOO' //[ ] の中の式が展開（算出）されて foobar : 'BOO'}console.log(obj.foobar);  //BOO

//ES5 までvar myKey = 'foo';  //変数var obj = {};  //オブジェクトを生成//オブジェクトを生成してからキーに変数を使用obj[myKey] = 'FOO';console.log(obj[myKey]);  //FOOconsole.log(obj['foo']);  //FOOconsole.log(obj.foo);  //FOO

//ES6let myKey = 'foo';const obj = {  //プロパティ名を[ ]で囲む  [myKey]: 'FOO'};console.log(myKey);  // foo （変数 myKey は文字列 foo）console.log(obj[myKey]);  //FOO （obj のプロパティ myKey ）console.log(obj['foo']);  //FOO （obj のプロパティ foo ）console.log(obj.foo);  //FOO （obj のプロパティ . アクセス ）console.log(obj); //{foo: "FOO"}

let contact = [  {    name: "Foo",    email: "foo@example.com"  },  {    name: "Bar",    email: "bar@example.com"  },  {    name: "Boo",    email: "boo@example.com"  },]//配列の各要素のオブジェクトのプロパティ名にインデックス番号を追加した配列を生成let indexContact = contact.map((item, index) => {  return {    ["name_" + index]: item.name,    ["email_" + index]: item.email  }})console.log(indexContact[1].email_1);  //bar@example.comfor(memeber of indexContact) {  console.log(memeber);}/* 以下出力{name_0: "Foo", email_0: "foo@example.com"}{name_1: "Bar", email_1: "bar@example.com"}{name_2: "Boo", email_2: "boo@example.com"}*/

//ES5 までのメソッドの定義var obj = {  foo: function() {    console.log('foo');  },  bar: function() {    console.log('bar');  }};

//ES6 からは function を省略可能const obj = {  foo() {    console.log('foo');  },  bar() {    console.log('bar');  }};

const x = 'foo', y = 'bar';const obj = {  [x + y] () {    console.log('FooBar');  },};obj.foobar();  //FooBar

function* ジェネレータ関数名([params]) {  statements}

function* myGenerator() {  yield 'foo';  yield 'bar';}//ジェネレータ関数を呼び出して変数に代入const generator = myGenerator();//コンソールへ出力console.log(generator);/*出力結果（停止中の Generator オブジェクトであることがわかる）myGenerator {<suspended>}__proto__: Generator*/

yield

yield キーワードは、ジェネレータ関数を一時停止したり再開したりするために使用します。

yield はジェネレータ関数の実行を一時停止し、ジェネレータの呼び出し元に yield キーワードに続く値を戻します。

yield はジェネレータ関数の中でしか呼び出すことができません。

以下がyield の構文です。

• expression：ジェネレータ関数が返す値。省略した場合は undefined が返されます。
• rv：next() メソッドに渡した値を受け取ります（もしあれば）。

[rv] = yield [expression]

yield キーワードはジェネレータの next() メソッドを呼び出させ、value と done の2つのプロパティを持つ IteratorResult オブジェクトを返します。 value プロパティは yield 式の評価結果（値）で、 done プロパティはジェネレータが完了したかどうかを表す真偽値です。

yield 式によって実行が停止されると、再びジェネレータの next() メソッドが呼び出されるまで、ジェネレータのコードの実行は一時停止します。

別の言い方をすると、イテレータでもあるジェネレータの next() メソッドを使って、ジェネレータ関数の yield 式が返す値を取得することができます。

next() メソッドの呼び出しで、ジェネレータは yield に達するまでコードを実行します。yield に達するとその時点での結果（value と done という2つのプロパティを持つオブジェクト）を返して実行を中断（suspend）します。

ジェネレータ関数のコードの実行は最初の部分で一時停止されていて、next() が呼ばれると最も近い yield に達するまでコードを実行し、その後、実行は一時停止（suspend）します。

next() メソッドは value と done という2つのプロパティを持つオブジェクト（IteratorResult）を返し、value にはその時点での値が、done にはジェネレータが完了したかどうかの真偽値が含まれています。

function* myGenerator() {  yield 1;  yield 2;}//ジェネレータを生成const generator = myGenerator();//ジェネレータの next() メソッドを呼び出して実行const next1 = generator.next();// yield 1 までが実行され value: 1, done: false のオブジェクトが返されて中断console.log(next1);  //出力 {value: 1, done: false}

以下の場合、1回目の next() の呼び出しでは yield 1 までを実行し、{value: 1, done: false} が返され、その後一時停止します。

再び next() を呼び出すと実行が再開し、2回目の next() の呼び出しでは yield 2 までを実行し、{value: 2, done: false} が返されます。

3回目の next() では yield がもうないので {value: undefined, done: true} が返されます。値（value）は undefined で、done: true になりジェネレータが完了したことを示しています。

もし、更に next() を呼び出しても、{value: undefined, done: true} が返されるので意味がありません。

function* myGenerator() {  yield 1;  yield 2;}//ジェネレータを生成const generator = myGenerator();//next() を呼び出して実行（1回目）const next1 = generator.next();// yield 1 までが実行され value: 1, done: false のオブジェクトが返されて中断console.log(next1);  //出力 {value: 1, done: false}console.log(next1.value);   //1 （value プロパティを出力）console.log(next1.done);    //false （done プロパティを出力）// next() を再度呼び出して実行（2回目）const next2 = generator.next();// yield 2 までが実行され value: 2, done: false のオブジェクトが返されて中断console.log(next2);  //出力 {value: 2, done: false}// next() を再度呼び出して実行 （3回目）const next3 = generator.next();// yield がもうないので value: undefined, done: true のオブジェクトが返されて中断console.log(next3);  //出力 {value: undefined, done: true}

以下は next() の戻り値の value プロパティのみを出力する例です。

function* myGenerator() {  yield 1;  yield 2;}//ジェネレータを生成const generator = myGenerator();//1回目の next()console.log(generator.next().value); // 1//2回目の next()console.log(generator.next().value); // 2//3回目の next()console.log(generator.next().value); // undefined

以下のように最後に return 文がある場合は、3回目を呼び出すと実行は return 文に到達して、return で指定された値 "end" と done プロパティが true のオブジェクトが返され、ジェネレータが完了します。

更に next() を呼び出しても、{value: undefined, done: true} が返されます。

function* myGenerator() {  yield 1;  yield 2;  //関数を終了する return 文  return 'end';}//ジェネレータを生成const generator = myGenerator();//1回目の next()const next1 = generator.next();console.log(next1);  //{value: 1, done: false}//2回目の next()const next2 = generator.next();console.log(next2);  //{value: 2, done: false}//3回目の next()const next3 = generator.next();console.log(next3);  //{value: "end", done: true}

以下はジェネレータを生成して、next() を実行すると、それぞれの呼び出しで引数で指定した値の加算、減算、乗算、除算を行うジェネレータ関数の例です。

function* myGenerator(x, y) {  yield x + y;  yield x - y;  yield x * y;  if(y !==0) {    yield x / y;  } else {    yield 'error';  }}const gen = myGenerator(5, 7);console.log(gen.next().value);  //12console.log(gen.next().value);;  //-2console.log(gen.next().value);;  //35console.log(gen.next().value);;  //0.7142857142857143

一時停止

今までの例では yield で値を返していましたが、値は返さずに単に実行を一時停止するような使い方もできます。

以下は、ボタンをクリックするとイベントリスナーにより next() メソッドを呼び出してコンソールに「カウント開始」と出力して、タイマーでカウントアップを開始し、yield の位置で関数の実行を一時停止します（タイマーはそのままカウントアップを続けます）。

2回目にボタンをクリックすると、再び next() メソッドを呼び出してコンソールに「終了するにはもう一度クリックしてください」と出力し、次の yield の位置で関数の実行を一時停止します。

3回目にボタンをクリックすると、再び next() メソッドを呼び出してタイマーをクリアしてその時点でのカウントとメッセージを出力し、return で関数を終了します。その後、ボタンをクリックしても何も起きません。

<button id="btn">Click</button><script>  function* generateOutput(){    let count = 0;    this.timerID = setInterval(      () => count++,      1000    );    console.log('カウント開始'); yield;    console.log('終了するにはもう一度クリックしてください'); yield;    clearInterval(this.timerID);    console.log('終了 Count: ' + count); return;  }  //ジェネレータを生成  const gen =  generateOutput();  //ボタン要素を取得  const btn = document.getElementById('btn');  //イベントリスナーを登録（ボタンをクリックすると next() を呼び出す）  btn.addEventListener('click',()=> gen.next());</script>

function* myGenerator(){  const a = yield 'start';  const b = yield a;  yield b;}const gen =  myGenerator();// yield 'start' で "start" が返されるconsole.log(gen.next());  //{value: "start", done: false}//a（yield 'start' の結果）は foo に置き換わり、yield a が実行されるconsole.log(gen.next('foo')); //{value: "foo", done: false}//b（yield a の結果）は bar に置き換わり、yield b が実行されるconsole.log(gen.next('bar')); //{value: "bar", done: false}// yield がもうないので完了console.log(gen.next());  //{value: undefined, done: true}

function* myGenerator(value){  //最初の引数なしの next() では myGenerator() の引数の値を表示  const a = yield `引数の値は ${value}`;  //2回目の next() では next() の引数の値（a）を使って計算  const b = yield `${a} の${value}倍は ${a * value}`;  //3回目の next() では next() の引数の値（b）を使って計算  yield `${b} の${a}倍は ${b * a}`;}const gen =  myGenerator(3);const result1 = gen.next();console.log(result1.value);  //引数の値は 3const result2 = gen.next(5);console.log(result2.value);   //5 の3倍は 15const result3 = gen.next(35);console.log(result3.value);  //35 の5倍は 175

function* sumUp(){  let sum = 0;  while (true){    //x は next() の引数の値に置き換わる    const x = yield sum;    console.log('x: ' + x + ' sum: ' + sum);    sum += x;  }}const gen = sumUp();// 関数の初回実行時の sum は 0gen.next();//next() の引数に渡された値を加算console.log(gen.next(5).value);  //5console.log(gen.next(7).value);  //12console.log(gen.next(99).value);  //111//コンソールへの出力結果x: 5 sum: 0  //初回の加算時5 //17行目の出力（加算結果）x: 7 sum: 5  //2回目の加算時12 //18行目の出力（加算結果）x: 99 sum: 12  //3回目の加算時111 //19行目の出力（加算結果）

function* myGenerator() {  yield 1;  yield 2;  yield 3;}const generator = myGenerator();//for...of 文でジェネレータの値を取り出すfor(let value of generator) {  console.log(value);}//出力123

function* myGenerator() {  yield 1;  yield 2;  yield 3;}const generator = myGenerator();//next()が返す iteratorResult オブジェクトを格納する変数let result;//iteratorResult オブジェクトの done プロパティが false の間繰り返しwhile (!(result = generator.next()).done)  {  console.log(result.value);}

function* myGenerator() {  yield 1;  yield 2;  // return 文（for..of では取得できない）  return 3;}const generator = myGenerator();for(let value of generator) {  console.log(value);}//出力（3は出力されない）12

//オブジェクトを作成var obj = {foo: 'FOO', bar: 'BAR', boo: 'BOO'};// オブジェクトを iterable に（Symbol.iterator を実装）obj[Symbol.iterator] = function(){  var iterator = {};  var current = 0;  var keys = Object.keys(this);  //イテレータの next() メソッドを定義  iterator.next = ()  => {    var iteratorResult = (current < keys.length)      ? { value: this[keys[current]], done: false }      : { value: undefined, done: true };    current++;    return iteratorResult;  };  return iterator;};

//オブジェクトを作成var obj = {foo: 'FOO', bar: 'BAR', boo: 'BOO'};// Symbol.iterator をジェネレータ関数を使って実装obj[Symbol.iterator] = function*(){  //プロパティの名前（キー）の配列  var keys = Object.keys(this);  //オブジェクトの要素（プロパティ）の数は上記で取得した配列の length  for(let i=0; i<keys.length; i++) {    //オブジェクトの値はキーから取得して yield で返す    yield this[keys[i]];  }}//スプレッド構文を使って展開できるconsole.log(...obj);   //FOO BAR BOO//for...of 文を使って値を1つずつ取り出して繰り返し処理できるfor(var value of obj) {  console.log(value);}/*FOOBARBOO*/

シーケンスの作成

ジェネレータは IteratorResult オブジェクトを返す next() メソッドを持つイテレータ（iterator）であり、且つ反復可能オブジェクト(iterable)でもあるので、ジェネレータを使えば、簡単に反復可能なシーケンスを作ることができます。

以下は、引数に指定した start から end までの連続した整数を発生させる（ジェネレータオブジェクトを生成する）ジェネレータ関数の例です。

// start から end までの連続した整数を発生させるジェネレータ関数function* generateSequence(start, end) {  for (let i = start; i <= end; i++) {    yield i;  }}//スプレッド構文を使って展開できるlet sequence = [...generateSequence(7,11)];console.log(sequence);// [7, 8, 9, 10, 11]//for...of 文を使って値を1つずつ取り出して繰り返し処理できるfor (const i of generateSequence(3,6)){  console.log(i);}/*3456*/

以下は、引数に指定した start から end までの整数で、引数 by に指定された値で割り切ることができる整数を生成するジェネレータです。

引数を指定しなければデフォルト値（by=2, start=1, end=30）が適用されます（デフォルト引数）。

//by で指定された値で割り切れる整数を生成するジェネレータfunction* generateDivisibleSequence(by=2, start=1, end=30) {  let num = start;  while (num <= end) {    if (num % by === 0) {      yield num;    }    num++;  }}let sequence1 = [...generateDivisibleSequence()];console.log(sequence1);// [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30]let sequence2 = [...generateDivisibleSequence(7, 20, 50)];console.log(sequence2);//[21, 28, 35, 42, 49]

 yield* expression;

function* myGenerator1() {  yield 'foo';  yield 'bar';  yield 'buz';}function* myGenerator2() {  yield 'HELLO!';  //myGenerator1 を埋め込み（合成）  yield* myGenerator1();  yield 'BYE!';}const gen = myGenerator2();console.log(gen.next()); // {value: "HELLO!", done: false}console.log(gen.next()); // {value: "foo", done: false}console.log(gen.next()); // {value: "bar", done: false}console.log(gen.next()); // {value: "buz", done: false}console.log(gen.next()); // {value: "BYE!", done: false}console.log(gen.next()); // {value: undefined, done: true}

function* mixGenerator() {  yield* [1, 2];  yield* 'bar';  yield* Array.from(arguments);}const gen = mixGenerator('foo');console.log(gen.next()); // {value: 1, done: false}console.log(gen.next()); // {value: 2, done: false}console.log(gen.next()); // {value: "b", done: false}console.log(gen.next()); // {value: "a", done: false}console.log(gen.next()); // {value: "r", done: false}console.log(gen.next()); // {{value: "foo", done: false}console.log(gen.next()); // {value: undefined, done: true}

function* gntr1() {  yield* [1, 2];  return 'foo';}function* gntr2() {  const returnValue = yield* gntr1();  console.log(returnValue) // 'foo'（done:true の時の value の値）  return returnValue;}const gen = gntr2();console.log(gen.next()); // {value: 1, done: false}console.log(gen.next()); // {value: 2, done: false}// foo （8行目の出力）console.log(gen.next()); // {value: "foo", done: true}console.log(gen.next()); // {value: undefined, done: true}

function* gntr1() {  yield* [1, 2];  // return を yield に変更  yield 'foo';}function* gntr2() {  const returnValue = yield* gntr1();  console.log(returnValue) // undefined（done:true の時の value の値）  return returnValue;}const gen = gntr2();console.log(gen.next()); // {value: 1, done: false}console.log(gen.next()); // {value: 2, done: false}console.log(gen.next()); // {value: "foo", done: false}// undefinedconsole.log(gen.next()); // {value: undefined, done: true}

function* gntr() {  yield 1;  yield 2;  yield 3;}const gen = gntr();console.log( gen.next() ); // { value: 1, done: false }//return() を実行してジェネレータを終了（引数に与えられた値が value として返される）console.log( gen.return("foo") ); // { value: "foo", done: true }console.log( gen.next() ); // { value: undefined, done: true }

function* gntr() {  yield 1;  yield 2;  yield 3;}const gen = gntr();console.log( gen.next() ); // { value: 1, done: false }//throw() を実行して例外を発生させるconsole.log( gen.throw(new Error("例外発生！")) ); // Uncaught Error: 例外発生！console.log( gen.next() ); //実行されない

function* gntr() {  try {    yield 1;    yield 2;    yield 3;  }catch(e){    console.log(e); // エラーを捕捉してコンソールへ出力  }}const gen = gntr();console.log( gen.next() );  // { value: 1, done: false }//throw() を実行して例外を発生させるconsole.log( gen.throw(new Error("例外発生！")) ); // Error: 例外発生！ {value: undefined, done: true}console.log( gen.next() );  //{value: undefined, done: true}

function* gntr() {  yield 1;  yield 2;  yield 3;}const gen = gntr();console.log( gen.next() ); // { value: 1, done: false }//呼び出し側のコードでもエラーを捕捉することができますtry {  console.log( gen.throw(new Error("例外発生！")) );} catch(e) {  console.log(e); // エラーを捕捉してコンソールへ出力（Error: 例外発生！）}console.log( gen.next() ); //{value: undefined, done: true}

includes()

includes() は、実行する文字列の中に引数で指定した文字列が含まれるかを判定して真偽値を返します。

str.includes(searchString[, position])

返り値

文字列が検索値を含む場合は true。含まなければ、false。

//検索対象の（メソッドを実行する）文字列const sentence = 'JavaScript is not Java';//Script は含まれるので trueconsole.log(sentence.includes('Script'));  //true//検索開始位置を指定console.log(sentence.includes('Script',4));  //trueconsole.log(sentence.includes('Script',5));  //false//大文字・小文字を区別するので以下は falseconsole.log(sentence.includes('java'));  //falseconst search = 'Java';console.log(`「${search}」は「${sentence}」に${sentence.includes(search) ? '含まれます' : '含まれません'} `);//「Java」 は 「JavaScript is not Java」 に含まれます

startsWith()

startsWith() は、実行する文字列が引数で指定した文字列で始まるかを判定して真偽値を返します。

str.startsWith(searchString[, position])

返り値

文字列が指定された文字列で始まる場合場合は true。そうでなければ、false。

//検索対象の（メソッドを実行する）文字列const sentence = 'JavaScript is not Java';console.log(sentence.startsWith('Java'));  //true//検索開始位置を指定console.log(sentence.startsWith('Java',1));   //false//後半の Java にマッチconsole.log(sentence.startsWith('Java',18));   //true

endsWith()

endsWith() は、実行する文字列が引数で指定した文字列で終わるかを判定して真偽値を返します。

str.endsWith(searchString[, length])

返り値

文字列が指定された文字列で終わる場合場合は true。そうでなければ、false。

//検索対象の（メソッドを実行する）文字列const sentence = 'JavaScript is not Java';console.log(sentence.endsWith('Java'));  //true//検索される文字列（sentence）の長さを指定console.log(sentence.endsWith('Java',18));   //false//最初の Java にマッチconsole.log(sentence.endsWith('Java',4));   //true

JavaScriptは文字コードとしてUnicodeを採用し、エンコード方式としてUTF-16を採用しています。 このUTF-16を採用しているのは、あくまでJavaScriptの内部で文字列を扱う際の文字コード（内部コード）です。 そのため、コードを書いたファイル自体の文字コード（外部コード）は、UTF-8のようにUTF-16以外の文字コードであっても問題ありません。

//2つの Code Unitconsole.log("\uD83D\uDE0A");  //😊//1つの Code Pointconsole.log("\u{1F60A}");  //😊

const str = "😊";console.log(str.length);  //2

const str = "😊";for (let i = 0; i < str.length; ++i) {  //Code Unit を取得して hex 値（16進数）に変換  console.log(str.charCodeAt(i).toString(16));}//d83d//de0a

const splitArray = "😊は絵文字".split("");console.log(splitArray);// ["\ud83d", "\ude0a", "は", "絵", "文", "字"]

codePointAt()

codePointAt() は文字列の指定されたインデックスにある文字の Code Point の値を返すメソッドです。

str.codePointAt(pos)

返り値

指定された pos の位置にある Code Point の値を表す数値。pos の位置に要素がない場合は undefined。

以下は「あ」と「😊」の Code Point と Code Unit の値をそれぞれ codePointAt() と charCodeAt() で取得しています。

// "あ" の Code Point の値console.log("あ".codePointAt(0)); //12354// "あ" の Code Unit の値 （この場合は Code Point の値と同じ）console.log("あ".charCodeAt(0)); //12354// "😊" の Code Point の値console.log("😊".codePointAt(0)); //128522// "😊" の Code Unit の値 （この場合は Code Point の値と異なる）console.log("😊".charCodeAt(0)); //55357

16進数に変換するには、toString() の引数に16を渡します。

// "あ" の Code Point の16進数の値console.log("あ".codePointAt(0).toString(16)); //3042// "あ" の Code Unit の16進数の値  （この場合は Code Point の値と同じ）console.log("あ".charCodeAt(0).toString(16)); //3042// "😊" の Code Point の16進数の値console.log("😊".codePointAt(0).toString(16)); //1f60a// "😊" の Code Unit の16進数の値  （この場合は Code Point の値と異なる）console.log("😊".charCodeAt(0).toString(16)); //d83d

以下の str は5文字ですが、最初の絵文字（😊）は2つの Code Unit で構成されているため、length プロパティは6となります。

const str = "😊は絵文字";//length を出力console.log(str.length);  //6//codePointAt() でそれぞれの Code Point を出力for (let i = 0; i < str.length; ++i) {  console.log(str.codePointAt(i).toString(16));}//1f60a （😊 の Code Point）//de0a （😊 の 下位サロゲートの Code Point）//306f （は の Code Point）//7d75 （絵 の Code Point）//6587 （文 の Code Point）//5b57 （字 の Code Point）//charCodeAt() でそれぞれの Code Unit を出力for (let i = 0; i < str.length; ++i) {  console.log(str.charCodeAt(i).toString(16));}//d83d （😊 の Code Unit）//de0a （😊 の 下位サロゲートの Code Unit） ※Code Point と同じ//306f （は の Code Unit） ※Code Point と同じ//7d75 （絵 の Code Unit） ※Code Point と同じ//6587 （文 の Code Unit） ※Code Point と同じ//5b57 （字 の Code Unit） ※Code Point と同じ

fromCodePoint()

fromCodePoint() は指定された Code Point に対応する文字を返します。

fromCodePoint() は String の静的なメソッドなので、文字列（String オブジェクト）のメソッドとしてではなく、常に String.fromCodePoint() として使用します。

String.fromCodePoint(num1[, ...[, numN]])

返り値

指定された Code Point を使って生成された文字列。

例外

無効な Code Point が与えられた場合、RangeError がスローされます。

以下は fromCodePoint() を使った例です。

//"あ"の Code Point（10進数）を取得console.log("あ".codePointAt(0));//12354//Code Point（10進数）から文字（あ）を生成console.log(String.fromCodePoint(12354));//あ//"あ"の Code Point を16進数に変換console.log("あ".codePointAt(0).toString(16));//3042//16進数の Code Point から文字（あ）を生成console.log(String.fromCodePoint(0x3042));//あ//fromCodePoint には複数の Code Point を指定可能console.log(String.fromCodePoint(12354, 12356, 12358));//あいうconsole.log(String.fromCodePoint(0x3042, 0x3044, 0x3046));//あいうconsole.log(String.fromCodePoint(0x1f60a, 0x306f, 0x7d75, 0x6587, 0x5b57));//😊は絵文字//無効な Code Point を指定（エラーが発生）String.fromCodePoint(-1); //Uncaught RangeError: Invalid code point -1

文字列を分割・カウント

split() メソッドや length プロパティはCode Unit を基準に処理されるため、絵文字などのサロゲートペアを使った文字列に対してはうまく機能しませんが、ECMAScript 2015（ES6）で導入された Array.from メソッドやスプレッド構文、for...of 文などを使うことで Code Point を基準に分割することができます。

Array.from で Code Point ごとに区切る

Array.from メソッドを使うと、Code Point ごとに区切った配列へと変換することができます。

const str = "😊は絵文字";//文字列から Code Point ごとに区切った1文字ずつの配列を生成const strArray = Array.from(str);console.log(strArray);// ["😊", "は", "絵", "文", "字"]console.log(strArray.length);// 5

スプレッド構文で Code Point ごとに区切る

スプレッド構文を使うと、Code Point ごとに区切った配列へと変換することができます。

const str = "😊は絵文字";//配列に文字列の要素を展開const strArray =  [...str];console.log(strArray);// ["😊", "は", "絵", "文", "字"]console.log(strArray.length);// 5

for...of 文で Code Point ごとに反復処理

for...of 文を使うと、Code Point ごとに反復処理することができます。

const str = "😊は絵文字";const strArray = [];for (let char of str) {  strArray.push(char);}console.log(strArray);// ["😊", "は", "絵", "文", "字"]console.log(strArray.length);// 5

match() メソッドを使用

以下は正規表現のmatch() メソッドを使って文字列を分割する例です。

[\uD800-\uDBFF][\uDC00-\uDFFF] はサロゲートペアを表すパターンで、[\s\S] は全ての文字を表す文字クラスです。

また、str に空文字列を渡すと、match() は null を返すので、その場合は空の配列 [] を返しています。

const str = "😊は絵文字";//match() メソッドを使用して文字列を分割const strArray = str.match(/[\uD800-\uDBFF][\uDC00-\uDFFF]|[\s\S]/g) || [];console.log(strArray);// ["😊", "は", "絵", "文", "字"]console.log(strArray.length);// 5

正規表現 u フラグ

ECMAScript 2015（ES6）では u フラグ（unicode オプション）が導入されています。u フラグを指定することで、Unicode のサロゲートペアを使った4バイト文字も1文字として扱うことができます。

以下は正規表現のmatch() メソッドで u フラグを使わない場合の例ですが、絵文字を正しく処理することができません。

match() メソッドの戻り値は配列で、最初の要素にはマッチした文字列全体が入り、それ以降はマッチした配列内のカッコの付きのサブ表現のテキストが入ります。

以下の場合、(.) は😊の下位サロゲート（\ude0a）にマッチしていて期待通りにはなりません。

const str = "😊は絵文字";const result = str.match(/(.)は絵文字/);console.log(result[0]);//�は絵文字（マッチした文字列全体）console.log(result[1]);//� （カッコの付きのサブ表現のテキスト）console.log(result.length);//2console.log(result);// ["\ude0aは絵文字", "\ude0a", index: 1, input: "😊は絵文字", groups: undefined]

u フラグを指定することで、サロゲートペアを使った4バイト文字も正しく処理されます。

const str = "😊は絵文字";const result = str.match(/(.)は絵文字/u);console.log(result[0]);//😊は絵文字console.log(result[1]);//😊console.log(result.length);//2console.log(result);// ["😊は絵文字", "😊", index: 0, input: "😊は絵文字", groups: undefined]