無料エディタBracketsサポート終了！Bracketsに替わるWebコーディングに適した他のエディタを探してみた

どうも。
フリーランスでグラフィック・web制作をしている名もなきデザイナーshoji@です。

先日衝撃的なニュースを目にしました。

僕が普段Webコーディングに使っているAdobeのエディターBracketsのサポートが2021年9月で終了というニュースです。

Web制作を始めて3年ほどですが、ずっとBracketsを使ってきたのでとても残念です。

サポートが終了する9月までBracketsを使っても良いのですが、どうせ使えなくなるのであれば今から他のエディタに乗り換えた方が良いと思いBracketsに替わるエディタを探すことにしました。

Webコーディングに適したエディタの条件

僕がエディタを使う用途はコーディングがメインです。

エディタは沢山ありますが、今回はWebコーディングに適した機能があるエディタを調べました。

Webコーディングに適したエディタは最低下記の4つの条件あればOKです。

ライブプレビュー対応

通常コーディングを変更したらデータを一旦保存して、ブラウザを更新しないと内容の反映が確認できませんが、ライブプレビューはその名の通りコーディングしながらライブでプレビューしてくれる機能です。

いちいち保存・更新をしなくて良いので対応しているととても便利です。

Emmet対応

HTMLやCSSのコード入力をサポートしてくれる機能です。

例えば<div class=”wrapper”></div>と入力したければ、全て入力しなくても「div.wrapper」と入力してタブを押すだけで自動的に<div class=”wrapper”></div>と入力されます。

他にもEmmetには効率よくショートカットしてコードを書く方法が沢山あるので、使いこなせればかなりの時間短縮になります。

Emmetの公式サイトに一覧のチャートシートがあるので何が出来るか参考にしてみて下さい。

SassのCSS変換対応

最近使い始めたSass。

SassはCSSを書くのに効率が良いメリットしかありません。

.scssファイルのSassデータは、.cssのCSSファイルに変換しないとHTMLで読み込みが出来ないので、SassのCSS変換対応は必須です。

Sassについての説明は長くなるので今回は割愛しますが、気になる方はこちらのサイトが参考になるのでチェックしてみて下さい。

Mac・Windows両方対応

僕はブラウザチェックのためにWindows機のSurface Pro 6を持っています。

Surfaceでもコーディングする時があるので、MacとWindows両方同じエディタが使えた方がスムーズだなと思い条件に挙げました。

Webコーディングに適した4つの条件を満たしたエディタ

先程挙げた4つの条件を満たしたエディタは3つありました。

※あくまで個人調べなので抜けている可能性もあります。

Visual Studio Code

Microsoftが開発したVisual Studio Code

2019年の調査ではシェア率No1のエディタです。

プラグインを入れなくてもEmmetに標準で対応しているのもポイント。

無料で使えますし、Microsoftのエディタというのがとても安心感があります。

新しいエディターを使い始めてまた無くなってしまうのは面倒ですが、Microsoftのエディタであればよほどの事がない限り無くならないと思います。

Atom

GitHubが開発したAtom

Visual Studio Codeに続いて人気のエディタです。

Visual Studio CodeとAtomの比較記事をいくつか見ましたが、Visual Studio Codeに比べて動きが遅いようです。

ただ比較記事がエンジニア目線だったので、コーディングがメインの用途だと遅さは感じないかもしれません。

AtomもVisual Studio Codeと同じく無料で使えます。

Dreamweaver

Adobeが開発したDreamweaver

本格的にWeb制作を行う何年か前に使っていたことがありますが、動きがかなりもっさりとしていた印象です。

またVisual Studio CodeやAtomと違い月額料金も掛かります。（コンプリートプランを契約しているので無料ではありますが）

Web制作者の初心者中の初心者が使っているイメージなので今後も使う予定はありません。

BracketsもAdobeが開発したエディタですが無くなってしまうので、DreamweaverもAdobeだから無くならないとは言い切れませんしね。

最後に

Bracketsの替わりとなるコーディングに適したエディタ「Visual Studio Code・Atom・Dreamweaver」のご紹介でした。

Bracketsの公式サイトを見てもVisual Studio Codeが推奨されていたので、僕は今後Visual Studio Codeを使おうと思います。

2021 年 9 月 1 日、Adobe は Brackets のサポートを終了します。 Brackets の使用、保守、改善を継続する場合は、GitHub でプロジェクトをフォークできます。 Visual Studio Code は、オープンソース上に構築された Microsoft の無料コードエディターです。Adobe は Microsoft とパートナー関係にあり、このエディターへの移行をお勧めします。

AdobeなのにDreamweaver推奨じゃないんや。笑

ということで最後に、

「さようならBrackets！短い間だったけど今までありがとう！」

・Web制作の基礎を理解してから「動きのあるサイト」や「高度なテクニック」を使ったクオリティーの高いサイト制作を勉強する方法

ほんの一手間で劇的に変わるHTML ＆ CSSとWebデザイン実践講座