こんにちは。
みなさん、コーディングの際にどんなテキストエディタを使ってますか？
世の中には無料、有料を含めたくさんのテキストエディタがリリースされており、どれを使えばいいか分からない人や、違いが分からないままに何となく今のテキストエディタを使っている、なんて人もいるのではないでしょうか。
そこで、今回は筆者も愛用しているおすすめのテキストエディタ【Brackets】について使い方の基本からおすすめする理由、インストール必須の拡張機能を徹底解説いたします！
Bracketsとは？
Bracketsとは、Adobeが開発、提供しているテキストエディタです。以下が公式サイトになります。
Bracketsのインストールはこちらから行ってください。
Adobeが開発するテキストエディタと言えば、「Dreamweaver」を思い浮かべる人が多いと思いますが、Bracketsは無料で使用できて、かつ必要な機能はある程度網羅しています。
むしろDreamweaverはいろいろな機能がありすぎて普段使わないのに、そのせいで動作が重くなったり、といったことから私はDreamweaverを持っているのに使ったことがありません。(もちろんコーディングの内容によってはDreamweaverの方が適している場合もあるかとは思います。)
Bracketsがおすすめな理由9選
では、早速Bracketsがおすすめな理由をご紹介します。
様々な言語に対応している
BracketsではHTML/CSS/Javascriptと言ったメジャーなものが使えるのはもちろん、PHPやRuby、Pythonなど約40もの言語に対応しているので、様々な場面で活用できます。
動作が軽い
Bracketsはインストールしてすぐの状態だと必要最低限の機能しか入っていません。
もちろんそこから、後ほど紹介する拡張機能を使えばより便利なテキストエディタとして使えるのですが、拡張機能も必要最小限に抑えることで軽快な動作のまま、ストレスなく使うことができます。
インストール時から日本語対応
Bracketsは、インストールした時点から日本語表示に対応しています。
海外産のテキストエディタだと日本語化パッチを別でインストールする必要があったり、もしくは諦めて英語のまま使わざるを得なかったり…。
オープンソースで開発されている
Bracketsはオープンソースで開発されているため、中身を自分で編集することもできます。
少し敷居が高い内容にはなりますが、スキルがあれば自分好みのテキストエディタにカスタマイズすることもできます。
要素にマウスホバーすると出てくるポップアップが便利
Bracketsでは、画像を指定するパスにマウスホバーすると該当する画像が簡易的にポップアップで表示されます。
また、カラーコードにマウスホバーすることでも該当するカラーがポップアップで表示されます。
単にRGBのみでなくRGBAや16進数、さらにはグラデーションまで対応しています。
これらによりコーシング内容の視認性が高いのも特徴です。
クイック編集が便利
要素上にマウスホバーさせた状態で右クリックし、「クイック編集」を選ぶと、選んだ要素に応じた便利な機能が展開されます。
例を挙げると、HTMLファイルの要素上、もしくはclassやid上でクイック編集を展開すると、該当する要素に影響しているCSSが要素下部に展開され、そこから直接編集できます。
その他、CSSファイルの中で色を定義するプロパティ上ならカラーピッカーが表示されたり、アニメーションを定義するプロパティ上なら進行度を操作するベジェ曲線が表示されたりなど、様々な機能があります。
ライブプレビューも標準搭載
多くのテキストエディタで実装可能なライブプレビュー機能ですが、プラグインや設定などが必要な物も多いです。
Bracketsなら標準搭載で、さらに、リアルタイムで編集中のHTMLファイル内の要素(あるいはCSSファイルなら編集中の箇所が影響を与える要素)を青い線で囲って表示してくれるため視認しやすく、コーディングのミスを劇的に減らすことができます。
拡張機能が多数
Bracketsでは、コーディングの補助やインデントを整えて見やすくする、ファイル保存のたびに自動でサーバーへアップロードする、などの便利な機能を必要に応じて拡張機能として実装することができます。
表示分割や検索、置換機能など、他のテキストエディタにある昨日はほぼ網羅
たとえばHTMLとCSSを同時に画面に表示したい時などに便利な画面を分割する機能や、ファイル内から指定した文字列を検索、あるいは置換するなど、他のエディタでも搭載していることが多い機能はほぼBracketsにも搭載されています。
一般的なコーディングに必要な機能で、「他のエディタにはあるのにBracketsにはない」という機能がほぼ皆無なのも、Bracketsをお勧めできる理由の一つです。
インストール必須！マストな拡張機能
先ほどご紹介したBracketsがおすすめな理由の一つ、拡張機能。
ここでは、拡張機能のインストール方法と、数百種もある拡張機能の中でも特に利便性の高い拡張機能をご紹介します！
拡張機能のインストール方法
拡張機能のインストールは驚くほど簡単。
画面右端のアイコンから「拡張機能マネージャー」というアイコン(レゴブロックのような形？のアイコン)をクリック、表示されるウィンドウの左上「入手可能」タブをクリックし、任意の拡張機能をインストールするだけ。
その他、zipファイルをローカルからアップロード、もしくはURLから参照する方法もあります。
おすすめの拡張機能
さて、お待ちかねのおすすめ拡張機能をお伝えいたします。
Emmet
Bracketsを使う上で最も欠かせない拡張機能が「Emmet」。
この拡張機能は、あらかじめ決められたルールに沿った上でcommand+E(もしくはTabキー)を使って展開することでコーディングにかかる手数を圧倒的に減らしてくれます。
例えば、<p></p>と打ちたい場合、普通なら“<”、“p”、“>”、“<”、“/”、“p”、“>”といったように7文字打ち込む必要がありますが、Emmetを使えば”p”とだけ打ち込んだ後に「command+E(もしくはTabキー)」を打つだけで<p></p>と打つことができます。
その他にも以下のような例があります。
HTML
- 1.Idやclassの付与
div#exampleと打って展開→<div id=”example”></div>
div.exampleと打って展開→<div class=”example”></div> - 2.入れ子構造を作る
section>ul>liと打って展開→
<section>
<ul>
<li></li>
</ul>
</section> - 3.兄弟要素を作る
h2+pと打って展開→
<h2></h2>
<p></p> - 4.同じ要素を複数作る
P*3と打って展開→
<p></p>
<p></p>
<p></p> - 5.連続した数字を入れる
div.example$*5と打って展開→
<div class=”example1”></div>
<div class=”example2”></div>
<div class=”example3”></div>
<div class=”example4”></div>
<div class=”example5”></div> - 6.テキストを入れる
p{テキスト}と打って展開→
<p>テキスト</p>
CSS
wと打って展開→width: ;
w200と打って展開→width: 200px;
w20vwと打って展開→width: 20vw;
m20-30-40-50 と打って展開→margin: 20px 30px 40px 50px;
このように、基本的にはプロパティの頭文字のみ、あるいは任意の数値と併せて打ちこみ、展開することで簡単に記述できます。
ただし、例えばtop,text-align,text-decorationのように同じ頭文字のプロパティが複数あるような場合もあります。
上の例で言えば、
tと打って展開→top: ;
taと打って展開→text-align: left;
tdと打って展開→text-decoration: none;
のように、２文字以上打ち込むことで使い分けます。
ここで、「たくさんあるプロパティそれぞれに対応する略記を覚えるのは大変なのでは？」と思った方も多いでしょう。
Emmetならそんな心配もいりません。
「Fuzzy Search(曖昧検索)」という機能があり、あらかじめ決められたルール通りの略記でなくとも、近しいものを自動的に選別して展開してくれるので安心です。
なかには思い通りに展開されないこともありますが、それを差し引いてもEmmetのおかげでコーディングが飛躍的に楽になることは間違いありません。
ちなみに略記に関するルールはこちらのチートシートにて確認できます。
とはいえ、かなり使い勝手が良いので私は「略記に困ってチートシートを確認する」ということはしたことがありません。
Beautify
インデントを整理し、ファイルの見栄え、可読性を改善してくれます。
使い方はとても簡単で、インストールさえしてしまえばあとはインデントを整理したいファイルを開いた状態で右側のBeautifyアイコンをクリックするか、左上メニュー内の「編集」→「Beautify」をクリックするだけ。
もちろん必要に応じてインデントを整理する際の細かなルールも設定できますし、「編集」→「保存時にBeautifyする」にチェックを入れておくことでファイルを保存する際に自動でインデントを整えることもできます。
特に、複数の人間が編集する可能性のあるファイル程、見やすさや可読性も大切なポイントになるので、是非とも有効活用してください。
Brackets Tools
コーディングが捗るいくつかの機能がまとめられたプラグイン。
細々とした機能ばかりですが、こういった積み重ねでコーディングの効率が上がります。
各機能の内、ほとんどの物はインストール後に上部メニューバー内に現れる「Tools」から利用できます。
各機能の一例は以下の通り。
- Remove empty/blank lines
空白行の削除 - Remove break lines
改行の削除 - Remove line numbers
行頭の連番の削除 - Remove duplicate lines
重複している行の削除 - Word to array
単語の羅列を配列の形に変換
同一行内でスペースで区切られた単語、もしくは複数行内で改行で区切られた単語に適用可能 - Word to list
単語の羅列をul>liの形に変換
同一行内でスペースで区切られた単語、もしくは複数行内で改行で区切られた単語に適用可能
この他にも多くの機能があります。
Show Whitespace
こちらも使い方はとても簡単。インストールするだけでファイル内の半角スペースの位置に薄く「・」が表示されるようになります。
逆に言えば全角スペースには何も表示されないので、スペースが原因でsyntax error(文法上のエラー)などが起こった際に、原因箇所を格段に見つけやすくなります。
Brackets Icons
左側メニューにリスト表示される各ファイルの先頭に、該当ファイルの種類(HTML/CSS/Javascript/PHPなど)が視覚的に分かりやすくなるアイコンが表示されるようになります。
こちらもインストールするだけで有効になります。
Brackets CSS Class Code hint
HTMLファイル内で、class属性とid属性を記述する際にCSSファイルを参照して候補を表示してくれます。
color Hint
CSSファイル内で色指定のプロパティ記述時に、同一ファイル内で一度でも使ったカラーコードをコードヒントとして表示してくれます。
同じファイル内では同じカラーコードを使う場面が多いのが通常なので、これがあるだけで作業効率が上がります。
インストールするだけですぐ使える点もポイント。
Paste and Indent
どこか他のところから拾ってきたコードを張り付ける際に、他の部分とインデントの整合性が取れないことはよくあります。
Paste and Indentをインストールしておけば、そんなときも貼り付ける位置を基準にインデントを揃えてくれ、可読性の高いファイルにすることができます。
SFtpUpload
Bracketsから直接サーバーへアップロードができるようになる拡張機能。
設定によって、手動でのアップロードか保存するごとに自動でアップロードかを選ぶことができます。
まとめ
いかがだったでしょうか。
筆者も長年愛用しているテキストエディタ、Bracketsの魅力は伝わりましたでしょうか。
拡張機能もここには書ききれないほど他にもたくさんありますので、是非ともBracketsをインストールし、色々な拡張機能を試して自分にぴったりのテキストエディタを作り上げて下さいね。