JavaScript – １日ひとつ、強くなる。

stateの状態のパターンが「2より大きい場合」のアニメーションの構造について

See the Pen OmZaYx by nakanishi (@nakanishi) on CodePen.

前回のstateが2つしかない場合のアニメーションの設計の考察に続き、今回はstateが4つあるアニメーションについて考察する。つまり、stateの状態のパターンが「2より大きい場合」について。

この場合について考えてみてわかったことだが、stateの状態のパターン数が2なのか、2より大きいのかは、実装の上では本質的な違いがない。何故なら、前回のように２つの段階に切り分けておけば、アニメーションを実行する段階では既に、対象や(どのDOMを動かすのか)、どのようなアニメーションにするのか(開くのか、閉じるのか)は一意に決まっているからだ。逆に言うと、アニメーションを実行する段階で対象と仕様が一意に決まるからこそ、このような2段階切り分けが有効なのだと考えられる。

“stateの状態のパターンが「2より大きい場合」のアニメーションの構造について” の続きを読む

タブ、コードの改行、{}の改行の方法

See the Pen used tab by nakanishi (@nakanishi) on CodePen.

タブ、コードの改行、{}の改行の方法

codepen参照。

ES5のクラス class もどき prototype

See the Pen used class js by nakanishi (@nakanishi) on CodePen.

ES5 にクラスはない。コンストラクタでインスタンスを作成するが、このコンストラクタも実態は単なる関数。関数を実行してオブジェクトを作っているだけ。

作成されるインスタンスは、プロパティをコンストラクタで定義され、メソッドはそのコンストラクタ.prototypeにあるものを「参照」する。

クラスを extend するためには、プロトタイプチェーンを使って継承する。

メソッドを継承するのは簡単だが、コンストラクタを継承するには少し細かく書く。callで元のコンストラクタを、新しいコンストラクタで初期化する内容を書く部分で実行する。

var Human4 = function (name){
 //プロパティ
 this.name = name;
 //メソッド 
};

//prototypeが大事
Human4.prototype.callOwnName = function(){
 console.log("Human4: my name is " + this.name ); 
 };
//あらたにManクラスを作成
var Man = function(name,job){
	//受けうつぐuman4つまりコンストラクタを、このコンテキストのthisで実行。引数はｎame
	Human4.call(this,name);
	this.job = job;
};
//Humanを継承
Man.prototype = new Human4();
//Manだけのメソッドを追加
Man.prototype.myJob = function(){console.log("my job is "+ this.job);};

//インスタンスを作成
var nakanishiMan = new Man("nakanishiMan","Web Developper");
nakanishiMan.bark();
console.log(nakanishiMan.job);
nakanishiMan.myJob();

jQueryのOnの使い方

jQueryのonを使うことで、複数のイベントを一度に付加できる。また脱着の自由度も高い。そのためonclickではなく、基本的にONを使う。

onイベントの２つめの引数として{key:値}を渡すと、ハンドラが受け取ることができ、e.date.keyで取り出すことが出来る。

{key:値,key2:値}で複数の値を渡すことも出来る。

See the Pen jQuery On by nakanishi (@nakanishi) on CodePen.

ES5, CoffeeScript, ES6の記法の違い

ES5, CoffeeScript, ES6の記法の違いが混乱するのでまとめた。

	ES5	CoffeeScript	ES6
参考資料		詳しい
標準ブラウザで	読める	読めない (要トランスコンパイル)	読めないものも多くある (実務レベルでは要トランスコンパイル/主としてBabelを用いる)
記法デモ		Class構文 JQuery.cssの書き方	Class構文 ES5と6の違い
セミコロン	いる	いらない	いる
function(){内容}	function(){内容}	()=> 改行インデント内容	()=>{内容}
function(引数){内容}	function(引数){内容}	(引数)=> 改行インデント内容	(引数)=>{内容}
関数の実行	call();	call() 引数がないときは必ず()が必要	call();
関数の実行(引数あり)	call(“start”);	call “start” 引数があるときは()を省略可能	call(“start”);

event.currentTargetとevent.targetの違い

See the Pen used target by nakanishi (@nakanishi) on CodePen.

event.target と event.currentTargetは違う

イベントが発生した時に、イベントリスナーでイベントオブジェクトを取得することができるが、このイベントリスナーの event.target と event.currentTarget は「異なる性質」を持つので注意したい。

確認：イベントリスナーとは

イベントリスナーとは、イベントターゲット(HTMLの各種要素=ノード等)に対して、イベント(clickやhover)が発生した際に実行する「関数、もしくはオブジェクト」を関連付ける仕組みのこと。具体的には、あるdivがマウスオーバーされた時に特定の関数を実行する、といった機能を実装する際に使われる。

//ES6です
'use strict';

class AddHover {
  constructor(target) {
    this.target = target;
    this.hover(this.target);
    console.log("new"+this.target);
  }
  
  hover(target) {
    let $hoverTarget = $(target);
    let rolloverClass = 'hover';
    $hoverTarget.hover(
    //ここがイベントリスナー
      (event) => {
        $(event.currentTarget).addClass(rolloverClass);    
      },
      (event) => {
        $(event.currentTarget).removeClass(rolloverClass); 
      }
    )
  }
}

イベントオブジェクトとは

イベントリスナーで指定する関数の第一引数に、イベント・オブジェクトが入る。(event) => {} はfunction(event){}と同じ意味。

//ES6です
$hoverTarget.hover(
　(event) => {
    $(event.currentTarget).addClass(rolloverClass);    
    },
  (event) => {
    $(event.currentTarget).removeClass(rolloverClass); 
  }
)