こんにちは！サイバーブリッジの久保田です。
Adobe製のテキストエディタといえばDreamweaver。
私も使用していますが、便利な機能(ほとんど使ってない…)が沢山あるので重く、しかも有料なので、シンプルに「HTML」「CSS」「JavaScript」で静的なWebサイトを構築したい方にはBracketsがおすすめです。
今回はそんなBarcketsの特徴と使い方、拡張機能のご紹介をさせていただきますね！
BracketsはAdobe SystemsがHTML、CSS、JavaScript用に開発し、GitHub上に公開されている、オープンソースの無料テキストエディタです。
Brackets自体もHTML、CSS、JavaScriptで作成されており、この3つの言語を理解されている方であればエディタ自体を自由にカスタマイズすることも可能です。
もちろん、GitHub上に拡張機能が公開されているので、インストールしてカスタマイズすることも可能です！
▼ Barcketsのインストールはこちら ▼
http://brackets.io/
まず、1番の特徴として挙げられるのが「Adobe Systems」が開発しているということ。
Adobeと言えば、PDFの閲覧や編集が可能な「Acrobat」、写真編集の「Photoshop」、デザイン制作で必須の「Illustrator」、Webオーサリングツール「Dreamweaver」など皆さんも一度は耳にしたことがある超高機能なツールを開発・販売していることで有名な企業。
そんな有名な企業のツールが無料で使えるんです。凄くないですか？
なんでもっと早くに知らなかったんだろうって後悔してます(泣)
私はDreamweaverを使用していますが、高機能なだけあって立ち上がりに少々時間がかかります。mac本体の原因もあるかと思いますが、急いでる時なんかは本当に困ります。
それに比べてBarcketsは体感で言うと1/10くらいの速さで立ち上がります。もはや秒です。もう速過ぎて本当にびっくりして語彙力が低下しました！！！
しかも、必要最低限の拡張機能を入れてもサクサク動くので、ストレスフリーで作業が捗ります。
…まあ、正直のところ起動速度や動作に関してはSublime Textでも感動を覚えましたが、Barcketsが他の無料テキストエディタと違うと思った点は次です！
無料テキストエディタの多くは拡張機能をインストールしないと日本語対応してくれず、初期設定が結構めんどくさいんですが、なんとBarcketsは拡張機能のインストールをしなくでも最初から日本語に設定できるんです！
私のように英語がとても苦手な人や初心者の方にも優しい設計。
Adobe様様です。本当にありがとうございます！！！
Bracketsには100以上の様々な拡張機能が用意されており、GitHubまたはBarckets内からインストール可能です！
その中でも便利な拡張機能を3つご紹介します。
省略形のコードを入力するだけで、長いコードが展開されるのでコーディングスピードを大幅に改善できます。
同じCSSファイル内で一度使用したカラーを記憶し、「#」を押すとコードヒントとしてリストアップしてくれます。
コードが美しく整えます。インデントなどをあらかじめ設定しおけば、自分好みに整えることができます。
Bracketsには、HTMLの編集状況が即座にプレビューされる機能が標準搭載されています。
Dreamweaverにも同じ機能がありますが、いちいちブラウザで更新ボタンをクリックする必要がないので作業が捗ります！
使い方はとっても簡単で、エディタ内にある稲妻マークをクリックするだけ！
本当それだけ。とっても簡単。
Adobe Bracketsは、シンプルに「HTML」「CSS」「JavaScript」で静的なWebサイトを構築したい方におすすめのAdobe製の無料テキストエディタです。
とてもシンプルな設計でとっても軽く、拡張機能をインストールすることで自分好みのエディタにカスタマイズできます。
初心者コーダーさんや、これからWeb制作を学びたい方にとってもおすすめです！
▼ Barcketsのインストールはこちら ▼
http://brackets.io/
この記事を書いた人
その他記事はこちら
久保田 里佳子
Web事業部 マネージャー / デザイナー1992年生まれ。2児の母。入社後、営業を経て独学でhtml/css・Webデザイン・マーケティングを学び、現在はWeb関連全般に携わっています。趣味はお酒・ゲーム・漫画・アニメとかなりのインドアですが、たまにゴルフもやります。特技は超高速クッキング(見た目より味重視)。全てのお客様が笑顔になる仕事を心がけてます。
関連記事
久保田 里佳子 
櫻井 邦則 
