初心者が持っておくべきJavaScript開発ツール9選（Web/アプリ/ゲーム開発）

JavaScriptは多目的に使えるスクリプト言語です。WebサイトやAndroidアプリ、ゲーム等、多くのアプリケーションに用いられています。

そんなJavaScriptですが、ツールやライブラリを使うことでその能力をさらに発揮できます。この記事では、用途別（万能、ゲーム開発、アプリ・Web開発）で使えるJavaScriptのツールやライブラリを9つご紹介します。初心者からベテランまで、JavaScriptで開発をしている方であれば誰でも価値を見いだせるリストとなるでしょう。

何にでも使える万能JavaScript開発ツール

1. Gulp

Gulpは端的にいうと、「パッケージマネジャーになったタスク自動化ツール」です。またはワークフローの中の繰り返し作業を解消してくれるツールともいえます。

例えば、あなたがプロジェクトに携わっているとき、コード解析や修正したファイルをディレクトリにコピーしたり、ファイルを保存するとき、ただブラウザをリフレッシュするためだけに多くの時間をかけてしまっているとします。

Gulpはそのような、時間を浪費するタスクを自動でやってくれます。中身もとても強力で、こちらがGulpのプラグインのレジストリです。（執筆時で3634のプラグインがあります）

Gulp

2. Sublime

プログラマーはよいテキストエディタを使うべきですが、Sublimeを使えばそれ以上のものを求めなくなります。以前は多くのユーザーがNotepad++やAtomなどを使っていましたが、Sublimeを使ってからそれらに戻ることはありません。

主たるアピールポイントは、Python APIを備えていること。このおかげでクリーンで簡潔なPythonベースの拡張機能が使えるようになるのです。

Sublime

3. npm

npmの正式名称は「NodeJS Package Manager」。Node.jsで作成されたプロジェクトのためのオンラインリポジトリです。

Node.jsはオープンソースの、複数プラットフォームで使えるサーバー環境です。簡潔にまとめると、npmはプトジェクトの部品として使える膨大な量のフリーコードです。JavaScriptの開発者にとっては持っておくともっとも有益なツールとなるでしょう。

npm

4. ESLint

ESlintは本当によくできたリンティングツールです。（※リンティングとは、潜在的なエラーを見つけるためにコードを解析するプログラムのことです）

実際にコードを実行することなく、問題のあるコードやパターンを発見できます。コードを実行しないため、時間の節約になります。ESlintnの特に良い点は、リンティングのルールを公開しているため、ESlintで解析するコードやパターンのガイドラインを実際に確認できることです。

ESLint

ゲーム開発に使えるJavaScript開発ツール

5. Phaser.js

Phaser.jsは、JavaScriptの初心者でも簡単に始められる、2Dブラウザゲーム用の開発フレームワークです。

『Short Life game』のようなゲームを作ることができます。（※実際に『Short Life game』がPhaser.jsで作られているかは不明ですが、似たようなゲームは簡単に作れます）

Phaser.jsはチュートリアルや例がたくさんあり、使っていてとても楽しいです。さらにCanvasとWebGLのレンダリングもサポートしているので、さまざまなリッチなエフェクトを簡単につけられます。ひと昔前のNintendoのようなゲームにはならないのです（あなたがレトロなゲームを作るなら別ですが）。

Phaser.js

6. Babylon.js

先ほどのPhaser.jsが2Dゲーム開発に適したフレームワークなのに対して、Babylon.jsは3Dゲーム開発に適したフレームワークです。

本当にパワフルなフレームワークで、WebGLやHTML5、WebAudio、さらには簡単には実装できないピュアなWebGLで3Dオブジェクトを描くといったような複雑なタスクも、最小限のコードとストレスで実装できてしまいます。

『Shell Shockers』のようなゲームを作りたけれども、Unity3DやC#までやりたくないという方には最良のツールでしょう。

Babylon.js

7. Crafty

もしあなたが、コンポーネントを組み立ててインタラクティブなゲームを作るのが好きなら、Craftyが最適でしょう。

Craftyは、あらかじめ用意されたゲームの地面になる機能のコンポーネントや、ボタンのコンポーネント、音などを、ブロックを積むようにに組み立てていきます。

単に「たくさんのコンポーネントを組み合わせればいい」というほど簡単ではありませんが、比較的好きなようにいじれるでしょう。Craftyのコンポーネントやエンティティに慣れてきたら、自分自身でコンポーネントを作ったり、追加のコンポーネントをオンライン上で探すのも良いでしょう。

Crafty

アプリとウェブ開発に使えるJavaScript開発ツール

8. PhoneGap / Cordova

PhoneGapは簡単にハイブリットモバイルアプリが作れるすばらしいツールです。

もっともよくある使われ方としては、WebサイトをAPKファイルに落とし込みネイティブアプリとして使えるようにし、追加でハイブリットアプリ特有のJavaScriptやHTML5、CSSをつけるなどでしょう。これはひとつの例にすぎませんが、実際にはもっと色々なことができます。

なお、CordovaもまたPhoneGapとほぼ同様のことができます。お好きな方をお選びください。

PhoneGap

Cordova

9. JQuery Mobile

jQuery Mobile（JQM）は、タッチ操作に最適化された、HTML5の有名なUIフレームワークです。モバイル向けWeb開発へのアプローチとして、”write less, do more”の手法を取っています。

これを使うことで、APIとUIコンポーネントを使ってリッチなモバイル向けWebページを作れます。また、設定次第ではすべてのViewPortを操作することもできます。

またもっとも特徴的なものとして、Ajaxのナビゲーションシステムでページ遷移の際にアニメーションを加える機能もあります。ページに魅力的な効果を加えられるでしょう。

jQuery Mobile

（原文：Rashmi Inglekh　翻訳：Yui Shimizu）