Angular CLIの導入から初期化まで

過日にVue.jsについて基本的なことを学びました。よく比較されるAngularとどう違うか、どちらがいいかなどをいろいろなページで見たりしますが、身を持って体験してみたいということで今回からAngularについて勉強していきます。

セットアップ

Angular:「ローカル環境とワークスペースのセットアップ」にしたがって進めていきます。

Node.jsのインストール
最初にNode.jsのインストールが必要です。簡単に説明するとNode.jsはJavaScriptを実行するための環境です。通常はブラウザで実行しているJavaScriptをPCのコマンドライン環境で実行できるようになります。

Node.jsにもバージョンがありますがリリースノートで状態が「CURRENT」または「ACTIVE」、「MAINTENANCE」になっているLTSバージョンにおいて、Angularの稼働が保証されているそうです。

初めてインストールする場合は、Node.jsのページから、一番新しいLTS版をダウンロードしてインストールしましょう。
Angular CLIのインストール
ここから先はOSのCUIで操作します。ここではWindowsのPowerShellで処理しています。

Angular CLIは、Angularのプロジェクト作成からデプロイまでを管理するコマンドライン式のアプリケーションです。Angular CLIはNode.js経由でインストールします。Node.jsをインストールすると、NPM(Node Package Manager)というアプリがインストールされます。これはインターネット上のライブラリからJavascriptの様々なパッケージをダウンロードできるようになるものです。Angular CLIはもそのひとつなので、NPMでダウンロードします。

npmを使って、--location=globalオプションでグローバル領域に Angular CLI(@angular/cli)をインストールします。npmでは様々なプロジェクトから利用するパッケージは--location=globalオプションをつけグローバル領域に、特定のプロジェクトでのみ利用するものは無印でプロジェクト固有領域にインストールします。

この作業は少し時間がかかりますので余裕があるときに行いましょう。

PS> npm install --location=global @angular/cli
Angularアプリケーションの初期化
Angular CLIのインストールが終わったら、今度はそれを使ってAngularアプリケーションを作成します。

「ng」というAngular CLIのコマンドを使って、新しいアプリ用のワークスペースを作成します。

カレントフォルダの直下に指定した名前のフォルダが作成されます。ここではd:¥angularがカレントフォルダである前提です。

「ng new プロジェクト名」と入力し、途中で聞かれる質問は、ここではすべて初期値のままエンターキーを押します。

この作業も少し時間がかかります。

PS> cd d:¥
PS> mkdir angular
PS> cd d:¥angular
ng new test-app
...

ちなみにngコマンドのnewはnと省略できます。
テスト稼働
ng new で作成したフォルダにはサンプルが入っていますのでテスト稼働してみます。
カレントディレクトリを作成したフォルダに移動した後、作成したフォルダに移動した後、ng serve --openで、アプリをコンパイルして起動し(serve)、ブラウザで表示(--open)します。

PS> cd test-app
PS> ng serve --open

テスト稼働をさせると、フォルダ内にdistというフォルダができ、その中に初期化で指定したアプリ名になっている子フォルダができます。子フォルダ内にはWebサーバーに配置されるコード群が入っています。

また稼働させながらコードの編集ができ、編集は随時ブラウザに反映されます。ブラウザを閉じてしまった場合もURLを指定すれば再表示可能です。URLはデバッグを実行した際に表示されます。筆者の環境では「localhost:4200」でした。

テスト稼働させるとAngular CLIを操作したプロンプトは実行中のまま入力を受け付けません。終了する場合はCTL+Cを押します。

ちなみに本番用のアプリをビルドだけしたい場合は「ng build --prod」とします。

ソースの編集

今度は初期化されたアプリを、「チュートリアル」にしたがって、修正していきます。

アプリのソースコードがあるフォルダは「アプリ名のフォルダ¥src¥app」となります。フォルダ内には次のファイルがあり、これらを編集していきます。

app.components.ts
コンポーネント(アプリの部品)のコードやデータを保持するスクリプトファイルです。
app.components.html
コンポーネントの表現(レイアウト)をhtmlで記述したファイルです。
app.components.css
コンポーネント用のCSSです。これは基本的にcssと同じ名前を持つhtml内でのみ適用されます。CSSはこのファイルの他、htmlファイルのstyleタグ内に記述することも可能です。
app.components.spec.ts
テスト用のファイルです。ここでは扱いません。
app.module.ts
全体で利用するモジュール等の設定を記述しておくスクリプトファイルです。
app-routing.module.ts
アプリでルーティングを使う場合の設定用スクリプトファイルです。アプリイニシャル時にルーティングを使わない設定にした場合は存在しません。

「.ts」ファイルはTypeScriptのコードの拡張子です。TypeScriptはJavaScript上位互換の言語なので、JavaScriptがわかればだいたい理解できると思います。またJavaScriptで書いたものはそのまま動きます。

tsファイルは2種ありますが、app.components.spec.tsはテスト用のファイルなのでここでは扱いません。

JavascriptとTypeScriptの大きな違いのひとつに、型定義があります。TypeScriptでは:でつなげて変数や関数の戻り値の型を定義できます。

let a : number = 5;
function func(param): string {
...
}

型が不明な場合はanyとしておくと、とりあえずはコンパイルは通ります。

app.components.tsを開いてみます。すると次のようなコードになっています。

app.components.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-app';
}

@Component...というコードがあります。これは「Angularの依存性の注入」に説明がありますが、簡単にいえば設定用のオブジェクトを作成しています。@...という書き方はデコレーター(Decorator)というJavaScriptの仕組みですが、まだ正式に定まっていません。ここでは「Component」というデコーレータにselector: 'app-root'等の値の入ったオブジェクトを渡しています。このデコレーターは直後のクラスに対して影響するものです。

アプリケーションの設定などを記述する関数ぐらいのとらえ方でいいと思います。

app.components.t、app.components.html、app.components.cssの各ファイルは、通常のWebページの.js、.html、.cssと考えることができます。

補間

先のapp.components.tsにはAppComponentのクラスがあり、これにはtitleというプロパティがありそこに文字列がセットされていました。

AppComponent内のプロパティの中身はapp.components.html内で次のようにすることで表示できます。この機能を補間と言います。

既存のコードはすべて削除して次のコードを入力します。

<h1>{{title}}</h1>

app.components.cssにCSSを記述することができます(styleタグに囲んでhtmlファイルにも記述することもできます)。

このapp.components.htmlと、app.components.cssというファイル名ですがこれらは、app.components.tsで@Component内で「templateUrl」や「styleUrls」として定義されています。

@Component内で記述されていて、まだ触れていない「selector」ですが、この値「app-root」は一つ上のフォルダであるmy-app¥src¥index.html内に記述されています。

index.html

...
<body> <app-root></app-root> </body>

つまり今回作成されたアプリは、index.htmlのapp-rootタグの場所に展開されるということです。

そのような段取りになっているためにapp.components.html側にはhtmlファイルでもheadやbodyといったタグの記述しなかったというわけです。

投稿:2021/12/11 - 更新: facebookで共有 twitterで共有 pocketに追加

Angular CLIの導入から初期化まで

セットアップ

ソースの編集

補間

close close

投稿:2021/12/11 - 更新:　