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

2017 年 8 月 3 日 Categories: JavaScript, アプリケーション |

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

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

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

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

IDE

NetBeans

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

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

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

JSDT

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

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

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

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

Visual Studio Code

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

Visual Studioのオープンソース版。JavaScriptだけでなく、さまざまな環境の開発に利用できる。

意外にも、Windows・Mac・Linuxのクロスプラットフォーム。

JavaScript(実際にはマクロソフトのJScript)やNode.js、PHPに対応している。

TypeScript対応。そのため、AnglerJSとの親和性が高い。

jQueryの入力補完などに対応。

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が主導している、HTML5ベースのオープンソースプロジェクト。

基本的には、ウェブ開発のためのIDE(エディタ)。

拡張機能(プラグイン)が豊富。

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

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

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

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

CSSに関しては、SCSSやLESSなどのプリプロセッサに対応している。

Atomと同じく、開発は活発に行われている模様。今後にも期待できる。

Orion

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

オープンソースIDEで有名なEclipse Foundationが開発。

基本的にはウェブ上(クラウド)での開発のためにつくられたものだが、クライアント版も存在。

VJET

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

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

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

テキストエディタ

Atom

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

純粋にテキストエディタとして人気があるオープンソースのソフトウェア。

ウェブベースの技術を用いたElectronというライブラリをベースとしているため、機能の拡張などがHTML・CSS・JavaScriptなどで行える。

開発者が多く、拡張機能なども積極的にリリースされている。

JavaScriptを開発するには、Ternというパーサを導入すると便利。

Mery

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

JavaScriptとは関係なく無料のテキストエディタとしても優秀なテキストエディタ。

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

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

TeraPad

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

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

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

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

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

すでに開発が終了したもの

Scripted

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

VMWareが提供していたIDE。

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

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

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

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

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