Angularを使った企業システム開発や業務アプリでは、ただ動くだけではなく、セキュリティ、保守性、拡張性を兼ね備えたアーキテクチャが求められます。
本章では、管理画面風SPAの構築を軸に、JWT認証によるログイン管理、コンポーネント設計とリファクタリングの実践的なアプローチについて解説します。
1. 管理画面風SPAの構築
業務系アプリでは、複数のページを持つ「管理画面スタイル」が定番です。
ルーティング + レイアウト分割 + サイドナビゲーションによって構成されます。
■ 基本構成
LayoutComponent：共通ヘッダー・サイドバーDashboardComponent：ダッシュボード画面UserListComponent：ユーザー一覧SettingComponent：設定画面
■ ルーティング例
{ path: '', component: LayoutComponent, children: [
{ path: 'dashboard', component: DashboardComponent },
{ path: 'users', component: UserListComponent },
{ path: 'settings', component: SettingComponent }
]}■ UIライブラリ活用
Angular Material の MatSidenav や MatToolbar を使えば、短時間で見栄えの良い管理画面が構築できます。
2. ユーザー認証とJWT（JSON Web Token）
モダンなSPAでは、ログイン後の認証状態を保持するためにJWTが広く使われています。Angularでは、HttpInterceptorを使ってリクエストヘッダーにトークンを付与するのが一般的です。
■ JWT認証の流れ
- ログインフォームで認証APIへPOST
- レスポンスとしてJWTを受け取り
localStorageへ保存 - HttpInterceptorでAuthorizationヘッダーにトークン付加
- トークン付きのリクエストで保護APIへアクセス
■ HttpInterceptorの実装
import { HttpInterceptor } from '@angular/common/http';
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
intercept(req, next) {
const token = localStorage.getItem('token');
const authReq = req.clone({
setHeaders: { Authorization: Bearer ${token} }
});
return next.handle(authReq);
}
}■ トークンの失効・再認証対応
失効時は401エラーを検知し、自動ログアウト or 再ログイン画面へ遷移させる設計が重要です。
3. コンポーネント設計とリファクタリング
実務開発では、初期開発後の機能追加・保守を前提とした拡張性の高いコンポーネント設計が求められます。
以下のような考え方で構築・リファクタリングを進めると、プロジェクトの品質が向上します。
■ コンテナ / プレゼンテーション分離
ロジックを持つ「親コンポーネント（Container）」と、UIのみを扱う「子コンポーネント（Presentational）」に分離。
UserListComponent：API呼び出し・状態管理（親）UserTableComponent：テーブル表示専用（子）
この構成により、単体テストしやすく、再利用も可能になります。
■ @Input() / @Output() の整理
コンポーネント間のやり取りを明確にし、状態の持ち方を分離。双方向バインディングの乱用は避ける。
■ サービスの再配置
コンポーネントにべったりだった処理をサービスへ分離し、テスタブルでDRYなコードにリファクタリング。
■ 機能モジュール単位の整理
FeatureModule単位での分割を導入し、ファイル肥大化やimport依存の複雑化を防ぐ。
まとめ
実務的なAngular開発においては、UI構築・認証処理・設計整理のすべてが密接に関係しています。
管理画面SPAの構築を通して、アプリ構造の全体像をつかみ、JWTによるセキュアな認証、そして保守性の高いコンポーネント設計を実践することで、Angular開発スキルは飛躍的に高まります。
次章では、CI/CDやクラウド環境へのデプロイ戦略に進みます。
