LoginSignup
16

More than 5 years have passed since last update.

Angular2系入門風

Last updated at Posted at 2016-11-11
1 / 28

*こちらの資料は社内勉強会で発表したものになります


Agenda

  • Angular2系について
  • 最小スタートするには
  • その後のこと

Angular2系について

  • Angular2ではなく、Angularの2系である
  • Component指向
    • UIをComponentの組み合わせとして構築しようという考え方
    • Angular2系は画面に表示するためのDOMを記述する際は全てComponentとして書く

  • 大体全部入り
    • HTMLのComponent作れる
    • HTTPリクエスト飛ばせる
    • データバインドしてくれる
    • 適用範囲を絞った、scopedなCSSを扱える
    • イベント発火やらのデータフローを扱える
    • DIの機構を提供してくれる
    • ルーティング出来る
    • その他も色々出来る(雑

最小スタートするには

発表時点でのサンプルリポジトリ:https://github.com/sisisin-sandbox/hello-ng2

  • *Node.jsが実行できる環境がない方はまず最新版をインストールしておきましょう

ライブラリのインストール

npm iしてAngular 2のHello World!を書くところまで【改】や、公式のQuickstartを参考にしつつ、Angular2系に必要なパッケージを新たにnpm installしていきます

npm init -y
npm i -S @angular/{core,common,compiler,platform-browser,platform-browser-dynamic} rxjs@5.0.0-beta.12 zone.js@0.6.26 core-js
npm i -D typescript @types/{core-js,node} browserify

補足1

  • Angularのコアライブラリ群,RxJS,Zone.js,core-jsが必須パッケージ
    • Angular,core-jsは基本最新版でOK
    • 最小構成だとコアライブラリのformshttpなどはなくてもよい
    • RxJS,Zone.jsは公式サイトのQuickstartにあるpackage.jsonのサンプルを確認の上、バージョンをあわせてnpm installコマンドを実行する

補足2

  • TypeScriptも実質必須
    • 出回ってる情報は基本TypeScriptなので使っておくのが無難

補足3

  • bundlerはbrowserify,webpack,rollup辺りから好みに応じて利用する
  • ちょっとためすだけならbrowserifyがおすすめ
    • tree shaking使いたいならwebpack2かrollupを使う
    • プロダクション環境ではAoTコンパイルを使うためにwebpack2系などを推奨
      • ES Modulesが解釈できるbundlerであればよい
      • (こちら @laco0416 さんの指摘より追加しました。ありがとうございます!)
    • 公式のquick startではSystem.js使ってますが回避したほうが無難

(以後話を簡単にするためにbrowserify前提で進めます


補足4

色々説明しましたが、正直めんどいので何も考えずに最初のコマンド叩いとけばいいです


tsconfigの用意

TypeScriptを使うのでその設定ファイルを用意します

tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noImplicitAny": true,
    "outDir": "./tmp"
  },
  "exclude": [
    "node_modules"
  ]
}

補足

  • Angular2系ではDecorator構文を利用するのでemitDecoratorMetadata,experimentalDecoratorstrueにする
  • モジュールの記述をCommonJS形式に変換したうえでbundleする必要があるため、modulecommonjsに指定する
  • TypeScript使うならnoImplicitAnytrueにしとこう
  • 出力先ディレクトリを指定(tsc(TypeScriptのトランスパイルのコマンド) -> bundle(browserifyによるファイルの結合)とビルドするための一時的な出力)
  • この時点で適当にindex.tsを作成して、$(npm bin)/tscを実行してトランスパイルが通ることを確認しておくといいかも

ビルドスクリプトの記述

scriptsに下記のようにコマンドを定義します

package.json
...
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "bundle": "browserify ./tmp/index.js -o ./bundle.js",
    "bundle:w": "watchify ./tmp/index.js -o ./bundle.js -v",
    "build": "npm run tsc && npm run bundle",
    "watch": "npm-run-all --parallel tsc:w bundle:w"
  },
...

おもむろにbuildコマンドを叩きます

$ npm run build

補足

  • npm scriptsで定義したコマンド内では、node_modules/.binにパスが通るので、ここで定義したtscnode_modules/.bin/tscと等価である
  • watchコマンドは開発時にファイル変更の自動検知・自動ビルドのために定義
    • 別途npm i -D watchify npm-run-allでパッケージをインストールする必要あり

コードを用意する

ここまで来てようやくTypeScriptを書き始めます

最初にファイルを作成しておきます

$ mkdir src && touch index.html src/index.ts src/app.module.ts src/app.component.ts

何はともあれHTML

index.html
<html>
<body>
  <my-app>Loading...</my-app>
  <script src="./bundle.js"></script>
</body>
</html>

補足

  • scriptタグでのファイルの読み込みはAngularのComponentになるカスタムエレメント(my-app)よりあとにないと動かないので注意
    • これ知っておかないと例えばRailsのSprockets絡みで若干困るかもしれない

Componentを作る

./src/app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <div>hello world</div>
  `
})
export class AppComponent { }


補足

  • @angular/coreからComponentをimportして、@Componentデコレータを利用できるようにする
    • デコレータは実際はただの関数なので他のモジュール同様にimportして利用する
  • @ComponentデコレータでAppComponentクラスをAngularのComponentとして定義する
  • 振る舞いを定義していないので、ここではAppCopmonentクラスの実装は空のままで良い
  • selectorで指定した文字列をHTMLのElementのように記述できる
    • この例では<my-app></my-app>のように書く
    • 従って、先程作ったindex.htmlではこのComponentを参照している

NgModuleを定義する

NgModuleってなんやねんという話ですが、要は定義したComponent等をAngularに読み込ませる場所です。
ここに記述がないとComponentとして実行できません。
Componentの他に、Service,DirectiveなどのAngularのモジュールとして定義したものについても同様です


./src/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

補足

  • Component同様、@angular/coreからNgModuleをimportしてデコレータを利用できるようにする
  • importsで外部のmoduleを取り込む
  • declarationsでComponent,Directiveを取り込む
  • bootstrapでroot componentを定義
  • 以上の定義を持ったNgModuleをもつAppModuleを作る。これもまた実装は持たなくて良い

エントリポイントを作成

index.ts
import 'core-js';
import 'zone.js/dist/zone';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule)

補足

  • Pollyfillであるcore-js,zone.jsはここで読み込む
  • ブラウザ上でAnuglarを実行するための関数に定義したModuleを渡してAngularアプリを起動させる

画面を表示させる

$ npm run build
$ python -m SimpleHTTPServer # お好きなサーバをどうぞ

localhost:8000にアクセスして無事起動したらめでたしめでたし。


その後のこと


HappyHacking!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16