More Related Content
Similar to フロントエンド開発環境 (20)
フロントエンド開発環境
- 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 / 年間
- 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
- 25. LiveReload
• iOS デバイスにも対応
• 対応OS
– Mac OS X 10.6 以上
– Windows XP 以上(※ただしα版のみ)
• $9.99 (Mac App Store)
• ソースは Github 公開されている
– https://github.com/livereload/
LiveReload2
- 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