CodeZine(コードジン)

特集ページ一覧

はじめてのJavaScriptフレームワーク選び

AngularJSではじめるJavaScriptフレームワーク開発スタイル 第1回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2014/10/10 14:00
目次

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のバージョンを利用しています。

  1. 最初に空のフォルダを作成し、図2のようなファイル構造にします。
  2. WebStormを立ち上げて、「Open Directory」を選択し、先ほど作成したフォルダを選択します。
  3. リスト5のようにindex.htmlなどのHTMLファイルを作成します。

 AngularJSは他のライブラリなどの依存はないので、非常に簡単に始められます。

図2 AngularJSでのファイル構造
図2 AngularJSでのファイル構造
リスト5 ブランクのHTML
<!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で使える属性の一覧が表示されますので、開発の際に間違えることが少なくなります。

図3 WebStormのコード補完機能
図3 WebStormのコード補完機能

最後に

 AngularJSなどのJavaScriptフレームワークを初めて触る場合に、公式サイトやブログなどをみても今一つ分かりにくいことがあるかと思います。特に、日本語における書籍などの情報はまだ揃っているとは言えません。

 しかしながら、AngularJSはJavaScriptフレームワークの中でも有力となっているフレームワークなので、決して知っておいて損となることはありません。また、他のフレームワークの導入をすでに検討している場合にも、その考え方を知る上ではとてもためになります。次回からは、実際にAngularJSでの開発内容を紹介していきますので、気軽に触ってみて便利さを知ってもらえればと思います。

参考資料



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:AngularJSではじめるJavaScriptフレームワーク開発スタイル

もっと読む

著者プロフィール

  • WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。個人紹介主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5