Bracketsとは？

Bracketsとは、Adobe Systemsが開発しGitHub上に公開されている、オープンソースのテキストエディタのこと。無料で使用できます。

Brackets は、HTML、CSS、JavaScript用があります。この3つの言語以外にも、30以上の言語で用意されているため、一般的な言語であれば問題なく使用が可能です。

同じくGitHub上に公開されている拡張機能をインストールすることにより、自分好みのエディタにカスタマイズすることができます。

テキストエディタとしての特徴は？

多くの方に絶賛されているBrackets。では、テキストエディタとして、どんな特徴を備えているのでしょうか？

初心者のWebコーダーにもおすすめ

Bracketsは他のテキストエディタと違い、最初から日本語設定にできるため、インストールをして起動が済んだら、すぐに使用することができます。英語表記のまま探りながら作業する必要がないので、非常になじみやすいエディタです。

また、変更箇所をすぐにブラウザで確認できる「ライブプレビュー」や、カーソルを画像ファイル名の文字列にのせると該当の画像がポップアップで出てくる「ホバービュー」など、初心者がスムーズに作業を進められる便利機能があります。コードを折りたためる機能もついているため、作業しやすいでしょう。

オープンソース系のテキストエディタ

Bracketsはオープンソースで開発されていて、テキストエディタの中身（ソース）が公開されています。このソフトはHTML、CSS、JavaScript上で、ソースコードを編集して自分が使いやすいエディタに作り替えることが可能です。

また、豊富な拡張機能（プラグイン）も無料で利用することができます。

Bracketsの拡張機能

Bracketsにはさまざまな拡張機能が用意されており、その数は数100あると言われています。ここではベーシックな3つの拡張機能をみていきましょう。すべてGitHub、もしくはBrackets内からダウンロードができます。

Emmet

HTMLとCSSのコーディングスピードを大幅に改善するもので、拡張機能の中でもトップクラスの人気です。省略形のコードを入力するだけで、長いコードが展開されます。長いコードを打ち込む手間が省けるため、作業の効率が確実によくなるでしょう。

Color Hint

同じCSSファイル内で一度使用したカラーを記憶し、「#」を押すとコードヒントとしてリストアップしてくれます。これも作業の効率アップに欠かせません。

Beautify

この拡張機能を使用することにより、ごちゃごちゃになったコードが美しく整います。インデントなどをあらかじめ設定で決めておけば、自分好みに整えることが可能です。また、保存する度に自動で整うように設定することもできます。

Bracketsの主な使い方

Bracketsは、難しい初期設定が必要ないため、すぐに利用することが可能です。では、Bracketsの主な使い方をみていきましょう。

まず、PCに作業用フォルダを作成したら、Brackets内で作成したファイルを開きます。次にindexページを作っていきましょう。画面右下にあるファイルタイプをHTMLにし、コーディングをしていきます。済んだら名前をつけて保存し、ライブプレビューを起動。ブラウザが立ち上がり、今作ったページを確認することができます。プレビュー画面で修正したい部分を選択することにより、該当部分のコードが強調されるため、修正も簡単です。

同じようにCSSファイルも作ることができます。ファイルタイプをCSSに変更し、コーディング。終わったら名前をつけて保存し、先ほどと同じようにライブプレビューでチェックしましょう。

また、HTMLページとCSSファイルを横に並べて作業したい場合は、画面左側にある分割アイコンから可能です。

拡張機能は「ファイル＞拡張機能マネージャー」からインストールできるため、必要に応じて利用しましょう。

まとめ

無料で使用できて、日本語対応、そしてシンプルで高機能。Bracketsは魅力的なテキストエディタの1つです。

さまざまな拡張機能のおかげでカスタマイズもしやすく、自分の手になじむエディタにしあげることができます。使用していくうちに、作業の効率が驚くほどよくなっていることに気づくでしょう。どこまで自分のものにできるか、遊び心もくすぐるソフトです。ぜひ一度お試しください。

※2018/06/25追記

2017年にリリースされた同じAdobe社の有償ツールであるDreamweaver CCのエディター機能は、Bracketsをベースにしています。

使い勝手には若干の違いがあるものの、いずれのエディターもコードヒントや補完機能が充実しているため、素早くコードを書くことができます。例えば、CSSを編集しているとき、Bracketsではプロパティーの候補が表示されるだけですが、Dreamweaverではそのプロパティーの文法や定義されているCSS仕様（英文）も自動的に示されるため、軽快な動作とカスタマイズ性を求める上級者にはBrackets、補助機能を使ってスムーズにコーディングを行いたい初級～中級者にはDreamweaverがお勧めと言えるでしょう。

コーディングをマスターするには？