Contenu connexe
Similaire à 俺的フロントエンド開発 (11)
Plus de Kotaro Kawashima (6)
俺的フロントエンド開発
- 4. HTMLプリプロセッサ
• HAML
• インデントベース
• %body といったように、<>の代わりに%を使う
• 行頭に-やら=やらを置くことで、制御構文や変数が使える
• SLIM
• インデントベース
• HAMLに酷似
• 行頭文字列をタグとして扱う
• テキストは行頭に|を置く
• Jade
• 使ったこと無いので分からない
- 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;
}
- 12. 静的サイトジェネレータ
• Grunt
• Node.js製
• コンパイルタスクを自分で記述する
• JSON形式でタスクの設定を記述す
る
• 書きだされたファイルを参照する
• Gulp
• Node.js製
• コンパイルタスクを自分で記述する
• JavaScriptのように、手続き的に記述
する
• 書きだされたファイルを参照する
• Middleman
• Ruby製
• 設定より規約
• 書きだされるのはキャッシュ
• rackサーバーがキャッシュを内部
的に静的ファイル化してブラウ
ザに送る
• TypeScript等Node.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的に便利というわけでもない
• 使っている人がいたらそっとしておいてあげよう
- 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