1. 俺的フロントエンド開発
2015/02/26

2. • HTML/CSSプリプロセッサ
• 静的サイトジェネレータ
• JSフレームワーク
• エディタ
アジェンダ

3. HTML/CSSプリプロセッサ
• HTMLとかCSSとか生で書くのが面倒くさい
• 少しでもタイプ数を減らして書きたい
• あわよくば変数とかループとか使いたい

4. HTMLプリプロセッサ
• HAML
• インデントベース
• %body といったように、<>の代わりに%を使う
• 行頭に-やら=やらを置くことで、制御構文や変数が使える
• SLIM
• インデントベース
• HAMLに酷似
• 行頭文字列をタグとして扱う
• テキストは行頭に｜を置く
• Jade
• 使ったこと無いので分からない

5. HAML
%html
%head
%body
%div#main
%ul.list
%li
This is text
%li
That is text
/ comment tag

6. SLIM
html
head
body
#main
ul.list
li
|This is text
li
|That is text
/ comment tag

7. CSSプリプロセッサ
• SASS
• インデントベース
• 記法が厳格
• {};が不要
• SCSS
• インデント無視
• CSSを入れ子と変数に対応させ
た感じ
• CSSをそのままSCSSプリプロ
セッサに わせてもエラーでな
い
• LESS
• SCSSの記法違い、みたいな
感じ
• 使ったこと無いので分から
ない
• Stylus
• なんかもう自由にかけるや
つっぽい
• 使ったこと無いので分から
ない

8. SASS
@import “compass”
body
margin: 0
padding: 0
#main
border: 1px solid #000
+border-radius( 4px )
ul
&.list
li
display: inline-block
body{
margin: 0px;
padding: 0px;
}
#main{
border: 1px solid #000;
-ms-border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
#main ul.list li{
display: inlne-block;
}

9. SCSS
@import “compass”
body{
margin: 0;
padding: 0;
}
#main{
border: 1px solid #000;
@include border-radius( 4px );
ul{
&.list{
li{
display: inline-block;
}
}
}
}
body{
margin: 0px;
padding: 0px;
}
#main{
border: 1px solid #000;
-ms-border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
#main ul.list li{
display: inlne-block;
}

10. 使い方
• HAMLなりSLIMなりSASSなりをインストール
• 黒い画面で、srcディレクトリ、destディレクトリを指定
して実行
• 監視モードで起動すれば、ファイルの更新を感知して
自動的にコンパイルしてくれる

11. 静的サイトジェネレータ
• SLIMとSASSと、２つを同時に起動するのが煩雑
• これにJSコンパイラ入れたら3つも起動しなきゃいけな
いダルい
• 1つのアプリケーション起動で、それぞれ勝手に監視、
コンパイルしてほしい

12. 静的サイトジェネレータ
• Grunt
• Node.js製
• コンパイルタスクを自分で記述する
• JSON形式でタスクの設定を記述す
る
• 書きだされたファイルを参照する
• Gulp
• Node.js製
• コンパイルタスクを自分で記述する
• JavaScriptのように、手続き的に記述
する
• 書きだされたファイルを参照する
• Middleman
• Ruby製
• 設定より規約
• 書きだされるのはキャッシュ
• rackサーバーがキャッシュを内部
的に静的ファイル化してブラウ
ザに送る
• TypeScript等Node.js系ライブラリ
が使用できない
• 俺はこれが好き

13. JSフレームワーク
• WebAPIからのレスポンスに対する表示処理を１から書
くの面倒
• APIのレスポンス（JSON）の対応関係を記述するだけ
で、HTMLに反映して欲しい
• 絞り込みやらソートやらも条件書くだけで済ませたい

14. JSフレームワーク
• Angular.js
• Backbone.js + Marionette.js
• Vue.js
• Knockout.js （使ったこと無いので分からない）
• Ember.js（使ったこと無いので分からない）
• React.js（使ったこと無いので分からない）

15. ANGULAR.JS
• 多分日本で一番使われてるJSフレームワーク
• HTML側にモデルと表示位置との対応関係を書くだけで
表示できる
• 多機能らしい
• あまりJS書かない人向け
• 実装するシステムが複雑化すると使い勝手が悪い

16. BACKBONE.JS
• 本当に共通化すべき最小限の機能だけを持つJSフレーム
ワーク
• バリバリJS書ける人が煩雑なところだけ省略したいと
きに使うイメージ
• モデルとの対応関係はJS側で記述する

17. MARIONETTE.JS
• Backbone.jsの拡張フレームワーク
• もうちょっと共通化出来そうなところを共通化したり、
機能追加したりしてる
• Backbone.jsつかうなら、Marionette.jsも併用すべき

18. VUE.JS
• Angular.jsっぽい、軽量JSフレームワーク
• Angular.jsほど多機能ではないが、気軽に使うには充分
なほどの性能を持っている

19. HTMLエディタ
• vim
• emacs
• eclipse (Aptana)
• sublime text2
• ATOM
• Brackets
• DreamWeaver
• Adobe Edge Code
• Adobe Edge Reflow
• Adobe Muse

20. VIM / EMACS
• 言わずと知れたテキストエディタ
• emacsは統合開発環境といったほうがいいかも
• HTML書くのに特化しているわけじゃない
• HTML的に便利というわけでもない
• 使っている人がいたらそっとしておいてあげよう

21. ECLIPSE / APTANA
• 言わずと知れたIDE
• 高性能で品質はいいが、重い
• HTMLに限ったIDEではないので、重いのに耐えられる
なら使ってもいい

22. SUBLIMETEXT2
• Ruby界隈で大人気のテキストエディタ
• トリッキーながら便利な機能がたくさん
• エディタからプラグインがダウンロードできる
• テキストエディタなので、HTMLに特化しているわけで
はない

23. ATOM
• GITHUB製のYet Another SublimeText的なテキストエディ
タ
• 便利らしい

24. BRACKETS
• Adobe製のオープンソースHTMLエディタ
• HTMLコーディングに特化
• まだかゆいところには手が届かない模様

25. DREAM WEAVER
• 旧Macromedia製HTMLエディタ
• HTMLコーディングに超特化
• HTMLに関することならなんでもできる
• ライブビュー機能により、実装しながら結果を確認で
きる
• 重い

26. ADOBE EDGE CODE
• BracketsにAdobe特有の機能を追加したもの
• Bracketsにある機能がなかったり、Bracketsにない機能
（主に他Adobe製品との連携）があったり

27. ADOBE EDGE REFLOW
• どちらかというとWYSIWYG的なエディタ
• レスポンシブページを実装するのに特化
• 様々なウインドウサイズをグリグリ変えながら実装が
できる

28. ADOBE MUSE
• WYSIWYG的エディタ
• サイトの構成を作ってから、各ページのデザインを作り
こんでいく
• ページテンプレートのような機能がある
• モックアップを作るのには向いてる
• 書きだされたソースコードが汚い（ホームページビルダー
を彷彿とさせる
• まだかゆいところには手が届かない / 重い

29. 結局どれを使うのがベターか
• 適材適所
• 慣れ
• 周りに知っている人、質問に答えられる人がいるかど
うか
• 俺の基本構成
• Vim / Middleman / Slim / Sass(Compass) /
Backbone.js + Marionette.js orVue.js / jQuery / Sugar.js