皆さんはAngularJSに興味がありますか？　この記事では、AngularJSのための最適なツールと選りすぐりの情報をリストにまとめています。Angularを使ってアプリケーションの開発をする際には役立つ内容です。

Webアプリケーションを動的に設計したいWeb開発者の多くは、 フレームワークとしてAngularJSを選択するようになってきました 。AngularJSの開発者が新たにAngularJSプロジェクトを立ち上げる場合、本格的にWebサイトを開発しようとすると、非常に多くのツールが必要になります。

AngularJS初心者の場合は、まず始めに AngularJSの良書 を何冊か読むと良いでしょう。

私たちは、オンラインでAngularJSを学習するための、膨大な AngularJSのチュートリアル リストも作成しています。

AngularJSでWebアプリケーションを開発する際の負荷を減らせるよう、この記事ではテストからフロントエンド開発、編集、ライブラリ、拡張機能、モジュール、コードジェネレータ、グリッドツールにわたる厳選された素晴らしいツールをご紹介します。

AngularJS開発のための最適な統合開発環境

以下に、最も需要のあるAngularJS用の統合開発環境（IDE）と軽量テキストエディタを挙げます。

WebStorm

WebStormは優れたコードエディタです。どんな種類のWebサイト制作においても、プロジェクトを完全に把握し、質の高いコーディングを可能にしてくれます。更にWeb開発のための最先端技術は全てサポートされています。このIDEツールを使うことで、全てのWeb開発において、あらゆる詳細機能を統合し、Webサイト制作のワークフローを効率化することが可能です。

Aptana

Aptanaは、アジャイル開発でWebアプリケーションを作成するのに便利な統合開発環境です。このIDEエディタツールをAngularJSで使うためには、EclipseマーケットプレイスからAngularJS Eclipseという拡張機能をアクティベートする必要があります。

Sublime Text

SublimeはAngularJSでWeb開発をするのに役立つテキストエディタツールです。ショートカットキー、もしくはキーボードを数回叩くだけで、ソースコードの目的の位置まで移動することができます。どんな種類のプログラミング環境にも適用しやすく、カスタマイズ性の高いツールです。更に好みによって、編集画面を分割することができます。プロジェクトの切り替えも簡単で、修正内容は各プロジェクトに自動保存されます。

AngularJSのための厳選テストツール

AngularJSやその他のソフトウェアを用いる開発において、テストは重要な工程です。以下に紹介するツールを使えば、AngularJSで開発したアプリケーションのテストを簡略化することができます。

これらのツールは JavaScriptのオンラインテストツール とも相性が良いです。

Protractor

ProtractorはAngularJSのためのend-to-endのテストフレームワークです。Protractorを使うと、実際にユーザが使用するような環境で、完全に自動化されたテストを行うことができます。アプリケーションをテストする際は、実際のブラウザ上で動作させます。また、WebDriverやMocha、jasmine、Node.js、selenium、cucumberなどの優れた技術と組み合わせて使うこともできます。
更に、ペンディングになっているWebページのタスクが全て完了すると、Protractor はAngularJSのアプリケーションと自動で通信を行います。そのためテストの際には、waitやsleepといったコマンドを使う必要がありません。

Jasmine

JasmineはJavaScriptユーザのために特別に作られた、ビヘイビア駆動開発フレームワークです。基本的には、テスト対象のシステムに関数を渡し、最後までそれを保持します。一式にまとまったパッケージを用いることで、どんな種類のテストにも対応できます。これが、効率的にアプリケーションをテストするためにJasmineを使う大きな利点です。

ただし、このフレームワークには難点が1つだけあります。それは、どのプラットフォーム（ブラウザ）で動作しているかを判別できないという点です。しかし、この問題はJasmineとKarmaを組み合わせて使うことで簡単に解決できます。

Karmaはテストランナーです。テストフレームワークであるJasmineと一緒に使うと、効率よくアプリケーションをテストすることができます。

Code Orchestra

Webアプリケーションの開発やテストに役立つフロントエンド開発ツールと言えば、何と言ってもCode Orchestraです。開発者はリアルタイムでコードを書くことができ、それを COLT（Code Orchestra Livecoding Tool）側で提案を出しながら修正し、変更したコードを同じフォーマットで保存します。このツールを使えば、編集したコードは自動で実行中のアプリケーションに反映されます。

AngularJSのための最適なライブラリ

以下のリストにある便利なライブラリを使えば、開発者は苦労することなく、AngularJSフレームワークの力を引き出すことができます。オープンソースで既に他の人がライブラリを作成しているでしょうから、自ら開発する必要はありません。

CodePen

HTMLやCSS、JavaScriptなどを使う全てのフロントエンド開発者にとって、CodePenは理想的な編集ツールです。このツールがあれば、Webサイトのフロントエンドの制作、テスト、仕上げといった退屈なWeb開発の作業プロセスを最小限に減らすことができます。CodePenは共同でライブコーディングができる環境なので、Web開発者はクロスプラットフォーム上でライブビューを見ることができます。更に、ブラウザで動くコードエディタもあり、複数ファイルを自動で高速アップロードすることが可能です。こうした特徴のおかげで、Web開発者は数秒で新たなコードを書くことができます。

AngularFire

AngularFireを使うと、AngularJSアプリケーションのバックエンド側の開発が非常に楽になります。Firebase向けのAngularJSのバインディング機能は、AngularFireで正式にサポートされています。Firebaseはクラウドベースのプラットフォームで、リアルタイムのアプリケーションと簡単に統合がすることができ、バックエンドの開発も素早くできます。
FirebaseとAngularFireを一緒に使うと、高速なデータの同期や、優れたユーザ管理サービスの提供が可能です。また、3wayデータバインディングやユーザ認証、静的にホスティングを行う機能も提供されています。

AngularUI

AngularUIは、シングルページアプリケーションを効果的に作成できる、評判の高いツールです。こうしたアプリケーションの作成には、ルーティング機能が必要となります。
この優れたAngularJSのフレームワークは、ui-routerとしてよく知られている、包括的なUIコンポーネントから構成されています。このツールによってナビゲーションが容易になり、単にルートURLに基づくのではなく、アプリケーションの状態によってビューが変更できます。
AngularUIには、更に、ui–map、ui-calendar、ui-Bootstrapのようにrawディレクティブを使う、多くのUIコンポーネントがあります。こうしたUIコンポーネントとディレクティブを使えば、AngularのWebサイトの作成をさらにスピードアップできます。

UI Bootstrap

UI Bootstrapは、実に素晴らしいAngularUIのコンポーネントであり、使いやすくて包括的なスマートフォン向けWebアプリケーションを作成する際に役立ちます。ネイティブなAngularJS のディレクティブを備えたこのUIコンポーネントによって、Twitter Bootstrapは、その性能を十分に発揮できます。

Angular.jsの便利な拡張機能とツール

以下に、アプリケーションの特殊なニーズに役立つと思われるAngular.jsの拡張機能を挙げます。

ng-inspector

開発やデバッグを行う際、またAngularJSのアプリケーションを理解する際にng-inspectorを使用すれば、検査用コントロール・ウィンドウ枠の作成を全面的にアシストしてくれます。FirefoxやChrome、Safariに対応する、実に素晴らしいブラウザ拡張です。
アプリケーションとの相互作用が容易で、どんなリアルタイムのアクションも簡単に反映できます。また、全体的なスコープの階層やそのモデル、型、値などを概観することもできます。更にこのツールは、各スコープをポイントした際にDOMのノードをハイライト表示してくれます。

AngularJS Batarang

AngularJSのアプリケーションをデバッグする際にAngularJS Batarangを使用します。AngularJS BataranはChrome拡張用に提供されているツールで、アプリケーションのパフォーマンス向上に役立ちます。また、アプリケーションのパフォーマンスをチューニングする際に、進捗状況を測ることができます。

restangular

restangularはAngularJS向けのサービスです。データベースに対するデータのgetやpost、delete、putなどの異なる種類のリクエストを扱う際に便利です。RESTful なAPIから大量のデータを消費するようなAngularJSのアプリケーションには理想的なツールです。

便利なツールgenerator-angular

Yeomenのジェネレータ

実用的な初期設定とベストプラクティスがあれば、簡単にプロジェクトを始めることができます。Yeomenのジェネレータツールは、そんなAngularのアプリケーションを確立する上でとても役に立ちます。ターミナル用コマンドをいくつか使うだけで、AngularJSのアプリケーションの開発工程がスピードアップします。
このAngularJS用のジェネレータは、プロジェクトに関する情報を把握する際に強固な足掛かりとなる上に、アプリケーションの開発とテストをサポートしてくれます。

angular deckgrid

angular deckgridは、異なるポータブルデバイスに対応するアプリケーションに、高いレスポンシブと見栄えの良さを提供してくれます。この軽量のブロック状のグリッドは、効果的に写真を表示できる、自由度の高いグリッドを作成する際にも便利です。

Radian

優れたフレームワークであるRadianを使えば、AngularJSでWebアプリケーションを作成する際に必要な、最低限のセットアップで済みます。複数の開発者を抱えるプロジェクトでは、最も理想的な選択肢です。

Lumx

Lumxを使えば、シンプルで美しいアプリケーションを、素早く簡単に作成することができます。このレスポンシブなフロントエンドのフレームワークは、AngularJS及びGoogle Material Design Specificationに準拠しています。このツールには、Sassプリプロセッサや、Webアプリケーションのパフォーマンスの飛躍的な向上に役立つAngularJSやjQueryといった最新技術が組み込まれています。

angular gettext

コードを英語で記述したり、翻訳したいコーディングの特定の箇所に、補足説明を記述したりできます。angular gettextは、特定のコードを手軽に自動翻訳できます。AngularJSのシンプルかつ強力な翻訳サポートツールです。

ngDocs

AngularJSのフレームワークにビルトインされているngDocsを使って、アプリケーションのドキュメンテーションとリファレンスを簡単に作成できます。更に、Androidに準拠したこのツールには素晴らしいチュートリアルがあるので、初心者でも簡単に使えます。

ngTables

AngularJSのフレームワークで使えるngTablesを利用すれば、単純なWebアプリケーションから複雑なものまで、テーブルを簡単に作成して効率的に管理できます。このツールによって、ソート、フィルタ、ページ送りなど様々なアクションが可能になり、テーブルを有効活用できます。カスタムフィルタオプション、テーブルのグループ化、データの排他制御、コールバックによるテーブルのグループ化、その他たくさんの機能がこのツールで提供されています。ngTablesを利用し、そうした機能を有効に使いましょう。

最後になりますが、ここで紹介したツールは、AngularJSでどんな種類のWebアプリケーションを作成する場合にも、作業を楽にしてくれる最高に便利なものです。こうしたツールを活用して、今後取り組むAngularJSのプロジェクトを効率的に進めてください。

このリストがお役に立てば嬉しい限りです。ご希望のツールが見つかりませんでしたか？　そんな方は、コメント欄でお知らせくださればリストに掲載します。

私の名前はLeena Josephです。Agriyaで働く、熱心な AngularJSの開発者 です。Web開発サービスに関するヒントや技術、最新のトレンドなどを皆さんとシェアしたいと思っています。私はまた、YII フレームワークとLaravel開発の専門家でもあります。Twitterでのフォローをよろしくお願いします。