HTML / CSS

HTML/CSS書くならこれ!現役フロントエンドエンジニアが選ぶ最も使えるコーディングエディタはこれ!

フロントエンドエンジニアみなさんは普段どのコーディングエディタ使っているでしょうか?

私もWEB制作の世界に飛び込み15年が経ちました。始めたばかりのころは与えられたものをただ使うだけで、使いやすいとか使いにくいとか考えるヒマもなく、ただただソースコードを書くことに必死だった思い出があります。

そして徐々に知識やレベルが上がってくると、機能的で便利なツールを使いたくなり、色々とエディターを乗り換えてきました。今でも新しく登場したエディターはとりあえず使い勝手を試しています。

今回は現役フロントエンドエンジニアのりょうまが現在使っている現状最強と思うコーディングエディタをご紹介します!

なお技術レベルの高い人は使い慣れたものが一番ですので、コーダー初級者の方など参考にしてみてください。

コーディングエディタの簡単な歴史

過去にどんなものがあったかを軽くおさらいします。
(自分の使ったものだけすみません。)

ホームページ・ビルダー

90年台後半に登場した元祖オーサリングソフト「ホームページ・ビルダー」です。

私も初めて使ったツールはホームページ・ビルダーです。

当時は大変画期的でした。パズルみたいにパーツを並べていくだけで1ページ出来上がってしまうという楽勝仕様なのです。

ある程度ソースコードが読めてきたときにみたらソースコードがぐちゃぐちゃでびっくりしましたが、当時WEBデザイナーという職業が生まれる前から存在していたので、なかなか画期的なツールと言えるでしょう。

4サイトくらいお世話になったでしょうか。

【マクロメディア】Dreamweaver2004、Dreamweaver8

はい、これで完全にコーダーとして覚醒したツールです。今はAdobe社に吸収されましたが、当時はマクロメディアという会社からリリースされていました。

どうしてもこの「Dreamweaver2004」が使いたくて、スクールに通って勉強しつつアカデミック版をタダで手に入れた思い出があります。この「ドリームウィーバー」の響きがなんともかっこよくて、

まわりに「あ、自分ドリームウィーバー使ってますから」

とか言いたかっただけかもしれませんが、そのくらい大好きなツールでした。

そして次がDreamweaver2004のメジャーアップデート版のDreamweaver8です。

2004から変わらず使いやすいですが、ライセンスの関係でDreamweaver8に無理やり乗り換えた感じです。当時お世話になっていた会社もなかなか太っ腹で、リリースされたばかりのDreamweaver8もポーンと買ってくれました。

とにかくコーディングしやすく、HTML、CSS、Javascriptを覚えたのはこのツールのおかげといえるでしょう。

【Adobe】DreamweaverCS3〜6シリーズ

アドビに吸収されてからはフォトショップやイラストレーターとの連携機能が充実してきて、現在に至るまで数多くのアップデートを繰り返し進化してきていますね。

この辺から”コーディングエディタ”という言い方をしてきたような気がします。

正確にはオーサリングツールとかというのでしょうけど、これまでのようにビジュアル画面でガシガシ作り込むより、オブジェクト指向のコーディングを覚えてからはソースコードから作り込むようになったため、”コーディングエディタ”として扱うようになってきました。

ですが何よりAdobeCSがめちゃくちゃ高額なため、無料のエディタに乗り換える人が増えてきたのもこのあたりだと思います。

Windowsの無料エディタ

  1. 秀丸
  2. サクラエディタ
  3. Notepad++
  4. TeraPad

はい、懐かしいですね。私もWindows時代にサクラエディタは入れてて使ってました。たしか大文字⇔小文字、全角⇔半角の一括置換に使っていたような・・・

バリバリのコーディングに向いているかと言われると正直厳しいと思いますが、何より起動の速さ・軽さはDreamweaverの比じゃないくらい軽快なので、ちょこっとした修正には使っていたと思います。

近年リリースされている無料エディターが人気

世の中に存在するエディターを全てチェックしたわけではありませんが、人気といえば「Adobe Brackets」と「Visual Studio Code」「Sublime Text」ではないでしょうか。

Adobe Brackets

Microsoft Visual Studio Code

Sublime Text

もはやフロントエンドエンジニアにとどまらず、バリバリのプログラマーも愛用するエディターですね。拡張プラグインでどんどん自分流にカスタマイズできますし、テーマで見た目もいじれてオシャレに使いこなすことも可能です。

LIGさんが「“恋に落ちるエディタ”」で書いた記事はおそらく多くの方が読んだのではないでしょうか。

“恋に落ちるエディタ”「Sublime Text」 完全入門ガイド!

Adobe Creative Cloudを使っているなら、やはりドリを使いたい・・・

私はAdobe Creative Cloudの年間プランでサブスプリクション契約をしているため、AdobeCCのツールがフルで使えます。

当然デザイン業務もありますのでフォトショプやイラストレーター、アフターエフェクト、エッヂ、ミューズ、アクロバットなど、仕事によってたくさん使いわせてもらっています。

 

で、Dreamweaverのことなんですが、、、

正直上段で紹介した無料エディタで大体のことは完結してしまいます。ただAdobe Creative Cloudで年間に数万払っている手前、使わないのももったいないしやっぱり慣れ親しんだエディタから乗り換えるのは学習コストかかるためやや抵抗がありました。

そして今年、新しいシリーズ「Adobe CC(2017)」が正式リリースされ前バージョンからかなり刷新されました。

 

しかし、これがイマイチすぎる・・・

Beta版を経てある程度のユーザーレビューを反映してリリースされたはずなのに使い勝手がやや悪い。

もっとも使い勝手の悪くなったところは、「検索および置換」です。

 

これまでのようにファイルを横断したり現在開いてるドキュメントを対象にしたりはできるものの、いかんせんUIが使いづらい・・・

これはかなりストレスでげんなりしますね・・・

あとはテーマカラーもハイライトがきつすぎてなんか見づらい・・・

あと最も致命的な原因として、

重い!!重たすぎイイイイイイ!!!

現状のベストコーディングエディタはDreamweaverCC(2015)に決定

はい、もはやDreamweaverはCC(2015)で完成したと思っています。

フロントエンド関連のコーディングであれば、そこまでツール連携を強めて高機能化する必要がなく、いかに早く効率的ににミスなく量産できるかが最も重要です。

Git連携だとかターミナル連携だとかsassコンパイルだとか色々できるのは嬉しいですが、全部をパッケージに詰め込まなくても良いのかなと。

必要なものをプラグインとして機能分割してくれれば良いですけどね・・・

 

じゃあさっきの無料エディタ使えばいいじゃんw って意見が飛んできそうですが、先程わたしが重要とした「いかに早く効率的ににミスなく量産できるか」を叶えてくれるのは、やっぱ今のところ「DreamweaverCC(2015)」なっちゃいますね。

皆さんにもそれぞれ慣れ親しんだコーディングエディタがあると思いますが、それぞれの長所短所をうまく使いこなして素敵なコーディングライフを送ってくださいね。