DOE HOME > Web技術Tips > 便利ソフト > 無料エディター『Brackets』で快適コーディング

category_13_m

無料エディター『Brackets』で快適コーディング

Pocket

コーディングに使うエディターって何にすれば良いのか迷いません?

 

Sublime Text、Atom、WebStorm、なんか聞いたことはあるけど難しそうだなあ。

 

僕もそんな感じでした。

最近はそうでもありませんが、WEB業界に入りたての頃は英語アレルギーで、とにかく日本語のエディターにこだわっていたので使えるエディターがDreamweaverしかありませんでした。

 

今ではすっかりBracketsをメインエディターとして使ってますが、Dreamweaver時代と比べるとあきらかに作業スピードがアップしたと実感しています。

 

これまでDreamweaverを使っていたけど、別のエディターを使ってみたいという人にはBracketsを使ってみるのはどうでしょうか。

 

思いついたのを全部書いてたら長くなってしまったので、前編・後編に分けたいと思います。

前編ではBracketsの基本的な機能についてを、後編では拡張機能についてまとめます。

 

これからHTML・CSSの勉強をするという人の役にも立つような記事にしたいです。

Bracketsとは!?

brackets-image01

 

Bracketsとは、Adobeが公開しているオープンソースの無料エディターで、無料かつ最初から日本語対応です。

 

Brackets自身もHTML・CSS・JavaScriptで構成されているので、カスタマイズがわりと柔軟にできるのが特徴です。

 

僕の第一印象としては、同じく高性能エディターであるSublime Textのいいとこ取り、というもので、

というよりAdobeがSublime Textをパクった!と思ってしまうほど似ていました。

 

UIはフラットデザインで最近のだなーという雰囲気です。

最初にやること

まずはインストール

Bracketsは簡単にインストールできます。

 

brackets-image05

 

公式サイトでBracketsをダウンロードして下さい。(2016/9現在の最新バージョンは1.7)

 

今回はWindows環境にインストールしましたが、Mac環境でもほとんど同様です。

 

brackets-image06-01

 

インストーラーは英語ですが、Bracketsを開くと全てのメニュー日本語になっています。

ファイル登録をしよう

まずファイル登録をします。

ファイル登録とは、Dreamweaverでいうサイト登録のことで、WEBサイトのデータが入ったローカルファイルをBracketsに登録できます。  

 

brackets-image35

 

サイドバーにローカルファイルをドラッグ&ドロップで登録できます。

 

ファイルは最大で20個くらい登録できます。

 

サイドバーを消したい場合

 brackets-image03

 

サイドバーの右にある矢印でサイドバーを非表示に切り替えます。

 

フォルダ切り替えはファイルごと切り替えてくれる

brackets-image06

 

これはDreamweaverにはない機能なのですが、フォルダを切り替えると、開いているファイルごと切り替えることが出来ます。

 

どういうことかというと、例えばフォルダAからフォルダBに切り替えると、フォルダAのときに開いていたファイルは消えてしまいます。しかし再びフォルダAに戻すと、消えたファイルが復活します。

 

地味ですが使える機能です。

ライブプレビューを使ってみよう

ライブプレビューとは、ブラウザで実際の表示を確認できるプレビュー機能です。

 

既存のプレビュー機能と違う点は、ファイルを更新するとブラウザが自動でリロードして内容を反映してくれるという機能です。

 

ライブプレビュー機能は画面右上のカミナリアイコンをクリックするか、[Ctrl] + [Alt] + [P] で使用できます。

 

phpをプレビューしたいときはローカルのURLをプロジェクト登録します。

 

brackets-image07

ハイライト表示を非表示

Brackets上でフォーカスしている部分はブラウザではアウトラインで囲まれます。

[Ctrl] + [Shift] + [C] で非表示にします。

分割機能を使ってみよう

brackets-image08

 

2ペイン表示とも言います。

 

この機能はデフォルトではオフになっているので、メニューの[表示] > [左右分割]でオンにします。

 

分割機能を使うと、1画面で2つのファイルを同時に表示されます。

 

2ファイルを同時に見れるというメリットは大きく、例えば左側ではHTMLのみ、右側ではCSSのみを開く、というルールで作業するとファイルタイプを混同しなくて済みます。

マルチセレクトを使ってみよう

このマルチセレクトという機能は、後に紹介するEmmetと並んでコーディングする際に役立ちます。

 

読んで字のごとく、カーソルを擬似的に2つ3つに増殖させることで、離れた文字列をいっぺんに選択できるという機能です。

 

もともとはSublime Textの代名詞的機能だったそうですが、Bracketsにも抜け目なく入っています。

この辺りがなんとなく既視感を覚える要因かもしれません。

使い方

手段は3つあります。

 

クリックでカーソルを増やす

brackets-image09

 

まず、このようにクリックでカーソルを増やしていく方法があります。

 

同じ文字列を検索して同時選択する

brackets-image10

 

文字列をドラッグして [Ctrl] + [B] を押すと、同じ文字列を同時選択します。

 

選択個数はいくらでも増やせますが、文字列を一つ飛ばしたい場合は [Ctrl] + [Shift] + [B]。

 

行き過ぎてしまった時は [Ctrl] + [U] で一つ戻します。

 

いっぺんに全部選択したい場合は [Alt] + [F3]を押すと良いようです。

 

文字列を範囲選択できる波形選択

brackets-image11

 

こんな感じで、[Alt] + [左クリック] を押しながらドラッグで囲んだ部分を選択できます。

 

 

 

この3つのマルチセレクトの組み合わせ次第ではかなりの時間短縮、なんてこともできます。

Bracketsの検索・置換機能

Bracketsをインストールしたときは検索機能は普通だったんですが、いつの間にか使いやすくなっていたので紹介します。

 

Dreamweaverの検索・置換機能も使いやすいですが、Bracketsはそれをもっと手軽に使えるようにした感じです。

 

まずはDreamweaverとBracketsの検索・置換機能を比較してみます。

 

 DreamweaverBrackets 説明
正規表現正規表現はどちらも使えます。
ファイルを指定して検索×Bracketsは検索対象の設定はできません。
複数行の検索・置換×Bracketsの検索・置換は1行で行います。
高度な検索×Bracketsはタグのみ、テキストのみ、のような指定はできません。
検索結果の表示検索ボタンを押したらテキストを入れたらBracketsはテキストを入力するごとに結果が反映されます。
除外セット×検索対象に入れないファイルを指定できます。
バッチ検索×置換対象を個別に設定できます。

 

テキストのみ検索など、高度な検索をしたいときはDreamweaverを使いますが、

スピーディな検索・置換はBracketsのほうが向いています。

通常の検索(Ctrl + F)

brackets-image12

 

どのエディタにも付いている検索機能と同じです。

 

[Aa]というアイコンは『大文字と小文字を区別する』という条件検索で、

[.*]アイコンはオンにすると正規表現が使えるようになります。

ファイルを横断して検索(Ctrl + Shift + F)

brackets-image13

 

ファイルを横断して検索は、Google検索のように入力した内容を即座に反映してくれます。

 

ファイルが多すぎるとこの処理が重くなるので、検索対象から場外する除外セットを設定します。

ページ内置換(Ctrl + H)

brackets-image14

 

ページ内置換では、普通の置換処理と、バッチによる置換があります。

 

brackets-image15

 

バッチによる置換というのは、検索した文字列をリストにして、どれを置換してどれを除外するのかを指定する置換方法です。

ファイルを横断して置換(Crtl + Shift + H)

brackets-image16

 

Dreamweaverで言うところの「現在のローカルサイト全体」置換ですが、間違えて置換したら取り返しがつかないDreamweaverと違い、Bracketsでは検索バーの置換ボタンを押した時点では置換されず、検索リストにある置換ボタンをもう一度押してから置換されます。

 

ファイルを横断して置換はバッチによる置換がデフォルトなので、チェックマークを外すことにより置換項目から除外が出来ます。

 

 

また、対象ファイル数が20以下なら置換されたファイルが全部開きます。

 

置換するファイルが21以上の場合

brackets-image36

 

置換するファイルが21以上あるとこのような警告文が出ます。

除外セットを使おう

WordPressのコアファイルのような編集しないファイルは、除外セットを使うことによってあらかじめ検索リストから除外しておきます。

 

『ファイルを横断して検索』、『ファイルを横断して置換』の検索バーに、除外セットのボタンがあります。 ここから『新規除外セット』があるので、新しく作成します。

 

 brackets-image17

 

ワイルドカードが使えるので、例えばwpから始まるファイルを除外したい時には

 

wp*

 

を登録すればOKです。 

 まとめ

この記事ではBracketsのインストール方法や、主となる機能について紹介しました。

 

次回は拡張機能について書きたいと思っています。

 

読んでいただきありがとうございました。

Pocket

ホームページ制作のお見積額が40万円以上で、20%OFFキャンペーン

カテゴリ

人気記事ランキング

  1. 無料で使える明朝体の日本語WEBフォント
  2. WordPressの『get_categories』でカテゴリーリストを自由にカスタマイズする
  3. Google Mapがエラーで表示されなくなった場合の直し方
  4. スマホサイト制作の基礎知識まとめ
  5. カスタムタクソノミー一覧を任意の順番にソートする方法

最近の投稿

月別アーカイブ

ブログ内検索

ホームページ制作のお問い合わせは横浜のDOEで。