このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

記事詳細

2016.12.30

Angular2の始め方。Angular2 公式チュートリアル – SETUP FOR LOCAL DEVELOPMENT(簡単な和訳)

angular_set

Angular2の始め方。Angular2 公式チュートリアル – Introduction(簡単な和訳)

Angular2の始め方。Angular2 公式チュートリアル – The Hero Editor(簡単な和訳)

準備を素早くできる、クイックスタートシードをインストールして、マシンの開発をより迅速かつ効率的に行う。

Setup a local development environment

クイックスタートライブコーディングの例は、Angular playgroundです。実際のアプリケーションを開発する場所ではありません。

あなたは自分のマシンでローカルに開発する必要があります。ローカルに開発環境を作り、Angularを学んでいきましょう。

 

—–

クイックスタートシードのライブサンプルはQuickStartと、リッチなアプリケーションの例を容易に簡単に始めれる、app.module.tsとmain.tsアプリケーションファイルが設置されています(後述)。

—–

 

nodeとnpmがインストールされていることを確認してください。

1. プロジェクトフォルダを作成します(クイックスタートと命名。後で名前を変更できます)。
2. QuickStartシードをプロジェクトフォルダにクローンまたはダウンロードします。
3. npmパッケージをインストールします。
4. npm startを実行してサンプルアプリケーションを起動します。

Clone

クイックスタート Github レポジトリ
https://github.com/angular/quickstart

これらのターミナルコマンドを使用してクローンから起動までの手順を実行します。

$ git clone https://github.com/angular/quickstart.git quickstart
$ cd quickstart
$ npm install
$ npm start
Download

クイックスタートシードをダウンロードし、プロジェクトフォルダに解凍します。

次に、これらのターミナルコマンドを使用して残りの手順を実行します。

cd quickstart
npm install
npm start

What’s in the QuickStart seed?

QuickStartシードには、QuickStartプレイグラウンドと同じアプリケーションが含まれています。

しかし、真の目的は、地方開発のための確かな基盤を提供することです。

その結果、マシン上のプロジェクトフォルダにはさらに多くのファイルがあります。それらは、後ほど学ぶことができます。

/ appフォルダー内の次の3つのTypeScript(.ts)ファイルに注目してください。

app
├── app.component.ts
├── app.module.ts
└── main.ts
import { Component } from '@angular/core';

@Component({
 selector: 'my-app',
 template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { name = 'Angular'; }
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 { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

すべてのガイドとcookbooks には、少なくともこれらのコアファイルがあります。

各ファイルには明確な目的があり、アプリケーションが成長するにつれて独立して進化していきます。

File Purpose
app.component.ts QuickStartプレイグラウンドと同じAppComponentを定義します。

これは、アプリケーションが進化するにつれてネストされたコンポーネントのツリーになる要素のルートコンポーネントです。

app.module.ts アプリケーションをアセンブルする方法をAngularに伝えるルートモジュールであるAppModuleを定義します。

今はAppComponentだけを宣言しています。後に宣言するコンポーネントが増えていくでしょう。

main.ts  JiTコンパイラを使用してアプリケーションをコンパイルし、アプリケーションをブートストラップしてブラウザで実行します。

これは、ほとんどのプロジェクトの開発にとって合理的な選択であり、Plunkerのようなライブコーディング環境で実行されるサンプルにとって唯一の実行可能な選択肢です。

後で別のコンパイルオプションとデプロイメントオプションについては、ドキュメントの後半で説明されます。

Next Step

Angularを初めてお使いの場合は、learning path. を行うと良いでしょう。

 

Appendix: node and npm

Node.jsとnpmは、パッケージプラットフォームやその他のプラットフォームを使用した最新のWeb開発に不可欠です。

Nodeはクライアントの開発とビルドのためのツールです。 npmパッケージマネージャー自体は、Nodeアプリケーションであり、JavaScriptライブラリーをインストールします。

あなたのマシンにまだインストールされていない場合は、今すぐ入手してください。

https://docs.npmjs.com/getting-started/installing-node

ターミナル/コンソールウィンドウでnode -vおよびnpm -vコマンドを実行して、ノードv4.x.x以上およびnpm 3.x.x以上を実行していることを確認します。

古いバージョンではエラーが発生します。

 

nvmは複数のバージョンのノードとnpmを管理することをお勧めします。

他のバージョンのノードとnpmを使用しているマシン上ですでにプロジェクトを実行している場合は、nvmが必要になることがあります。

 

Appendix: Why develop locally

 

ブラウザーでのライブコーディングは、Angularを探検するのに最適な方法です。
ほぼすべてのドキュメントページにリンクがあり、完成したサンプルがブラウザに表示されます。

サンプルコードを使って遊んだり、変更を友人と共有したり、自分のマシンでコードをダウンロードして実行することができます。

 

クイックスタートには、AppComponentファイルだけが表示されます。

これは、内部でplaygroundのみのapp.module.tsおよびmain.tsに相当するものを作成します。

読者は気を散らすことなく確認することができます。他のサンプルはQuickStartシードに基づいています。

何もインストールせずにこれを試すことができます。

Plunkrのクイックスタートのサンプルを別のタブで開き、続いてください。

 

すべてのコンポーネントは、メタデータオブジェクトを受け取る@Componentデコレータ関数で始まります。

メタデータオブジェクトは、HTMLテンプレートとコンポーネントクラスがどのように連携して動作するかを記述します。

selectorプロパティは、index.htmlのカスタム<my-app>タグ内にコンポーネントを表示するようにAngularに指示します。

Playgroundとしてのライブコーディング環境、ドキュメンテーションサンプルを試して自分で試してみてください。

ドキュメンテーションの問題を提出したり、Angular自体で問題を提出したりするときに、バグを再現するのに最適な場所です。

実際の開発には、ローカル開発を強くお勧めします。

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。