お役立ち

無料エディタ「Brackets」がすごい!初心者コーダーにおすすめ!

更新日:

無料エディタ「Brackets」がすごい!

今回は、便利な無料エディタ「 Brackets - Webデザインを認識する最新のオープンソーステキストエディター」のご紹介です!

HTMLを始めると、テキストエディタ選びをする機会がありますよね。

私が初心者のころ、一番最初に使っていたのは、 Terapadというシンプルなテキストエディタでした。

 

数年後にようやくAdobeのDreamweaverを使い始めるようになり作業スピードがぐんと上がったわけですが、いまいち動作が重かったり、ライブプレビューがへんてこになってたりで不便を感じ、何とか簡単に更新できないものかと考え、最終的にファイル共通化のために簡単なphpを使いだすようになりました。効率化をしっかりと考えるようになったのは、ある意味Dreamweaverのおかげですね!

 

その後、Web制作をしている方からのすすめで Sublime Textを使用するようになり、軽いし(重要)プラグインも豊富だし便利で快適に作業できる環境になりました!

当時はメジャーな上に有料のDreamweaverがあるのに他のアプリを使うことは考えていなかったので、本当にありがたかったです。

その後 VScode Atomもすすめられ使用したのですが、なんとなくSublime Textから切り替える意味が見出せず結局ずっと使っていた感じです。

 

それからというもの特に困っていた訳ではないのですが、ふと「自分でエディタを比較したことがないなぁ」と思い色々試してみたところ、

「Brackets」が思った以上に良くて驚きました!

BracketsはSublime Textのようにプラグインで機能をカスタマイズできるようになっているのですが、これからエディタ選びをする方やHTMLコーディングを勉強するという方には断然Bracketsをおすすめします!

過去の私に教えてあげたい・・・

 

 

無料エディタのBracketsって?

Bracketsは、Adobeが開発しているオープンソースコードエディタで、HTML・CSS・JavaScriptで開発されています。Windows、Macどちらでも問題なく利用できますよ!

HTML・CSS・JavaScriptの他にも、PHP・Rubyなど37の言語でシンタックスハイライト(テキストを分類ごとに色分けして表示する機能)が用意されていて、メジャーな言語であれば利用できます。

 

初心者におすすめな要素としてまず初めに挙げたいのが、「デフォルトで日本語対応」というやさしさです。インストールして起動した時点で日本語になっています

そして無料なのが超うれしいですね!

 

さらにプラグイン(拡張機能)が豊富で、自分のレベルや好みに合った使い方ができます。そしてやっぱり動きが軽い~!コーディングをしていると毎日何回も使うものですから、軽さは重要です。

 

Bracketsのダウンロード・インストール方法

Bracketsのダウンロード

Bracketsはダウンロードも超簡単!

Bracketsにアクセスし、ダウンロードボタンを押すだけです。

Brackets

Bracketsのインストール

ダウンロードした「Brackets.Release.1.13.msi」(バージョンは2018年11月現在)を実行してインストール。

インストーラーが立ち上がりますが、Nextを押していけば完了します。

 

Bracketsは初期状態ですぐに使用OK

さっそくインストールしたBracketsを起動してみましょう~!

Brackets

初回起動時から日本語化されています。他のエディタでは日本語化を行わなければいけないものが多いので、これだけで少し じーん っとしちゃいました。

私が使っていたSublime Textも日本語化がわかりにくく、初心者は初期設定に少し苦労するかもしれませんが、Bracketsなら何もしなくてもOK!

 

Bracketsの便利な機能で作業効率アップ

クイック編集

ココもBracketsを初心者におすすめするポイント!

タグやクラス名にカーソルを合わせて右クリックをし、「クイック編集」の項目を選択すると、その場に編集用の小ウィンドウが開きスタイルなどを変更することができます!

brackets-1

 

CSSでもしてみましょう。

brackets-2

わかりやすいですよね!クイック編集便利すぎます・・・!

 

色や画像のプレビュー

マウスカーソルをコードに合わせると、画像や色がポップアップで表示されます。

brackets-4

 

コードの折りたたみ

初期状態でコードの折りたたみができます。

行番号の横の▽を押すだけです。コーディング時は必須です。

brackets-3

 

開始・終了タグのハイライト

タグをクリックすると、開始・終了ペアでハイライトがつきます。CSSやJSのカッコ{ }にも対応。

コンテンツが増えてくると苦労するので、私は必ずコメントを入れています。コメントはあった方が良いと思いますが、ハイライトがあれば間違いも起きにくいですね。

brackets-5

 

ライブプレビュー

無料なのに、しかもデフォルトで、ライブプレビュー!?

やり方は簡単、画面右上のライブプレビューアイコンをクリックします。

Brackets

Brackets

 

押したらすぐ出てくる・・・!

変更がその場で反映されるので、全体のバランスを見ながら楽に作業ができます。

初心者のみならず、上級者にとっても嬉しい機能ですね。

brackets-6

 

コーダー向け!便利なプラグイン(拡張機能)

拡張機能(プラグイン)を入れることで、さらに快適な環境が実現できます。

拡張機能(プラグイン)を入れるには、画面右上の「拡張機能マネージャー」のアイコンをクリック。

Brackets

 

少し待つとポップアップがでてきます。右側の検索ボックスに入力すると絞り込みが簡単です。

テーマもここからインストールできますよ。※私はいまは「Newton Dark」を使ってます

Brackets

 

HTMLコーダーにおすすめのBracketsプラグイン

HTMLコーディングを快適にするためのプラグインを、少しだけご紹介しますね。

タイトルをコピーして、プラグインインストールの検索ボックスにペーストすれば簡単です。

Emmet

Emmetは、コードを省略記法で簡単に入力できるようにするためのプラグインです。

HTML初心者は混乱するので最初は使わなくて良いと思いますが、少し慣れてきたらコーディングの大幅な効率化に繋がりますので入れておきましょう。

 

省略記法では、下図のようにルールに従った入力をしてTabキーを押すだけで展開されます

マークアップがとても効率化されますね

brackets-7

brackets-8

 

Beautify

ボタンひとつでコードを整形してくれます。インデントを揃えたり、圧縮(min)にも使える便利なプラグインですので是非入れておきましょう。

 

Documents Toolbar

編集中のファイルをタブ表示します。サイドバーでファイルは表示されていますが、タブに慣れている方向け。

Brackets

 

Select Lines

行番号をクリックして行選択するためのプラグインです。

 

CSSFier

HTMLのソースコードをCSSファイルにコピペすると、CSSのソースコードに変換して貼り付けられます。

 

↓を貼り付けると・・・

Brackets

 

↓になる。

Brackets

 

Autoprefixer

機能を追加すると、自動でプレフィックスを補完してくれます。

インストール後、[編集] → Auto prefix を選択します。(on saveは保存時など、用途に合わせて選択)

Brackets

 

Indent Guides

インデントのガイド線を表示します。

インストール後、[表示] → Indent Guidesを選択すると表示・非表示が切り替えられます。

Brackets

 

CanIUse

Can I Useはブラウザ毎の対応状況を調べることができるサイトです。なんとこれがBrackets内で見れます!超便利です~!

Brackets

 

さいごに

Brackets、使いたくなりましたか?

導入がすごく簡単で機能も豊富で軽いので、コーダーさんにはとてもおすすめです。

プラグインは多すぎて紹介しきれないので、気になる方は自分に合ったものを探してみてくださいね。

 

-お役立ち
-, , ,

Copyright© Webjo blog , 2020 All Rights Reserved.