フロントエンド開発環境について

1. フロントエンド開発環境
masaki-k

2. 自己紹介
• 川口 真生(かわぐち まさき)
• 普段は PC向け/スマフォ向けのフロント
エンド(HTML/CSS/JavaScript)の
開発をやっています

3. Agenda
• フロントエンドの開発で重宝している
ツールの紹介
– WsbStorm
– LiveReload

4. WebStorm

5. WebStorm
• http://www.jetbrains.com/
webstorm/
• JetBrains製のWeb開発に特化したIDE
• クロスプラットフォーム対応
– Windows (7/Vista/2003/XP/2000)
– Mac OS X (10.5 以上)
– Linux (GNOME/KDE + JDK/Open JDK)
• $49 / 年間

6. WebStorm

7. コード補完/リファクタ
• 静的コード解析による補完機能
• ブラウザネイティブなAPIだけでなく
任意のライブラリの補完にも対応
• エディタ内に現れるバルブをクリックする
とリファクタ補助機能が表示

11. コード品質管理
• JSLint / JSHint が同梱されており、
編集しながらコードの品質管理が可能

13. Live Template
• Live Template
+ Zen Coding(HTML/CSS/XSL)
– 普段よく使うスニペットをショートカットと
ともに登録
– Zen Coding ははじめから登録されている

16. デバッガー
• Firefox / Google Chrome に接続して
JavaScript のデバッグが行える
– Firefox には、専用アドオンから
– Google Chrome には、Remote Shell
機能から

18. JSテストフレームワーク同梱
• Google 製 JS テストフレームワークの
jsTestDriver が同梱
– http://code.google.com/p/js-test-
driver/
– 一度に複数のブラウザのテストが行える
• IDE 内の操作のみで jsTestDriver
サーバを起動
• テスト時のコードカバレッジも測定可能

19. jsTestDriver のイメージ
0. 各ブラウザ jsTestDriver Server に接続 2. 各ブラウザにテストコード実行
Chrome
1. テスト実行 3. 各ブラウザから結果を回収
WebStorm jsTestDriver
IE
Server
4. 結果を表示
Mobile
Safari

22. その他にもいろいろ

23. LiveReload

24. LiveReload
• http://livereload.com/
• ファイルの変更を監視
• 変更を検知したら WebSocket 経由でブ
ラウザ自動リロード
• 自動リロードを有効にするには
LiveReload 用スニペットを追記が必要
• 各ブラウザ拡張をインストールすることで
既存コードへの変更不要

25. LiveReload
• iOS デバイスにも対応
• 対応OS
– Mac OS X 10.6 以上
– Windows XP 以上(※ただしα版のみ)
• $9.99 (Mac App Store)
• ソースは Github 公開されている
– https://github.com/livereload/
LiveReload2

27. JavaScriptメタ言語自動コンパイル
→ JavaScript

28. CSSメタ言語自動コンパイル
→ CSS

29. HTMLテンプレートを自動展開
→ HTML
Eco

31. 任意スクリプトも実行可能
• ファイルの変更検知が行われた時、
任意のスクリプトを実行可能
• 例えば
– テストランナーの実行
– 自動コミット
– Sphinx ドキュメントのビルド 等々

32. まとめ
• フロントエンドの開発で重宝している
ツールの紹介
– WsbStorm
• クロスプラットフォームでフロントエンド開発で
必要となってくる機能がてんこ盛り
• 今だけ半額 $29 !!
– LiveReload
• 編集→リロードの手間を省力化
• 各種メタ言語のコンパイルの手間を省力化

33. 参考
• HTML テンプレート
– http://haml.info
– http://jade-lang.com
– http://slim-lang.com/index.html
– https://github.com/sstephenson/eco
• Javascript メタ言語
– http://coffeescript.org
– http://maxtaco.github.com/coffee-script
• CSS メタ言語
– http://lesscss.org
– http://sass-lang.com
– http://compass-style.o
– http://learnboost.github.com/stylus