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

Archives Details

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

Angular2

2016.12.30

この記事は最終更新日から1年以上が経過しています。

angular_set

こちらのページは、こちらのページの簡単な和訳です。

Angular2 tutorial | SETUP FOR LOCAL DEVELOPMENT

その他のページ

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

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

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

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

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自体で問題を提出したりするときに、バグを再現するのに最適な場所です。

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

Comment

Related Article

Angular 「スマホ・PC」でcomponentとCSSを切り替える(分岐させる)方法

2017.10.15

Angular4 + SSR(サーバーサイドレンダリング)(Universal JavaScript)環境の最小最短 構築方法

2017.10.08

Rails5 APIモード + Angular SPA環境 爆速構築の手順 その2。

2017.04.19

Rails5 APIモード + Angular SPA環境 爆速構築の手順 その1。

2017.04.10

Angular CLIで、Angularアプリをかんたん楽々構築!

2017.04.09

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

2017.04.09

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

2017.04.06

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

2017.04.03

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

2017.04.03

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

2017.01.20

CATEGORY LIST

LATEST NEWS

Ubuntu 20.04 LTS サーバ構築 - DKIM、DMARCを設定する

ubuntu

2022.05.01

Ubuntu 20.04 LTS サーバ構築 - Postfix Let’s EncryptでTLS化

ubuntu

2022.05.01

Ubuntu 20.04 LTS サーバ構築 - Postfix SASL認証

ubuntu

2022.05.01

Ubuntu 20.04 LTS サーバ構築 - Dovecotインストール

ubuntu

2022.05.01

Ubuntu 20.04 LTS サーバ構築 - Postfixインストール

ubuntu

2022.05.01

Ubuntu 20.04 LTS サーバ構築 - Let’s EncryptでSSL/TLS化

ubuntu

2022.05.01

Ubuntu 20.04 LTS サーバ構築 – Nginxインストール

ubuntu

2022.05.01

Ubuntu 20.04 LTS サーバ構築 - 初期セットアップ

ubuntu

2022.05.01

誰でも簡単に「ホームページ制作」が行える。というWix のサービスが進化しているという事で、あれから久しぶりに触ってみた!

tool

2022.04.12

Geth (Go Ethereum)でリクエスト送信「Invalid host specified」エラー対処

暗号通貨、ブロックチェーン

2022.03.06

Geth (Go Ethereum) API 変更点

暗号通貨、ブロックチェーン

2022.03.05

2月25日(金) メタバース企業 Unityエンジニア トークイベント

イベント

2022.02.22

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US