Angular2 – 5 MIN QUICKSTARTの日本語訳だよ。

Angular2 – 5 MIN QUICKSTARTの日本語訳だよ。

これは5 MIN QUICKSTARTの日本語訳だよ。
はじめての人のために5分のクイックスタートをやるよ。

Angular2

Githubに実際のファイルを用意したから参考にしてよ。
TypeScriptでやりたい人はこっち
Dartでやりたい人はこっちを見るといいよ。

はじめるよ。

ゼロからJavascriptで作る簡単なAngular2アプリケーション制作を始めようよ。

え、もしかしてJavascriptやりたくないの?
僕たちはJavascriptで始めようとしているけど、バナーのコンボボックスから他の言語を選択すれば、Angular 2 アプリケーションはTypeScriptやDartでも書くことができるんだよ。

6つの手順で進めるよ。

  1. プロジェクトフォルダを作るよ。
  2. 必要なライブラリをインストールするよ。
  3. app.jsにアプリケーションのルートコンポーネントを書くよ。
  4. Bootstrapだよ
  5. index.htmlを作るよ
  6. 実行するよ

プロジェクトフォルダを作るよ

ぼくたちのアプリケーションを入れる新しいフォルダを作るよ

mkdir Angular2-quickstart
cd    Angular2-quickstart

必要なライブラリをインストールするよ

npmパッケージマネージャーを使ってライブラリと開発ツールのパッケージをインストールするよ。

  • angular2 – Angular 2 ライブラリだよ。
  • live-server ファイルを変更するとブラウザをリロードしてくれる静的なファイルサーバーだよ。

ウェブ上でライブラリを参照するか、ぼくたちのプロジェクトにダウンロードすることができるよ。
それはnpmの持続的な開発プロセスじゃないのと、一回npmをインストールしておけばパッケージの読み込みは超絶簡単だよ。

え、npm持ってないの?このドキュメント全体で繰り返し使うからすぐ入手しておいてよ。

ターミナルを開いてコマンドを入力するよ。

npm init -y
npm i angular2@2.0.0-alpha.44 --save --save-exact
npm i live-server --save-dev

これらのコマンドはパッケージのインストールとnpmの設定ファイル package.json を作るコマンドだよ。
ぼくたちの package.json は次のようになるよ。

{
  "name": "angular2-getting-started",
  "version": "1.0.0",
  "dependencies": {
    "angular2": "2.0.0-alpha.44"
  },
  "devDependencies": {
    "live-server": "^0.8.1"
  }
}

scripts セクションもあるよ。次のように変更してよ。

{
  "scripts": {
    "start": "live-server"
  }
}

すぐ実行するよ。スクリプトコマンドでプロジェクトの世界を拡張したんだよ。

はじめてのAngularコンポーネントだよ。

新しくapp.jsを追加して次のコードを貼り付けてよ。

var AppComponent = ng
    .Component({
        selector: 'my-app',
        template: '<h1>My First Angular 2 App</h1>'
    })
    .Class({
        constructor: function() {}
    });

Angularのグローバル名前空間 ng に属しているコンポーネントやクラスメソッドを連結する AppComponent という名前のビジュアルコンポーネントを作成しているんだよ。

var AppComponent = ng
    .Component({...})
    .Class({...})

Component メソッドは2つのプロパティのオブジェクトの設定をとるよ。
selector プロパティは、これは “my-app” って名前のホスト要素を制御するコンポーネントということをAngularに伝えるよ。
my-app 要素に遭遇すると、Angularは AppComponent インスタンスを作成して表示するよ。

template プロパティは、コンポーネントの外観を定義するよ。
この例ではHTMLをインラインで書いてるよ。
後で、ビューテンプレートファイルにHTMLを移動して、templateUrl プロパティにテンプレートのファイル名を割り当てるよ。
ぼくたちは超簡単なテンプレートを除いた練習では、そっちを好むと思うよ。

Class メソッドはここで定義するプロパティとメソッドをviewに結合して、
適切な振る舞いをコンポーネント自体を設定するよ。

このコンポーネントクラスは最低限の実装だよ。
コンストラクタ関数には何もないから、まぁ何もしないよ。
この後興味をそそるコンポーネントクラスを見ていくよ。

Bootstrapだよ。

何かアプリに動きをつけたいんだよ。
以下のコードをapp.jsの最後に書いてほしいよ。

document.addEventListener('DOMContentLoaded', function() {
    ng.bootstrap(AppComponent);
});

ブラウザがコンテンツの読み込みが終わったことを伝えるために待って、その後にAngularの bootstrap メソッドを呼ぶんだよ。

bootstrap メソッドはアプリケーションルートでアプリケーションと AppConponent がスタートしたことをAngularに教えるんだよ。
いつかぼくたちのアプリケーションは、このルートからツリー状に発生する複数のコンポーネントから構成されることを推測するのが正しいんだよ。

IIFE(イッフィー)で包むよ。

ぼくたちはグローバルの名前空間を汚染したくないんだよ。
あと、ぼくたちはまだアプリケーションの名前空間を必要としてないよ。
だから、単純なIIFE(匿名関数)のラッパーでコードを囲むんだよ。

ファイル全体は次のようになるよ。

(function() {

var AppComponent = ng
  .Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
  })
  .Class({
    constructor: function () { }
  });

document.addEventListener('DOMContentLoaded', function() {
  ng.bootstrap(AppComponent);
});

})();

index.htmlを作るよ

新しく index.html をプロジェクトフォルダに追加して、次のHTMLを入力するよ。

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <script src="node_modules/angular2/bundles/angular2.sfx.dev.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <my-app></my-app>
  </body>
</html>

このアプリでは2つのスクリプトファイルを<head>で読み込むよ。

  • angular2.sfx.dev.js はAngular 2 の開発ファイルでAngularの中にグローバルng名前空間を置くよ。
  • app.js はぼくたちが書いたアプリケーションのJavascriptだよ。

<body> の中に、 <my-app> があるよ。これはアプリケーションルートのプレースホルダーだよ。
Angularでは、ここでぼくたちのアプリケーションが表示されるんだよ。

実行するよ!

静的なアプリケーションのアセット(index.htmlとapp.js)を提供するために、ファイルサーバが必要だよ。
この例ではデフォルトでライブリロードを実行して、ぼくたちが変更を行うようにブラウザの更新を見て楽しめるから、 npm でインストールしたlive-serverを使うよ。

ターミナル(Windows/Linuxはコマンドライン)を開いて入力するよ。

npm start

この npm コマンドは、さっき package.json のscriptセクションに追加したやつだよ。

live-serverはブラウザを読み込んで、アプリケーションを変更するとページをリフレッシュするよ。
しばらくすると、ブラウザタブが開いて表示されるよ。

表示されたよ。

変更してみてよ。

live-server はファイルの変更を検出して自動的にブラウザのページをリフレッシュするよ。
メッセージを”My SECOND Angular 2 app”に変更してみてよ。 live-server はその変更を見てブラウザをリロードするよ。
ターミナルの画面でlive-serverを実行したまま、変更しようとし続けてよ。
Ctrl-C でいつでも止めることができるよ。

おめでとう!準備が整ったよ…そして、次のレベルへの準備が完了したよ。

五十川 洋平(Yohei Isokawa)

五十川 洋平(Yohei Isokawa)

フロントエンドエンジニア/面白法人カヤックなどのWeb制作会社に勤務したのち、故郷の新潟に戻り独立。JSフレームワークAngularやFirebase、Google Cloud Platformを使ったWebアプリ開発が得意。 また、Udemyのプログラミング解説の講師、writer.appの自主開発や上越TechMeetupの主催などを行っています。

プロフィール

©Copyright 2022 Yohei Isokawa All Rights Reserved.