AngularJSの開発環境の構築
AngularJSを使った開発はいずれのテキストエディタでも行えますが、あまりなれていないうちは、AngularJSの独自の属性を調べながら開発することはかなり面倒な作業です。また、自動で処理が行われる都合上、うまく動かない場合にデバッグもしにくいということがあります。
たいてい、このようなケースの場合には、スペルミスなどが原因なのですが正しく書いているという思い込みがあるので、なかなか自分では見つかりません。
そのために、AngularJSに対応したエディタの「WebStorm」を使うと便利なので、その使い方を紹介します。WebStormは、有料ではありますが30日であれば無料であり、その間にAngularJSの基本的な使い方を効率よく学べることと思います。
実際に購入する場合でも$49（個人）、$99（法人）となっていますので、それほど大きな出費を求められません。また、WebStormはWeb関連の開発に特化したエディタなので、それ以外にも便利な機能がたくさんあり、AngularJS以外にも使えるエディタです。
WebStormでの開発
WebStormのサイトからダウンロードしてインストールし、以下のような手順で操作します。また、あらかじめAngularJSのソースコード(angular.js)は公式サイトよりダウンロードしておきます。また、ダウンロードの際には、Buildの項目で「Minified」がデフォルトで選択されていますが、こちらを「Uncompressed」にしてダウンロードします。デフォルトの「Minified」ではエラーなどがあった際に原因を特定しにくくなるために、開発中などではこちらの形式で利用することをお勧めします。また、直接CDNなどのURLのパスを記述しても動作上は問題ありませんが、WebStormのコード補完機能がうまく機能しません。そのため、開発用としてangular.jsのファイルをプロジェクト内に配置します。また、今回は1.2.xのバージョンを利用しています。
- 最初に空のフォルダを作成し、図2のようなファイル構造にします。
- WebStormを立ち上げて、「Open Directory」を選択し、先ほど作成したフォルダを選択します。
- リスト5のようにindex.htmlなどのHTMLファイルを作成します。
AngularJSは他のライブラリなどの依存はないので、非常に簡単に始められます。
<!DOCTYPE html>
<html>
<head lang="ja">
<meta charset="UTF-8">
<script type="text/javascript" src="js/angular.js"></script>
</head>
<body ng-app>
</body>
</html>
実際にタグの属性の記述では、"ng-"と記述すればAngularJSで使える属性の一覧が表示されますので、開発の際に間違えることが少なくなります。
最後に
AngularJSなどのJavaScriptフレームワークを初めて触る場合に、公式サイトやブログなどをみても今一つ分かりにくいことがあるかと思います。特に、日本語における書籍などの情報はまだ揃っているとは言えません。
しかしながら、AngularJSはJavaScriptフレームワークの中でも有力となっているフレームワークなので、決して知っておいて損となることはありません。また、他のフレームワークの導入をすでに検討している場合にも、その考え方を知る上ではとてもためになります。次回からは、実際にAngularJSでの開発内容を紹介していきますので、気軽に触ってみて便利さを知ってもらえればと思います。
