Hello Brackets

Hello Brackets

今から1年前ぐらいにメインエディタをSublime Textに切り替えた際にもとにかく高機能で使いやすかったので、これはもうずっとSublime Textを使い続けるかもなと思っていたんですが、いろいろと比較した結果メインエディタをBracketsに切り替えることにしました。まだ使い始めたばかりなので気になる拡張機能を片っ端から試してみたり自分が使いやすいようにいろいろといじろうとは思いますが、取り急ぎインストールしてみた拡張機能のメモや切り替える要因となったポイントなどを書き残しておこうと思います。

Hello Brackets 目次

  1. Bracketsとは
  2. 良いなと思ったポイントや便利機能
  3. インストールした拡張機能

1. Bracketsとは

Brackets

ご存知の方も多いと思いますが、Bracketsとは「Adobe & HTML」で下記のように記載されているようにAdobeが提供しているエディタです。

Bracketsは、HTML/CSS/JavaScriptで開発されている、HTML/CSS/JavaScript用の新しいオープンソースコードエディターです。

新機能や機能拡張の開発を通じてプロジェクトに参加することをご希望の方は、GitHubのプロジェクトページにアクセスして、Bracketsのコード解析方法やプロジェクト参加方法の詳細をご覧ください。

オープンソース | Adobe & HTMLhttp://html.adobe.com/jp/opensource/

デフォルトでは必要最低限の機能しか付いていませんが、拡張機能を使うことによって様々な機能を付けて自分が使いやすいようにカスタマイズすることができ、地味に嬉しいのがそれらを全て無料で使用することができます。
また、上記でHTML/CSS/JavaScript用とは記載されていますが、PHPやRubyなど他の言語も普通に使用(がっつり使う人の場合はわかりませんが、自分は多少触る程度の人間なのもあって特に問題はないと思いました)できます。

Bracketsのインストールは、下記公式サイトから特に説明も必要ないぐらい簡単にインストールできます。

目次へ

2. 良いなと思ったポイントや便利機能

GOOD :)

Bracketsを使ってみて個人的に良いなと思った機能やメインエディタに切り替える要因となったポイントです。
以下で紹介する以外にも便利な機能はありますが、自分が普段から特に扱うHTML・CSS・JavaScript・PHPの4言語を扱う際に便利だと思った部分になります。

☆無料 & 日本語されている

Sublime Text(以下:ST)でもパッケージを入れれば簡単に日本語化することはできますが、Bracketsはインストールした時点で既に日本語化されているので、設定をいじるとか拡張機能入れるといった手間も必要ありません。
別にSTでも設定するのは最初だけじゃんって感じですが、英語が苦手な人にとっては嬉しいポイントのひとつだと思います。

また、STも一応無料で使い続けること自体はできますがそのまま使い続けていると定期的にダイアログが出てくるのに対し、Bracketsは完全に無料でそういったものも出てこないので気にせず使用できます。
STは高機能なのでライセンス購入する価値は十分にありますが、やっぱり無料は嬉しいですね。

☆テーマや拡張機能が豊富

STを使い始めた時にもテーマを変更してエディタデザインを変更したり、パッケージを入れることによって様々な機能をつけてカスタマイズできるのがとても便利で且つ楽しかったのですが、Bracketsも同じように様々なテーマや拡張機能があるので、自分が使いやすいオリジナルのエディタを作ることができます。
特に拡張機能は便利すぎてびっくりするものが幾つかあり、切り替える要因となったポイントのひとつでもあります。

☆開始・終了タグをハイライト表示

開始・終了タグそれぞれにカーソルがいくとタグをハイライト表示してくれる機能がデフォルトで用意されています。
divが幾つも入れ子になっているとか、インデントやスペースがごちゃごちゃになってしまっているソースをいじる時などに便利です。

☆ライブプレビュー機能

ライブプレビュー機能

STでライブプレビュー機能を使うとなるとパッケージを入れる必要がありますが、Bracketsはデフォルトでライブプレビュー機能が付いています。
エディタの右上にあるキャプチャのような稲妻(?)マークをクリックするとChromeで表示され、HTMLやCSSなどをエディタで変更するとリアルタイムでブラウザ反映してくれます。
また、エディタ上でタグにカーソルを持っていくと、プレビュー画面の方でハイライト表示までしてくれます。

☆ホバー・クイックビュー

ホバー・クイックビュー

個人的にかなり気に入った機能のひとつがこのホバー・クイックビューです。
画像のパスにホバーするとその画像サムネイルやサイズが表示され、CSSのカラーコードなどにホバーするとそのカラーをプレビュー表示してくれます。

☆クイック編集

クイック編集

こちらも個人的に気に入った機能のひとつで、HTMLのタグにカーソルを合わせてショートカットキーを押すとその場でそのタグに関係あるCSSをすぐに編集することができます。
他にもキャプチャのようにCSSでカラーやグラデーションの記述部分ではカラーピッカーを使って編集、animationなどではベジェ曲線の調整などをわかりやすく編集、JavaScriptでは関数の内容を展開することなどもできます。

☆他にも便利機能がたくさん

上でもBracketsの特徴などを紹介してきましたが、他にも自動で閉じ括弧をつけてくれる機能やファイル保存時のLintチェック、タグやカラーコードの候補表示などのようなコーディング時に便利な機能をはじめ、CSSでプロパティなどをど忘れした時にそれがどんなプロパティなのかエディタ上で確認できるクイックドキュメント、PSDからレイヤースタイルなどからCSSを書き出してくれたり画像の書き出しまでできるExtract for Bracketsなど便利機能が沢山あります。

目次へ

3. インストールした拡張機能

エディタ右上にあるアイコンから拡張機能を管理できる

拡張機能はキャプチャのようにエディタ右上にあるライブプレビュー下のアイコンをクリックすると立ち上がるウィンドウから追加することができ、現在使用している拡張機能の一覧を見たり、必要なくなった拡張機能の削除などを行うこともできます。
また、テーマを新しく入れるときもここからできます。

以下はBracketsを使用する際に様々なところで便利だと紹介されていて、実際にインストールしてみた拡張機能の一部です。
まだまだ試してないものや気になるものは沢山あるので時間ある時に見ていくつもりですが、以下は個人的にとりあえずインストールして損はないのではと思ったものです。

  • Brackets Tools
    コーディング時に便利な機能が詰まった拡張機能で、並べられた単語を配列やulliを使ったリストに変換、HTMLやURLをエンコード・デコード変換、ブログでURLを設定する時に便利そうな選択した単語を小文字化+ハイフン区切りに変換する機能など、様々なことがこの拡張機能ひとつでできるようになります。
    機能についてもっと詳しく知りたい場合は「Bracketsの7つ道具的エクステンション Brackets Tools – Qiita」がGIFアニメ付きの解説で非常にわかりやすいです。
  • Various improvements
    こちらも地味に便利な機能が詰まった拡張機能で、エディタ右下にファイルの更新時間やサイズを表示してくれたり、沢山開いたプロジェクトの展開を全て畳んでくれるボタンが追加されたりします。
  • Emmet
    ご存知の方も多い、使いこなせば爆速コーディングが可能になる拡張機能。
  • Shizimily Multiencoding for Brackets
    Shift_JISやEUC-JPといったエンコーディングファイルが使えるようになります。
  • Minifier
    CSSやJavaScriptをショートカットキーで簡単にMinify化(圧縮化)した状態で保存・書き出しすることができます。
  • Beautify
    こちらは逆に圧縮化されているものを整形したい時に便利な拡張機能で、インデントがガタガタになっていたり変なところで改行されてしまったりしているようなソースを綺麗にしたい時にも非常に便利です。
  • Indent Guides
    その名の通りインデントをわかりやすく表示してくれます。
  • Show Whitespace
    こちらは半角スペースを表示してくれます。
  • Brackets Icons
    ファイル名が表示されているところにそれぞれファイルタイプのアイコンを表示してくれます。
    同じようなもので「Brackets File Icons」というのもありますが、「Brackets Icons」の方がアイコンがシンプルで好みだったので自分はこれにしました。
  • Tabs – Custom Working
    開いてるファイルをエディタ上にタブ表示してくれる拡張機能で、他にも左右のサイドバーを簡単に開閉できるボタンや開いているタブ(ファイル名)を一覧表示してくれるボタンも追加されます。
  • Brackets Css Color Preview
    カラーコードが記述されている行番号横に、指定されているカラーを表示してくれます。
  • colorHints
    ファイル内で既に使用されているカラーコードがある場合、colorなどのプロパティ使用時に#を入力すると使用されているカラー一覧をヒント表示してくれます。
  • Special Html Characters
    数は少なめですが、Altcで「&」や「©」などのような特殊文字の一覧を表示し、選択するとそれらをエンティティ化した状態で記述してくれます。
  • Brackets CSS Class Code hint
    編集中のHTMLが読み込んでいるCSSに記述されているidやclassをヒント表示してくれます。
  • CSSFier
    HTMLをコピーしてCSSに貼付けると、使用されているidやclassを使ってルールセットを一気に作ってくれます。
  • Disable AutoClose Tags
    閉じタグを出力するタイミングを変更することができます。
    デフォルトのままでも良いんですが、STに慣れたせいか閉じタグ出るタイミングにどうも慣れなくて入れました。
  • HTML Block Selector
    開始・終了どちらかのタグにフォーカスがある状態でショートカットを使うとそのタグの中身を選択状態にでき、様々なタグが入れ子になっている且つ記述が長いタグなどをコピー・削除したい時に非常に便利です。
    ただし「Emmet」の機能とショートカットが被ってしまうので、「Emmet」を使っている場合はショートカットを調整する必要があります。
  • Display Shortcuts
    現在使用できるショートカットの一覧を表示してくれる拡張機能で、追加した拡張機能で使用するショートカットも含めて表示してくれます。
    慣れてきたら必要ないとは思いますが、ひと通りショートカット覚えるまでは便利です。
  • CanIUse
    ショートカット使ってBrackets内でCan I useを表示させることができます。
  • Markdown Preview
    その名の通りマークダウンをプレビューしてくれる拡張機能で、フォーマットやテーマをいじったりもできます。

上で紹介した以外にもバリデーションを行ってくれるものやプロジェクト内で使用していないファイルを一覧化してくれるもの、コードヒントやリファレンスを強化してくれる拡張機能などもインストールしてみました。
また、他にもFTPと連動させたりSassやGit関連の拡張機能もあるので、それらはまた今度紹介しようと思います。

拡張機能を探すにあたっては以下を非常に参考にさせてもらい、ここでは紹介していない拡張機能も沢山紹介されています。

目次へ

AtomやCodeなど高機能エディタは他にもありますし、ついこの間までメインにしていたSublime Textと比べても「STだとデフォルトでできるのに…」みたいな部分も正直ありましたが、総合的に判断した結果で今後はBracketsをメインとして使っていこうと思います。
ただ、特に容量が大きいファイルなどを扱う場合は動作が極端に重かったりする時があるので、長時間そういったファイルを扱う時はSTのがストレスなくて良いかなと思いました。(動作が重いのはしょうがないんですかね…)

まだまだ使い始めたばかりでわからない部分も多いので、上記紹介した以外で便利な拡張機能とかカスタマイズ方法とかあれば是非教えてください!

Back to Top

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。