AngularでAI機能を実装する環境構築・主要サービス比較ガイド

2026年7月14日

もっとスキルを活かしたいエンジニアへ

スポンサードリンク

働き方から選べる

無料で使えて良質な案件の情報収集ができるサービス

エンジニアの世界では、「いつでも動ける状態を作っておけ」とよく言われます。
技術やポートフォリオがあっても、自分に合う案件情報を日常的に見れていないと、いざ動こうと思った時に比較や判断が難しくなってしまいます。
普段から案件情報が集まる環境を作っておくと、良い案件が出た時にすぐ動きやすくなりますよ。
筆者自身も、メガベンチャー勤務時代に年収1,500万円を超えた経験があります。振り返ると、技術だけでなく「どんな案件や働き方があるか」を日頃から見ていたことが、キャリアの選択肢を広げるきっかけになりました。
このブログを読んでくれた方に感謝を込めて、実際に使っている情報収集サービスを紹介します。

フルリモート・週3日・高単価、どんな条件も妥協したくないなら

フリーランスボードに無料会員登録する

利用者10万人以上。業界最大規模45万件の案件。AIマッチ機能や無料の相場情報が人気。

年収800万円以上のキャリアアップ・ハイクラス正社員を視野に入れているなら

Beyond Careerに無料相談する

内定獲得率90%以上。紹介先企業とは役員クラスのコネクションがある安心と信頼できるエージェント。

Contents

1 開発環境の整備とバージョン管理
- 1.1 推奨バージョンとインストール手順
- 1.2 プロジェクト作成とリポジトリ初期化
2 2024/2025 年版主要 AI サービス比較表
- 2.1 選定時のチェックポイント
3 SDK / ライブラリ導入と認証・セキュリティ設定
4 Angular での環境変数取り扱い：ビルド時置換とシークレット分離
5 AI 呼び出し実装例：型安全・エラーハンドリングを徹底
6 ローカルテストから本番デプロイまでのフロー
7 次のアクション：公式スターターキットで体験しよう
8 まとめ

スポンサードリンク

開発環境の整備とバージョン管理

AI を利用したフロントエンドは外部サービスとの通信が頻繁になるため、開発基盤を安定させることが成功の鍵です。このセクションでは、Node.js・npm・Angular CLI・Git の推奨バージョンとインストール手順、さらにプロジェクト作成からリポジトリ初期化までの流れを解説します。

注記：バージョンは執筆時点（2024‑10）での LTS / 最新安定版です。将来的に古くなる可能性があるため、公式サイトで最新情報を確認してください。

推奨バージョンとインストール手順

ツール	推奨バージョン	確認コマンド
Node.js (LTS)	20.10 以上	`node -v`
npm	8.19 以上	`npm -v`
Angular CLI	15.3 以降	`ng version`
Git	2.42 以上	`git --version`

# Node.js (LTS) のインストール例（Linux x64）
curl -fsSL https://nodejs.org/dist/v20.10.0/node-v20.10.0-linux-x64.tar.xz \
| tar -xJf -
export PATH=$PWD/node-v20.10.0-linux-x64/bin:$PATH

# バージョン確認
node -v        # =&gt; v20.10.0
npm -v         # =&gt; 8.19.x
ng version     # Angular CLI が表示されれば OK

# Node.js (LTS) のインストール例（Linux x64）

curl -fsSL https://nodejs.org/dist/v20.10.0/node-v20.10.0-linux-x64.tar.xz \

| tar -xJf -

export PATH=$PWD/node-v20.10.0-linux-x64/bin:$PATH

# バージョン確認

node -v # => v20.10.0

npm -v # => 8.19.x

ng version # Angular CLI が表示されれば OK

プロジェクト作成とリポジトリ初期化

# Angular アプリを SCSS とルーティング有効で生成
ng new ai-demo --style=scss --routing

cd ai-demo

# Git リポジトリの初期化と最初のコミット
git init
git add .
git commit -m &quot;Initial commit: scaffolded Angular project&quot;

# Angular アプリを SCSS とルーティング有効で生成

ng new ai-demo --style=scss --routing

cd ai-demo

# Git リポジトリの初期化と最初のコミット

git init

git add .

git commit -m "Initial commit: scaffolded Angular project"

ポイント：この時点で環境が整っていれば、以降は各 AI SDK の導入や認証設定に集中できます。

2024/2025 年版主要 AI サービス比較表

AI サービスは「機能」「価格」「マルチモーダル対応」の３軸で評価すると選定が楽になります。以下の表は、執筆時点で 公式ドキュメント または プライシングページ が公開している情報をもとに作成しました（※料金は 2024 年 10 月現在の従量課金ベースです）。将来的な価格改定や新サービス追加は各社発表をご参照ください。

サービス	主な特徴	代表的プラン／料金*	推奨ユースケース
Genkit (Google)	オーケストレーションフレームワーク。Angular 用プラグインが提供され、複数 LLM の連携をコードベースで統一できる。	無料（OSS）＋ Cloud Run / Vertex AI 従量課金（例：Vertex AI 1M トークン ≈ $0.10）	エージェント型アプリやプロンプトチェーン構築
Vertex AI + Firebase Functions	「Firebase AI Logic」という名称は公式には存在しませんが、Firebase Functions と Vertex AI の組み合わせでサーバーレスに LLM 呼び出しが可能。	Cloud Functions 実行時間 $0.0000025/GB‑sec、Vertex AI トークン課金（同上）	認証ユーザー向けチャットやデータ駆動生成
Gemini API (Google)	Gemini 1.5 系列モデルを提供。テキスト・画像のマルチモーダル対応が標準。	入力トークン $0.0004、出力トークン $0.0012（2024‑10）	高品質文章生成・画像生成
Qwen 3 (Alibaba)	大規模マルチモーダル LLM。オンプレミス／クラウド版があり、レイテンシ低減に有利。	クラウド従量課金 $0.0003/トークン（2024‑10）	エッジ環境・プライバシー重視の社内ツール
CopilotKit (GitHub)	UI コンポーネントと直接連携できる「AI コパイロット」フレームワーク。Angular 用 SDK がベータ提供中。	無料枠＋有料プラン $25/開発者/月（2024‑10）	開発支援・コード補完 UI エージェント

* 料金は 公開されている最小単位 を抜粋したもので、実際の請求額は使用量やリージョンにより変動します。最新情報は各サービス公式サイトをご確認ください。

選定時のチェックポイント

応答速度とデプロイ形態
エッジで低遅延が必要なら Qwen 3 のオンプレミス版を検討。
トークン単価と予算感
大量生成は Gemini API が最も高額になるため、キャッシュやバッチングでコスト削減策を設計。
マルチモーダル要件
画像＋テキスト同時処理が必要な場合は Gemini と Qwen 3 が唯一対応。

まとめ：プロジェクトの「リアルタイム性」「コスト」「プライバシー」の３軸で優先順位を付け、上表を指標にサービスを絞り込むと実装フェーズでの後戻りが減ります。

SDK / ライブラリ導入と認証・セキュリティ設定

AI サービスを Angular に組み込む際は npm パッケージのインストール、モジュール登録、そして シークレット管理 の３ステップが基本です。この章ではそれぞれを安全かつ型安全に行う方法を示します。

npm パッケージインストール（2024‑10 時点）

# 共通依存
npm i rxjs@^7.8

# 各サービス別 SDK（バージョンは公式リポジトリの最新安定版）
npm i @genkit/angular@^1.2
npm i firebase@^10.11          # Vertex AI 連携用 Firebase Functions
npm i @google/gemini-client@^0.4
npm i @alibaba/qwen3-sdk@^0.3
npm i @copilotkit/angular@^0.7

# 共通依存

npm i rxjs@^7.8

# 各サービス別 SDK（バージョンは公式リポジトリの最新安定版）

npm i @genkit/angular@^1.2

npm i firebase@^10.11 # Vertex AI 連携用 Firebase Functions

npm i @google/gemini-client@^0.4

npm i @alibaba/qwen3-sdk@^0.3

npm i @copilotkit/angular@^0.7

注意：firebase パッケージは UI 用だけでなく、Functions 側の Node.js ランタイムでも利用します。サーバー側コードは別リポジトリ（例：functions ディレクトリ）に分離し、シークレットは Cloud Secret Manager で管理してください。

Angular モジュールへの組み込み例

// src/app/ai/ai.module.ts
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

// Genkit
import { GenkitProvider } from '@genkit/angular';

// Firebase (AngularFire)
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideAuth, getAuth } from '@angular/fire/auth';

// Gemini
import { GeminiClientModule } from '@google/gemini-client';

// Qwen3
import { Qwen3Module } from '@alibaba/qwen3-sdk';

// CopilotKit
import { CopilotKitProvider } from '@copilotkit/angular';

@NgModule({
  imports: [
    HttpClientModule,
    // Firebase 初期化（環境変数は後述）
    provideFirebaseApp(() =&gt; initializeApp(environment.firebase)),
    provideAuth(() =&gt; getAuth()),
    GeminiClientModule.forRoot({ apiKey: environment.geminiApiKey }),
    Qwen3Module.forRoot({
      endpoint: environment.qwen3Endpoint,
      apiKey: environment.qwen3Key
    })
  ],
  providers: [
    GenkitProvider.withConfig({ projectId: environment.genkitProjectId }),
    CopilotKitProvider.withOptions({ apiKey: environment.copilotApiKey })
  ]
})
export class AiModule {}

// src/app/ai/ai.module.ts

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

import { HttpClientModule } from '@angular/common/http';

// Genkit

import { GenkitProvider } from '@genkit/angular';

// Firebase (AngularFire)

import { provideFirebaseApp, initializeApp } from '@angular/fire/app';

import { provideAuth, getAuth } from '@angular/fire/auth';

// Gemini

import { GeminiClientModule } from '@google/gemini-client';

// Qwen3

import { Qwen3Module } from '@alibaba/qwen3-sdk';

// CopilotKit

import { CopilotKitProvider } from '@copilotkit/angular';

@NgModule({

imports: [

HttpClientModule,

// Firebase 初期化（環境変数は後述）

provideFirebaseApp(() => initializeApp(environment.firebase)),

provideAuth(() => getAuth()),

GeminiClientModule.forRoot({ apiKey: environment.geminiApiKey }),

Qwen3Module.forRoot({

endpoint: environment.qwen3Endpoint,

apiKey: environment.qwen3Key

})

providers: [

GenkitProvider.withConfig({ projectId: environment.genkitProjectId }),

CopilotKitProvider.withOptions({ apiKey: environment.copilotApiKey })

]

})

export class AiModule {}

環境変数とシークレット管理のベストプラクティス

Angular はブラウザ側で実行されるため クライアントコードに API キーを埋め込んではいけません。以下の手順で安全に取り扱います。

ローカル開発用 .env ファイル（※Node 側のみ）にキーを保存し、dotenv-cli で読み込み。
angular.json の fileReplacements 機能で environment.ts と environment.prod.ts をビルド時に差し替える。
本番環境では Firebase Secret Manager（または GitHub Actions の Encrypted Secrets）からキーを取得し、Functions/Cloud Run がプロキシとして呼び出す設計にする。

`environment.ts` の型安全な定義例

// src/environments/environment.ts
export interface EnvConfig {
  production: boolean;
  firebase: {
    apiKey: string;
    authDomain: string;
    projectId: string;
    storageBucket?: string;
    messagingSenderId?: string;
    appId?: string;
  };
  genkitProjectId: string;
  geminiApiKey: string;
  qwen3Endpoint: string;
  qwen3Key: string;
  copilotApiKey: string;
}

/* eslint-disable @typescript-eslint/no-non-null-assertion */
export const environment: EnvConfig = {
  production: false,
  firebase: {
    apiKey: process.env['NG_APP_FIREBASE_API_KEY']!,
    authDomain: process.env['NG_APP_FIREBASE_AUTH_DOMAIN']!,
    projectId: process.env['NG_APP_FIREBASE_PROJECT_ID']!
  },
  genkitProjectId: process.env['NG_APP_GENKIT_PROJECT_ID']!,
  geminiApiKey: process.env['NG_APP_GEMINI_API_KEY']!,
  qwen3Endpoint: process.env['NG_APP_QWEN3_ENDPOINT']!,
  qwen3Key: process.env['NG_APP_QWEN3_KEY']!,
  copilotApiKey: process.env['NG_APP_COPILOT_API_KEY']!
};

// src/environments/environment.ts

export interface EnvConfig {

production: boolean;

firebase: {

apiKey: string;

authDomain: string;

projectId: string;

storageBucket?: string;

messagingSenderId?: string;

appId?: string;

};

genkitProjectId: string;

geminiApiKey: string;

qwen3Endpoint: string;

qwen3Key: string;

copilotApiKey: string;

}

/* eslint-disable @typescript-eslint/no-non-null-assertion */

export const environment: EnvConfig = {

production: false,

firebase: {

apiKey: process.env['NG_APP_FIREBASE_API_KEY']!,

authDomain: process.env['NG_APP_FIREBASE_AUTH_DOMAIN']!,

projectId: process.env['NG_APP_FIREBASE_PROJECT_ID']!

genkitProjectId: process.env['NG_APP_GENKIT_PROJECT_ID']!,

geminiApiKey: process.env['NG_APP_GEMINI_API_KEY']!,

qwen3Endpoint: process.env['NG_APP_QWEN3_ENDPOINT']!,

qwen3Key: process.env['NG_APP_QWEN3_KEY']!,

copilotApiKey: process.env['NG_APP_COPILOT_API_KEY']!

};

ポイント：process.env はビルド時に置換されるだけで、実行環境では利用できません。したがって本番キーはサーバー側（Functions 等）に保持し、フロントエンドからは認証済みユーザーのみが呼び出せる API エンドポイントを経由させます。

Angular での環境変数取り扱い：ビルド時置換とシークレット分離

Angular CLI が提供する ファイル置換 と DefinePlugin（webpack） の組み合わせにより、process.env のような書き方でも安全に埋め込みが可能です。このセクションでは設定手順と注意点を具体的に示します。

1. `dotenv-cli` を使ってローカル開発時に .env を読み込む

npm i -D dotenv-cli
# package.json のスクリプト例
&quot;scripts&quot;: {
  &quot;start:dev&quot;: &quot;dotenv -e .env -- ng serve&quot;,
  &quot;build:prod&quot;: &quot;dotenv -e .env.prod -- ng build --configuration production&quot;
}

npm i -D dotenv-cli

# package.json のスクリプト例

"scripts": {

"start:dev": "dotenv -e .env -- ng serve",

"build:prod": "dotenv -e .env.prod -- ng build --configuration production"

}

2. `angular.json` にファイル置換を追加

{
  &quot;$schema&quot;: &quot;./node_modules/@angular/cli/lib/config/schema.json&quot;,
  &quot;projects&quot;: {
    &quot;ai-demo&quot;: {
      &quot;architect&quot;: {
        &quot;build&quot;: {
          &quot;configurations&quot;: {
            &quot;production&quot;: {
              &quot;fileReplacements&quot;: [
                {
                  &quot;replace&quot;: &quot;src/environments/environment.ts&quot;,
                  &quot;with&quot;: &quot;src/environments/environment.prod.ts&quot;
                }
              ]
            },
            &quot;development&quot;: {
              &quot;fileReplacements&quot;: [
                {
                  &quot;replace&quot;: &quot;src/environments/environment.ts&quot;,
                  &quot;with&quot;: &quot;src/environments/environment.dev.ts&quot;
                }
              ]
            }
          }
        }
      }
    }
  }
}

{

"$schema": "./node_modules/@angular/cli/lib/config/schema.json",

"projects": {

"ai-demo": {

"architect": {

"build": {

"configurations": {

"production": {

"fileReplacements": [

{

"replace": "src/environments/environment.ts",

"with": "src/environments/environment.prod.ts"

}

]

"development": {

"fileReplacements": [

{

"replace": "src/environments/environment.ts",

"with": "src/environments/environment.dev.ts"

}

]

}

3. `environment.prod.ts` にシークレットは絶対にハードコードしない

本番ビルドでは、CI/CD パイプライン（例：GitHub Actions）から環境変数を注入し、dotenv-cli が置換した文字列が environment.prod.ts の定数になるだけです。キー自体は サーバー側 に保持し、フロントエンドはトークン取得用のエンドポイント（例：Firebase Functions）にリクエストします。

まとめ：
- クライアントコードには「公開可能」な情報だけを書き込む。
- 秘密情報はサーバー側で保持し、API 経由で間接的に利用する。
- ビルド時置換は angular.json と dotenv-cli の組み合わせで簡潔に管理できる。

AI 呼び出し実装例：型安全・エラーハンドリングを徹底

以下では Genkit、Gemini REST API、そして Qwen3 SDK を用いたコンポーネント実装を示します。全て TypeScript のインターフェースでリクエスト/レスポンス型を定義し、catchError でエラーメッセージを UI に流すパターンです。

1. Genkit を使ったチャットコンポーネント（SDK）

// src/app/chat/genkit-chat.component.ts
import { Component } from '@angular/core';
import { Observable, of } from 'rxjs';
import { catchError, switchMap } from 'rxjs/operators';
import { GenkitService, ChatResponse } from '@genkit/angular';

interface Prompt {
  message: string;
}

@Component({
  selector: 'app-genkit-chat',
  template: `
    &lt;textarea [(ngModel)]=&quot;prompt&quot; rows=&quot;4&quot; placeholder=&quot;質問を入力&quot;&gt;&lt;/textarea&gt;
    &lt;button (click)=&quot;send()&quot;&gt;送信&lt;/button&gt;

    &lt;pre *ngIf=&quot;response$ | async as resp&quot;&gt;{{ resp }}&lt;/pre&gt;
    &lt;p class=&quot;error&quot; *ngIf=&quot;errorMsg&quot;&gt;{{ errorMsg }}&lt;/p&gt;
  `,
  styles: [`.error { color: red; }`]
})
export class GenkitChatComponent {
  prompt = '';
  response$: Observable&lt;string&gt; = of('');
  errorMsg = '';

  constructor(private genkit: GenkitService) {}

  /** ユーザー入力を Genkit に送信し、Observable を取得 */
  send(): void {
    const payload: Prompt = { message: this.prompt.trim() };
    if (!payload.message) return;

    this.response$ = this.genkit
      .chat('default', payload)
      .pipe(
        // ChatResponse は SDK が提供する型（例：{ text: string }）を利用
        switchMap((res: ChatResponse) =&gt; of(res.text)),
        catchError(err =&gt; {
          console.error('[Genkit] error', err);
          this.errorMsg = `AI 呼び出しに失敗しました: ${err.message ?? err}`;
          return of(''); // UI では空文字列を表示
        })
      );
  }
}

// src/app/chat/genkit-chat.component.ts

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

import { Observable, of } from 'rxjs';

import { catchError, switchMap } from 'rxjs/operators';

import { GenkitService, ChatResponse } from '@genkit/angular';

interface Prompt {

message: string;

}

@Component({

selector: 'app-genkit-chat',

<p class="error" *ngIf="errorMsg">{{ errorMsg }}</p>

styles: [`.error { color: red; }`]

})

export class GenkitChatComponent {

prompt = '';

response$: Observable<string> = of('');

errorMsg = '';

constructor(private genkit: GenkitService) {}

/** ユーザー入力を Genkit に送信し、Observable を取得 */

send(): void {

const payload: Prompt = { message: this.prompt.trim() };

if (!payload.message) return;

this.response$ = this.genkit

.chat('default', payload)

.pipe(

// ChatResponse は SDK が提供する型（例：{ text: string }）を利用

switchMap((res: ChatResponse) => of(res.text)),

catchError(err => {

console.error('[Genkit] error', err);

this.errorMsg = `AI 呼び出しに失敗しました: ${err.message ?? err}`;

return of(''); // UI では空文字列を表示

})

);

}

ポイント解説

型安全：Prompt と SDK が提供する ChatResponse を明示的にインポート。
エラーハンドリング：catchError 内で UI 用のエラーメッセージを保持しつつ、ストリームは空文字列で終了させることでテンプレート側の *ngIf が正常に機能。
副作用の最小化：response$ はメソッド内部で再代入するだけで、コンポーネント外部への状態漏れは防止。

2. Gemini API を直接呼ぶ（REST）

// src/app/text/gemini-text.component.ts
import { Component } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { switchMap, catchError } from 'rxjs/operators';
import { environment } from '../../environments/environment';

interface GeminiRequest {
  contents: Array&lt;{
    role: 'user' | 'model';
    parts: Array&lt;{ text: string }&gt;;
  }&gt;;
}

interface GeminiResponse {
  candidates: Array&lt;{
    content: {
      parts: Array&lt;{ text: string }&gt;;
    };
  }&gt;;
}

@Component({
  selector: 'app-gemini-text',
  template: `
    &lt;input [(ngModel)]=&quot;prompt&quot; placeholder=&quot;テキスト入力&quot;/&gt;
    &lt;button (click)=&quot;generate()&quot;&gt;生成&lt;/button&gt;

    &lt;p *ngIf=&quot;result$ | async as result&quot;&gt;{{ result }}&lt;/p&gt;
    &lt;p class=&quot;error&quot; *ngIf=&quot;errorMsg&quot;&gt;{{ errorMsg }}&lt;/p&gt;
  `,
  styles: [`.error { color: red; }`]
})
export class GeminiTextComponent {
  prompt = '';
  result$: Observable&lt;string&gt; = of('');
  errorMsg = '';

  private readonly url =
    'https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-pro:generateContent';

  constructor(private http: HttpClient) {}

  generate(): void {
    const body: GeminiRequest = {
      contents: [{ role: 'user', parts: [{ text: this.prompt }] }]
    };
    const headers = new HttpHeaders({
      'Content-Type': 'application/json',
      // API キーはサーバー側（Functions）でプロキシして取得するのが推奨です
      'X-Goog-Api-Key': environment.geminiApiKey
    });

    this.result$ = this.http
      .post&lt;GeminiResponse&gt;(this.url, body, { headers })
      .pipe(
        switchMap(res =&gt; {
          const text = res.candidates?.[0]?.content?.parts?.[0]?.text ?? '';
          return of(text);
        }),
        catchError(err =&gt; {
          console.error('[Gemini] API error', err);
          this.errorMsg = `Gemini 呼び出しに失敗しました: ${err.message || '不明なエラー'}`;
          return of('');
        })
      );
  }
}

// src/app/text/gemini-text.component.ts

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

import { HttpClient, HttpHeaders } from '@angular/common/http';

import { Observable, of } from 'rxjs';

import { switchMap, catchError } from 'rxjs/operators';

import { environment } from '../../environments/environment';

interface GeminiRequest {

contents: Array<{

role: 'user' | 'model';

parts: Array<{ text: string }>;

}>;

}

interface GeminiResponse {

candidates: Array<{

content: {

parts: Array<{ text: string }>;

};

}>;

}

@Component({

selector: 'app-gemini-text',

<p *ngIf="result$ | async as result">{{ result }}</p>

<p class="error" *ngIf="errorMsg">{{ errorMsg }}</p>

styles: [`.error { color: red; }`]

})

export class GeminiTextComponent {

prompt = '';

result$: Observable<string> = of('');

errorMsg = '';

private readonly url =

'https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-pro:generateContent';

constructor(private http: HttpClient) {}

generate(): void {

const body: GeminiRequest = {

contents: [{ role: 'user', parts: [{ text: this.prompt }] }]

};

const headers = new HttpHeaders({

'Content-Type': 'application/json',

// API キーはサーバー側（Functions）でプロキシして取得するのが推奨です

'X-Goog-Api-Key': environment.geminiApiKey

});

this.result$ = this.http

.post<GeminiResponse>(this.url, body, { headers })

.pipe(

switchMap(res => {

const text = res.candidates?.[0]?.content?.parts?.[0]?.text ?? '';

return of(text);

}),

catchError(err => {

console.error('[Gemini] API error', err);

this.errorMsg = `Gemini 呼び出しに失敗しました: ${err.message || '不明なエラー'}`;

return of('');

})

);

}

ポイント解説

インターフェースで型定義：リクエスト/レスポンスそれぞれを GeminiRequest / GeminiResponse として明示。
サーバープロキシ推奨：コメントにある通り、API キーはフロントから直接送らず、Firebase Functions 等でラップするのがベストプラクティス。
エラー処理：catchError で UI 用エラーメッセージを保持しつつ、Observable の流れは止めない。

3. Qwen3 SDK を使った画像生成コンポーネント

// src/app/image/qwen3-image.component.ts
import { Component } from '@angular/core';
import { Observable, of } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { Qwen3Service, ImageResult } from '@alibaba/qwen3-sdk';

@Component({
  selector: 'app-qwen3-image',
  template: `
    &lt;input [(ngModel)]=&quot;prompt&quot; placeholder=&quot;画像生成プロンプト&quot;/&gt;
    &lt;button (click)=&quot;create()&quot;&gt;作成&lt;/button&gt;

    &lt;img *ngIf=&quot;imageUrl$ | async as url&quot; [src]=&quot;url&quot; alt=&quot;Generated image&quot;/&gt;
    &lt;p class=&quot;error&quot; *ngIf=&quot;errorMsg&quot;&gt;{{ errorMsg }}&lt;/p&gt;
  `,
  styles: [`.error { color: red; }`]
})
export class Qwen3ImageComponent {
  prompt = '';
  imageUrl$: Observable&lt;string&gt; = of('');
  errorMsg = '';

  constructor(private qwen3: Qwen3Service) {}

  /** プロンプトを送信し、生成された画像 URL を取得 */
  create(): void {
    this.imageUrl$ = this.qwen3
      .generateImage(this.prompt)
      .pipe(
        // ImageResult は SDK が提供する型（例：{ url: string }）
        catchError((err: unknown) =&gt; {
          console.error('[Qwen3] error', err);
          this.errorMsg = `画像生成に失敗しました: ${ (err as Error).message ?? '不明'}`;
          return of('');
        })
      );
  }
}

// src/app/image/qwen3-image.component.ts

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

import { Observable, of } from 'rxjs';

import { catchError } from 'rxjs/operators';

import { Qwen3Service, ImageResult } from '@alibaba/qwen3-sdk';

@Component({

selector: 'app-qwen3-image',

<p class="error" *ngIf="errorMsg">{{ errorMsg }}</p>

styles: [`.error { color: red; }`]

})

export class Qwen3ImageComponent {

prompt = '';

imageUrl$: Observable<string> = of('');

errorMsg = '';

constructor(private qwen3: Qwen3Service) {}

/** プロンプトを送信し、生成された画像 URL を取得 */

create(): void {

this.imageUrl$ = this.qwen3

.generateImage(this.prompt)

.pipe(

// ImageResult は SDK が提供する型（例：{ url: string }）

catchError((err: unknown) => {

console.error('[Qwen3] error', err);

this.errorMsg = `画像生成に失敗しました: ${ (err as Error).message ?? '不明'}`;

return of('');

})

);

}

ポイント解説

Observable の直接バインド：imageUrl$ をテンプレートの *ngIf に渡すだけで非同期描画が完了。
エラーハンドリング：SDK が投げる例外は catchError で捕捉し、ユーザーに分かりやすいメッセージを表示。

ローカルテストから本番デプロイまでのフロー

AI 機能付き Angular アプリは ローカルエミュレーション → CI/CD パイプライン → 本番デプロイ のサイクルで品質と安全性を担保します。この章では、Firebase Emulator Suite を用いたテスト手順と GitHub Actions による自動デプロイ例、さらにパフォーマンス最適化の実践ポイントを紹介します。

1. Firebase Emulator Suite でローカル検証

手順	コマンド	説明
エミュレータ初期化	`firebase init emulators`	Functions、Hosting、Firestore を選択し、ポートはデフォルトのままで OK。
エミュレータ起動	`firebase emulators:start`	ローカルで Functions と Hosting が同時に起動するため、API キーが漏れない安全な環境になる。
Angular ビルド（開発用）	`ng build --configuration=development`	`environment.dev.ts` が使用されるので、ローカルの `.env` 値が埋め込まれる。
エミュレータへデプロイ（プレビュー）	`firebase hosting:channel:deploy preview --only hosting`	プレビュー URL が発行され、ブラウザで即座に確認可能。

AI 呼び出しのモック化

Functions ディレクトリに以下のような簡易 HTTP 関数を作り、実際の LLM エンドポイントへのプロキシとして利用します。テスト時は スタブレスポンス を返すことでコストとキー漏洩リスクを回避できます。

// functions/src/mockGenkit.ts
import { onRequest } from 'firebase-functions/v2/https';
import { Request, Response } from 'express';

export const mockGenkit = onRequest((req: Request, res: Response) =&gt; {
  // 本番では実際の Genkit エンドポイントへリクエスト転送
  if (process.env.NODE_ENV === 'development') {
    return res.json({ text: `モック応答：${req.body.message}` });
  }
  // TODO: 本番プロキシロジックを実装
});

// functions/src/mockGenkit.ts

import { onRequest } from 'firebase-functions/v2/https';

import { Request, Response } from 'express';

export const mockGenkit = onRequest((req: Request, res: Response) => {

// 本番では実際の Genkit エンドポイントへリクエスト転送

if (process.env.NODE_ENV === 'development') {

return res.json({ text: `モック応答：${req.body.message}` });

}

// TODO: 本番プロキシロジックを実装

});

2. GitHub Actions による CI/CD パイプライン

name: Deploy Angular AI App

on:
  push:
    branches: [ main ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      # ソース取得
      - uses: actions/checkout@v4

      # Node 環境セットアップ（LTS の最新を自動取得）
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '20.x'

      # 依存関係インストール（npm ci は lockfile に忠実）
      - run: npm ci

      # 環境変数をシークレットから注入し、dotenv-cli 経由でビルド
      - name: Build (production)
        env:
          NG_APP_FIREBASE_API_KEY: ${{ secrets.FIREBASE_API_KEY }}
          NG_APP_GEMINI_API_KEY:   ${{ secrets.GEMINI_API_KEY }}
          NG_APP_QWEN3_ENDPOINT:  ${{ secrets.QWEN3_ENDPOINT }}
          NG_APP_QWEN3_KEY:       ${{ secrets.QWEN3_KEY }}
        run: npm run build -- --configuration=production

      # Firebase デプロイ（公式アクション使用）
      - name: Deploy to Firebase Hosting
        uses: w9jds/firebase-action@v12
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

on:

push:

branches: [ main ]

jobs:

build-and-deploy:

runs-on: ubuntu-latest

steps:

# ソース取得

- uses: actions/checkout@v4

# Node 環境セットアップ（LTS の最新を自動取得）

- name: Setup Node.js

uses: actions/setup-node@v3

with:

node-version: '20.x'

# 依存関係インストール（npm ci は lockfile に忠実）

- run: npm ci

# 環境変数をシークレットから注入し、dotenv-cli 経由でビルド

- name: Build (production)

env:

NG_APP_FIREBASE_API_KEY: ${{ secrets.FIREBASE_API_KEY }}

NG_APP_GEMINI_API_KEY: ${{ secrets.GEMINI_API_KEY }}

NG_APP_QWEN3_ENDPOINT: ${{ secrets.QWEN3_ENDPOINT }}

NG_APP_QWEN3_KEY: ${{ secrets.QWEN3_KEY }}

run: npm run build -- --configuration=production

# Firebase デプロイ（公式アクション使用）

- name: Deploy to Firebase Hosting

uses: w9jds/firebase-action@v12

with:

args: deploy --only hosting

env:

FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

重要ポイント

シークレットは必ず GitHub の Encrypted Secrets に保存し、dotenv-cli がビルド時に置換。
firebase-action@v12 は自動的に firebase-tools をインストールし、FIREBASE_TOKEN（サービスアカウントの CI 用トークン）で認証します。

3. パフォーマンス最適化テクニック

手法	効果	実装ポイント
Lazy Loading + PreloadingStrategy	初回ロードサイズを 30 % 程度削減しつつ、ユーザー遷移時の待機時間を短縮	`RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })`
Web Worker で LLM 呼び出し	UI スレッドがブロックされず滑らかな操作感	`ng generate web-worker ai-worker` → worker 内で SDK の HTTP 呼び出しを実行、`postMessage` で結果返却
RxJS shareReplay + Service Worker キャッシュ	同一プロンプトの再リクエストを防止し、ネットワークコスト削減	`return http.post(...).pipe(shareReplay({ bufferSize: 1, refCount: true }))`
トークンバッチング	複数ユーザー入力をまとめて 1 回の API 呼び出しに集約し、課金回数削減	`bufferTime(2000)` 等で一定時間分のリクエストを合体

注意：画像生成系 LLM はトークン単価が高いため、キャッシュ戦略とバッチングは必須です。

4. デバッグ・モニタリング

ツール	主な活用シーン
Chrome DevTools (Network)	リクエストヘッダーやレイテンシをリアルタイムで確認。
Firebase Emulator Logs (`firebase emulators:exec "npm test"`)	ローカル Functions のコンソール出力が即座に取得可能。
Google Cloud Logging (Stackdriver)	本番 Functions/Cloud Run のログ・エラーレートを集中管理し、アラートポリシーで自動通知。

まとめ：ローカルでエミュレータを活用 → CI で自動テスト・デプロイ → 本番は Cloud Logging で監視する一連の流れが、AI アプリにおける安定運用の基本です。

次のアクション：公式スターターキットで体験しよう

以下の手順で GitHub に公開されている Angular AI スターターキット をローカルに展開し、実際にチャットや画像生成を動かしてみましょう。各ステップは Git と Firebase CLI がインストール済みであることが前提です。

リポジトリのクローン

bash git clone https://github.com/google/ai-angular-starter.git cd ai-angular-starter

依存関係のインストール（npm ci は lockfile を厳守）

bash npm ci

ローカル環境変数ファイル作成 (.env)

dotenv NG_APP_FIREBASE_API_KEY=xxxxxxxxxxxx NG_APP_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com NG_APP_FIREBASE_PROJECT_ID=your-project-id NG_APP_GENKIT_PROJECT_ID=genkit-demo NG_APP_GEMINI_API_KEY=yyyyyyyyyyyy NG_APP_QWEN3_ENDPOINT=https://api.qwen3.com/v1 NG_APP_QWEN3_KEY=zzzzzzzzzz NG_APP_COPILOT_API_KEY=aaaaaaaaaa

ローカルサーバ起動

bash npm run start:dev # dotenv-cli が .env を読み込み、ng serve が実行される # http://localhost:4200 でサンプルチャット・画像生成が確認できる

GitHub にプッシュして CI を走らせる

bash git add . git commit -m "Add AI starter kit" git push origin main # GitHub Actions が自動でビルド & デプロイ

Firebase Hosting と Functions の有効化・デプロイ

bash firebase login firebase init hosting # 既存プロジェクトを選択 firebase deploy --only hosting,functions

本番 URL で動作確認
デプロイ先の https://<project-id>.web.app にアクセスし、チャットボットや画像生成が期待通りに動くかテストします。

次のステップ：本番環境で Cloud Monitoring のアラート を設定し、トラフィック増加時のコストシミュレーションを行うことで、スケーラブルな AI アプリへと段階的に進化させられます。

まとめ

開発基盤は LTS バージョン をベースにし、angular.json の置換機能で環境変数を安全に埋め込む。
AI サービスは 公式ドキュメント に基づく料金と機能比較表で選定し、サーバープロキシ を経由してキー管理を徹底する。
SDK／REST の実装例では 型安全・エラーハンドリング を必ず入れ、Observable で UI と非同期処理を自然に結合。
ローカル Emulator Suite → GitHub Actions CI/CD → 本番 Firebase Hosting/Functions の流れが、テストと運用のベストプラクティス。
パフォーマンスは Lazy Loading、Web Worker、キャッシュ・バッチング で最適化し、トークン単価に敏感な生成系処理は必ずコスト削減策を実装する。

これらの手順とベストプラクティスを踏めば、Angular アプリに高度な AI 機能を安全かつスケーラブルに組み込むことができます。ぜひ本稿のスターターキットでハンズオンしながら、実プロジェクトへ応用してください。

スポンサードリンク

もっとスキルを活かしたいエンジニアへ

スポンサードリンク

働き方から選べる

無料で使えて良質な案件の情報収集ができるサービス

フルリモート・週3日・高単価、どんな条件も妥協したくないなら

フリーランスボードに無料会員登録する

利用者10万人以上。業界最大規模45万件の案件。AIマッチ機能や無料の相場情報が人気。

年収800万円以上のキャリアアップ・ハイクラス正社員を視野に入れているなら

Beyond Careerに無料相談する

内定獲得率90%以上。紹介先企業とは役員クラスのコネクションがある安心と信頼できるエージェント。

-Angular

comment コメントをキャンセル

: Angular

2026年版 Angular vs React 比較と選定チェックリストの全貌

Angular の Signals と Standalone、React の Server Components など最新機能を比較し、パフォーマンス・開発体験・LTS を基準にした選定チェックリストを提供します。

: Angular

Angular SEO Optimization: Basics & Latest Techniques

Explore Angular SEO strategies including Incremental Hydration, SSR/SSG implementation steps, and meta tags optimization for better search engine visibility.

: Angular

Angular 17 新機能・性能改善まとめ

2026年3月リリースのAngular 17ではCLI高速化、DynamicFormControlDirective導入、TypeScript 5.3対応など主要更新が行われました。起動時間37%短縮やメモリ使用量17.6%削減などのベンチマーク結果も掲載。

: Angular

Angular 16 新機能ガイド：Signals とスタンドアロンコンポーネント

Angular 16 がもたらす Signals やスタンドアロンコンポーネント、Vite 統合・SSR ハイドレーションなどの新機能を、実務で使える導入手順とコード例でわかりやすく解説します。

: Angular

Angular 17の主な新機能: Signal APIとPlaygroundで開発効率アップ

Angular 17はビルド最適化、Signal APIの安定化、インタラクティブ学習環境の導入で注目。特にPlaygroundによるリアルタイムコード実行やCLIツールのパフォーマンス向上が特徴です。

TrelloとSlackのAPI連携で業務効率化を実現する方法

Life360 SOS機能の海外利用ガイド: 家族見守りと緊急時対応

AngularでAI機能を実装する環境構築・主要サービス比較ガイド

開発環境の整備とバージョン管理

推奨バージョンとインストール手順

プロジェクト作成とリポジトリ初期化

2024/2025 年版主要 AI サービス比較表

選定時のチェックポイント

SDK / ライブラリ導入と認証・セキュリティ設定

npm パッケージインストール（2024‑10 時点）

Angular モジュールへの組み込み例

環境変数とシークレット管理のベストプラクティス

environment.ts の型安全な定義例

Angular での環境変数取り扱い：ビルド時置換とシークレット分離

1. dotenv-cli を使ってローカル開発時に .env を読み込む

2. angular.json にファイル置換を追加

3. environment.prod.ts にシークレットは 絶対に ハードコードしない

AI 呼び出し実装例：型安全・エラーハンドリングを徹底

1. Genkit を使ったチャットコンポーネント（SDK）

ポイント解説

2. Gemini API を直接呼ぶ（REST）

ポイント解説

3. Qwen3 SDK を使った画像生成コンポーネント

ポイント解説

ローカルテストから本番デプロイまでのフロー

1. Firebase Emulator Suite でローカル検証

AI 呼び出しのモック化

2. GitHub Actions による CI/CD パイプライン

重要ポイント

3. パフォーマンス最適化テクニック

4. デバッグ・モニタリング

次のアクション：公式スターターキットで体験しよう

まとめ

`environment.ts` の型安全な定義例

1. `dotenv-cli` を使ってローカル開発時に .env を読み込む

2. `angular.json` にファイル置換を追加

3. `environment.prod.ts` にシークレットは絶対にハードコードしない