どうも、さいそん(@tak723sio)です。
株式会社ギブリーという会社で新卒のフロントエンドエンジニアとしてお仕事してます。
これから定期的にQiitaに投稿していこうと思います。
今回は業務で使っているAngularJSについてです。
AngularJSは今までほとんど触ったことがなかったので、
やることなす事全てが初めてだったので、初歩の初歩から書きためていこうと思います！
AngularJSってなんぞや
公式サイト AngularJS — Superheroic JavaScript MVW Framework
ぐぐったら出てきました。
AngularJSとは、グーグル（Google）とコミュニティによって開発が進められているJavaScriptフレームワークです。
Angular自身はMVW(Model-View-Whatever)のフレームワークらしいです。
何はともあれ、使ってみよう。
AngularJSを使ってみる
AngularJSを使うにはHTML内に
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
これを書けば使えますが、コレだと1から色々作らなければならないので今回はコレではなく
Yeomanを使ってプロジェクトのひな形を作ってみようと思います。
Yeomanを使ってAngularJSのプロジェクトのひな形を作る
基本的にMacを使って開発しているのでMacでのインストール方法を紹介します。
Yeomanをインストールするためにはnode.jsが入っている必要があります。
node.jsのインストールはnvm(node version manager)を使って入れておくと何かと良いのでお勧めです。
こちらを参考に入れてみましょう
gitを使ったnvmセットアップと複数バージョンのnode.jsインストール及びその切替え方法のご紹介 - テットリ
node.jsが入ったら、Yeomanを入れます。
[SLab.]フロントエンドエンジニアなら知っておいて損は無い！「Yeoman」のススメ - SaisonLab.
をみて導入してみてください。
Yeomanジェネレーターのインストール
よく紹介されるジェネレーターはgenerator-angularだが、
今回使うのはgenerator-gulp-angular(https://github.com/Swiip/generator-gulp-angular) です。
理由としては僕がGruntより gulpのほうが好きだからですｗ
さて、generatorを導入する前にgulpを導入しなければなりません。
$ npm install -g gulp
$ npm install -g generator-gulp-angular
上記の2つののコマンドを実行してgulpとgenerator-gulp-angularの2つをインストールします。その後
$ yo gulp-angular [app-name]
を実行して作っていきます。
_-----_
| | .--------------------------.
|--(o)--| | Welcome! |
`---------´ '--------------------------'| |
( _´U`_ ) | You're using the |
/___A___\ | fantastic generator for |
| ~ | | scaffolding an |
__'.___.'__ | application with Angular |
´ ` |° ´ Y ` | and Gulp! |
'--------------------------'
? Which version of Angular do you want? (Use arrow keys)
❯ 1.3.x (latest)
1.2.x (legacy 2013-11-08)
これは1.3.xを選びます。
? Which Angular's modules would you want to have? (ngRoute and ngResource will be addressed after)
❯◉ angular-animate.js (enable animation features)
◉ angular-cookies.js (handle cookie management)
◉ angular-touch.js (for mobile development)
◉ angular-sanitize.js (to securely parse and manipulate HTML)
いらないものがアレばスペースでチェックを外します。
ここではとりあえず、全部入れときます。
? Would you need jQuery or perhaps Zepto? (Use arrow keys)
❯ jQuery 1.x (branch still supporting IE6, 7 and 8)
jQuery 2.x (new version, lighter, IE9+)
ZeptoJS 1.1.x (jQuery compatible but very much lighter)
None (Angular will use its own jqLite)
Creative Cloud Files (unknown) Downloads
? Would you like to use a REST resource library?
❯ ngResource, the official support for RESTful services
Restangular, an alternative service to handles RESTful requests
None, $http is enough!
ここは好きなものをチョイスします。
? Would you like to use a router ?
ngRoute, the official router
❯ UI Router, flexible routing with nested views
None
お次は使うRouterモジュール。今回はUI Routerをチョイス。
何かと便利なので。
? Which UI framework do you want?
❯ Bootstrap, the most popular HTML, CSS, and JS framework
Foundation, "The most advanced responsive front-end framework in the world"
Angular Material, the reference implementation of the Google's Material Design specification
None
次はデザイン(CSS)のフレームワークを選びます。
こちらもお好みのものを。
今回Bootstrapをチョイス。
? How do you want to implements your Bootstrap components?
Angular UI Bootstrap, Bootstrap components written in pure AngularJS by the AngularUI Team
AngularStrap, AngularJS 1.2+ native directives for Bootstrap 3
❯ The official jQuery implementation of Bootstrap
No JavaScript, just CSS
Bootstrapのコンポーネントの設定
オフィシャルのものを使います。
? Which CSS preprocessor do you want? (Use arrow keys)
❯ Sass (Node), Node.js binding to libsass, the C version of the popular stylesheet preprocessor, Sass.
Sass (Ruby), Original Syntactically Awesome StyleSheets (requires Ruby)
Less, extends the CSS language, adding features that allow variables, mixins, functions and many other techniques.
Stylus, supporting both an indented syntax and regular CSS style.
None, only the good old CSS
次はCSS周り。お好みで。
今回はSass(Node)を使います。
? Which JS preprocessor do you want? (Use arrow keys)
❯ None, I like to code in standard JavaScript.
CoffeeScript, "a little language that compiles into JavaScript".
ES6 (Traceur), ECMAScript 6 compiled with the Traceur compiler from Google.
ES6 (6to5), ECMAScript 6 compiled with 6to5 which requires no runtime.
TypeScript, a typed superset of JavaScript that compiles to plain JavaScript.
次はJS周り。こちらもお好みで。
はじめなので、普通のJSをチョイス。
❯ None, I like to code in standard HTML.
Jade (*.jade)
Haml (*.haml)
Handlebars (*.hbs)
HTMLのテンプレートエンジン。おこのry
ふつうのものをチョイスしました。
ここまで選ぶと、ファイルが生成されていきます。
途中色々聞かれたら、自分にあったものを選択していきましょう。
実際に動かしてみる
$ gulp serve
を実行すると、ブラウザが立ち上がりsample画面が見れる思います。
コレで出来ました！
まとめ
細かく、長々と書きましたが、割とここまではすんなり行くと思います。
次回はこのプロジェクトファイルを使ってちょっとしたものを作っていきます。