Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

俺的フロントエンド開発

15,295 views

Published on

諸般の事情により、俺の中にある漠然としたフロントエンド界隈のツールについてまとめたものを作ったので、一応SSにもあげておこう。

Published in: Engineering
  • Be the first to comment

俺的フロントエンド開発

  1. 1. 俺的フロントエンド開発 2015/02/26
  2. 2. • HTML/CSSプリプロセッサ • 静的サイトジェネレータ • JSフレームワーク • エディタ アジェンダ
  3. 3. HTML/CSSプリプロセッサ • HTMLとかCSSとか生で書くのが面倒くさい • 少しでもタイプ数を減らして書きたい • あわよくば変数とかループとか使いたい
  4. 4. HTMLプリプロセッサ • HAML • インデントベース • %body といったように、<>の代わりに%を使う • 行頭に-やら=やらを置くことで、制御構文や変数が使える • SLIM • インデントベース • HAMLに酷似 • 行頭文字列をタグとして扱う • テキストは行頭に|を置く • Jade • 使ったこと無いので分からない
  5. 5. HAML %html %head %body %div#main %ul.list %li This is text %li That is text / comment tag
  6. 6. SLIM html head body #main ul.list li |This is text li |That is text / comment tag
  7. 7. CSSプリプロセッサ • SASS • インデントベース • 記法が厳格 • {};が不要 • SCSS • インデント無視 • CSSを入れ子と変数に対応させ た感じ • CSSをそのままSCSSプリプロ セッサに わせてもエラーでな い • LESS • SCSSの記法違い、みたいな 感じ • 使ったこと無いので分から ない • Stylus • なんかもう自由にかけるや つっぽい • 使ったこと無いので分から ない
  8. 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. 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. 10. 使い方 • HAMLなりSLIMなりSASSなりをインストール • 黒い画面で、srcディレクトリ、destディレクトリを指定 して実行 • 監視モードで起動すれば、ファイルの更新を感知して 自動的にコンパイルしてくれる
  11. 11. 静的サイトジェネレータ • SLIMとSASSと、2つを同時に起動するのが煩雑 • これにJSコンパイラ入れたら3つも起動しなきゃいけな いダルい • 1つのアプリケーション起動で、それぞれ勝手に監視、 コンパイルしてほしい
  12. 12. 静的サイトジェネレータ • Grunt • Node.js製 • コンパイルタスクを自分で記述する • JSON形式でタスクの設定を記述す る • 書きだされたファイルを参照する • Gulp • Node.js製 • コンパイルタスクを自分で記述する • JavaScriptのように、手続き的に記述 する • 書きだされたファイルを参照する • Middleman • Ruby製 • 設定より規約 • 書きだされるのはキャッシュ • rackサーバーがキャッシュを内部 的に静的ファイル化してブラウ ザに送る • TypeScript等Node.js系ライブラリ が使用できない • 俺はこれが好き
  13. 13. JSフレームワーク • WebAPIからのレスポンスに対する表示処理を1から書 くの面倒 • APIのレスポンス(JSON)の対応関係を記述するだけ で、HTMLに反映して欲しい • 絞り込みやらソートやらも条件書くだけで済ませたい
  14. 14. JSフレームワーク • Angular.js • Backbone.js + Marionette.js • Vue.js • Knockout.js (使ったこと無いので分からない) • Ember.js(使ったこと無いので分からない) • React.js(使ったこと無いので分からない)
  15. 15. ANGULAR.JS • 多分日本で一番使われてるJSフレームワーク • HTML側にモデルと表示位置との対応関係を書くだけで 表示できる • 多機能らしい • あまりJS書かない人向け • 実装するシステムが複雑化すると使い勝手が悪い
  16. 16. BACKBONE.JS • 本当に共通化すべき最小限の機能だけを持つJSフレーム ワーク • バリバリJS書ける人が煩雑なところだけ省略したいと きに使うイメージ • モデルとの対応関係はJS側で記述する
  17. 17. MARIONETTE.JS • Backbone.jsの拡張フレームワーク • もうちょっと共通化出来そうなところを共通化したり、 機能追加したりしてる • Backbone.jsつかうなら、Marionette.jsも併用すべき
  18. 18. VUE.JS • Angular.jsっぽい、軽量JSフレームワーク • Angular.jsほど多機能ではないが、気軽に使うには充分 なほどの性能を持っている
  19. 19. HTMLエディタ • vim • emacs • eclipse (Aptana) • sublime text2 • ATOM • Brackets • DreamWeaver • Adobe Edge Code • Adobe Edge Reflow • Adobe Muse
  20. 20. VIM / EMACS • 言わずと知れたテキストエディタ • emacsは統合開発環境といったほうがいいかも • HTML書くのに特化しているわけじゃない • HTML的に便利というわけでもない • 使っている人がいたらそっとしておいてあげよう
  21. 21. ECLIPSE / APTANA • 言わずと知れたIDE • 高性能で品質はいいが、重い • HTMLに限ったIDEではないので、重いのに耐えられる なら使ってもいい
  22. 22. SUBLIMETEXT2 • Ruby界隈で大人気のテキストエディタ • トリッキーながら便利な機能がたくさん • エディタからプラグインがダウンロードできる • テキストエディタなので、HTMLに特化しているわけで はない
  23. 23. ATOM • GITHUB製のYet Another SublimeText的なテキストエディ タ • 便利らしい
  24. 24. BRACKETS • Adobe製のオープンソースHTMLエディタ • HTMLコーディングに特化 • まだかゆいところには手が届かない模様
  25. 25. DREAM WEAVER • 旧Macromedia製HTMLエディタ • HTMLコーディングに超特化 • HTMLに関することならなんでもできる • ライブビュー機能により、実装しながら結果を確認で きる • 重い
  26. 26. ADOBE EDGE CODE • BracketsにAdobe特有の機能を追加したもの • Bracketsにある機能がなかったり、Bracketsにない機能 (主に他Adobe製品との連携)があったり
  27. 27. ADOBE EDGE REFLOW • どちらかというとWYSIWYG的なエディタ • レスポンシブページを実装するのに特化 • 様々なウインドウサイズをグリグリ変えながら実装が できる
  28. 28. ADOBE MUSE • WYSIWYG的エディタ • サイトの構成を作ってから、各ページのデザインを作り こんでいく • ページテンプレートのような機能がある • モックアップを作るのには向いてる • 書きだされたソースコードが汚い(ホームページビルダー を彷彿とさせる • まだかゆいところには手が届かない / 重い
  29. 29. 結局どれを使うのがベターか • 適材適所 • 慣れ • 周りに知っている人、質問に答えられる人がいるかど うか • 俺の基本構成 • Vim / Middleman / Slim / Sass(Compass) /
 Backbone.js + Marionette.js orVue.js / jQuery / Sugar.js

×