Web開発が加速する！Adobe製無償テキストエディター「Brackets」

一昔前はプロプライエタリ・ソフトウェアが一般的だったテキストエディターも、多くがOSS(オープンソースソフトウェア)化を選択するようになった。アジャイル開発が進む開発の現場でも「Atom」など、OSS製テキストエディターを選択する場面が増えているが、今回取り上げるのはAdobe SystemsがOSSとして公開している「Brackets」である。

HTMLやCSS、JavaScriptのコーディングに特化したOSS製テキストエディターとして、2011年12月から開発をスタートし、2016年6月には最新版となるバージョン1.7をリリースしたばかりだ。ソースコードはもちろん、Windows版やmacOS版に限らずLinux版(Debパッケージ)をGitHub上で公開している。使用環境を選ばないところも高い評価を得る理由の1つだろう。

Adobe SystemsはBracketsを「HTML/CSS/JavaScript用のコードエディター」と称しているが、PHP、Ruby、Pythonなど多くのシンタックスハイライトを用意している。だが、後述する機能を俯瞰(ふかん)すると、やはりWeb開発の利便性を向上させるテキストエディターと評すべきだろう。

Brackets最大の特徴となるのが、ライブプレビュー機能だ。編集中のHTMLファイルやindex.htmlファイルを含むCSSファイルに対して実行すると、Webブラウザーでリアルタイム表示するというもの。現バージョンはGoogle Chromeが必要となるが、＜ファイル＞メニュー→＜試験ライブプレビューを有効にする＞を選択するか、brackets.jsonの「"livedev.multibrowser": true」にすることで、Microsoft Edgeなども使用可能だ。

もちろん単にHTMLファイルをWebブラウザーで開くのではない。Adobe Systemsによれば、ローカルブラウザーにライブ接続し、編集結果をリアルタイムで表示する。つまりBrackets側でコードや文章を書き換えれば、そのままWebブラウザー上の表示内容も即時反映されるというものだ。これまで保存とリロードを繰り返してきたWeb開発者には大きなポイントとなるだろう。また、HTMLやCSSの編集内容がWebページ上でどのように表示されるのか、簡単に確認できるハイライト機能も使いやすい。なお、開発チームの説明によれば、リアルタイムで確認できるのはHTML/CSSファイルのみ。JavaScriptファイルに対してはリロードを要する。

Bracketsは他のテキストエディターと同じく、ブロックごとに折りたたみや展開、括弧のマッチングなど作業効率を向上させる機能を多数備えているが、"Web開発に特化"したテキストエディターと呼ばれる理由は、クイック編集機能の存在だ。ID名やCLASS名、HTMLタグ上でクイック編集を実行すると、適用しているスタイルを取得して直接編集できる。このクイック編集はCSSに限らず、配色やCSSアニメーション(cubic-bezier()やsteps()など)、JavaScript関数にも使用可能だ。その他にも画像や配色に関してはマウスカーソルを重ねると小さなウィンドウで表示するホバークイックビュー機能も用意している。