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

【連載】

イマドキのテキストエディタ事情

【第3回】HTML/CSS/JavaScriptに特化した「Brackets」

[2017/07/20 08:00]後藤大地 ブックマーク ブックマーク

開発ソフトウェア

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

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

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

Adobe Systemsが開発しているエディタBrackets

これまで取り上げてきたAtomSublime 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を編集するときにあると言ってもよいと思う。逆に言えば、それ以外のプログラミング言語の編集であればほかのエディタとそれほど大きな違いはみられないということだ。

Brackets使用例その1

Brackets使用例その2

Brackets使用例その3

Brackets使用例その4

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デベロッパにとって魅力的なエディタであることは間違いがない。最初のインストール後に表示されるチュートリアルドキュメントを読むだけでだいたいのことはできるようになると思うし、使ったことがないのであれば一度は触って欲しいエディタだ。

※ 本記事は掲載時点の情報であり、最新のものとは異なる場合がございます。予めご了承ください。

関連リンク

この記事に興味を持ったら"いいね!"を Click
Facebook で IT Search+ の人気記事をお届けします
2920
2
【連載】イマドキのテキストエディタ事情 [3] HTML/CSS/JavaScriptに特化した「Brackets」
もしあなたが、特にHTMLやCSS、JavaScriptを使った開発または編集を主に行っているのであれば知っておいた方がよいエディタがある。「Brackets」だ。
https://news.mynavi.jp/itsearch/2017/07/18/txe3/350-250.jpg
もしあなたが、特にHTMLやCSS、JavaScriptを使った開発または編集を主に行っているのであれば知っておいた方がよいエディタがある。「Brackets」だ。

会員登録(無料)

セキュリティ・キャンプ2017 - 精彩を放つ若き人材の『今』に迫る
ぼくらのディープラーニング戦争
クラウドアンケート
マイナビニュース スペシャルセミナー 講演レポート/当日講演資料 まとめ
人事・経理・総務で役立つ! バックオフィス系ソリューション&解説/事例記事まとめ

一覧はこちら

今注目のIT用語の意味を事典でチェック!

一覧はこちら

ページの先頭に戻る