ビルドシステム

特別なことが無い限りgulp+browserify+babelでビルドします。

設計

ペラのサイトではOOPなんてコストなだけ。
結局jQueryでゴネるのを重ねるのにOOPはあまりにも高級すぎでは？。

jQueryでゴネる部分は、関数型プログラミングっぽく処理を連結していって、
部分部分で、OOPで作ったプラグインを入れ込んでいくのがスマートな気がする。

processes.js

//処理をパーツに分けてObjectに格納。
export const cue = {
  getApi(){
    return new Promise((resolve, reject)=>{
      $.get("/api.json")
        .done(resolve)
        .fail(reject)
    })
    console.log(1)
  },
  firstProcess(){
    //直列でjqueryなりプラグインなり
    console.log(2)
  },
  asyncProcess(){
    //api受け取って反映ごにょ
    console.log(3)
  },
};

こんなかんじでプロセス書いていって。

main.js

import {cue} from "processes.js"

(function(){
  cue.getApi()
    .then(cue.asyncProcess)
    .catch(console.error)

  cue.firstProcess()
})()

こんな感じで実行。
処理のフローだけを書くことに集中する。
複雑な値の受け渡しはしないように注意。あくまでも直列に考える。

ちょっとでもめんどくさい処理はすぐに、classに分割してプラグイン化

※こうすることにより、処理のフローとロジックを分ける事ができる。
※単体テストもやろうと思えば簡単。
※結局ペラサイトはいかにjQueryを繋げるか芸なので、極端な話インラインでつらつら書いてもなんとかなる。

New featuresの使いドコロ

class

classのskeltonです

class.js


import {Vector3} from "vector"

exports default class Point extends Vector3{
  constructor({x,y,z}){
    super(x,y,z)
    /* code */
  }
}

ポイント
1. class定義ファイルはdefault一個だけexportする。
2. 引数は、Object matchingで受け取る。
3. モジュールだよ！モジュール！

async/awaitどうするか。

ペラサイトにおいてのasync/awaitは, ajaxじゃなくてtween。
このへんの処理の流れを綺麗に書ける人はイケてるエンジニア。

じゃあ、TimelineMaxでってなるかもしれんけど、そんなにアニメーション連結させてどうすんだって。Webサイトじゃなくてアニメーション作品じゃねーか。

ってなるので、そこは async.js / Promise / Generator を使いこなすのがナウい。

tweens.js

import {Tween} from TWEEN

//Tweenを分けてObjectに格納。
const tweenCue = {
  tw11(){ return new Promise(resolve=>{
    // なんかTweenのアニメーション1
    // onUpdate = resolve
  })},
  tw12(){ return new Promise(resolve=>{
    //なんかアニメーション2
  })},
  tw21(){
    //なんかアニメーション3
  },

  //generator
  *start(){
    // 一回目
    this.tw11()
      .then(this.tw12)

    yield //一回目はココで止まる

    //二回目はここからスタート
    this.tw21()
  },
};

//とある箇所で
tweenCue.start().next()

作るときはちょっとめんどくさいけど、呼び出す側がシンプルに。
アニメーションは、パラメーター調整のしやすさが鍵なのでちょっとコードが面倒でも我慢しよう。あとで楽になるはず。

アニメーションのパラメーターは後で動的に変えられるように、別ファイルに格納すると調整が効きやすい。もちろん、こだわりたいのであればの話だけど。

余談

processingやoFを書くときに近い。
あれに近いことやればいいじゃんってのが、発想のもと。

意外とやってる人いない。（ようなきがする。）

あと、THREE.JSとかPIXI.JSとかはフルフルでOOPしないときつい。

上で書いた話ってjqueryありきの考え方なんかなー。
とおもうけど、とても楽ちん。

ペラ系WebのJavascriptヨハプラクティス

ビルドシステム

設計

New featuresの使いドコロ

class

async/awaitどうするか。

余談