Submit Search
Upload
俺的フロントエンド開発
•
40 likes
•
17,198 views
Kotaro Kawashima
Follow
諸般の事情により、俺の中にある漠然としたフロントエンド界隈のツールについてまとめたものを作ったので、一応SSにもあげておこう。
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 29
Recommended
Mustache入門
Mustache入門
ina job
WordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょう
Hishikawa Takuro
Rubyでオートマトン
Rubyでオートマトン
Yukimitsu Izawa
Backbone.js入門
Backbone.js入門
AdvancedTechNight
忙しい人のためのBackbone.jsとAngular.js入門
忙しい人のためのBackbone.jsとAngular.js入門
Toshiaki Maki
実践Backbone.Marionette 現場の悩みと解決まで
実践Backbone.Marionette 現場の悩みと解決まで
Ryuma Tsukano
introduction to Marionette.js (jscafe14)
introduction to Marionette.js (jscafe14)
Ryuma Tsukano
Guerrilla Research Methods - UX Lisbon 2011
Guerrilla Research Methods - UX Lisbon 2011
Russ U
Recommended
Mustache入門
Mustache入門
ina job
WordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょう
Hishikawa Takuro
Rubyでオートマトン
Rubyでオートマトン
Yukimitsu Izawa
Backbone.js入門
Backbone.js入門
AdvancedTechNight
忙しい人のためのBackbone.jsとAngular.js入門
忙しい人のためのBackbone.jsとAngular.js入門
Toshiaki Maki
実践Backbone.Marionette 現場の悩みと解決まで
実践Backbone.Marionette 現場の悩みと解決まで
Ryuma Tsukano
introduction to Marionette.js (jscafe14)
introduction to Marionette.js (jscafe14)
Ryuma Tsukano
Guerrilla Research Methods - UX Lisbon 2011
Guerrilla Research Methods - UX Lisbon 2011
Russ U
5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ
Kohei Kadowaki
ウェブ標準デバイス系 API 総集編 2014
ウェブ標準デバイス系 API 総集編 2014
Futomi Hatano
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
Kohei Kadowaki
モバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンス
yoshikawa_t
BACKBONE.JSによるWebアプリケーション開発について
BACKBONE.JSによるWebアプリケーション開発について
Toshio Ehara
Docker技術情報アップデート 2015年7月号
Docker技術情報アップデート 2015年7月号
Masahito Zembutsu
英語の組み立て方と学び方―高校英語へのステップアップ,その先へ
英語の組み立て方と学び方―高校英語へのステップアップ,その先へ
Thun der
はじめよう Backbone.js
はじめよう Backbone.js
Hiroki Toyokawa
Dockerのネットワークについて
Dockerのネットワークについて
Nobuyuki Matsui
sqldf for pandas
sqldf for pandas
airtoxin Ishii
pandasによるデータ加工時の注意点やライブラリの話
pandasによるデータ加工時の注意点やライブラリの話
Masashi Shibata
ログ勉 Vol.1
ログ勉 Vol.1
Kenji Kobayashi
SekainoKAO by TeamKAO
SekainoKAO by TeamKAO
Hideki
Go, memcached, microservices
Go, memcached, microservices
mosa siru
Django から各種チャットツールに通知するライブラリを作った話
Django から各種チャットツールに通知するライブラリを作った話
Yusuke Miyazaki
tse - Pythonによるテキスト整形ユーティリティ
tse - Pythonによるテキスト整形ユーティリティ
Atsuo Ishimoto
ssh_configのススメ
ssh_configのススメ
Hisaharu Ishii
PyLadies Tokyo - 初心者向けPython体験ワークショップ開催の裏側
PyLadies Tokyo - 初心者向けPython体験ワークショップ開催の裏側
Katayanagi Nobuko
Sphinxで作る貢献しやすいドキュメント翻訳の仕組み
Sphinxで作る貢献しやすいドキュメント翻訳の仕組み
Takayuki Shimizukawa
Ry pyconjp2015 karaoke
Ry pyconjp2015 karaoke
Renyuan Lyu
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
George Harada
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
Nishida Kansuke
More Related Content
Viewers also liked
5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ
Kohei Kadowaki
ウェブ標準デバイス系 API 総集編 2014
ウェブ標準デバイス系 API 総集編 2014
Futomi Hatano
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
Kohei Kadowaki
モバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンス
yoshikawa_t
BACKBONE.JSによるWebアプリケーション開発について
BACKBONE.JSによるWebアプリケーション開発について
Toshio Ehara
Docker技術情報アップデート 2015年7月号
Docker技術情報アップデート 2015年7月号
Masahito Zembutsu
英語の組み立て方と学び方―高校英語へのステップアップ,その先へ
英語の組み立て方と学び方―高校英語へのステップアップ,その先へ
Thun der
はじめよう Backbone.js
はじめよう Backbone.js
Hiroki Toyokawa
Dockerのネットワークについて
Dockerのネットワークについて
Nobuyuki Matsui
sqldf for pandas
sqldf for pandas
airtoxin Ishii
pandasによるデータ加工時の注意点やライブラリの話
pandasによるデータ加工時の注意点やライブラリの話
Masashi Shibata
ログ勉 Vol.1
ログ勉 Vol.1
Kenji Kobayashi
SekainoKAO by TeamKAO
SekainoKAO by TeamKAO
Hideki
Go, memcached, microservices
Go, memcached, microservices
mosa siru
Django から各種チャットツールに通知するライブラリを作った話
Django から各種チャットツールに通知するライブラリを作った話
Yusuke Miyazaki
tse - Pythonによるテキスト整形ユーティリティ
tse - Pythonによるテキスト整形ユーティリティ
Atsuo Ishimoto
ssh_configのススメ
ssh_configのススメ
Hisaharu Ishii
PyLadies Tokyo - 初心者向けPython体験ワークショップ開催の裏側
PyLadies Tokyo - 初心者向けPython体験ワークショップ開催の裏側
Katayanagi Nobuko
Sphinxで作る貢献しやすいドキュメント翻訳の仕組み
Sphinxで作る貢献しやすいドキュメント翻訳の仕組み
Takayuki Shimizukawa
Ry pyconjp2015 karaoke
Ry pyconjp2015 karaoke
Renyuan Lyu
Viewers also liked
(20)
5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ
ウェブ標準デバイス系 API 総集編 2014
ウェブ標準デバイス系 API 総集編 2014
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
モバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンス
BACKBONE.JSによるWebアプリケーション開発について
BACKBONE.JSによるWebアプリケーション開発について
Docker技術情報アップデート 2015年7月号
Docker技術情報アップデート 2015年7月号
英語の組み立て方と学び方―高校英語へのステップアップ,その先へ
英語の組み立て方と学び方―高校英語へのステップアップ,その先へ
はじめよう Backbone.js
はじめよう Backbone.js
Dockerのネットワークについて
Dockerのネットワークについて
sqldf for pandas
sqldf for pandas
pandasによるデータ加工時の注意点やライブラリの話
pandasによるデータ加工時の注意点やライブラリの話
ログ勉 Vol.1
ログ勉 Vol.1
SekainoKAO by TeamKAO
SekainoKAO by TeamKAO
Go, memcached, microservices
Go, memcached, microservices
Django から各種チャットツールに通知するライブラリを作った話
Django から各種チャットツールに通知するライブラリを作った話
tse - Pythonによるテキスト整形ユーティリティ
tse - Pythonによるテキスト整形ユーティリティ
ssh_configのススメ
ssh_configのススメ
PyLadies Tokyo - 初心者向けPython体験ワークショップ開催の裏側
PyLadies Tokyo - 初心者向けPython体験ワークショップ開催の裏側
Sphinxで作る貢献しやすいドキュメント翻訳の仕組み
Sphinxで作る貢献しやすいドキュメント翻訳の仕組み
Ry pyconjp2015 karaoke
Ry pyconjp2015 karaoke
Similar to 俺的フロントエンド開発
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
George Harada
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
Nishida Kansuke
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
Atsushi Tadokoro
Web programming introduction
Web programming introduction
colun
20080823-TransformingPlainTextToHtml
20080823-TransformingPlainTextToHtml
Koji SHIMADA
To write a better HTML
To write a better HTML
aotak
CloudFormation Getting Started with YAML
CloudFormation Getting Started with YAML
Yukitaka Ohmura
趣味でやるSmalltalk Webアプリ開発
趣味でやるSmalltalk Webアプリ開発
Kazuki Minamitani
141115 making web site
141115 making web site
Himi Sato
WebMatrixに対応した、新しいけど新しくないRazor
WebMatrixに対応した、新しいけど新しくないRazor
Sho Okada
Yapc::Asia 2011 rejectConf Slide
Yapc::Asia 2011 rejectConf Slide
Seiji Ohira
Similar to 俺的フロントエンド開発
(11)
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
Web programming introduction
Web programming introduction
20080823-TransformingPlainTextToHtml
20080823-TransformingPlainTextToHtml
To write a better HTML
To write a better HTML
CloudFormation Getting Started with YAML
CloudFormation Getting Started with YAML
趣味でやるSmalltalk Webアプリ開発
趣味でやるSmalltalk Webアプリ開発
141115 making web site
141115 making web site
WebMatrixに対応した、新しいけど新しくないRazor
WebMatrixに対応した、新しいけど新しくないRazor
Yapc::Asia 2011 rejectConf Slide
Yapc::Asia 2011 rejectConf Slide
More from Kotaro Kawashima
THE BEM: Better Css Naming Conventions
THE BEM: Better Css Naming Conventions
Kotaro Kawashima
jQuery.Deferredってシンプルなんだぜ
jQuery.Deferredってシンプルなんだぜ
Kotaro Kawashima
hachioji.pm #40 : asynchronous in JS
hachioji.pm #40 : asynchronous in JS
Kotaro Kawashima
Middleman Usecase / TokyouMiddlemanMeetup#1
Middleman Usecase / TokyouMiddlemanMeetup#1
Kotaro Kawashima
Hachiojipm #28
Hachiojipm #28
Kotaro Kawashima
Hachioji.pm No21
Hachioji.pm No21
Kotaro Kawashima
More from Kotaro Kawashima
(6)
THE BEM: Better Css Naming Conventions
THE BEM: Better Css Naming Conventions
jQuery.Deferredってシンプルなんだぜ
jQuery.Deferredってシンプルなんだぜ
hachioji.pm #40 : asynchronous in JS
hachioji.pm #40 : asynchronous in JS
Middleman Usecase / TokyouMiddlemanMeetup#1
Middleman Usecase / TokyouMiddlemanMeetup#1
Hachiojipm #28
Hachiojipm #28
Hachioji.pm No21
Hachioji.pm No21
俺的フロントエンド開発
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と、2つを同時に起動するのが煩雑 • これにJSコンパイラ入れたら3つも起動しなきゃいけな いダルい •
1つのアプリケーション起動で、それぞれ勝手に監視、 コンパイルしてほしい
12.
静的サイトジェネレータ • Grunt • Node.js製 •
コンパイルタスクを自分で記述する • JSON形式でタスクの設定を記述す る • 書きだされたファイルを参照する • Gulp • Node.js製 • コンパイルタスクを自分で記述する • JavaScriptのように、手続き的に記述 する • 書きだされたファイルを参照する • Middleman • Ruby製 • 設定より規約 • 書きだされるのはキャッシュ • rackサーバーがキャッシュを内部 的に静的ファイル化してブラウ ザに送る • TypeScript等Node.js系ライブラリ が使用できない • 俺はこれが好き
13.
JSフレームワーク • WebAPIからのレスポンスに対する表示処理を1から書 くの面倒 • 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