Angular2で高速SPA開発(1)

Posted on by まろまろ

はじめに

Angular2（現在では単にAngularという名前にリネームされました。以下Angularといいます。）はGoogle社（とその他のコミュニティ）によって開発されている、フロントエンドWebアプリケーションフレームワークで、その前のバージョンであるAngularJSといえば、MEANスタックの一角として有名です。

単独でもフルスタックのフレームワークとしてシングルページアプリケーション（SPA）を開発可能です。

Angular.io

またAngularでの開発をサポートしてくれるツールとして@angular/cliというものがあります。プロジェクトのセットアップ、ローカルサーバ、ライブリロード等の便利な機能を提供してくれます。

@angular/cli

今回はこのAngularと強力なCLIツールである@angular/cliを使ってSPAの高速な開発を体験してみましょう！

今回の環境

今回の環境は

  • MacBook Pro (Retina, 13-inch, Early 2015)
    • macOS Sierra 10.12.5
    • プロセッサ: 3.1 GHz Intel Core i7
    • メモリ: 16 GB 1867 MHz DDR3
  • Node.js v7.5.0
  • npm 5.0.3
  • @angular/core 4.2.4
  • @angular/cli 1.1.3（その他のライブラリは省略）

です。

Node.jsやnpmのインストール手順は割愛します。

@angular/cliで簡単スタートアップ

なにはともあれ、まずはサクッと作ってみましょう。当然ですが@angular/cli をインストールしなければなりません。とはいっても

npm install -g @angular/cli

だけです。

古い資料だとangular-cli をインストールしましょう、と書かれているかもしれません。しかし試してみればわかりますが、現在このパッケージは非推奨になっています（単にリネームされただけのようですが）。またいくつかの依存パッケージもバージョンが古く、アップデートを促されます。

$npm install -g angular-cli
npm WARN deprecated angular-cli@1.0.0-beta.28.3: angular-cli has been renamed to @angular/cli. Please update your dependencies.
npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN @angular/core@2.4.10 requires a peer of rxjs@^5.0.1 but none was installed.

+ angular-cli@1.0.0-beta.28.3

ですのでこれからは@angular/cli でいきましょう。

さて、インストールが終わったらさっそくプロジェクトを作成してみます。ここではsampleapp という名前にしました。プロジェクトの作成はng new sampleapp とするだけです。

すると、

$ng new sampleapp
installing ng
  #... 省略
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  #... 省略
Successfully initialized git.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Project 'sampleapp' successfully created.

といってあっという間にできあがりです。

こうして作られたsampleapp ディレクトリでng serve とすると、ビルド（TypeScriptがJavaScriptに、SCSSがCSSにトランスパイルされる等）され、待受状態になります。

$ng serve
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
  #... 省略
webpack: Compiled successfully.

Compiled successfully. と表示されればOKです。あとはそのメッセージにある通り、http://localhost:4200 にアクセスしてみると……

welcome to angular!!
welcome to angular!!

動きました！！かんたん！！

ちなみにこれは公式のクイックスタートガイドをなぞったものです（なんだかスクリーンショットがぜんぜん違うんですけど……これに限らずいまいち新し目の情報が手に入りづらい……）。

もっと詳細な情報を！という場合はそちらを参照してください。

Coding in TypeScript

AngularではTypeScriptが採用されています。TypeScriptはいわゆるaltJSのひとつで、Microsoft社が開発したものです。基本的な文法はJavaScriptのものを踏襲しつつも大規模な開発に向けて設計されている、とされています。

TypeScript

大きな特徴としては、

  • JavaScript（厳密にはECMAScript 5）はそのままでも有効なTypeScriptである
  • ECMAScript 6および7の機能を先取りしている
  • 独自の機能としてインタフェース、列挙型、ジェネリック、名前空間などなどよくお世話になるものが用意されている
  • 静的型付けがある

といったところでしょうか。中でも個人的には静的型付けの安心感はとても頼りになります。

JavaScriptのライブラリを使う場合にも、型定義ファイルというものを別に用意しておけば強力な型推論による型付けの恩恵を受けることができます。有名なものであればすでに誰かが作ってくれているでしょうからどんどんお世話になりましょう。

公式のチュートリアルでお勉強

ところで、Angularは習得難度が高いと言われているようです。その理由としては

  • AngularJSとの互換性がなく、文法もぜんぜん違う。
  • いろいろな書き方がなかなかに変態的

などなどあるかもしれません。

わたしはAngularJSを触ったことがないので「乗り換えにくい」ことは考えようもないのですが、すでにある資産を活かしづらい、というのは大きなマイナスかもしれません。

変態的な文法に関しては、チュートリアルをこなすなどして慣れていきましょう。

Tutorial: Tour of Heroes | Angular.io

この公式チュートリアルでは今回紹介した、最初の一歩からはじまり、フォームとモデルのバインディング、コンポーネント化、ルーティング、HTTPによるリモートAPIサーバへのアクセス、などを学ぶことができます。

HTMLは書きたくない!

さて、これで最低限は使えるようになったでしょうか。

……ところで、それほど量は多くないとはいえ、テンプレートのHTMLを手で書くなんて信じられないですよね。というわけでPugを使って少し楽をしましょう。

Pug

PugはHTMLのジェネレータです。むかしはJadeなどと呼ばれていましたね。AngularでPugを使うには、

Angular2 の angular-cli で、webpack の設定を変更して pug(Jade) を使う | Qiita

に書いてある通りにやればよいです。

まず、ng eject し、webpack.config.js を編集し、$npm install pug-html-loader –save としてPug用のローダをインストールします。

その後、app.component.html をapp.component.pug とリネームし、内容を

div(style="text-align:center")
  h1 Welcome to {{title}}!!
  img(width="300" src="data:image/svg+xml;base64,PD94bWwg... //省略")

h2 Here are some links to help you start:
ul
  li: h2: a(target="_blank" href="https://angular.io/tutorial") Tour of Heroes
  li: h2: a(target="_blank" href="https://github.com/angular/angular-cli/wiki") CLI Documentation
  li: h2: a(target="_blank" href="http://angularjs.blogspot.ca/") Angular blog

と書き換え、app.component.ts の

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.pug',  //<- ここを書き換える
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

Component デコレータのtemplateUrl オプションにpugファイルを指定します。これでもういちどlocalhost:4200 にアクセスしてみると、さきほどと同じ画面が表示されるでしょう（生成される内容が同じなので当然ですが外から見てわかりません……）。

Pugの文法に関しては上で紹介した公式サイトを参照してください。

注意点としては、ng eject 後、ng serve が動作しなくなります。

$ng serve
An ejected project cannot use the build command anymore.

eject時に表示されたメッセージの通りにnpm start しましょう。

また、Angular特有の属性がうまくパースできない場合があるようです。その場合は属性名をシングルクオート（‘ ）でくくるか、属性をカンマ（, ）区切りで記述しましょう。

ちなみに、やはり手書きはしたくないCSSですが、SassやStylusなどはとくにライブラリのインストール等の手間もなく利用可能なようです（未検証）。

おわりに

かなりの駆け足でしたが、こうしてとりあえずプロジェクトを開始する、というのがすごく簡単であることがわかったのではないかと思います。依存ライブラリ等のインストールもng やnpm コマンドにおまかせで簡単にセットアップできるのでチームでの開発でも有用ではないでしょうか。

今回はAngularの特徴であるデータバインディングや、コンポーネント指向的な内容がありませんが、次回以降の紹介を予定しています。あとはDBやサーバとの連携もですね（というかそもそもタイトルにあるSPAにまったく触れられていません）。

お楽しみに。では。