Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

俺的フロントエンド開発

16 032 vues

Publié le

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

Publié dans : Ingénierie
  • Soyez le premier à commenter

俺的フロントエンド開発

  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

×