こんにちは、MIO webデザインです。
この記事を読んでくれている方の中には、コーディングを担当している方・もしくはこれからコーディングを担当する方もいらっしゃるのではないでしょうか？
実際、私もWEBデザインとコーディングの両方を行なっています。最初こそ「デザインもして、コーディングもして大変だ！」状態でしたが、今ではすっかりコーディングが好きになってしまいました。大変ですけど（笑）
さて。コーディングをするとなると、やはりテキストエディタにはこだわりたいですよね！
動作が重い、機能が充実していない、拡張性がない、英語ばかりで使いにくい。
……そんなエディタを使ってばかりでは生産性が落ちるばかりです！
そこで今回の記事では『コーディングも担当するWEBデザイナーさん』に向けて、一押しのテキストエディターをご紹介したいと思います！
そもそもテキストエディタって何？
テキストエディタとはHTML・CSSをはじめ、txtなど、あらゆるテキストファイルを作成・編集するためのソフトウェアです。コーダー（コーディングする人）をはじめ、プログラマー・ブロガーなら必須のソフトでしょう。
テキストエディタにも色々と種類があり、『Sublime Text』『ATOM』『Dreamweaver』『Brackets』『Evernote』『vim』『Visual Studio Code』『CotEditor』など様々です。テキストエディタと言っても、業種によって最適なエディタは異なります。これらの中から自分に合ったエディタを探さなければなりません。
動作が重かったり、拡張性がなければ生産性は下がります。逆に機能が多すぎても使いづらいので、その点も注意しましょう。
WEBデザイナーにおすすめのテキストエディターはこれ！
私がおすすめするのは、WEBデザイナーになった時から愛用している『Brackets』です！
今回の記事では、私が愛用する『Brackets』についてまとめました。
「テキストエディター、何使おう？」とお悩みの方は、ぜひ参考にしてみてください！
Bracketsとは？
Bracketsは『Illustrator』『Photoshop』でお馴染みAdobeさんが開発した、オープンソーステキストエディターです。
あのAbobeさんが開発したテキストエディタというだけで心踊る上、完全フリーなので無料でダウンロードして使用できます。
マークアップに必要なHTML・CSS・JavaScriptだけでなく、PHP・Java・C言語・C++・Ruby・Pythonなどの言語にも対応。さらに初期設定で日本語対応しているため、操作が非常にスムーズ！ 英語読めない組からしたら、かなりありがたい親切設計ですね。
その上プラグインと呼ばれる拡張機能が豊富で、自分の好きなようにカスタマイズできるのも特徴の一つです。
とにかく非常に便利なBracketsさん。
その特徴と便利機能の数々を、詳しくみていきましょう。
初期設定で日本語対応
テキストエディタを導入した時に最初につまずくのが、エディターの使い方です。
ダウンロードしていざ使おうと思っても、全て英語表記だったら操作しにくいですよね。結局使い方がわからず、いつも使っているエディタに戻ってしまう……という経験もしばしば。
その点Bracketsは最初から日本語対応されているので、操作に迷うことがありません！
こういった親切設計は本当にありがたいです。
豊富なプラグイン
Bracketsにはプラグイン（拡張機能）を追加できるという特徴があります。
- ボタン１つでHTMLの雛形を自動で表示してくれる『Add HTML template』
- コードを綺麗に整形し直してくれる『Beautify』
- コーディングを高速で行うための各種コードヒントプラグイン
など、あなたのコーディングを手助けしてくれるプラグインが豊富に取り揃えられています。
おすすめプラグイン1 – Add HTML template
これは新規HTMLファイルを作成するとき、雛形のHTMLコードを生成してくれるプラグインです。
雛形があるとのちの作業が大変楽なので、新規作成をするときはこちらを使います。
おすすめプラグイン2 – Beautify
こちらはコードを綺麗に整形してくれる優秀なプラグインです。
上書き保存すると見た目がスッキリするので、大変便利です。
ライブプレビュー機能
HTML・CSSファイルを編集すると、変更内容がブラウザでリアルタイムで反映される機能です。
プラグインを導入することでライブプレビューの機能を実装できるエディタもございますが、Bracketsの場合、このライブプレビュー機能が標準搭載されています。
使い方は簡単。カミナリのようなアイコンを押すだけです。
さらにBracketsのライブプレビューでは、選択箇所がブラウザ上にハイライトされ、どの部分を編集しているかすぐにわかる仕様になっています！
そのコードがブラウザ上でどこに表示されているのか、すぐにわかるので大変便利です。
クイック編集機能
これは選択したタグ・プロパティ上で実行すると、Bracketsがそのコードに応じて便利なことをしてくれる機能です。
ちょっとわかりにくい説明なので実際に見ていきましょう。
HTMLファイルでクイック編集を行った場合
HTMLファイルのタグ・id・class名の部分にカーソルを置き、右クリックで『クイック編集』を選んで見ましょう（下記の例ではクラス名にカーソルを合わせています）。
すると、そのclassに付与したCSSが、直下に表示されました！
Bracketsが自動的に、そのclassに記載したCSSを探し出し、表示してくれたのです。この機能を使うと、わざわざstyle.cssから目当てのclass名を探す必要がなくなりますね！
CSSファイルでクイック編集を行った場合
このクイック編集機能をCSSで使用すると、上記とは異なる挙動を見せてくれます。
例えばカラーコード上でクイック編集を選択すると、下の画像のようにカラーピッカーを表示してくれます。
色味を変えたり、rgba表記にしたい時に大変便利ですね！
画像のサムネイル表示
個人的に気に入っているのが、画像のソースコードをホバーすると、その画像のサムネイルとサイズが表示される点です。
コードを見返していると「あれ？ このソースの画像なんだっけ？」となることが多いです。
そんな時、コードをホバーすると画像のサムネイルが表示されるため、大変便利です！ わざわざ探しに行く必要がありませんからね。
Bracketsのダウンロード方法
いかがでしたでしょうか？
もし今いい感じのテキストエディタを探しているのであれば、私はBracketsを推します！
シンプルで使いやすい上に、便利な機能・プラグインも豊富なので、興味を持った方は下記の手順でダウンロードしてみてください！
では最後まで読んでくださり、ありがとうございました！
よいBracketsライフを！
1・公式サイトからBracketsをダウンロード
こちら（http://brackets.io/）からBracketsをダウンロードしましょう。
「その他のダウンロード」をクリックすると、過去のバージョンを手に入れられます。
2-1・macでインストールする
ダウンロードしたdmgファイルを開いて、Bracketsをアプリケーションフォルダに追加しましょう。
2-2・Windowsでインストールする
ダウンロードしたmsiファイルを開いて、インストール先を指定。『Next』を押して次に進みます。
『Install』を押してインストール開始。
インストールが終わったら『Finish』を押して終了。
