こんにちは！アウラコーダーの仁木です。
コーディングをする時に普段使っているエディターは、人によって様々なソフトが使われていると思います。僕はAdobeの「Dreamweaver」やPanic Inc.の「Coda2」というソフトを使っています。
もしかしたらメモ帳などでコーディングをしている強者な方もいるのかもしれませんが、やっぱり自分にあった、便利な機能がついているソフトで作業をしたいものです。。
そこで今回は個人的にすごく魅力を感じたAdobe社のフリーの開発エディターソフト「Brackets」の紹介をしたいと思います！
BracketsはAdobeが提供しているオープンソースの開発ソフトで、WindowsとMac両方に対応しています。そしてちゃんと日本語にも対応しています。さすがAdobeです。
拡張機能も豊富で、好きな機能をインストールして使い勝手の良いようにカスタマイズしていけます。もちろんデフォルトで組み込まれている機能だけでも充分に使えますので、いくつかピックアップして紹介していきます。
まず一番初めにこのBracketsを使ってみたいと、心を動かされた機能がこのCSSのクイック編集です。
新しくスタイルを適用したい、もしくは適用されているスタイルを調べたい時にその要素やクラス名、ID名にカーソルを合わせて、「Ctrl」＋「E」を押すとクイック編集ウインドウが現れてすぐにCSSの編集をすることが出来ます。わざわざブラウザで検証してスタイルを確認しなくてもエディター内だけで済んでしまいます。
しばらく触っていなかったサイトなどで、修正が必要になったときに役立ちそうな機能ですね。
プレビュー機能はHTMLをメインに扱うエディターにはよくある機能だと思いますが、Bracketsのライブプレビュー機能も編集中のファイルを変更すると即座にブラウザに反映されます。
CSSも変更した瞬間にスタイルが変わって表示されます。
拡張機能のフォルダーを開くと何百種類もの拡張機能を検索し、インストールすることが出来ます。僕は手始めに”emmet”と”SASS”の拡張機能をインストールしてみましたが、検索してインストールボタンを押すだけであっという間に機能を追加することが出来ました。便利です。
テーマもその時の気分に合わせて色々かえられて良いですね。
Dreamweaverだと扱いづらいSASSのファイルもBracketsはエディター自体に何も手を加えずに使うことが出来ます。
上に挙げたもの以外にも、HTMLファイルの画像のURLにカーソルをホバーするだけで画像の中身を確認できたり、カラーコードの変更もカラーピッカーからパパッと変更できます。もちろんテキストの検索・置換も
だいたい僕が普段Dreamweaverで使っている機能にプラスして痒いところにもちゃんと手が届いているエディターで、シンプルなのにちゃんと仕事にも使えるいいエディターです。気軽に導入できるのでぜひ一度試してみてください。
