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


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

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

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

アニメーションを書きながら、対象のDOMの選定などのロジックを書くと、眠い時にわからなくなってくる。対象の選定のロジックと、アニメーションの内容は、切り分けたほうが、眠くても混乱しない。業務の上では眠くてもミスらないというのは非常に重要である。

実際にはcodepenのソース、51〜56行でアニメーションの対象、アニメーションの内容である色を確定している。確定した上で、アニメーションをトリガーしている。

この考察を鑑みて概念モデルを作ると以下のようになる

アニメーションの内容の確定→アニメーションの実行

根本的にはこの2つしか作業はない。そしてこの2つをつなぐのが、例ではjQueryのイベントトリガーとリスン、そしてstateである。stateには平たくいえば、どの対象をどんな風に処理するか、が記録される。

 

アニメーションの内容の確定をさせるためのファンクションがattachClickEvent()である。クリックイベントをDOMに紐付けるのは実は副次的なことでしかなく、本質的にはこのファンクションはアニメーションの内容を確定させるためにある。ユーザー操作であるクリックを起点としてはいるものの、結局のところどんなアニメーションをさせるのかをここで決定しているからだ。

アニメーションを確定させるために、何が必要だろうか。

ロジック内で判定のために使われる変数は、どこに保存すべきか

絶対にDOM側で持つしか無いもの

  1. どのDOMがクリック、ホバー、されたか
  2. スタイル(及びスタイルを時間変化させて起きるアニメーション)

これはJS側では全く感知できないことだから、DOM側に頼るしかない。一般的にこれが起点になる。のでロジックの冒頭はon(“click”)、on(“mouseEnter”)等になる。

絶対にJSのstate側でしか持てないもの

多分無い。がんばれば.classやdata-customでDOMに全て与えることができる。

JS側に持たせると厄介なもの=DOMに持たせたほうがいいもの

  1. 変化先の色とか。offsetの量など

全体像を図示してみる

ロジックのスタートをユーザーのアクションによってトリガーする場合、当然だがDOMとロジックをつなげる必要があり、これをon(“click”)等を使って実装する。

DOM及びjQOを扱う世界と、「DOM, jQOとは全く無関係なmetaDataの世界」は、完全には切り離しできず、癒着している。(これを完全に離そうとするとReactやVueのような実装になる)

ロジックの中では、$jQOを扱いつつ、$jQO.data(“custom”)等で完全なメタデータだけを引き剥がして、それをもとにロジックを進めたり、また$jQOに戻ったりする。その過程を通して、アニメーションの対象を$jQOで確定させ、内容も決める。

最後にアニメーションを、ロジックで決まった内容に従い実行する。

メモ

HTML,CSS — JS
DOM領域–メタ領域
.classで対象を取得 — date-custom でメタ情報を取得 — メタ領域へ

仮説

  • DOM領域へは.class等dom用の概念を通してしかアクセスできない
  • .each でjQueryObjectを捜査する場合、eachの中ではjQOが生きているので、常にアクセスできる。jQOがアクティブなまま、メタ情報にアクセスしてメタ情報元にロジックの分岐をさせる。その上で、決定したときのjQOにそのまま、アクセスして対象を決める。

 

Leave a Reply

Your email address will not be published. Required fields are marked *