Brackets(ブラケッツ) コードエディタの導入と使用

Brackets(ブラケッツ) コードエディタの導入と使用

Web制作時のコーディングはどのように行っていますか?

メモ帳でコーディングする高難易度を貫く方以外は、コードエディタソフトを使用されていると思います。中でも無料のコードエディタBracketsの紹介を記事にしました。

Brackets(ブラケッツ) とは

Brackets(ブラケッツ) とは

Bracketsは無料ソフトです。無料ソフトと聞くと安全性や使用に問題があるかもしれないと思われる方もいると思いますが、Adobe社が開発し、オープンソースのソフトです。

HTMLやCSSだけでなく、JavaScriptに限らず、サポートしている言語は38種類あります。HTMLやCSS(SCSS)での使用方法について説明いたします。

最新情報をいち早くお届け!

無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます!
その他、更新情報・イベント情報を
お届けいたします。

Bracketsのインストール方法

BracketsはWindows・Macのどちらでも使用できます。まずは公式サイトhttp://brackets.io/で最新版をダウンロードします。

Bracketsのインストール方法

最新版を入れたらBracketsが動かなくなった、使用している拡張機能が対応していないなどの理由でダウングレードをしたい方はこちらttps://github.com/adobe/brackets/releasesから古いBracketsをダウンロードしてください。ダウンロードしたフォルダを解凍し、実行するとインストーラが立ち上がりますのでインストールするのに手間取る事はありません。

Bracketsの特徴

クイック編集機能があります。クイック編集とは記述中のhtmlのclassやid上で右クリックして選択する事でCSSを編集できます。

Bracketsの特徴

ウィンドウの分割

左右・上下に分割し、htmlファイルとCSSファイルのどちらも表示しながら作業が行えます。表示しながらできる以外にもウィンドウの分割を行い、ライブプレビューを使う事でさらに便利になります。

ライブプレビュー機能

ライブプレビュー機能は名前の通り、リアルタイムで変更されるプレビューです。対応しているのはGoogleChromeだけです。

プレビュー機能は実際に表示される画面を確認しながらコーディングが行えるだけでも便利ですが、htmlで記述してあるところをクリックするとライブプレビューでクリックされた場所に移動し該当箇所が青く点滅し強調されます。

ライブプレビュー機能

CSSで記述されているclassやid名をクリックしてもライブプレビューの該当箇所が青く点滅し強調されます。htmlやcssを記述すると保存しなくてもすぐに反映されます。ただし、scssの場合は反映に少し時間がかかる事が経験上あります。

Bracketsの使用方法

Bracketsでファイルを開く方法はBracketsを開き、ファイル>フォルダを開くからコーディングするフォルダを選択する方法とコーディングするフォルダをBracketsのアイコンへドラッグする方法、そして開いたBracketsに開きたいファイルをドラッグする方法があります。

色々なファイルを開いていた結果、違うファイルを上書きしてしまった事があるので、コーディングするフォルダをBracketsのアイコンへドラッグする方法がおすすめします。

新規作成する時はファイル>新規作成で作成されます。保存する時は「index.html」「style.css」などの拡張子も必ず入れましょう。

サポートしている言語が多い為、拡張子を入れないとhtmlファイルなのかそうではないのかが認識されません。そして「新規作成」のファイル名ではライブプレビューに反映されないので注意しましょう。フォルダ内にimageなどの画像があれば選択する事で画像のプレビュー・サイズ・ファイル容量も表示されます。

拡張機能でもっと便利に使いやすく

Bracketsをおすすめする理由とBracketsを使う利点は「拡張機能」にあります。

ダウンロードし、インストールするだけでも十分に使えますが、拡張機能を入れる事で他のコードエディタよりさらに使いやすくなります。

オープンソースで拡張性が高い

オープンソースは構成されているソースコードが公開されているソフトウェアの事です。公開されているので開発者でなくても改善や再配布ができる為に拡張性が高くなっています。Bracketsを使用していて「もっと使いやすく」「もっと便利に」と考えた利用者が「拡張機能」というプラグインを開発してくれています。もちろん拡張機能を取得するのも無料です。

拡張機能のインストール方法

ファイル>拡張機能マネージャーを開き、入手可能タブからインストールする方法と拡張機能マネージャー画面でダウンロードしたzipファイルをドラッグする事でインストールする事ができます。

拡張機能のインストール方法

ただし、拡張機能マネージャーで表示されるインストール可能な拡張機能は説明が英語なので英語が苦手や詳細をより知りたい方は公式サイトhttp://brackets.ioの人気のあるエクステンションを見たり、拡張機能について週計しているページで確認しましょう。週計ページも英語なのでざっくりとした翻訳になりますが、意味は十分にわかります。

 

Beautify

Bracketsを入れたらまず入手したい拡張機能№1です。その名の通り、記述したhtmlやcssをきれいにインデントし整頓し見た目にもわかりやすく、すっきりしてくれます。

Beautify

特にdivの開始終了に同じインデントをしてくれるので、div内にさらにdivを作成して終了タグがどのdivに対応しているのかわからなくなる事がなくなります。

編集>Beautifyの手動で行うか、保存時にBeautifyするにチェックを入れ、自動で行うかを選択できます。ファイル名と拡張子がないとBeautifyが効きませんので、最初に必ずファイル名と拡張子は決めて保存しましょう。

Indent Guides

Beautifyを入れるときれいにインデントしてくれますが、それだけではちょっと物足らない人におすすめがIndent Guidesです。インデントされた開始終了タグを縦線ガイドを表示してくれます。

Indent Guides

Bracketsでは<p>や<div>などの開始タグを入力すれば</p>や</div>の終了タグを自動で入力してくれますが、うっかり削除してしまった時にもIndent Guidesで縦線ガイドが表示されていればすぐにタグの閉じ忘れがわかります。

Highlight Multibyte Symbols

縦線ガイドがあるなら横線ガイドが欲しい!と探してインストールした拡張機能がHighlight Multibyte Symbolsです。

Highlight Multibyte Symbols

元々、横線ガイドを入れる拡張機能ではなく、全角英数字や記号やスペースの表示、半角スペースやタブの表示をしてくれる拡張機能です。

Indent GuidesとHighlight Multibyte Symbolsを合わせて使う事でBeautifyでインデントされた部分がとても見やすくなります。ただし、with Show Whitespaceという拡張機能を入れていると競合しますので、どちらかを削除か無効化してから使用してください。

自分に合ったBracketsへカスタマイズ

他にも紹介しきれなかったたくさんの便利な拡張機能やBracketsの背景色や文字色の変更などたくさんあります。

コーディングする時は一人で黙々と作業する事が多いと思います。少しでも便利に少しでも見やすく、自分自身にあった環境にカスタマイズしながら快適なコーディングライフをお楽しみいただければ幸いです。

マーケティングでお悩みでしたら、
Bigmacにお任せください。

バナーlefty
バナー総合
バナー総合
  • この記事を書いた人
  • 最新記事