JavaScript(ES6)の文法簡易まとめ

JavaScript(ES6)の書き方を備忘録として自分用にまとめました。

出力

コンソールに出力

console.log("文字列");

コメントアウト

一行なら//コメント

複数行なら/* コメント */

変数と定数

変数は let 変数名 = 値;

定数は const 変数名 = 値;

テンプレートリテラル

バッククォーテーション ` で囲むと、

console.log(`文字列${変数または定数}文字列`);

というように変数や定数を埋め込むように連結させて出力できます。

比較演算子

<や>、<=や>=はおなじみですが、

等しいときは===

等しくないときは!==

というように3つになることに注意。

ifやswitchやforやwhileなどは目新しくなかったので省略。

配列やオブジェクト

以下ではconstで統一して宣言しています。

配列はconst 配列名 = [要素, 要素, ..., 要素];

配列の長さは配列名.lengthとして取得できます。

配列のサイズ外の添字が指定されて存在しない要素を取得しようとすると、undefinedという特別な値が代わりに取得されます。

オブジェクトはconst オブジェクト名 = {プロパティ名1: 値1, ..., プロパティ名n: 値n}

値iはオブジェクト名.プロパティ名iとして取得できます。

また、オブジェクトを要素とする配列や、オブジェクトを要素とするオブジェクトなども自由につくれます。

関数の宣言

何通りかあるみたいです。

const 関数名 = function(引数){
  //ここに処理
};

const 関数名 = (引数) => {
  //ここに処理
};

ES6ではこのようにfunction()やアロー関数() =>を使って関数を定義するらしいですが、これらは書き方だけではない違いがあるらしいです。

参考 JavaScript: 通常の関数とアロー関数の違いは「書き方だけ」ではない。異なる性質が10個ほどある。Qiita

オブジェクトの値を関数にすることもできます。

const オブジェクト名 = {
  プロパティ名1: 値1,
  プロパティ名2: () =>{
    //ここがプロパティ2の値にあたる関数内の処理
  }
}

//プロパティ2の値にあたる関数は次のようにして使える。
オブジェクト名.プロパティ名2();

クラスの使い方

class クラス名{
  constructor(引数){   //コンストラクタ
    this.変数名 = 値;  //クラス内の変数はこのように定義する
  }

  メソッド1(){         //メソッド（クラスの関数）の定義
  }

  メソッド2(){
    this.メソッド1();  //クラス内では関数はこのように使う
  }
}

//クラスからインスタンスを生成
const インスタンス名 = new クラス名();

クラスAを継承したクラスBは次のようにつくる。

class A{
  constructor(){
  }
}

class B extends A{  //クラスAを継承したクラスB
  constructor(){    //コンストラクタをオーバーライドする際は
    super();        //このように親クラスのコンストラクタを呼び出す必要がある
  }
}

配列のメソッドを用いた操作

pushメソッド（要素の追加）

配列の末尾に要素を追加するにはpushメソッドを使うことができます。

const array = [0, 1];

array.push(2);

forEachメソッド（各要素に対する操作）

配列の各要素に対する操作はforEachメソッドで行えます。

forEachメソッドでは、各要素を引数としたコールバック関数を指定できます。

const array = [1, 2, 3, 4, 5];

array.forEach((num) => {
  console.log(num);
});

このように書くと、1から5まで順にconsole.logで出力されます。

コールバック関数がなにかは後述します。

findメソッド（条件に合った最初の要素を取り出す）

例えば「3の倍数である」という条件を満たす最初の要素を取り出すには次のように書きます。

const array = [1, 3, 5, 7, 9];

const foundNum = array.find((num) => {
  return (num % 3 === 0);
});

配列の要素がオブジェクトである場合は、コールバック関数の引数がオブジェクトになるので、条件式のところではプロパティを指定して値を比較するようにします。

filterメソッド（条件に合う全ての要素を取り出す）

filterメソッドは、条件を満たす全ての要素を取り出して配列をつくります。

次の例では「3の倍数である」という条件を満たした配列[3, 9]がつくられます。

const array = [1, 3, 5, 7, 9];

const newArray = array.filter((num) => {
  return (num % 3 === 0);
});

配列の要素がオブジェクトだった場合、条件を満たしたオブジェクトが要素である配列がつくられます。

mapメソッド（全ての要素になにか処理をして新しい配列をつくる）

例えば全ての各要素を2倍にした新しい配列は次のようにつくれます。

この場合newArrayは[2, 4, 6, 8, 10]となります。

const array = [1, 2, 3, 4, 5];

const newArray = array.map((num) > {
  return (num * 2);
});

配列の要素がオブジェクトであった場合、新しい配列の要素もオブジェクトにならなければならないわけではなく、自由に要素をつくれます。

ファイルの分割方法（importとexport）

デフォルトエクスポート

fileAのクラスAをexportして、fileBでクラスAをimportしたいとき

fileAでは

class A{
  //中身略
}

export default A;

としてexportし、同ディレクトリにあるfileBでは

import A from "./fileA";

としてimportします。同ディレクトリにない場合はそれに合わせて相対パスを書きます。

クラスでなくても、インスタンスや関数、変数、定数なども同様に書けます。

デフォルトエクスポートでは、fileAをimportする際にdefaultの横に書いたAか自動でimportされるため、importする側では名前が変わっていても問題ありませんが、一方で、ファイル1つにつき、なにか一つしかexportできません。

複数のなにかをexportするには、次のように名前付きエクスポートをします。

名前付きエクスポート

複数のなにかをexportするには次のように書きます。

class A{
}

const A1 = new A();
const A2 = new A();

export {A1, A2};

import {A1, A2} from "./fileA";

パッケージも同様にimportする

import 名前 from "パッケージ名";

コンソールからの入力（readline-sync）

例えばコンソールからの入力をできるようにするreadline-syncというパッケージは次のように使える。

import readlineSync from "readline-sync";

const 定数名 = readlineSync.question("文字列の入力してください: ");
const 定数名 = readlineSync.questionInt("整数を入力してください: ");

コールバック関数

const call = (callback) => {
  //引数に文字列"Hello World"を指定して
  //コールバック関数を実行するだけ
  callback("Hello World");
};

//上の関数callを呼び出すときは、引数に関数を指定する。
call((str) => {
  console.log(str);  //これがコールバック関数となる
});

関数を実行するときに、引数に渡す関数をコールバック関数と呼ぶらしいです。

上の例だと、

callという関数は、渡されたコールバック関数にHello Worldという文字列を渡して実行するだけの関数です。

関数callを呼び出すときに、引数の文字列strをただ表示させるだけのコールバック関数(str) => {console.log("str");}を渡すと、これがcallbackとなって、ただただHello Worldが表示されます。