Help us understand the problem. What is going on with this article?

JavaScript(ES6)の関数、オブジェクト、クラスのまとめ

More than 1 year has passed since last update.

文法まとめに引き続き、関数、オブジェクト、クラスのまとめ。

今回クラス設計にふれて、内容がオブジェクト指向に関わって来ましたが、だんだん複雑になって来ますね。
そこで、開眼! JavaScriptを読む事にしました。こちらは後程まとめますが、JavaScript特有のクセを理解するのに役立ちそうです。

以下、とりあえず今回は、文法まとめの続きです。

関数

関数の定義

const 定数名 = function(引数名) {
  //まとめたい処理を書く
  return 戻り値
};

アロー関数

ES6からの新しい関数定義方法です。
function()() =>と短く書く事が出来ます。
この書き方をアロー関数と呼びます。

const 定数名 = (引数名) => {
  //まとめたい処理を書く
 return 戻り値
};

オブジェクト

文法まとめにも書きましたが、

// オブジェクトの定義
const 定数名 = { プロパティ名1: 値1, プロパティ名2: atai2 }

// オブジェクトの呼び出し
console.log(定数名.プロパティ名)

オブジェクトの値に関数を持たせる

// オブジェクトの値に関数を定義
const 定数名 = {
  プロパティ名: () => {
    処理
  };

// オブジェクトの値に定義した関数の呼び出し
定数名.プロパティ名();

クラス

オブジェクトをたくさん作るための設計図です。
例えば、下記のように本のタイトルと著者の情報を持ったオブジェクトを使いたい場合、本の情報が増える度に無限にオブジェクトを定義する事になります。

const book1 = { title: 'こころ', author: '夏目漱石' };
const book2 = { title: '人間失格', author: '太宰治' };
const book3 = { title: '銀河鉄道の夜', author: '宮沢賢治' };
.
.
.
本の情報が増える度に定義し続ける事になる

同じ構造のオブジェクトが複数回必要になる場合は、クラスを1度定義し、クラスからオブジェクトを生成します。
クラスから生成したオブジェクトは、インスタンスと呼びます。

クラスの定義

class クラス名 {

}

インスタンスの生成

 
class クラス名 {

}

const 定数名 = new クラス名();

コンストラクタ

クラスにはコンストラクタと呼ばれる機能があります。
コンストラクタは、インスタンスが生成された時に実行されます。
また、コンストラクタの中でthis.プロパティ名 = 値;と書くとインスタンスにプロパティと値を追加出来ます。

class クラス名 {
  constructor(引数) {
    this.プロパティ名 = ;
  }
}

メソッド

// メソッドの定義
class クラス名 {
  メソッド名() {
    処理
  }
}

// メソッド呼び出し
const 定数名 = new クラス名
定数名.メソッド名();

アンキパン欲しい・・・
現実逃避はさておき、地道にアウトプットして覚えるしかない。自作アプリに組み込むなどして、実際に使っていかないと。

fujigaki
業務系社内SEからWEB系に転職しました。 知識を定着させるためにアウトプットしようと思い、Qiitaにまとめています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away