JavaScriptエディタを比較してみた

2009/03/24

2012/7/14 追記
ログを見ていると、結構前からこの記事を検索経由で来られる方が多いです。
この記事が書かれたのは今から3年ほど前なので、残念ながら情報が古いです。

なので、2012年7月現在で自分の知ってるものをメモしておきます。
良さそうなのがあったら、それぞれ調べてみてください。

・WebStorm
JavaScriptに特化しているぶん高機能。がっつり開発用。有料。

・Aptana Studio
高機能。HTML, CSS, JavaScript, PHP, Rubyをサポート。がっつり開発用。無料。

・Sublime Text
軽い。言語いろいろ対応。有料。

以下mac用

・Coda
デザイナさんに人気。マークアップ寄りな印象。有料。

・textmate
硬派なプログラマさんに人気。サーバーサイド寄りな印象。
マルチバイト対応のtextmate2もあり。有料。

自分はSublime Textを使っています。立ち上げが軽いのでよいです。
案件によって、がっつり補完がきくと良い人はWebStormやAptanaがよいかと思います。

以下オリジナルの記事です。

—-

きんくまです。JavaScriptエディタの有名どころの使ってみた感想など。

今回のエディタ
・Aptana
・Visual Web Developer
・JSEclipse（Flex3プラグイン）
・Dreamweaver CS4

です。最後にドリが入っているのに賛否がありそうなんですが、入れます。

比較内容	Aptana	Visual Web Developer	JSEclipse	Dreamweaver CS4
コード補完	○	○	○	○
プロジェクト内コード補完	○	×	○	×
内容読み取りコード補完※	○	×	×	×
ShiftJIS	×	○	×	○
Imgの幅・高さ取得	×	×	×	○

※内容読み取りコード補完は何かというと、

test.Sample.prototype = {
  func1: function(){
    alert('func1');
  },
  func2: function(){
    alert('func2');
  }
}

こんな感じのクラスがあったとして、別のクラスから使う場合

var Sample = test.Sample;
var s = new Sample();
s.func2();

3行目のs.を押した時点でコードヒントが出るか出ないかです。FlashDevelop使ってるとプロジェクト内のコードヒントがサクサク出てくるのが当たり前になってしまっているので、これが重要でした。

で、最終的な私の結論としては、AptanaがJavaScriptエディタとしては優秀かなと。なので、本当にAjax系の開発をする「だけ」ならそれがいいんだけど、実際の案件だとShiftJISとかまだまだ残っているし、画像の幅・高さ取得したいし…というわけで、Dreamweaverになりました。
って、いってもドリは重いし、重いし、重いし、あまりおすすめできません。JS部分だけだったらAptanaなんだけどな。

ちなみに、画像の幅・高さを(X)HTML上に入れるか入れないかの議論がちょっと前にあったみたいですね。さらっと検索かけておっかけてみました。私の結論としては、「入れる」です。だって、クライアントが「なんでこれパタパタとレイアウトが変わってくの？」とかいって、画像読み込むたびにポコポコとレイアウトがのびていくと文句いわれそうだから。
Ajaxアプリみたいのだったら「入れない」っていうのもありかも。