※当メディアは各種アフィリエイトプログラム（Amazonアソシエイト含む）に参加しています。
Web制作において、コードを書く環境は非常に重要で、無料かつ高機能なエディタを探している方におすすめなのが「Brackets（ブラケッツ）」！
この記事では「Brackets」とは何か、導入方法、基本的な使い方まで、わかりやすく解説していく。
Bracketsとは
Bracketsは、Adobe社によって開発されたオープンソースのテキストエディタであり、特にHTML、CSS、JavaScriptなど、Web開発に特化した機能を豊富に備えている。
2014年に正式リリースされて以来、多くのWeb開発者に愛用されており、軽量でシンプルなUIを持ちながら、ライブプレビューや拡張機能によって、効率的にコーディングができる点が特長である。
なお、Adobeは2021年にBracketsの公式サポートを終了したが、現在はオープンソースコミュニティによってメンテナンスが続けられているため、今でも問題なく使用できる人気のエディタの一つ。
おすすめポイント
Bracketsには、初心者から中級者まで幅広い層に嬉しい機能がいくつもあり、ここでは特に便利なポイントを紹介。
オープンソースで無料
Bracketsは完全無料で使用可能で、ライセンスの心配がなく、誰でも気軽にダウンロードして使用できるのは大きなメリットである。
ライブプレビュー機能
Brackets最大の特徴とも言えるのがライブプレビュー機能で、HTMLファイルをブラウザで開かなくても、編集した内容がそのままリアルタイムで反映されるため、デザインの確認が非常にスムーズ。 この機能のおかげでCSSの調整やテキスト変更のたびに保存してリロードする手間が省けるのはありがたい。
インライン編集機能
CSSのプロパティをHTML内から直接編集できるインライン編集もBracketsの魅力のひとつと言えよう。
例えば、HTMLの要素に関連づいたCSSがどこにあるかを探すことなく、<h1/div…>など変更したいタグにカーソルを合わせ、『Ctrl + E』で「クイック編集」を開き、スタイルを確認・編集することができる。
このインラインエディタ上でCSSを直に編集できるのがBracketsのスゴイところ！
導入方法
Bracketsのインストールは非常に簡単。以下の手順に従えば、数分でセットアップが完了。
※Bracketsのインストール前にGoogle Chromeのインストールを !!
BracketsではブラウザーにGoogle Chrome(クローム)をインストールしないと、Bracketsの便利な機能の1つであるライブプレビューが使用できないため注意。
ダウンロード
以下のサイトから、OSに対応したインストーラーをダウンロード。(今回はWindows)
インストール
ダウンロードしたインストーラーを実行し、同意規約に☑。セットアップタイプは「標準版」を選択し、あとは画面の指示に従ってインストール。（特別な設定は不要。基本的には「次へ」を押すだけで完了。 ）
起動
Bracketsを起動し、以下の画面が出れば導入完了。
（起動後は英語表記になっている場合があるが、拡張機能を使えば日本語化も可能（後述））
基本的な使い方と簡単な操作手順
ここでは、Bracketsの基本操作を簡単に紹介。
プロジェクトの作成とファイルの追加
「Ctrl + N」で新規ファイルを作成したり、「Ctrl + Alt + O」でフォルダを開く事が出来、保存は「Ctrl + S」でOK。
コーディングと保存
画面右下の赤枠「Text」ボタンをクリックして、メニューの中から該当するファイル種類を選択（例：HTML）。
認証されるとHTMLファイルと表示される。
ライブプレビューの使い方
HTMLファイルを開いた状態で、右上の稲妻アイコン（ライブプレビュー）をクリック。
デフォルトのブラウザでプレビュー画面が表示され、編集内容が即時に反映される。
拡張機能の追加
稲妻アイコン（ライブプレビュー）下にあるアイコンをクリックして、「拡張機能マネージャー」を開く。
「利用可能」タブからキーワードで検索し、好きな拡張機能をインストール（今回はBracketsを日本語化する拡張機能をインストール）
「japanese」と検索し、「Japanese Language Pack for Brackets」をインストールすると、再起動後、メニューが日本語に切り替わる。
まとめ
Bracketsは初心者に最適なWeb開発エディタであり、
「ライブプレビューによるリアルタイム確認 / インライン編集でスタイル調整がスムーズ / 拡張機能で自分好みにカスタマイズ / 無料で始められる安心感 」など初心者にとって理想的なツール。
これからWeb制作を始めたいという方、エディタ選びに迷っている方は、まずBracketsを導入して快適なコーディング環境を手に入れてみてはいかがだろうか。
コメント