必要な機能をしっかり押さえた、コーダーにおすすめのエディター「Brackets」

ブログ

Blog
  1. ホームページ制作・運営はアウラ:ホーム
  2. ブログ
  3. 必要な機能をしっかり押さえた、コーダーにおすすめのエディター「Brackets」

必要な機能をしっかり押さえた、コーダーにおすすめのエディター「Brackets」

必要な機能をしっかり押さえた、コーダーにおすすめのエディター「Brackets」

こんにちは!アウラコーダーの仁木です。

コーディングをする時に普段使っているエディターは、人によって様々なソフトが使われていると思います。僕はAdobeの「Dreamweaver」やPanic Inc.の「Coda2」というソフトを使っています。
もしかしたらメモ帳などでコーディングをしている強者な方もいるのかもしれませんが、やっぱり自分にあった、便利な機能がついているソフトで作業をしたいものです。。

そこで今回は個人的にすごく魅力を感じたAdobe社のフリーの開発エディターソフト「Brackets」の紹介をしたいと思います!

Sassも使えるおすすめエディター「Brackets」

brackets-intro

BracketsはAdobeが提供しているオープンソースの開発ソフトで、WindowsとMac両方に対応しています。そしてちゃんと日本語にも対応しています。さすがAdobeです。
拡張機能も豊富で、好きな機能をインストールして使い勝手の良いようにカスタマイズしていけます。もちろんデフォルトで組み込まれている機能だけでも充分に使えますので、いくつかピックアップして紹介していきます。

CSSのスタイルが一瞬で確認できます!

まず一番初めにこのBracketsを使ってみたいと、心を動かされた機能がこのCSSのクイック編集です。
新しくスタイルを適用したい、もしくは適用されているスタイルを調べたい時にその要素やクラス名、ID名にカーソルを合わせて、「Ctrl」+「E」を押すとクイック編集ウインドウが現れてすぐにCSSの編集をすることが出来ます。わざわざブラウザで検証してスタイルを確認しなくてもエディター内だけで済んでしまいます。
しばらく触っていなかったサイトなどで、修正が必要になったときに役立ちそうな機能ですね。

ブラウザチェックが便利なライブプレビュー機能

プレビュー機能はHTMLをメインに扱うエディターにはよくある機能だと思いますが、Bracketsのライブプレビュー機能も編集中のファイルを変更すると即座にブラウザに反映されます。
CSSも変更した瞬間にスタイルが変わって表示されます。

拡張機能やエディターのテーマが豊富

拡張機能のフォルダーを開くと何百種類もの拡張機能を検索し、インストールすることが出来ます。僕は手始めに”emmet”と”SASS”の拡張機能をインストールしてみましたが、検索してインストールボタンを押すだけであっという間に機能を追加することが出来ました。便利です。
テーマもその時の気分に合わせて色々かえられて良いですね。

SASSも使えます

Dreamweaverだと扱いづらいSASSのファイルもBracketsはエディター自体に何も手を加えずに使うことが出来ます。


まとめ

上に挙げたもの以外にも、HTMLファイルの画像のURLにカーソルをホバーするだけで画像の中身を確認できたり、カラーコードの変更もカラーピッカーからパパッと変更できます。もちろんテキストの検索・置換も
だいたい僕が普段Dreamweaverで使っている機能にプラスして痒いところにもちゃんと手が届いているエディターで、シンプルなのにちゃんと仕事にも使えるいいエディターです。気軽に導入できるのでぜひ一度試してみてください。

前後の記事

お問い合わせはこちらから

見出しアイコン スタッフ募集 Recruit

アウラでは新メンバーを募集しています。詳しくは採用ページをご覧ください。 WANTEDLYで採用募集しております。詳しくはこちら