Web制作に向いているおすすめテキストエディタ5選!!

こんにちは、えとーです!

今回はWeb制作に向いているおすすめのテキストエディタえとーの個人的なランキング形式で紹介していきたいと思います!

と、その前に少しだけ注意事項

  • あくまでも、えとーくんの個人的な使用感に基づくランキングです
  • また、えとーくんはメインのOSがUbuntuになりますので、クロスプラットフォームのテキストエディタのみになります。
  • このランキングはすべてフリーソフトではなく、一部に有料ソフトを含みますのでご注意ください (ステマじゃないよ)
  • すべてGUIのエディタになります。 (ちなみにCUIはnano派です。)

それでは行ってみよう!


第5位 Brackets

 

BracketsAdobe が 提供しているオープンソースなフリーテキストエディタで、主にCSS等のデザイン等に推奨されます。

PhotoShopで作ったデザインカンプを読み込んでスタイルの候補を表示したり、Webブラウザとの連携の際にリアルタイムで更新されるのが魅力的なアプリケーションです。

他にもカラーピッカーをその場で実行してCSSを編集したり、CSS上のカラーコードをオーバーレイで表示してくれる機能がデザイナーに人気です。

拡張機能もGUIで追加でき、特別フォルダーを開いたりzipを解凍する手間がないので、気になる拡張機能をたくさん入れて、使わなくなったら削除なんてことも簡単にできます。

ただ、こちらのアプリは起動速度が遅く、コードの文字数が増えるに連れて段々と動作が重くなっていく傾向にあるので、長時間作業する場合や大規模プロジェクトのコーディングに利用する場合はおすすめできません。

 

第4位 Atom

こちらは GitHub が提供するオープンソースなフリーテキストエディタで、HTMLからTypeScriptまで幅広い言語を柔軟に対応できるのが魅力的なアプリケーションです。

AtomはGitプロジェクト管理サイトの最大手、GitHubがプロジェクトを担っている事もあり、強力なGit連携機能を無料で利用することができます。

他にも面白い拡張機能や、便利な拡張機能をGUIで簡単に導入でき、デザインなどのカスタマイズも柔軟に可能というところがポイントです。

また、拡張機能を利用しない場合でも優れたサジェスト機能でスムーズにコードを書くことができます。

しかし、mac以外での起動速度が遅めで、拡張機能を追加するとメモリ使用率が極端に増えるため、メモリが少ないPCやWindowsやLinuxの場合はあまりお勧めできません。

デフォルトのショートカットキーの割当が次に紹介するSublime Textにそっくりなため、もともとSublime Textを利用してた方はかなり移行しやすい形となっていると思います。

第3位 Sublime Text

Sublime Textは世界中に根強いファンを大勢持つシェアウェアのテキストエディタで、こちらもHTMLからGoやJavaまで幅広い言語に対応しています。

このエディタの特徴は、他のエディタ同様クロスプラットフォームですが、起動や動作などが極端に軽いことです。

ひらめいたコードを書きたい時、納期が間に合わない時、スペックの低いPCを使っている方には是非このエディタをおすすめしたいです。

拡張機能は主にコマンドで追加し、設定もjson等のファイルを直接編集する形になりかなり上級者向けですが、エディタ全体のデザインも見やすく、何より検索が早いです。

ただし、拡張機能無しでのサジェスト機能(特にJavaScript等)が致命的で、プログラミング言語を完全に覚えていない方は拡張機能の導入が必須になると思います。

体験版も無期限で利用できますが、ファイルを保存する際に「製品版買ってくるよね?」みたいなことを偶に聞いてきます。

第2位 Visual Studio Code

Visual Studio Code (以下 VSCode)Microsoft が提供しているクロスプラットフォームでオープンソースなフリーテキストエディタで、何故か Brackets や Atom と同じ  Electron で作られたエディタの筈ですが、動作はSublime Textに近いぐらい軽いです。

このエディタの特徴はこのエディタ単体でデバッグやアプリのビルド(Webpack等)ができてしまうことです。

拡張機能もブラウザプレビューからシステムの連携まで幅広く用意されていて、正直フリーのテキストエディターではVSCodeが最強です。

動作が軽いし、メモリもそんなに食わない、サジェスト機能もデフォルトで文句なし、テーマも自由に変更できる、ファイルの読み込みも遅くない、エディタでそのままshellが実行できる等、挙げるとキリがない程たくさんいいところがあります。

こちらのエディタもSublime Textに近いショートカットキーの割当になっています。


第1位 WebStorm

そして輝く1位は WebStorm !

このエディタはJavaベースで制作されている JetBrains が販売している有料のクロスプラットフォームテキストエディタで、莫大な拡張性とカスタマイズ機能、スムーズなコーデイングで世界中から圧倒的な人気を誇るテキストエディタです。

このエディタは JavaScript や TypeScript 等の強力補完機能や、デバッグツールや各アプリケーションのCLI連携など、他のエディタでは体験できない快適なコーディングが実現できます!

特に日頃から数千行、数万行を書くプログラマの方が使うとかなりな時間短縮になると思います。

また React や Angular 、 Vue.js や Node.js の完全なサポートにより、超強力なサジェスト機能をデフォルトで利用できます。

他のエディタのサジェスト機能と何が違うかというと、フォルダやファイルを読み込んだ際に、リンクしているモジュールやファイルを最初にインデックスして、別ファイルでもサジェストを利用できると言う所です。

殆どのエディターは A というファイルなら A というファイルの中でのみ、サジェスト機能を使えて、 A というファイルにリンクしている B というファイルにクラスを書いてもそのクラスを参照することができませんが、このエディタは全自動で適切なサジェストを引っ張り出してくることができるので、CSSのクラスからTypeScriptのモジュールまで、自由自在にインポートしたりクラスを利用したりする事ができます。

この機能はnpm等のモジュール式の開発を行うときに非常に便利で、インポート内容が複数あっても的確にインポートすることができます。

総合的に文句なしのエディタですが一つだけ注意点があって、このエディタはメモリをかなり食います(平均2GBぐらい)

なので、快適にコーディングを行う場合はコードの種類や規模にもよりますが、最低でもメモリ8GBぐらいは必要になると思って良さそうです。


いかがでしたか?

世界にはまだまだ色々なテキストエディタがあると思うので、もし「これおすすめだよ!」と言うようなエディタがあったらぜひ教えてください!

DO-MUではプログラミングに最適なパソコンも多数取り揃えていますので、興味がある方はぜひDO-MUのホームページをご確認ください! (そっと宣伝)

それでは快適なコーディングライフを!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です