HTML・CSS・Javascriptを記述する際、かつてはDreamweaverを使っていました。Web系パソコンスクールに通っていた時もAdobe系のアプリケーションを使いましたし、それが当たり前と思い、特に疑問も持たずにいました。Adobe CCへの移行の際にDreamweaverは辞めて、無料で使えるテキストエディタを探したところBracketsと出会って、それ以降は愛用しています。Adobeが開発しているという事もありましたし、その良さは使っていくうちに身に沁みて実感していきました。
Bracketsには以下のような特徴があります。
- 無料
- 最初から日本語に対応
- 高機能なコードヒント
- ライブプレビュー
- 拡張機能で簡単にカスタマイズ
無料
Brackets自体がHTML・CSS・Javascriptで記述されたオープンソースで開発されており、誰でも無料で利用できます。Adobeなのに無料？と思いましたが、Dreamweaverとは違い、コードエディタ機能に絞ったものです。＜span class=”bold”>HTML・CSS・Javascriptを扱いたっかったのでBracketsは丁度良かったです。もちろん他のプログラム言語も扱えます。たまにですがRhinocerosのマクロを作る時もメモ帳代わりに使うことも。無料アプリケーションは数多くあれど、これほどお世話になったのは初めてです。
最初から日本語に対応
他のテキストエディタには初期設定は英語だったりしますが、Bracketsは最初から日本語設定にできるため、インストールが済んだらすぐに起動して使えます。英語表記の状態から日本語表記に変更するような事もなく、初心者でもなじみやすいエディタです。
高度なコードヒント
BracketsにはHTML・CSS・Javascriptなどのコードヒントや補完機能が充実しており、記述ミスを減らし、素早くコードを書くことができます。スペルをいい加減に覚えていてもコードヒントでたどり着けますし、リンクさせるファイルパスにも補完機能が効くのでとてもありがたいです。他にもHTMLのタグを記述する際に自動で終了タグが作られたり、CSSの編集に便利なクイック編集など、入力作業を強力にサポートしてくれます。
ライブプレビュー
BracketsからボタンひとつでブラウザのChromeを使って出来るライブプレビューはとても便利です。HTML・CSSの変更をリアルタイムでChrome>に反映して表示できます。Chromeの開発ツール(F12)からToggle device toolbar(Shift+Ctrl+M)でレスポンス対応プレビュー表示にしておけば、デバイスごとのレイアウトの確認も簡単です。また、プレビュー画面で変更したい箇所でクリックすれば、エディタ上でも連動して入力位置が変わるので、すぐに操作に入れます。Javascriptにおいては非同期ファイル読み込みがあっても問題なくプレビューされるので、WebGLにてモデルデータなどを取り扱う際には欠かせません。
拡張機能で簡単にカスタマイズ
Bracketsには追加でさまざまな拡張機能があり、Bracketsから簡単にインストールして使うことが出来ます。実際に利用しているのが以下のものです。
Custom Work
ファイルのタブ表示を追加して別のファイルに切り替えたりするのが便利。サイドバーの表示・非表示を切り替えるボタン、ファイル種類によってのアイコン表示など、Bracketsの表示をカスタマイズをしてくれます。
Beautify
HTML・CSS・Javascriptのコードを整形してくれます。 この機能のお陰でいつも気持ち良く作業ができます。
Paste and Indent
Beautifyに似てますが、こちらはペーストする位置から前後のコードの構造に合わせて整形とインデントしてくれます。
JS CSS Minifeir
CSS・Javascriptを圧縮化してくれます。Javascriptの記述方法によっては機能しないので注意が必要になります。こちらの方が詳しく解説してくれています。
Emmetという、HTMLとCSSのコーディングスピードを大幅に改善する人気の拡張機能もありますが、主にJavascriptを扱う場合は必要ないので今は使ってません。
この他にBracketsではテーマを変えることで背景色・文字色・フォントなどをまとめて変更できます。ダーク系のテーマにすると自分が凄腕プログラマーの仲間入りしたような感覚すら覚えますし、ダーク系は長時間の作業でも目にも優しいのでお薦めです。それからコーディングフォントというコーディングに適したフォント（源の角ゴシック Code JPなど）に変えると文字の視認性が飛躍的に良くなります。
実はMicrosoft製エディタのVisual Studio Codeも気になっており、シェーダープログラムを扱うようになったら便利な拡張機能があるので検討するかもしれもせんが、それまで愛用のコードエディタはBracketsで決まりです。
Bracketsが気になる方は、こちらからダウンロード