0
フロントエンド開発環境   masaki-k
自己紹介•  川口 真生(かわぐち まさき)•  普段は PC向け/スマフォ向けのフロント   エンド(HTML/CSS/JavaScript)の   開発をやっています
Agenda•  フロントエンドの開発で重宝している   ツールの紹介 –  WsbStorm –  LiveReload
WebStorm
WebStorm•  http://www.jetbrains.com/   webstorm/•  JetBrains製のWeb開発に特化したIDE•  クロスプラットフォーム対応  –  Windows (7/Vista/2003/XP/2...
WebStorm
コード補完/リファクタ•  静的コード解析による補完機能•  ブラウザネイティブなAPIだけでなく   任意のライブラリの補完にも対応•  エディタ内に現れるバルブをクリックする   とリファクタ補助機能が表示
コード品質管理•  JSLint / JSHint が同梱されており、   編集しながらコードの品質管理が可能
Live Template•  Live Template   + Zen Coding(HTML/CSS/XSL) –  普段よく使うスニペットをショートカットと    ともに登録 –  Zen Coding ははじめから登録されている
デバッガー•  Firefox / Google Chrome に接続して   JavaScript のデバッグが行える –  Firefox には、専用アドオンから –  Google Chrome には、Remote Shell    機能から
JSテストフレームワーク同梱•  Google 製 JS テストフレームワークの   jsTestDriver が同梱 –  http://code.google.com/p/js-test-    driver/ –  一度に複数のブラウザの...
jsTestDriver のイメージ0. 各ブラウザ jsTestDriver Server に接続      2. 各ブラウザにテストコード実行                                                C...
その他にもいろいろ
LiveReload
LiveReload•  http://livereload.com/•  ファイルの変更を監視•  変更を検知したら WebSocket 経由でブ   ラウザ自動リロード•  自動リロードを有効にするには   LiveReload 用スニペッ...
LiveReload•  iOS デバイスにも対応•  対応OS –  Mac OS X 10.6 以上 –  Windows XP 以上(※ただしα版のみ)•  $9.99 (Mac App Store)•  ソースは Github 公開され...
JavaScriptメタ言語自動コンパイル         → JavaScript
CSSメタ言語自動コンパイル      → CSS
HTMLテンプレートを自動展開      → HTML    Eco
任意スクリプトも実行可能•  ファイルの変更検知が行われた時、   任意のスクリプトを実行可能•  例えば –  テストランナーの実行 –  自動コミット –  Sphinx ドキュメントのビルド 等々
まとめ•  フロントエンドの開発で重宝している   ツールの紹介 –  WsbStorm   •  クロスプラットフォームでフロントエンド開発で      必要となってくる機能がてんこ盛り   •  今だけ半額 $29 !! –  LiveRe...
参考•  HTML テンプレート  –    http://haml.info  –    http://jade-lang.com  –    http://slim-lang.com/index.html  –    https://git...
フロントエンド開発環境
フロントエンド開発環境
フロントエンド開発環境
フロントエンド開発環境
フロントエンド開発環境
フロントエンド開発環境
フロントエンド開発環境
フロントエンド開発環境
フロントエンド開発環境
フロントエンド開発環境
フロントエンド開発環境
Upcoming SlideShare
Loading in...5
×

フロントエンド開発環境

1,459

Published on

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

Published in: Technology

Transcript of "フロントエンド開発環境"

  1. 1. フロントエンド開発環境 masaki-k
  2. 2. 自己紹介•  川口 真生(かわぐち まさき)•  普段は PC向け/スマフォ向けのフロント エンド(HTML/CSS/JavaScript)の 開発をやっています
  3. 3. Agenda•  フロントエンドの開発で重宝している ツールの紹介 –  WsbStorm –  LiveReload
  4. 4. WebStorm
  5. 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. 6. WebStorm
  7. 7. コード補完/リファクタ•  静的コード解析による補完機能•  ブラウザネイティブなAPIだけでなく 任意のライブラリの補完にも対応•  エディタ内に現れるバルブをクリックする とリファクタ補助機能が表示
  8. 8. コード品質管理•  JSLint / JSHint が同梱されており、 編集しながらコードの品質管理が可能
  9. 9. Live Template•  Live Template + Zen Coding(HTML/CSS/XSL) –  普段よく使うスニペットをショートカットと ともに登録 –  Zen Coding ははじめから登録されている
  10. 10. デバッガー•  Firefox / Google Chrome に接続して JavaScript のデバッグが行える –  Firefox には、専用アドオンから –  Google Chrome には、Remote Shell 機能から
  11. 11. JSテストフレームワーク同梱•  Google 製 JS テストフレームワークの jsTestDriver が同梱 –  http://code.google.com/p/js-test- driver/ –  一度に複数のブラウザのテストが行える•  IDE 内の操作のみで jsTestDriver サーバを起動•  テスト時のコードカバレッジも測定可能
  12. 12. jsTestDriver のイメージ0. 各ブラウザ jsTestDriver Server に接続 2. 各ブラウザにテストコード実行 Chrome 1. テスト実行 3. 各ブラウザから結果を回収 WebStorm jsTestDriver IE Server 4. 結果を表示 Mobile Safari
  13. 13. その他にもいろいろ
  14. 14. LiveReload
  15. 15. LiveReload•  http://livereload.com/•  ファイルの変更を監視•  変更を検知したら WebSocket 経由でブ ラウザ自動リロード•  自動リロードを有効にするには LiveReload 用スニペットを追記が必要•  各ブラウザ拡張をインストールすることで 既存コードへの変更不要
  16. 16. LiveReload•  iOS デバイスにも対応•  対応OS –  Mac OS X 10.6 以上 –  Windows XP 以上(※ただしα版のみ)•  $9.99 (Mac App Store)•  ソースは Github 公開されている –  https://github.com/livereload/ LiveReload2
  17. 17. JavaScriptメタ言語自動コンパイル → JavaScript
  18. 18. CSSメタ言語自動コンパイル → CSS
  19. 19. HTMLテンプレートを自動展開 → HTML Eco
  20. 20. 任意スクリプトも実行可能•  ファイルの変更検知が行われた時、 任意のスクリプトを実行可能•  例えば –  テストランナーの実行 –  自動コミット –  Sphinx ドキュメントのビルド 等々
  21. 21. まとめ•  フロントエンドの開発で重宝している ツールの紹介 –  WsbStorm •  クロスプラットフォームでフロントエンド開発で 必要となってくる機能がてんこ盛り •  今だけ半額 $29 !! –  LiveReload •  編集→リロードの手間を省力化 •  各種メタ言語のコンパイルの手間を省力化
  22. 22. 参考•  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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×