http://qiita.com/advent-calendar/2014/frontrend
概論
ここ近年のモダンJSは特に理由がなければcommon.jsのrequireスタイルで記述され、webpack/browserifyでビルド/読み込むことを前提にしてよい。今やビュー層を除いてブラウザとnodeのライブラリの境界は非常に曖昧である。
識者諸君においては常にどちらの環境でも読み込めるようなライブラリを提供するように心がけることを切に願う。
今日はライブラリの名前しか出さないんで各自ググるように。
立場
- サーバサイド~ゲームプログラミング出身node寄りフロントエンドエンジニア
- このサイトのスタッフだけど他のことに手一杯でQiitaのフロントはまだそんなにいじってない すまんな 他ってなんだろうな
言語
- CoffeeScript
- TypeScript
最近DDDっぽい構成を目指しているのだけど、コアドメインをTypeScriptで書いて、それをUI層からCoffeeScriptで雑に呼ぶみたいな構成にしている。
なんだかんだでUI層は最初は雑に書きたい。UI層の開発イテレーションはトライアンドエラーを繰り返したい。
ビルドツール
- webpack
- gulp
webpackで完結できるときはgulpすら用意せずにwebpackのみにすることもある。gulpfileはcoffeeで書く。
ユーティリティ
- bluebird: Promise
- lodash.js: altenativeなunderscore実装
- moment.js: Datetimeユーティリティ
- jquery
underscoreではなくlodash使っているのは _.cloneDeep の存在が大きい。
jqueryは、本当は使いたくない。近年においてはjqueryプラグイン=低品質とほぼ同義である。
もはやjqueryとはグローバル依存に走る割れ窓であると言っても良い。仕方なくjqueryを生で書くときは、恥ずかしいと思って書いて欲しい。近年のモダンなフレームワークの中での開発と比較すると、jqueryコーディングはまるで外科手術のような形相を呈している。
自分はDOMを切り裂いて中をかき回す外科手術が必要なときに使う。
エディタ
- Vim
- Atom
- Sketch3
3ファイル以上編集しなきゃなーってなった瞬間Atom起動する感じ。
Sketch3はモック書くのに使うようになった。SVG出力で雑にアタリをつけたりもする。
gulpでよく使うプラグイン
- gulp-webpack
- gulp-shell
- gulp-concat
なんだかんだでコマンド実行するのとconcat必要になるケースが多いのでいつも入れてる。
ビルド系は全部webpackにまるなげしている。gulpでは触らない。
ただしtypescriptはHEAD使ってることが多いので、プラグインの対応が遅いので tsc -w でwatchさせてることが多い。
gulp-shellで shell(['./node_modules/.bin/tsc -w hello.ts']) とか書いてる。
ワークフロー
- tmux
- tmuxinator
- hub
- tig
- fish
- gyazo/gyazo gif
わざわざ言及する程でもないけどUnixに抵抗がない人間なのでGithub見に行くのとブラウザ使う以外はこのツールをぐるぐる回しつつ活動している。fishあたりにゲテモノ好き感が出てると思う。
WebStorage
- localforage
- minimongo
単純なキーバリューならlocalforage、IndexedDb使えて複雑なストレージを組むならminimongoを使う。
テスト
- mocha: node
- mocha-phantomjs: ブラウザテスト
- sinon
可能な限りヘッドレス(node)でテストする派。
nodeのときとスタイルを変えたくないのでmocha-phantomjsを使い続けているけど、正直そんな流行ってないしどうしようか感ある。
今はjest使いたい。power-assertはいつも導入迷ってるんだけど僕自身が色々あってASTに介入すること多くて相性悪い。すいませんt_wadaさん。
SVG
- snap.svg
これ便利なんで皆も使ってください。
CI
- drone.io
あんまり使ってる人いないけど僕は好きです。タダだし。
テンプレートエンジン
- jade
- react-jade
- coffeekup
- handlebars
jade使うとDOM/仮想DOMを吐きわけられるのが嬉しい。
html以外を生成するときは雑にhandlebars使ってることが多い。コードジェネレータ書くときとか。
CSSプリプロセッサ
- libsass
- ruby-sass
どっち使うかはクロスプラットフォームでcompass使いたいかによる。
素振りで適当に使う分なら高速なlibsassで十分。Ruby依存も発生しないし。
正直、僕はあんまり真面目にCSS書く人ではない。
仕事で真面目にやるときはマークアップする人に合わせる。
仮サーバー
$ python -m SimpleHTTPServer 8080
特に何も言ってないけど、昔から一貫してこれしか使ってない
悩んでいるもの
- Fluxフレームワーク
- クライアントサイドEventEmitter
- クライアントサイドルーター
- E2Eテストランナー
Protoractor… うーん
避けているもの
- Yeoman
- require.js
- Angular
- jQueryUI
- jQuery.Deferred
- grunt
Yeoman、自分が好みのスタックで書かれていたことが一度もないのでまともに使えたことがない。
gruntは…特に使わない理由はないのだけど、監視やビルドの並列化とかしだすとgulpに軍配があがる。
Angularは(以下略(「Angularが嫌い」でググってください
来年以降に頑張りたいもの
- flowtype
まとめ
今日はあえてReactに触れないようにしたけど少し漏れた。