今回は、便利な無料エディタ「 Brackets - Webデザインを認識する最新のオープンソーステキストエディター」のご紹介です！
HTMLを始めると、テキストエディタ選びをする機会がありますよね。
私が初心者のころ、一番最初に使っていたのは、 Terapadというシンプルなテキストエディタでした。
数年後にようやくAdobeのDreamweaverを使い始めるようになり作業スピードがぐんと上がったわけですが、いまいち動作が重かったり、ライブプレビューがへんてこになってたりで不便を感じ、何とか簡単に更新できないものかと考え、最終的にファイル共通化のために簡単なphpを使いだすようになりました。効率化をしっかりと考えるようになったのは、ある意味Dreamweaverのおかげですね！
その後、Web制作をしている方からのすすめで Sublime Textを使用するようになり、軽いし(重要)プラグインも豊富だし便利で快適に作業できる環境になりました！
当時はメジャーな上に有料のDreamweaverがあるのに他のアプリを使うことは考えていなかったので、本当にありがたかったです。
その後 VScodeや Atomもすすめられ使用したのですが、なんとなくSublime Textから切り替える意味が見出せず結局ずっと使っていた感じです。
それからというもの特に困っていた訳ではないのですが、ふと「自分でエディタを比較したことがないなぁ」と思い色々試してみたところ、
「Brackets」が思った以上に良くて驚きました！
BracketsはSublime Textのようにプラグインで機能をカスタマイズできるようになっているのですが、これからエディタ選びをする方やHTMLコーディングを勉強するという方には断然Bracketsをおすすめします！
過去の私に教えてあげたい･･･
このページで紹介している内容
無料エディタのBracketsって？
Bracketsは、Adobeが開発しているオープンソースコードエディタで、HTML・CSS・JavaScriptで開発されています。Windows、Macどちらでも問題なく利用できますよ！
HTML・CSS・JavaScriptの他にも、PHP・Rubyなど37の言語でシンタックスハイライト(テキストを分類ごとに色分けして表示する機能)が用意されていて、メジャーな言語であれば利用できます。
初心者におすすめな要素としてまず初めに挙げたいのが、「デフォルトで日本語対応」というやさしさです。インストールして起動した時点で日本語になっています。
そして無料なのが超うれしいですね！
さらにプラグイン(拡張機能)が豊富で、自分のレベルや好みに合った使い方ができます。そしてやっぱり動きが軽い～！コーディングをしていると毎日何回も使うものですから、軽さは重要です。
Bracketsのダウンロード・インストール方法
Bracketsのダウンロード
Bracketsはダウンロードも超簡単！
Bracketsにアクセスし、ダウンロードボタンを押すだけです。
Bracketsのインストール
ダウンロードした「Brackets.Release.1.13.msi」(バージョンは2018年11月現在)を実行してインストール。
インストーラーが立ち上がりますが、Nextを押していけば完了します。
Bracketsは初期状態ですぐに使用OK
さっそくインストールしたBracketsを起動してみましょう～！
初回起動時から日本語化されています。他のエディタでは日本語化を行わなければいけないものが多いので、これだけで少し じーん っとしちゃいました。
私が使っていたSublime Textも日本語化がわかりにくく、初心者は初期設定に少し苦労するかもしれませんが、Bracketsなら何もしなくてもOK！
Bracketsの便利な機能で作業効率アップ
クイック編集
ココもBracketsを初心者におすすめするポイント！
タグやクラス名にカーソルを合わせて右クリックをし、「クイック編集」の項目を選択すると、その場に編集用の小ウィンドウが開きスタイルなどを変更することができます！
CSSでもしてみましょう。
わかりやすいですよね！クイック編集便利すぎます・・・！
色や画像のプレビュー
マウスカーソルをコードに合わせると、画像や色がポップアップで表示されます。
コードの折りたたみ
初期状態でコードの折りたたみができます。
行番号の横の▽を押すだけです。コーディング時は必須です。
開始・終了タグのハイライト
タグをクリックすると、開始・終了ペアでハイライトがつきます。CSSやJSのカッコ{ }にも対応。
コンテンツが増えてくると苦労するので、私は必ずコメントを入れています。コメントはあった方が良いと思いますが、ハイライトがあれば間違いも起きにくいですね。
ライブプレビュー
無料なのに、しかもデフォルトで、ライブプレビュー！？
やり方は簡単、画面右上のライブプレビューアイコンをクリックします。
押したらすぐ出てくる・・・！
変更がその場で反映されるので、全体のバランスを見ながら楽に作業ができます。
初心者のみならず、上級者にとっても嬉しい機能ですね。
コーダー向け！便利なプラグイン(拡張機能)
拡張機能(プラグイン)を入れることで、さらに快適な環境が実現できます。
拡張機能(プラグイン)を入れるには、画面右上の「拡張機能マネージャー」のアイコンをクリック。
少し待つとポップアップがでてきます。右側の検索ボックスに入力すると絞り込みが簡単です。
テーマもここからインストールできますよ。※私はいまは「Newton Dark」を使ってます
HTMLコーダーにおすすめのBracketsプラグイン
HTMLコーディングを快適にするためのプラグインを、少しだけご紹介しますね。
タイトルをコピーして、プラグインインストールの検索ボックスにペーストすれば簡単です。
Emmet
Emmetは、コードを省略記法で簡単に入力できるようにするためのプラグインです。
HTML初心者は混乱するので最初は使わなくて良いと思いますが、少し慣れてきたらコーディングの大幅な効率化に繋がりますので入れておきましょう。
省略記法では、下図のようにルールに従った入力をしてTabキーを押すだけで展開されます。
マークアップがとても効率化されますね。
Beautify
ボタンひとつでコードを整形してくれます。インデントを揃えたり、圧縮(min)にも使える便利なプラグインですので是非入れておきましょう。
Documents Toolbar
編集中のファイルをタブ表示します。サイドバーでファイルは表示されていますが、タブに慣れている方向け。
Select Lines
行番号をクリックして行選択するためのプラグインです。
CSSFier
HTMLのソースコードをCSSファイルにコピペすると、CSSのソースコードに変換して貼り付けられます。
↓を貼り付けると・・・
↓になる。
Autoprefixer
機能を追加すると、自動でプレフィックスを補完してくれます。
インストール後、[編集] → Auto prefix を選択します。(on saveは保存時など、用途に合わせて選択)
Indent Guides
インデントのガイド線を表示します。
インストール後、[表示] → Indent Guidesを選択すると表示・非表示が切り替えられます。
CanIUse
Can I Useはブラウザ毎の対応状況を調べることができるサイトです。なんとこれがBrackets内で見れます！超便利です～！
さいごに
Brackets、使いたくなりましたか？
導入がすごく簡単で機能も豊富で軽いので、コーダーさんにはとてもおすすめです。
プラグインは多すぎて紹介しきれないので、気になる方は自分に合ったものを探してみてくださいね。