Go to Qiita Advent Calendar 2024 Top
LoginSignup
37
42

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@gambare

Angular2のクイックスタートとチュートリアルを実施 - その1

Last updated at Posted at 2016-09-09

Javascript/TypeScript初心者が悪戦苦闘しながらAngular2との戦いの記録を意訳します。内容的に他の方の投稿と重複する部分もあります。

###進め方
この投稿では、Angular2のクイックスタートを説明します。ここで作ったアプリが後のチュートリアル「Tour of Heroes」の前提となります。

###対象
プログラムをほんのりかかじったことがあるが、Javascript初心者で、AngularJSにノンタッチかつ、英語にそこまで強くない人向けです。

###バージョン
Angular2.0.0-rc.5で実施しました。1

###本投稿の参照元(英語)
(バージョンが異なりますが、大きな影響はないと思います。)
QUICKSTART - ts

###実行結果
クイックスタートを完了すると以下リンク先のようなものが出来上がります。
Hello World的なものです
live-examples

#事前に必要なもの

必要なもの バージョン 概要
npm 3以上 Javascriptのパッケージマネージャ
node.js 5以上 サーバサイドでJavascriptを動かすための環境
TypeScript 1.8.10以上 Javascriptを静的型付け言語にする言語

※スクリプトエディタとしてAtomを使用しました。他にはVisualStudioやWebStormなどがある様です。
※必要なもののインストール方法は検索お願いします。

#ステップ1:プロジェクトの作成と設定
以下ディレクトリとファイルを作成します。
ファイルの中身は、こちらからコピペしてください。

# dir/file 概要
1 angular2-quickstart/ プロジェクトディレクトリ
2 #1/package.json npmが使う定義ファイル
このアプリケーションが必要とするモジュール(ライブラリ)一覧
3 #1/systemjs.config.js SystemJSの定義ファイル
SystemJSは,javascriptモジュール(ライブラリ)を動的に読み込むためのライブラリ
4 #1/tsconfig.json typescriptが使う定義ファイル
javascriptのバージョンなどを指定する
5 #1/typings.json typescriptの型情報定義ファイルを取得するための定義ファイル
使用するモジュールの型情報ファイルを取得するために必要
TypesScriptの型チェックで使用する

package.jsonについての参考：
NPM PACKAGES(英語)
npm package.json 取扱説明書

SystemJS / systemjs.config.jsについての参考：
SystemJS(英語)

tsconfig.jsonについての参考：
TYPESCRIPT CONFIGURATION(英語)

コマンドライン(コマンドプロンプト、ターミナルなど)から、
cd angular2-quickstartし、
npm installコマンドを実行し、
必要なモジュールをインストールします。(結構サイズでかいです。)
以後カレントディレクトリはangular2-quickstartであることを前提とします。

#ステップ2: アプリケーションの作成
ディレクトリappを作成します。

このディレクトリにスクリプトなどを作成していきます。
次にファイル：app/app.module.tsを作成します。

app/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 { }

app.module.tsは、アプリケーションの起点になるファイルです。
クイックスタートでは、以下を行っています。

  • モジュールのインポート・・・import {クラス(モジュール名)} from 'ディレクトリ/ファイル名(拡張子なし)'の形で記載

    • NgModule ・・・@NgModuleデコレータを使用するために必要
    • BrowserModule ・・・ブラウザで動かすために必要。
    • AppComponent ・・・後ほど作成する部品。2

  • NgModuleデコレータの定義

    • @ほにゃららで、ほにゃらら部分をデコレートできる。ほにゃららに引数を渡すイメージ
    • imports: 必要な他のモジュール
    • declarations: このモジュールに属するコンポーネント,ディレクティブ,パイプを指定する
      • コンポーネント: 表示する画面の一部をコントロールする。後ほど作成
      • ディレクティブ: htmlのタグの属性を書き換える
      • パイプ:シェルのパイプみたいなもの
    • bootstrap: ルート(エントリ)コンポーネントを指定

  • AppModuleクラスの宣言

    • Angularアプリは、ひとつのルートモジュールを持ち、ここではAppModuleとする。export宣言で外部からの参照ができるようになる

#ステップ3: コンポーネントの作成
ファイル：app/app.module.tsを作成します。

app/app.component.ts

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

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1>'
})

export class AppComponent { }

Angularアプリは通常ひとつのルート部品をもちます。画面の一部分を動的に変化させたいhtmlテンプレートと一緒にコントロールします。クイックスタートでは以下を行っています。

  • モジュールのインポート
    • Component ・・・@Componentデコレータを使用するために必要
  • Componentデコレータの定義
    • htmlのどの部分に対して、どんなhtmlテンプレートを使用し、コンポーネントをどう作成するかを宣言する
    • selector: 書き換え対象のHTML要素を特定するための文字列。今回の場合index.htmlに定義する、my-app要素を書き換える
    • template: 書き換え後の内容。動的に変化するものを含むのでJSPっぽい
  • AppComponentクラスの宣言
    • ここでの宣言により、AppModuleで使える

#ステップ4:アプリケーションの開始

ファイルapp/main.tsを作成します。

app/main.ts

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

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

アプリケーションを動作させるための初期設定ファイルです。このファイルがAppModuleを呼び出します。
AppModule,AppComponentとmain.tsを分けている理由は、今回main.tsをブラウザ用に作成しているからです。スマートフォンアプリ向けではApache Cordoveを使用するなど、書き換えが必要になります。

#ステップ5: webページの入り口を作る

プロジェクトルートフォルダ(angular2-quickstart)にindex.htmlを作成します。

index.html
<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

要点は以下のとおりです。

  • Javascriptライブラリについて
    • core-js: ブラウザ間の差を埋めるためのライブラリ
    • zone.js ,reflect-metadata: Angularで必要なライブラリ
    • SystemJS: モジュールのロードで必要なライブラリ
  • systemjs.config.jsとhtml内のスクリプトにより、appディレクトリ内のmain.jsが呼ばれる
  • <body>タグ内の<my-app>タグがAppComponentにより書き換えられる
    • (なお<my-app/>の様な書き方はエラーになる様です。)

##スタイルシートの追加

index.htmlから呼ぶスタイルシートを定義します。

styles.css

/* Master Styles */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}

#ステップ6: アプリケーションの起動

以下のコマンドをプロジェクトディレクトリ(angular2-quickstart)内で実行してください。

npm start

このコマンドはpackage.jsonで定義され、以下のプロセスがパラレルで起動します。

  • TypeScriptコンパイラー(ウォッチモード)
  • lite-serverと呼ばれる静的ファイルサーバ: スクリプトなどファイルが変更されるたびに、ブラウザを更新する

コマンド実行により、自動的にブラウザが立ち上がり、My First Angular2 Appの文字が表示されれば完成です。

本章は以上です。次章では、アプリケーション「Tour Of Heroes」を通して、もう少し実践的なAngular2アプリケーションを作成します。

  1. 意訳途中で正式版のAngular2がリリースされたため、このシリーズの投稿は様々なバージョンが混在している状態となっていますが、変更が必要な箇所はないと思います。 ↩

  2. 相対パスで、インポートファイルを指定する場合./が必要な様です。 ↩

37
42
0

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
Sign upLogin
37
42

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?