[JavaScript] 無料で使えるJavaScriptエディタ・IDE:ウェブアプリケーション開発

2013 年 6 月 20 日 Categories: JavaScript, アプリケーション |

現在も開発中で、かつ無料で使えるものを集めてみた。

なお、以下にある「コードのパース」とは実際に書いたソースコードをパースして、それを入力補完に反映してくれるかどうか。

テンプレートは、コードテンプレートやスニペットと呼ぶこともあるコードの一部を雛型にして入力する機能。

「?」の部分はまだ調べきれていないところ。

テキストエディタ

Mery

入力補完 一部
コードのパース なし
テンプレート
リファクタリング なし
フォーマッタ なし
アウトライン機能 あり

おそらく、JavaScriptとは関係なく無料のテキストエディタとしては最強と思われる。

JavaScriptはシンタックスハイライトに対応し、一部、入力補完機能もある。

マクロやプラグインに対応しているので拡張性が高く、しかもマクロ自体をJScript(マクロソフト版のJavaScript)で記述できる。

TeraPad

入力補完 なし
コードのパース なし
テンプレート
リファクタリング なし
フォーマッタ なし
アウトライン機能 なし

シンタックスハイライトのみ対応(HTMLやCSSなども)。

非常に軽量で高速。入力補完機能はないものの、自動インデント機能があるのでそれなりにコーディングはしやすい。

マクロやプラグインの機能はないが、「補完タン」のような外部のツールを使えば入力補完などができるようになる。

# テキストエディタはきりがないので、これくらいにしておく。
# Emacs/Vim系は省略した。

IDE

NetBeans

入力補完 あり
コードのパース 一部
テンプレート あり
リファクタリング 一部
フォーマッタ 一部
アウトライン機能 あり

おそらくJavaScript関連のIDEの中では、最も手軽で最も安定している。

HTML5のプラグインの中にJavaScriptエディタの機能があり(?)、PHP版やJava EE版ならばプリインストールされている。

JSDT

入力補完 あり
コードのパース 一部
テンプレート あり
リファクタリング 一部
フォーマッタ あり
アウトライン機能 あり

Eclipseのプラグインとしては、最もポピュラーなもの。

HTMLの開発環境プラグインであるWSTに含められている。

コードのパースやリファクタリングは申し訳程度。

「jsdt-jquery」という別のプラグインを導入すると、jQuery関連の入力補完が有効になる。

Spket IDE

入力補完 あり
コードのパース 一部
テンプレート あり
リファクタリング
フォーマッタ あり
アウトライン機能 あり

Eclipseベースながら、軽量で使いやすいJavaScript専用エディタ。

Eclipse向けのプラグイン版とスタンドアローン版がある。

IDEとしては物足りないが、JavaScriptのエディタとしては必要充分か。

WebMatrix

入力補完 あり
コードのパース
テンプレート
リファクタリング
フォーマッタ
アウトライン機能

ひょっとしたら、Windowsでのウェブアプリケーション開発では今後主流になるかもしれない、マイクロソフト純正の多機能IDE。

マイクロソフトの各種アプリ、サービス(IISやSQL Serverなど)を使うことが前提かと思いきや、PHPやMySQLにも対応し、WordPress、Drupalなどオープンソースのウェブアプリを簡単に導入できる。

しかも、PHPなどではそれら固有のAPIの入力補完に最初から対応済み。つまり、ローカルでWordPressなど有名ウェブアプリの開発が容易にできる。

さらに、JavaScript互換の言語であるCoffeeScript、CSSを使いやすくするLess、SASS、SCSSにまで対応。

サーバは内部にIIS Expressを持っており、別途用意する必要がない。

一方、Node.jsにも対応し、他にjQuery、jQuery Mobileの入力補完まで可能。

面白い機能としては、iPhone/ iPadのウェブサイト表示のエミュレータまである。Electric PlumのElectric Mobile Simulator (Lite)を組み込んでいる(参考記事)。

FTPクライアント機能があるので簡単にサーバへアップロードできるほか、マイクロソフトのクラウドサービスである「Windows Azure」に強力に対応している。

とにかく全般的に手軽で、本当の「オールインワンIDE」という印象。

Apacheに対応できるか、PHPなど各環境のアップデートは個別にできるのかなど、細かい部分でどこまでカスタマイズできるか疑問が残るが、無償でここまで整っているウェブアプリ向けIDEは他にないかもしれない。

Visual Studio

入力補完 あり
コードのパース
テンプレート
リファクタリング
フォーマッタ
アウトライン機能

Visual Studioのウェブ開発向けのパッケージが、JavaScript(実際にはマクロソフトのJScript)やPHPに対応している。

Express版が無償。

jQueryの入力補完に対応。

いずれも申し訳程度なので、これを使うくらいならWebMatrixのほうがいいだろう。

なお、最新のVisual Studio 2012はWindows 7以降にのみ対応。XPやVistaでは、2010や2008を使う必要がある。

CodeLobster

入力補完 あり
コードのパース
テンプレート
リファクタリング
フォーマッタ
アウトライン機能

本来は、PHP向けのIDE(一部の機能は有償)。

HTML・CSSエディタなどもあるが、JavaScriptエディタとしての機能はあくまで限定的。

Eclipse HTML Editor Plugin

入力補完 あり
コードのパース
テンプレート
リファクタリング
フォーマッタ
アウトライン機能 あり

その名のとおり、本来はHTML用のエディタ。

JavaScriptだけでなく、XMLやJSPにも対応している。

Aptana Studio

入力補完 あり
コードのパース
テンプレート
リファクタリング
フォーマッタ
アウトライン機能 あり

入力補完の候補表示では、どのブラウザが対応しているか明示してくれる。

テンプレートや入力補完などをRubyで記述し、内容を変更した場合、再起動しなければならない。

また、通常のEclipseやNetBeans以上に動作がまったりしているところがあり、好き嫌いが分かれる。

Komodo Edit

入力補完 あり
コードのパース
テンプレート
リファクタリング
フォーマッタ
アウトライン機能 あり

有料の「Komodo IDE」の軽量な無償版。

IDEというほどの機能はないが、コーディングをする分には十分な機能がある。

逆にEclipseやNetBeansほどではないが、やや起動に時間がかかってしまう。「Edit」と名前がついているものの、テキストエディタのような手軽さはない。

JavaScriptだけでなくPHP、Python、Ruby、Perl、HTML、CSSに対応している。

Bracket

入力補完 あり
コードのパース 一部
テンプレート
リファクタリング
フォーマッタ
アウトライン機能

Adobeが主導しているオープンソースプロジェクト。

JavaScriptエディタとしては、型推論してきちんと入力補完がきくようにする方向で開発が進められている。

将来的には、「Tern」というJavaScriptのコードをパースするライブラリを利用するらしい。

現状、JsDoc形式のコメントを一部パースしている。

HTMLエディタは、オンザフライでの編集に対応しており、変更箇所がすぐにプレビューに反映される。

まだまだ開発途中で実用には厳しいが、順調に開発は進んでいる模様。今後への期待大。

Scripted

入力補完 あり
コードのパース 一部
テンプレート
リファクタリング
フォーマッタ
アウトライン機能 あり

Node.jsを利用し、ブラウザ上で動作するという独特のもの。npmでインストールできるので手間いらず。

コードのパースは結構やってくれる。自分で定義したオブジェクトのプロパティも、入力補完の候補に出てくる。

そのパース自体は、ファイルのセーブ時に行われる。つまり、エラーの表示などはリアルタイムには行われない。

Node.jsのサーバが使えるので、自分でApacheなどを用意する必要がない。

意外とさくさく動くが、全体的にややとっつきにくい印象があり、起動も時間がかかる。

VJET

入力補完 あり
コードのパース
テンプレート
リファクタリング なし
フォーマッタ
アウトライン機能 あり

eBayが提供するEclipse用プラグイン。

「タイプライブラリ」というプロジェクトをインポートすると、ECMAScript 5th editionやjQueryなどの入力補完が有効になるが、JsDoc形式ではなくVJETDocという独自形式。