注目度の高まっている軽量エディタ

エディタは、プログラマーやWebエンジニアの「相棒」ともいえる存在です。

カスタマイズ性の高いエディタであれば、自分好みな独自の環境を作り出すこともできます。

かつては軽量エディタといえば「Sublime Text」といえるほどに広く親しまれていましたが、昨今では新しいエディタたちも台頭しているといえるでしょう。

AtomやVScode、そして今回の記事で注目するBracketsなどは、とにかく軽量で誰もがコーディングしやすいエディタです。


HTML・CSSなどのコーディングに最適なBracketsに注目

今回ピックアップして解説していくのは「Brackets」です。※現在はサポートが終了

Adobeが開発・リリースしているエディタで、あの「Adobe Dreamweaver」と通ずる部分も持っています。

Adobe Dreamweaverは有料ですが、Bracketsは無料で使えるというのも嬉しい要素の1つです。

今回はそんなBracketsに注目していき「なぜ初心者におすすめなのか？」というポイントや、OS別のダウンロード・インストール手順を解説いたします。

また、Bracketsの持つ特徴やおすすめの拡張機能、基本的な使い方まで一挙に紹介。

Bracketsについてチェックして、エディタの選択肢・候補の


Bracketsを初心者におすすめできる理由

それでは早速、どうしてBracketsが初心者におすすめできるのかというポイントを解説いたします。

大きく以下の4つが初心者におすすめできる理由だといえるでしょう。

  • 最初から日本語
  • 最初から便利機能がある
  • 拡張機能導入が簡単
  • 環境問わず動作する

1つずつ、簡単に解説していきます。


最初から日本語化されている（日本語化の作業が不要）

最初に挙げられるのが「インストール直後から日本語で使える」という点です。

統合開発環境を含め、大抵の海外製エディタは最初英語環境で提供されます。

インストールした直後は英語であるため、日本語で使いたい場合は「日本語化」という作業を行わなければなりません。

しかし、Bracketsはインストール時点で既に「日本語」です。

そのため、日本語化の作業は不要。

別途日本語化ファイルなどをダウンロードする必要がなく、複雑な作業なども一切必要ありません。

初心者はもちろんですが、そうではない方にとっても嬉しい要素だといえるでしょう。

大きな強みともいえる点です。


最初から便利な機能が備わっている

Bracketsは、インストール時点でコーディングに便利な機能がある程度備わっています。

通常、拡張機能として「あとから追加」しなければならないケースが多いですが、Bracketsは最初から備えられているのでその必要がありません。

例えば、クイック編集機能が挙げられるでしょう。

この機能は、タグやクラス名にマウスカーソルを合わせて右クリックし「クイック編集」を選択すると、その場に編集用の小窓が表示されるというもの。

わざわざそのタグやクラス名の場所まで画面を動かさずともその場でササッと、まさに「クイックに編集」できるので非常に便利です。

このような便利機能がインストールしただけで使用可能というのは大きなメリットだといえるでしょう。

拡張機能を導入するという作業は慣れてしまえば簡単ですが、それまでに試行錯誤を繰り返す可能性の潜んでいる作業です。

また、そもそも初心者の方であれば「拡張機能を導入する」という作業自体のハードルを高く感じてしまい、躊躇する方も少なくないでしょう。

やはり、インストール時点、最初から便利な機能が使えるのに越したことはないといえます。


そもそも拡張機能導入が簡単

先ほど拡張機能がなくても最初から便利機能があることをお伝えしました。

しかし、Bracketsはその「拡張機能の導入」という作業自体も簡単です。

基本的にクリックのみで完結するため、初心者の方でも苦労することなく気軽に機能を拡張し、エディタをカスタマイズできるでしょう。

他のエディタでは少し複雑な操作が必要だったりするため、これも同様に大きなメリットだといえます。


基本的に環境問わず動作する

Bracketsは、基本的に環境を問いません。

Macでも、Windowsでも、そしてLinuxでも動作します。

動作環境が安定しているため、多少古いパソコン、スペックの低いパソコンであったとしても問題なく動くようです。

初心者の方の場合、エディタが対応しているパソコンを調べたり、それに合わせてエディタを選ぶというのは神経を使う作業になります。

ある意味開発する前から無駄な労力を使うことになってしまい、せっかくのモチベーションが失われてしまいかねません。

しかし、Bracketsであれば環境問わず動作してくれるため、そういった部分で余計な労力を使わないで済みます。

大きなメリットといえるでしょう。


Bracketsの持つ特徴を解説

さて、先ほどまで「初心者におすすめな理由」として挙げられるBracketsの特徴を解説してきました。

他にも、様々な特徴を持っています。

  • オープンソースである
  • Node.js同梱
  • ライブプレビュー可能

上記3点を、1つずつチェックしていきましょう。


オープンソースである

Bracketsはオープンソースで開発されているという特徴を持っています。

ソースコードが公開されているため、HTML、CSS、JavaScriptを利用してソースコードを編集可能です。

Brackets上で開発ツールを開けば、実際にコードを見ることができてしまいます。

エディタを自分独自のものにカスタマイズしてしまうことができるため、拡張性が非常に高いといえるでしょう。


Node.js搭載

Bracketsには、Node.jsが搭載されています。

そのため、HTTP リクエストで編集しているファイルにアクセスしてプレビューをチェックしたい時などに、わざわざサーバーを別途立ち上げる必要などがありません。

Brackets側でサーバーを起動し、現在編集しているHTMLファイルをWebブラウザでチェックできてしまいます。

Node.jsと聞くと初心者の方には難しそうに感じるかもしれませんが、これは初心者の方でも簡単にプレビューを確認できる嬉しい機能だといえます。


ライブプレビュー可能

Bracketsは、ライブプレビュー機能を備えています。

この機能は、その名の通り「リアルタイムでプレビュー機能を利用できる」というものです。

従来のエディタでは「HTMLファイルを編集して、保存して、ブラウザで動作を確認」という流れをサイクルして動作確認をしていました。

しかし、Bracketsはそういった操作は不要です。

画面右側にある「稲妻アイコン」をクリックすれば、ブラウザが立ち上がり、それ以降はソースを編集すればリアルタイムでブラウザにその結果が反映されていきます。

また、例えば「<h2>」タグの中にカーソルを合わせると、ブラウザ上のどの部分なのかを強調表示してくれるという機能まで搭載。

さながらパズル感覚でWebページの制作に取り掛かれるように上手く工夫されているため、楽しみながら開発が行えるかもしれません。


BracketsのOS別ダウンロード・インストール手順

それでは実際に、Bracketsをダウンロード・インストールしていきましょう。

今回はMacとWindowsをそれぞれ紹介いたします。


MacへのBrackets導入

まずはMacでの操作手順です。

最初に公式サイトから.dmgファイルをダウンロードしましょう。

Brackets公式サイト

日本語で表示されるはずなので、どこからダウンロードするのかなども分かりやすく助かります。

ダウンロードが完了したら、.dmgファイルを開いてください。

その後、Applicationフォルダにドラッグ&ドロップでインストール完了となります。

非常に簡単です。


WindowsへのBrackets導入

続いてはWindowsでの導入手順です。

まずは公式サイトから.exeファイルをダウンロードします。

Brackets公式サイト

ダウンロードが完了したら、.exeファイルを開いてください。

インストールウィザードが立ち上がり「Brackets Destination Folder」という画面が表示されます。

これはインストール先や環境変数の追加などを設定する画面です。

基本的には初期設定のまま、チェックを付けたままで問題ないでしょう。

インストール先やチェックが入っているかを確認できたら、Nextをクリックしましょう。

次の画面で「Install」ボタンが表示されるので、クリックすると、ほどなくしてインストールが完了します。

Windowsでも非常に簡単に導入できました。


ライブプレビュー機能を使ってみる

インストールが完了したら、Bracketsを起動してみてください。

最初から「BRACKETS をはじめる前に」というタイトルでHTMLコードが書かれているファイルが開かれます。

このファイルを利用して、早速ライブプレビュー機能を体験してみましょう。


稲妻アイコンをクリックする

Bracketsのウィンドウ右側にある稲妻アイコンをクリックしてください。

すると、Google Chromeが立ち上がり、ライブプレビュー機能が立ち上がります。

ここで注意しなければならないのが、初期設定ではGoogle Chromeでしかライブプレビュー機能は利用できないというポイントです。

試験的機能を有効にするなどしてFirefoxを利用することも可能ですが、基本的にはGoogle Chromeとなるので注意してください。


一瞬で反映される

ライブプレビュー機能を体験するために、試しに「<body>」タグ内にある「<h1>BRACKETS をはじめる前に</h1>」内にカーソルを置いてみてください。

プレビュー画面（ブラウザ側）で一番上にあるタイトル部分が強調表示されることが確認できるでしょう。

何か文章を変えたり、文字を追記したりすれば、一瞬のラグでプレビューにも反映されることが確認できます。

これだけでも、ライブプレビュー機能の便利さを実感できるはずです。

ボタン1つクリックするだけでライブプレビューをオンにできるという手軽さも嬉しい要素といえるでしょう。


Bracketsで拡張機能を導入する方法

さて、Bracketsのインストールが完了し、ライブプレビュー機能の使い方を確認してきました。

続いては「拡張機能」を導入する方法を解説します。

ちなみに、拡張機能は「プラグイン」と表現されることもあるので、頭に入れておいてください。


拡張機能マネージャで管理する

Bracketsで拡張機能を導入するのは非常に簡単です。

まずはBracketsのウィンドウ右側にある「拡張機能マネージャ」ボタン、ブロックのようなアイコンをクリックしてください。

新しく拡張機能マネージャ画面が出てきます。

「入手可能」や「テーマ」などが確認できるでしょう。


拡張機能を導入してみる

試しに、コーディング効率を格段に上昇させる「Emmet」を導入してみましょう。

「入手可能」画面で、右上の検索用テキストボックスに「Emmet」と入力してください。

「テーマ」などで入力しても結果が表示されないので注意が必要です。

検索結果が表示されたら「Emmet」の右側に表示されている「インストール」ボタンをクリックします。

少し待つと「インストールは成功しました」というダイアログが表示され、これで完了です。

Bracketsの拡張機能導入が非常に簡単であることが分かりますね。


Emmetについて

さて、先ほど導入したEmmetですが、お伝えした通り「コーディングの効率を格段に上昇」してくれる拡張機能です。

HTMLソースをコーディングする際に、幾度となく「タグ」を開き、閉じることになるでしょう。

その都度「<p>〜</p>」などと手打ちで記述するのは面倒で、手間になります。

しかし、Emmetを導入したBracketsであれば「p」とタイプしたあとにTabキーを押せば自動で「<p></p>」と、タグから閉じタグまで用意してくれます。

imgタグやh1タグ、記述の仕方によっては入れ子構造などまで一瞬で作ることができてしまうという拡張機能です。

非常に便利で効率化ができ、コーディングが楽になる拡張機能なので、ぜひ使いこなしましょう。


コーディングが楽しくなるBrackets

今回の記事では、エディタのBracketsについて様々な角度から解説をしてきました。

ライブプレビューを使えばパズル感覚でWebページを組み立てられるでしょう。

拡張機能の追加のしやすさや、種類の豊富さも嬉しい要素です。

こういった要素を見てみるとBracketsは「コーディングが楽しくなる」エディタではないでしょうか。


カスタマイズして自分だけのエディタを作り上げる

Bracketsはライブプレビュー機能だけでも素晴らしいエディタです。

しかし、拡張機能を導入して自分独自のカスタマイズをできるというのも大きな特徴の一つ。

自分が使いやすいようにカスタマイズして、痒い所に手が届くエディタを作り上げましょう。

自分が好きなテーマなどを導入して、見やすいだけでなく「開発のモチベーションが上がる環境」を作り上げることもできるかもしれません。

Bracketsは、コーディングを楽しく、そしてWeb制作を楽しくしてくれるエディタだといえます。

Bracketsを使いこなせれば、仕事も楽しく取り組めるのではないでしょうか。