東京で開催された「CSS Nite LP54 Corder’s High 2017」の参加レポートです。

セッション6つめはKDDIウェブコミュニケーションズの阿部さん。

オブジェクトについて

JavaScriptが苦手な人は Object が理解できていない

オブジェクトは変数と関数の集合体

デモのダウンロード → Download

  • メリット
    • 可読性の向上
    • 品質の向上
    • 開発工数の削減
    • 保守性の向上
    • 他のライブラリとの衝突を避ける
    • 動作が軽い
    • 書いてて気持ちい！

設計の流れ

  1. グローバルネームスペースの設定
1
var ObjName = {} || ObjName;
  1. コンストラクタの登録
1
2
3
4
5
6
ObjName.init = function (arg) {
  this.param = arg
}
ObjName.init.prototype.methodName1 = function () {...}
ObjName.init.prototype.methodName2 = function () {...}
  1. オブジェクトを立ち上げる
1
2
3
4
5
6
7
8
9
10
// インスタンスを作成
var ObjName1 = new ObjName.init('arg1');
var ObjName2 = new ObjName.init('arg2');
// 作成したメソッドを実行
ObjName1.methodName1();
ObjName2.methodName2();
// メソッドチェーンも使える
ObjName1.methodName1().methodName2();

※ライブコーディングがほとんどでした！分かりやすかったです。