HTML5開発に適したIDEを探す（その3）「Google Chrome Workspaces」

Visual Studio、WebStormに引き続き、今回もHTML5/CSS3/JavaScriptによるWebシステム開発をサポートしたIDEを紹介します。今回は開発に特化したという訳ではありませんが、Webシステム開発を十分にこなせる存在になってきたGoogle Chrome Workspacesを紹介します。単体ではまだ物足りない機能がありますが、機能拡張を組み合わせることでIDEとして十分な性能になってきています。

セットアップ

Google Chrome Workspacesでは、DevToolsを使ってローカルフォルダを登録するところから開始します。まずはDevToolsを開いて、SourcesタブにてAdd Folder to Workspaceを選択します。

そしてローカルのフォルダを登録すると、フルアクセスを求める通知が出ますので許可します。

許可するとこのようにSourcesにフォルダが登録されます。

Webサーバを立てる

まずWeb開発をはじめるに当たって必要なのがWebサーバです。そこで使えるのがGoogle ChromeアプリとしてリリースされているWeb Server for Chromeです。このChromeアプリをインストールするとローカルのフォルダを指定してWebサーバを立てることができます。または後述するGruntタスクを実行するChrome機能拡張を使っても良さそうです。

インストールが終わってWebサーバを立てると、このように8887番ポートでサーバが立ち上がります。

Webサーバ上のファイルとローカルファイルをマッピングする

このままですとローカルのファイルを編集して、それをWebサーバを経由して確認するだけですが、さらにWebサーバ上のファイルをローカルのファイルとマッピングさせることで、オートリロードのような機能も使えるようになります。

そのためにはWeb上のファイルをSourcesタブで右クリックして、Map to File System Resourcesを選択します。

そしてファイルをマッピングさせることで、ローカルのファイルを編集するとWebサーバ経由の表示をリロードしてくれるようになります。相対パスのJavaScriptファイルも編集すると自動リロードが行われます。

ただしこの編集はWorkspace上で行われないといけないので、CoffeeScriptからJavaScript生成といったようなGoogle Chrome外での編集の場合はうまく動かないようです。

高度なデバッグ機能

Google ChromeのDevToolsは言うに及ばず高機能です。ブレークポイント、ウォッチなど機能も多彩です。Workspace経由でのファイル編集に慣れてしまえば後はブレークポイントを仕込んでどんどん開発が進められます。

Gruntを使いこなす

Gruntを使ってライブラリやファイル生成を行っている場合、Grunt Devtoolsを使うことでGoogle ChromeからGruntのタスクを実行できるようになります。

ただし予めnpmで grunt-devtools をインストールし、gruntfile のふぁいるディレクトリで grunt-devtools を実行しておく必要があります。タスクは一回実行の他、watchのようなバックグラウンド実行にも対応しています。

gruntfileが編集できる訳ではないので（編集してもgrunt-devtoolsを再実行しないといけないので）、コンソールは手放せませんが、普段の開発時にはとても便利なツールです。

JSHintを使う

JSHintについては JSHint for Chrome Dev Tools という機能拡張があります。別途フラグの設定が必要なのでChromeストアでは配布されていません。

表示したタイミングでJavaScriptのチェックを行ってくれるようになります。ただし出力される行数がDevToolsの該当行にジャンプできないのが難点かも知れません。

スマートフォン向けの開発も簡単

DevToolsではスマートフォンの画面サイズにシミュレーションしたり、タッチ操作を起こせるようになっています。傾きや位置情報をダミーで与えることもできます。スマートフォンやタブレット向けの開発も簡単にできるのは大きな利点です。

テーマ変更

DevToolsにはカラーテーマも多数公開されています。白黒だけでなく、可読性を高めるためのテーマがありますのでChromeストアで探してみると良いでしょう。

ネットワーク、DOM構築の監視

通常のIDEでは難しい各リソースの読み込みタイミングやJavaScriptやDOM処理にかかった時間も簡単に計測ができます。よりパフォーマンスの高いWebアプリケーション開発には欠かせない機能と言えます。

検索

Ctrl + Shift + Fまたはコマンド + Alt + Fを押すとワークスペース以下でのファイル検索ができます。正規表現も利用可能で、検索結果をクリックすると該当行にジャンプできます。

その他

定義ジャンプのような機能はありませんでした。大型化するとどこで定義されているのか分からないのは不利かも知れません。また、サーバサイドの仕組みがある訳ではないので、サーバサイドの仕組みを想定した作りには向いていません。CORSやJSONPを使うことになるかと思います。

---

HTML5のWebアプリケーションを開発する上でGoogle Chromeをデバッグ環境に利用している方は多いと思います。Workspacesを使うことでそれをさらに一歩進めて開発自体行えるようになります。

Google Chrome Workspaces単体では他のIDEと比べて見劣りするかと思いますが、さらにそこに機能拡張を合わせることで十分な機能を備えるようになります。Google Chrome Workspacesを使うことで強力なデバッグ環境と開発環境を統一してみるのは面白そうです。

Workspaces – Persistent authoring in the DevTools – Google Chrome