Uploaded byKotaro Kawashima
俺的フロントエンド開発
諸般の事情により、俺の中にある漠然としたフロントエンド界隈のツールについてまとめたものを作ったので、一応SSにもあげておこう。
俺的フロントエンド開発
- 1.
- 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 Thatis text / comment tag
- 6. SLIM html head body #main ul.list li |This is text li |Thatis 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.
- 17. MARIONETTE.JS • Backbone.jsの拡張フレームワーク • もうちょっと共通化出来そうなところを共通化したり、 機能追加したりしてる •Backbone.jsつかうなら、Marionette.jsも併用すべき
- 18.
- 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 AnotherSublimeText的なテキストエディ タ • 便利らしい
- 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