Bracketsというテキストエディタをご存じでしょうか？高機能なのにシンプルで使いやすく、初心者の方からベテランの方までファンが多いソフトです。
ここでは、Bracketsをこれから使用する方に向けて、基本的な概要や使い方、拡張機能などについてお伝えします。
Webデザインやコーディングに関わる方はご一読を。
Bracketsとは？
Brackets は、HTML、CSS、JavaScript用があります。この3つの言語以外にも、30以上の言語で用意されているため、一般的な言語であれば問題なく使用が可能です。
同じくGitHub上に公開されている拡張機能をインストールすることにより、自分好みのエディタにカスタマイズすることができます。
テキストエディタとしての特徴は？
多くの方に絶賛されているBrackets。では、テキストエディタとして、どんな特徴を備えているのでしょうか？
初心者のWebコーダーにもおすすめ
Bracketsは他のテキストエディタと違い、最初から日本語設定にできるため、インストールをして起動が済んだら、すぐに使用することができます。英語表記のまま探りながら作業する必要がないので、非常になじみやすいエディタです。
また、変更箇所をすぐにブラウザで確認できる「ライブプレビュー」や、カーソルを画像ファイル名の文字列にのせると該当の画像がポップアップで出てくる「ホバービュー」など、初心者がスムーズに作業を進められる便利機能があります。コードを折りたためる機能もついているため、作業しやすいでしょう。
オープンソース系のテキストエディタ
また、豊富な拡張機能（プラグイン）も無料で利用することができます。
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がお勧めと言えるでしょう。
コーディングをマスターするには？
Webデザインの経験がない初心者の方が、効率よく実践的な内容を身に着け、収入を得るにはデジハリ・オンラインスクールのWebデザイナー講座がお勧めです。
24時間視聴可能なオンライン動画で学ぶので、納得のいくまで何度でも制作手順を見て学ぶことができます。Dreamweaver CCをはじめとした必要となるソフトも学生価格で購入が可能。週2～3日でOKなので、お仕事をしながらでも学べます！