HTML5開発に適したIDEを探す（その6）「Brackets」
引き続きHTML5開発を目的としたIDEを紹介していきます。これまでに紹介してきたIDEは以下の通りです。
今回はAdobe社が開発するモダンなWebサイトを開発するためのエディタ、Bracketsを紹介します。元々テキストエディタという位置づけですが、補完入力やサーバ機能など、IDEと遜色ない機能を提供しています。
HTML5に対応
BracketsはHTML5に標準対応しています。HTMLタグもsectionやarticleなどHTML5から追加された名称についても入力補完が行えます。
新規ファイル作成またはフォルダを開いて、そこからファイルの作成、編集を行うようになっています。既存のフォルダがそのままプロジェクトルートとして使える形です。
入力補完
HTMLのタグ入力や、スタイルシートの要素は問題なく入力補完できます。JavaScriptでは他のファイルにあるオブジェクトは入力補完できませんが、同じファイル内であれば問題なく可能です。
ライブプレビュー
Bracketsのすごい機能の一つがこのライブプレビューです。HTMLやスタイルシートの編集がその場でリアルタイムに反映されます。ライブリロードとは異なり、再読込することなくデザインの修正が反映されます。Google ChromeのDevToolsで編集しているとの同じような感覚ですが、入力補完や編集のしやすさはテキストエディタならではで、かつファイルの保存も行えますのでDevTools上で編集するよりも便利です。
ブラウザはGoogle Chromeが対応しています。Brackets独自のHTTPサーバが立ち上がり、そのサーバを介してデザインの修正が反映されます。エディタでキャレットが当たっている部分のDOMがハイライトされるのでどこを編集すればいいかが一目で分かります。
定義ジャンプ
同一ファイル内で宣言された変数であればジャンプできます。他のファイルで定義されている変数はジャンプできませんでした。
ブレークポイントはありません
ブレークポイントを入れる機能はありません。ライブプレビューで立ち上がったChromeのDevToolsでデバッグする形になります。ただし、Theseusという強力なデバッガーが使えます。Theseusは関数のコールを追跡して、コール回数をビジュアル化してくれます。
この回数はJavaScriptを実行する度に更新されます。さらにその回数部分をクリックすると、変数の内容まで確認できます。つまりconsole.logのような差し込みが不要になります。コールバックの内容までとれるのが便利です。
多数の拡張機能
Bracketsはオープンソースということもあって、多くの拡張機能が開発されています。JSLint/JSHintやCoffeeScript/LESS/Sassもあります。Minimap生成であったり、Git対応拡張、各種テンプレート生成、Vagrant連携機能など多数の機能拡張がBrackets上で検索して、そのままインストールが可能です。
例えばJSLint拡張機能を入れた場合、JavaScriptファイルを開くと自動的にチェックが走るようになります。
他にもCoffeeScript拡張機能を入れると、保存したタイミングで自動生成してくれます。
QUnitが使えます
拡張機能の中にはQunit、Jasmineも用意されています。こちらもJavaScriptファイルを開くだけで自動テストを行ってくれます。
インラインエディタ
Brackets独自の機能で便利なのがインラインエディタです。HTMLファイルを開いて、タグのところでコマンド + Eを押すと、そのタグ/クラス/IDに対応するスタイルシート設定が開きます（なければ空で表示されます）。そしてそのままスタイルシートの設定が編集できます。
これはかなり便利で、ファイルを2つ開く必要がなかったり、該当部分のスタイルシートだけを表示できるので編集が容易というメリットがあります。
PSDファイルとの連携
Adobeと言えばPhotoshopですが、BracketsではそのPSDファイルをとても簡単に扱えるようにする機能がプレビューで追加されています。任意のPSDファイルを選び、スタイルシートやHTMLの中でPSDファイルの一レイヤーを指定して画像として取り出せるようになっています。わざわざ素材を切り出すことなく、Brackets上だけで作業が完了します。これはデザイナーとプログラマの連携を考える上でも便利でしょう。
Bracketsは基本的な機能は抑えつつ、さらに先進的なWeb開発の試みが多数行われています。拡張機能も豊富で、使いこなせば生産性が大きく向上するのではないでしょうか。日本語ローカライズも行われていますのですぐに使いこなすことができるでしょう。
2ヶ月に一回くらいの割合でバージョンアップしており、開発も盛んです。Bracketsを使いこなし、モダンなWeb開発に積極的に取り組んでください！
hifive開発者ブログ 
Trackbacks & Pingbacks
コメントは受け付けていません。