HTML/CSS/JavaScriptに特化した「Brackets」

もしあなたが、特にHTMLやCSS、JavaScriptを使った開発または編集を主に行っているのであれば知っておいた方がよいエディタがある。「Brackets」だ。

今お気に入りのエディタがあったとしても、主な対象がHTML/CSS/JavaScriptなら一度は試してみた方がよいエディタである。今よりも効率的な編集が可能になるかもしれない。

BracketsはAdobe Systemsのエンジニアらが主体となって開発が進められているオープンソースの多機能エディタ。MITライセンスのもとで提供されており、GitHub.comでホスティングされている。実際にAdobe Systemsのエンジニアが日々の開発に使っているエディタでもあり、実用性に説得力のあるエディタだ。

これまで取り上げてきたAtomやSublime Textと同じように比較的新しいエディタで、Brackets自身がHTML、CSS、JavaScriptといった最新のWeb技術を使って構築されている。AtomやSublime Textが持っている特徴、いわゆるモダンなエディタが備えている機能はBracketsもひととおり押さえている。AtomやSublime TextのユーザであればBracketsも違和感なく使えるだろう。

AtomやSublime Textと比べた場合のBracketsの最大の特徴は、HTML、CSS、JavaScriptの編集に特化している点にある。AtomやSublime Textでももちろんこれらの編集はできるが、Bracketsはそこに集中している。AtomやSublime Textではパッケージを追加することで有効になるような機能が、Bracketsではデフォルトの状態で有効になっている。

逆にBracketsでもHTML、CSS、JavaScript以外のプログラミング言語には対応しているし、それらの開発に利用するのもまったく問題がない。しかし、真価はHTML、CSS、JavaScriptを編集するときにあると言ってもよいと思う。逆に言えば、それ以外のプログラミング言語の編集であればほかのエディタとそれほど大きな違いはみられないということだ。

HTMLやCSS、JavaScriptを編集するにあたって必要になる機能、ほかのエディタではパッケージをインストールして実現するような機能がBracketsでは最初から有効になっている。「Ctrl-E(MacではCmd-E)」を押すといろいろと便利な機能が出てくるのでひととおり触ってもらえればよく分かると思う。プレビュー機能や色の確認なんかも簡単にできる。こうした機能はWebブラウザの開発者向け機能を使っても実施できるが、コーディングと一体化しているところが特に便利だ。

はじめてBracketsを使う場合にAtomやSublime Textとの大きな違いは、Bracketsが最初から日本語に対応しているということだろう。AtomやSublime Textでも、不完全ながらもパッケージを使えばメニューやメッセージを日本語化することはできる。Bracketsではこれが最初から日本語になっている。英語が苦手な方にとってはこれはほかのエディタを比べて大きなアドバンテージになるはずだ。

また、Webブラウザとのライブ連動機能が搭載されている点も注目しておきたい。対象は今のところGoogle Chromeのみに限定されるが、Google Chromeを使っている場合には編集中のコンテンツをリアルタイムにGoogle Chromeでチェックできる。HTML、CSS、JavaScriptの編集に特化しているだけあって、このあたりの機能はぬかりなしといったところである。

Atomに比べると影に隠れがちなところがあるが、BracketsはHTMLやCSS、JavaScriptを編集する多くのWebデベロッパにとって魅力的なエディタであることは間違いがない。最初のインストール後に表示されるチュートリアルドキュメントを読むだけでだいたいのことはできるようになると思うし、使ったことがないのであれば一度は触って欲しいエディタだ。