JavaScriptで開発環境構築!種類とおすすめエディタ10選

JavaScriptは、ブラウザ上で動作するプログラミング言語です。Webアプリの開発において、クライアントサイドの処理を記述するために無くてはならないものです。今回は、JavaScriptの開発環境について、おすすめなものをご紹介します。

開発環境の種類

テキストエディタ+ブラウザ

テキストエディタ上でコードを書き、ブラウザで実行する方法です。テキストエディタは、ここまでで紹介したAtomなどに加えて、メモ帳などでも代用できます。ブラウザは、ChromeやSafariなどで実行できます。

ブラウザ上のテキストエディタ

テキストエディタで記述し、ブラウザで実行するという手順を省くことが可能です。ブラウザ上で記述できるため、テキストエディタのダウンロードや環境設定をせずにすぐに開発を開始できます。PLAYCODEなどが代表的です。

総合開発環境(IDE)

テキストエディタにある標準的な機能に加えて、インテリセンス(予測入力のような機能)やエラー文の表示などがあります。Eclipseや、Visual Studio Codeがこれにあたります。大人数で開発をする際、他のエンジニアが記述したクラスが共有しやすい等のメリットがあります。

Windowsでのおすすめエディタ

Eclipse

オープンソースのIDEです。Javaの開発で使用されているイメージが強いですが、JavaScript用のパッケージを入れれば、JavaScriptも開発可能です。Eclipseは基本英語ですが、日本語化パッケージもあります。コード補完や構文強調表示もしてくれるので、快適にプログラミングできます。

Eclipseのダウンロードはこちら

PLAYCODE

ブラウザ上で動作するJavaScript開発エディタです。(Windows限定というわけではありません。)構文強調表示やエラーチェックを自動で行ってくれますますし、インストールが不要なのも使いやすいです。GitHubとの連携もできるので、バージョン管理がしやすいのも利点です。

PLAYCODEの利用はこちら

Visual Studio Code

Microsoft製の無料IDE(綜合開発環境)です。コード補完はもちろん、構文強調表示も可能。利点はjQueryにも対応していることです。Microsoftのサービスを頻繁に使っている人は互換性が高くなります。Microsoft製ですがMacやLinux版もあります。

Visual Studio Codeのダウンロードはこちら

Brackets

Adobeが提供している無料のテキストエディタで、クイックエディット機能が特徴です。HTMLを編集している時に、その要素のCSSを編集したければCSSがポップアップしてそれを編集できるという機能です。JavaScriptのコードヒントも質が高いので、JavaScriptの細かい仕様を覚えなくてもさっさとコーディングできます。

Bracketsのダウンロードはこちら

Liveweave

HTML5、CSS3、JavaScriptをリアルタイムで確認できるテキストエディタです。そのわりには軽量で、低スペックのPCでも利用できます。書いたコードがどのようになるか、イメージを都度見ることができます。

Liveweaveの利用はこちら

Atom

最近流行しているプログラミング用テキストエディタです。様々な言語に対応していて、atom-ternjsというパッケージをインストールすればコード補完ができるようになります。

Atomのダウンロードはこちら

Macでのおすすめエディタ

Xcode

もはやMacでのIDEといえばXcodeというくらいメジャーになったIDEです。Swiftの開発で有名ですが、JavaScriptでの開発もできます。

Xcodeのダウンロードはこちら

CotEditor

Mac用としては有名なテキストエディタです。シンプルな機能ですが、その分動作が軽いので「重たいIDEは嫌だ」という人向きです。

CotEditorののダウンロードはこちら

Linuxでのおすすめエディタ

Emacs

メジャーなテキストエディタです。マウス不要のキーボードオンリー操作が魅力ですが、その分キーボードのコマンドに慣れる必要があります。拡張性も高く、もちろんJavaScriptにも対応しています。Windows、Macでも使用可能です。

Emacsのダウンロードはこちら

Vim

Emacsと双璧をなすテキストエディタです。こちらもキーボードだけですべての操作ができます。また、キーボードでのホームポジションから大きくずれた操作の少なさが魅力。例をあげると、矢印キーなどホームポジションから遠くに配置されがちなキーを押さずに移動ができるようになっていることです。Linuxだけではなく、Windows、Macでも利用可能です。

Vimのダウンロードはこちら

まとめ

今回は、JavaScriptの開発環境について、おすすめなものをご紹介しました。基本的にはテキストエディタがあれば開発できるのですが、コード補完や構文強調表示、静的エラーチェックなどがあるほうがストレス無く開発できます。お気に入りの環境を探してみてください。

関連記事

ページ上部へ戻る