AngularとTypeScriptでSPAを作成する

AngularとTypeScriptでSPAを作成する

前提

VS Codeが「VS Live Share」なんて便利なものを出してきたのでペアプログラミングができるし、エディタはVS Codeを使いましょう。

nodeはnodist(nvmのほうが良いかも)でとりえずインストールします。node8.9以上を使用しましょう。

Angular CLIをインストールする

AngularはTypeScriptを採用しています。静的型付けのJSなので素敵です。

では、Angular CLIをグローバルインストールします。

C:\>npm install -g @angular/cli

バージョン確認

ngコマンドでバージョン確認します。

C:\>ng version
? Would you like to share pseudonymous usage data about this project with the Angular Team
at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more  
details and how to change this setting, see https://angular.io/analytics. Yes

Thank you for sharing pseudonymous usage data. Should you change your mind, the following
command will disable this feature entirely:

    ng analytics disable --global

Global setting: enabled
Local setting: No local workspace configuration file.
Effective status: enabled

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 16.0.2
Node: 18.16.0
Package Manager: npm 9.5.1
OS: win32 x64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1600.2 (cli-only)
@angular-devkit/core         16.0.2 (cli-only)
@angular-devkit/schematics   16.0.2 (cli-only)
@schematics/angular          16.0.2 (cli-only)

プロジェクト作成

次にAngularプロジェクトを作成します。

C:\>ng new プロジェクト名

今回はプロジェクト名はappsとしました。

C:\>ng new apps
...
✔ Packages installed successfully.

これでプロジェクト作成に成功しました。

サーバを起動してみます。

C:\>cd apps
C:\apps>ng serve --open
? Would you like to share pseudonymous usage data about this project with the Angular Team
at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more  
details and how to change this setting, see https://angular.io/analytics. No

これでhttp://localhsot:4200/でウェルカムページがオープンします。（--openをつけると強制的にブラウザ起動します）

Angular5

Angular16

プロジェクトルート/src/app配下に以下ファイルが作成されます。ルートコンポーネントになります。

src/app/app.module.ts(standaloneでは存在しないファイル)

ルートコンポーネントにだけこのファイルがあります。使用するモジュールを宣言するファイルで、中身の内容は以下のとおりです。

src/index.html

index.htmlがメインのhtmlファイルとなります。ほとんど修正することはないと思いますが、タイトルぐらいは修正したりするかもしれません。

src/style.css

この位置にあるstyle.cssは、全てのアプリに影響を与えたい場合に記述します。

ルートコンポーネントを修正してみます。

app.component.ts

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

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

msgという変数を追加しました。この変数はhtmlファイル内で、{{msg}}として使うことができます。

app.component.html（一部）

<h1>
Welcome to {{ title }}! {{msg}} <!-- 追加 -->
</h1>

ファイルを変更して保存したらホットデプロイされるので再起動は不要です。

コンポーネントを作成する

コンポーネントを作成すると、ルートコンポーネント配下にコンポーネントが作成されます。

コンポーネントを作成するには

C:\>ng generate component コンポーネント名

と実行します。コンポーネント名を「abc」とすると、src – app – abcというディレクトリが作成されます。

abcディレクトリ内には以下ファイルが作成されます。

コンポーネントは早い話がHTMLのカスタムタグだと思います。abcなら<app-abc></app-abc>って感じでしょうか。

タグのプレフィックスであるappはangular.jsonで指定されていますので、変更したい場合はangular.jsonを修正すればタグのプレフィックスを修正することができます。

これも試しにルートコンポーネントのapp.components.htmlを修正してみます。

<h1> Welcome to {{ title }}!
<app-abc></app-abc>

描画します。

コンポーネント名.component.tsファイル

コンポーネント名を「abc」とするとこのファイルの中身は以下のようになります。

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

@Component({
  selector: 'app-abc',
  templateUrl: './abc.component.html',
  styleUrls: ['./abc.component.css']
})
export class AbcComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

OnInitとは

OnInitとは、ngOnInitメソッドを持つインタフェースのようです。ngOnInitメソッドは、コンポーネントが作られた後に呼び出されます。

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

export interface OnInit {
  ngOnInit(): void;
}

app.module.tsに自動的にコンポーネントが追加される(standaloneでは存在しないファイル)

ng generateコマンドでコンポーネントを追加すると、app.module.tsファイルに自動でコンポーネントが追加されるので、手動で追加が不要になります。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { AbcComponent } from './abc/abc.component';

@NgModule({
  declarations: [
    AppComponent,
    AbcComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

カスタムタグ（コンポーネント）に属性をつける@Input

コンポーネントに属性を付けることができます。

C:\>ng generate component dell

dellというコンポーネントを作成したとします。

dell.component.tsファイルを編集します。

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-dell',
  templateUrl: './dell.component.html',
  styleUrls: ['./dell.component.css']
})
export class DellComponent implements OnInit {
  constructor() { }
  @Input() alt; // 追加
  @Input() src; // 追加
  ngOnInit() {
  }
}

この2行だけを追加します。これでalt属性とsrc属性を使用することができます。

次にdell.component.htmlを編集します。

<span>{{alt}} - {{src}}</span>

わかりやすく属性を表示するだけです。

ルートコンポーネントのapp.component.htmlに以下の1行を追加しましょう。

<app-dell alt="ここがalt属性" src="ここがsrc属性"></app-dell>

以下のようにレンダリングされます。

定数クラスを定義する

Constクラスみたいなのを定義しておくと便利だと思います。

src – app配下にconst.component.tsファイルとして保存します。

export class Const {
  id: number;
  name: string;
}

参考サイト

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^