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

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

More than 3 years have passed since last update.

QiitaではjavascriptはSPAやフレームワークありきのサービス志向が多いけれど、そうじゃないWebサイトの作り方はあまり載っていない説。

サービス系じゃないペラのWebサイトなどを作るJavascriptの考え方をまとめてみます。

最近のjsはMVCとかFLUXとかいって複雑化しすぎていっているので、そのへん捨てて、かつての気楽なフロントエンドJSを取り戻しましょう。

ビルドシステム

特別なことが無い限り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ありきの考え方なんかなー。
とおもうけど、とても楽ちん。

Why do not you register as a user and use Qiita more conveniently?
  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
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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