Angular＋Node.jsでちょっとしたログイン機能を実装してみる その1

タイトルの通りです。Angularのフレームワークを用いた簡単な開発をしてみたいなと思ったので、します。導入など基本的なところからさらっていきます。

環境

• MacOS: 14.3.1
• Angular CLI: 17.1.3
• Node: 20.11.0
• Package Manager: npm 10.4.0

Angularを導入する

Node.jsのnpm(Node Package Manager)を用いてAngular CLIのインストールを行います。ターミナルを開き、以下のコマンドを実行しました。

npm install -g @angular/cli

次に、Angularのプロジェクトを作成します。アプリ用のディレクトリを作成し、その中に新規プロジェクトを作成しました。

mkdir {新規ディレクトリ名}
cd {新規ディレクトリ名}
ng new {新規プロジェクト名}

こうしてディレクトリ下にプロジェクトが作成されました。

まずは見た目だけ作ってみる

まずはルーティングなど難しいことは考えず、1ページ作成してみることにします。
最終的にはデータベースと軽いやりとりをしてログイン機能を実装できたらいいなぁと思うので、アプリ起動時に表示されるメイン画面と、ログイン画面を作成。

メイン画面

main.component.html

<h1>{{ title }}</h1>
<p>{{ message }}</p>

main.component.ts

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

@Component({
    selector: 'app-main',
    standalone: true,
    templateUrl: './main.component.html',
    styleUrls: ['./main.component.scss']
})
export class MainComponent {
    title = 'メイン画面';
    message = 'ユーザーさん、こんにちは。'
    // message = {{user.username}}'さん、こんにちは。';
}

とりあえずは動きさえすればいいので最低限。TypeScript側でコンポーネント内の色々な変数などを設定していけるようです。
後でログインが成功した際に、ユーザー情報からユーザー名を取得して画面に反映、といったこともしたいのでメモ書き程度にコメントアウトしてあります。

ログイン画面

次はログイン画面。バックエンドの処理はまた後でやるとして、入力したユーザー名とパスワードをコンソールログに表示するようにして動きを確認できるようにします。

login.component.html

<h2>{{ title }}</h2>
<form (submit)="login()">
    <div class="form-group">
      <label for="userId">ユーザー名:</label>
      <input type="text" id="userId" name="userId" [(ngModel)]="userId" required>
    </div>
    <div class="form-group">
      <label for="password">パスワード:</label>
      <input type="password" id="password" name="password" [(ngModel)]="password" required>
    </div>
    <button type="submit">確定</button>
</form>

login.component.ts

import { Component, OnInit, NgModule} from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [RouterOutlet,FormsModule],
  templateUrl: './login.component.html',
  styleUrl: './login.component.scss'
})

export class LoginComponent{
  title = 'ログイン画面';
  userId: string = '';
  password: string = '';
  constructor() {}

  login() {
    const user = {
      userId: this.userId,
      password: this.password
    };
    console.log('ログイン情報:', user);
  }
}

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [RouterOutlet,FormsModule],
  templateUrl: './login.component.html',
  styleUrl: './login.component.scss'
})

この部分ですが、standalone: true というのがAngularのバージョン15から安定版として搭載された機能で、今まで汎用モジュールを定義する別ファイルで宣言してインポートしていた機能をコンポーネントごとに宣言することができるようになったもののようです。ですので、ここで必要な機能をインポートしています。

他の部分としては、確定ボタンをクリックした際にlogin()が呼び出され、usernameとpasswordに入った値を変数に代入しています。この周りの処理はhtml側に記載している ngModel が行っていて、これはAngularの中で双方向にデータバインディングを実現する機能で、今回ですとユーザー名、パスワードのボックスに入力した値をコンポーネントのusernameとpasswordに反映している形です。逆に、TypeScriptで指定した値をHTML側に反映して、ボックスに初期値として入れる、といったこともすることができます。

ルーティングの設定

そして、作成したコンポーネントをそれぞれのページとして成立させるためにルーティングの設定を行なっていきます。

app.routes.ts

import { Routes } from '@angular/router';

// 各種コンポーネントのインポート
import {MainComponent} from './main.component';
import {LoginComponent} from './login.component';

export const routes: Routes = [
    { path: '', 
        component: MainComponent,
        // canActivate: [AuthGuard]
    },
    {path: 'login', component: LoginComponent}
];

メイン画面のコンポーネントとログイン画面のコンポーネントをインポートし、それぞれのルートの設定を行っています。メイン画面には localhost:4200から、ログイン画面にはlocalhost:4200/loginからアクセスすることができるようになっています。
canActivateの箇所は、バックエンドも整えて認証を行う際に利用するのでコメントアウトしています。

画面としてはこんな感じになりました。

今週はここまで

今週はここまでとさせていただきます。来週はログイン認証の部分の作成をしていこうと思います。それでは。