🗂

プロフィール作成画面の作成

2025/09/18に公開

はじめに

この記事では、Vue.js + Nuxt.js + Firebase + Vuetifyを使用してプロフィール作成画面を実装する方法を詳しく解説します。ユーザーがニックネーム、年齢、性別を入力し、Firebase Firestoreに保存する機能を構築していきます。

実装する機能

プロフィール情報の入力フォーム（ニックネーム、年齢、性別）
リアルタイムバリデーション
Firebase Firestoreへのデータ保存
エラーハンドリング
ローディング状態の管理

技術スタック

フロントエンド: Vue.js 3 + Nuxt.js 3
UI フレームワーク: Vuetify 3
データベース: Firebase Firestore
言語: TypeScript
状態管理: Vue Composition API

要件

ニックネーム
年齢
性別

上記入力項目を登録する画面を作成
FirebaseのFirestore Databaseを使いプロフィールを登録します

アーキテクチャ概要

この実装では、以下のような構成でプロフィール作成機能を構築します：

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   Vue Page      │    │   Component     │    │   Composable    │
│ (create-profile)│───▶│ (ProfileForm)   │───▶│ (useProfile)    │
└─────────────────┘    └─────────────────┘    └─────────────────┘
         │                       │                       │
         │                       │                       ▼
         │                       │              ┌─────────────────┐
         │                       │              │ Firebase        │
         │                       │              │ Firestore       │
         │                       │              └─────────────────┘
         ▼                       ▼
┌─────────────────┐    ┌─────────────────┐
│   Vuetify UI    │    │  Validation     │
│   Components    │    │  Rules          │
└─────────────────┘    └─────────────────┘

コンポーネント設計のポイント

単一責任の原則: 各コンポーネントは明確な役割を持つ
再利用性: ProfileFormコンポーネントは作成・編集両方で使用可能
疎結合: コンポーネント間の依存関係を最小限に抑制
型安全性: TypeScriptによる型定義で実行時エラーを防止

Firebase Firestore Databaseとは

Firestore Databaseは、Googleが提供するNoSQLドキュメントデータベースです。リアルタイム同期、オフライン対応、スケーラビリティなどの特徴があります。

主な特徴

NoSQLドキュメントデータベース: 従来のリレーショナルデータベースとは異なり、JSONライクなドキュメント形式でデータを保存
リアルタイム同期: データの変更が即座にクライアントに反映される
オフライン対応: ネットワーク接続がなくてもデータの読み書きが可能
自動スケーリング: ユーザー数の増加に応じて自動的にスケールする
セキュリティルール: データベースレベルでのアクセス制御が可能

データ構造

Firestoreでは以下の階層構造でデータを管理します：

データベース
└── コレクション（例：users）
    └── ドキュメント（例：user123）
        └── フィールド（例：nickname, age, gender）

プロフィールデータの保存例

// Firestoreにプロフィールデータを保存
const saveProfile = async (profileData: {
  nickname: string;
  age: number;
  gender: string;
}) => {
  try {
    await addDoc(collection(db, 'profiles'), {
      nickname: profileData.nickname,
      age: profileData.age,
      gender: profileData.gender,
      createdAt: serverTimestamp(),
    });
    console.log('プロフィールが正常に保存されました');
  } catch (error) {
    console.error('プロフィールの保存に失敗しました:', error);
  }
};

バリデーションルール

各入力項目には以下のバリデーションルールを設定しています：

ニックネーム

必須入力チェック

年齢

必須入力チェック
数字のみの入力チェック
0〜150の範囲内チェック

性別

必須入力チェック

const nicknameRules = [(v: string) => !!v || 'ニックネームは必須です']
const ageRules = [
  (v: string) => !!v || '年齢は必須です',
  (v: string) => /^\d+$/.test(v) || '年齢は数字で入力してください',
  (v: string) => {
    const num = parseInt(v)
    return (num >= 0 && num <= 150) || '年齢は0〜150の範囲で入力してください'
  },
]
const genderRules = [(v: string) => !!v || '性別は必須です']

入力項目のコンポーネントの作成

プロフィール作成画面の核となるフォームコンポーネントを作成します。このコンポーネントは以下の特徴を持ちます：

設計思想

再利用性: プロフィール作成・編集の両方で使用可能
バリデーション: リアルタイムでの入力値チェック
アクセシビリティ: Vuetifyのアクセシブルなコンポーネントを活用
型安全性: TypeScriptによる厳密な型定義

app/components/ProfileForm.vue

<script setup lang="ts">
interface Props {
  initialNickname?: string
  initialAge?: string
  initialGender?: string
  submitButtonText?: string
  isSubmitting?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  initialNickname: '',
  initialAge: '',
  initialGender: '',
  submitButtonText: '作成',
  isSubmitting: false,
})

const form = ref()

const nickname = ref(props.initialNickname)
const age = ref(props.initialAge)
const gender = ref(props.initialGender)

const nicknameRules = [(v: string) => !!v || 'ニックネームは必須です']
const ageRules = [
  (v: string) => !!v || '年齢は必須です',
  (v: string) => /^\d+$/.test(v) || '年齢は数字で入力してください',
  (v: string) => {
    const num = parseInt(v)
    return (num >= 0 && num <= 150) || '年齢は0〜150の範囲で入力してください'
  },
]
const genderRules = [(v: string) => !!v || '性別は必須です']

// 親コンポーネントへのイベント送信
const emit = defineEmits(['submit'])

const submit = async () => {
  if (form.value) {
    const { valid } = await form.value.validate()
    if (!valid) return
  }
  emit('submit', {
    nickname: nickname.value,
    age: age.value,
    gender: gender.value,
  })
}
</script>

<template>
  <v-form ref="form" @submit.prevent="submit">
    <v-text-field
      v-model="nickname"
      color="primary"
      variant="underlined"
      label="ニックネーム"
      :rules="nicknameRules"
    />
    <v-text-field
      v-model="age"
      color="primary"
      variant="underlined"
      label="年齢"
      :rules="ageRules"
    />
    <v-select
      v-model="gender"
      color="primary"
      variant="underlined"
      label="性別"
      :rules="genderRules"
      :items="['男性', '女性', 'その他']"
    />

    <v-btn
      color="primary"
      class="mt-4"
      type="submit"
      block
      :loading="props.isSubmitting"
      :disabled="props.isSubmitting"
      >{{ props.submitButtonText }}</v-btn
    >
  </v-form>
</template>

主要な処理の流れ

1. Props定義

interface Props {
  initialNickname?: string
  initialAge?: string
  initialGender?: string
  submitButtonText?: string
  isSubmitting?: boolean
}

親コンポーネントから受け取るプロパティを定義
初期値やボタンテキスト、送信状態などを設定可能

2. リアクティブデータの初期化

const nickname = ref(props.initialNickname)
const age = ref(props.initialAge)
const gender = ref(props.initialGender)

各入力フィールドの値をリアクティブに管理
親から渡された初期値で初期化

3. バリデーションルールの定義

ニックネーム: 必須入力チェック
年齢: 必須入力、数字のみ、0〜150の範囲内
性別: 必須入力チェック

4. フォーム送信処理

const submit = async () => {
  if (form.value) {
    const { valid } = await form.value.validate()
    if (!valid) return
  }
  emit('submit', {
    nickname: nickname.value,
    age: age.value,
    gender: gender.value,
  })
}

フォームのバリデーションを実行
バリデーションが通った場合のみ、親コンポーネントにデータを送信

5. テンプレート部分

Vuetifyのコンポーネントを使用したUI
v-formでフォーム全体を管理
各入力フィールドにバリデーションルールを適用
送信ボタンは送信中状態に応じてローディング表示と無効化

特徴

再利用性: Propsで初期値やボタンテキストを変更可能
バリデーション: リアルタイムで入力値の妥当性をチェック
状態管理: 送信中の状態を適切に管理
イベント駆動: 親コンポーネントとの疎結合な設計

このコンポーネントは、プロフィール作成・編集の両方の場面で使用できる汎用的な設計になっています。

実装のポイント

1. Props設計の工夫

interface Props {
  initialNickname?: string
  initialAge?: string
  initialGender?: string
  submitButtonText?: string
  isSubmitting?: boolean
}

すべてのプロパティをオプショナルにすることで、柔軟な使用を可能にする
submitButtonTextにより、作成・更新でボタンテキストを変更可能
isSubmittingで送信状態を外部から制御

2. バリデーション戦略

リアルタイムバリデーション: ユーザーが入力中に即座にフィードバック
複数ルール: 各フィールドに複数のバリデーションルールを適用
ユーザーフレンドリー: 分かりやすいエラーメッセージを表示

3. イベント駆動設計

const emit = defineEmits(['submit'])

親コンポーネントとの疎結合を実現
フォームの送信処理は親に委譲
コンポーネントの再利用性を向上

プロフィールデータをFirestoreに保存する

プロフィールデータをFirestoreに保存するためのComposableを作成します。このComposableは、データの保存処理とローディング状態を管理します。

app/composables/useProfile.ts

import { doc, setDoc, type Firestore } from 'firebase/firestore'
import { useNuxtApp } from 'nuxt/app'

export interface ProfileData {
  nickname: string
  age: number
  gender: string
  createdAt: Date
  updatedAt: Date
}

export const useProfile = () => {
  const { $firestore } = useNuxtApp()
  const firestore = $firestore as Firestore | null
  const loading = ref(false)

  // プロフィール保存
  const saveProfile = async (
    nickname: string,
    age: string,
    gender: string,
    userId: string
  ) => {
    loading.value = true
    if (!firestore) {
      return {
        error: new Error('Firestoreが初期化されていません'),
      }
    }
    try {
      const profileData: ProfileData = {
        nickname,
        age: parseInt(age),
        gender,
        createdAt: new Date(),
        updatedAt: new Date(),
      }
      await setDoc(doc(firestore, 'profiles', userId), profileData)
      return { error: null }
    } catch (error) {
      return { error: error as Error }
    } finally {
      loading.value = false
    }
  }

  return {
    saveProfile,
    loading: readonly(loading),
  }
}

主要な処理の流れ

1. インポートとインターフェース定義

import { doc, setDoc, type Firestore } from 'firebase/firestore'
import { useNuxtApp } from 'nuxt/app'

export interface ProfileData {
  nickname: string
  age: number
  gender: string
  createdAt: Date
  updatedAt: Date
}

Firebase Firestore: docとsetDocをインポートしてドキュメントの作成・更新を行う
Nuxt App: useNuxtAppでNuxtアプリケーションのインスタンスにアクセス
ProfileData: プロフィールデータの型定義。作成日時と更新日時も含む

2. Composableの初期化

export const useProfile = () => {
  const { $firestore } = useNuxtApp()
  const firestore = $firestore as Firestore | null
  const loading = ref(false)

Firestoreインスタンス: NuxtアプリからFirestoreインスタンスを取得
ローディング状態: 非同期処理中の状態を管理するリアクティブ変数

3. プロフィール保存処理

const saveProfile = async (
  nickname: string,
  age: string,
  gender: string,
  userId: string
) => {
  loading.value = true
  if (!firestore) {
    return {
      error: new Error('Firestoreが初期化されていません'),
    }
  }
  try {
    const profileData: ProfileData = {
      nickname,
      age: parseInt(age),
      gender,
      createdAt: new Date(),
      updatedAt: new Date(),
    }
    await setDoc(doc(firestore, 'profiles', userId), profileData)
    return { error: null }
  } catch (error) {
    return { error: error as Error }
  } finally {
    loading.value = false
  }
}

処理の詳細：

パラメータ: ニックネーム、年齢（文字列）、性別、ユーザーIDを受け取る
ローディング開始: 処理開始時にローディング状態をtrueに設定
Firestoreチェック: Firestoreが初期化されているかチェック
データ変換: 年齢を文字列から数値に変換（parseInt(age)）
タイムスタンプ: 作成日時と更新日時を現在時刻で設定
Firestore保存: setDocでprofilesコレクションのuserIdドキュメントに保存
エラーハンドリング: エラーが発生した場合はエラーオブジェクトを返す
ローディング終了: 処理完了時にローディング状態をfalseに設定

4. 戻り値

return {
  saveProfile,
  loading: readonly(loading),
}

saveProfile: プロフィール保存関数を公開
loading: 読み取り専用のローディング状態を公開

特徴

エラーハンドリング: Firestoreの初期化チェックとtry-catch文でエラーを適切に処理
型安全性: TypeScriptの型定義により、データの整合性を保証
状態管理: ローディング状態をリアクティブに管理
再利用性: Composableとして実装することで、複数のコンポーネントで利用可能
Firestore最適化: setDocを使用してドキュメントの作成・更新を効率的に実行

使用例

// コンポーネント内での使用
const { saveProfile, loading } = useProfile()

const handleSubmit = async (formData: any) => {
  const result = await saveProfile(
    formData.nickname,
    formData.age,
    formData.gender,
    currentUser.value?.uid
  )
  
  if (result.error) {
    console.error('保存に失敗しました:', result.error)
  } else {
    console.log('プロフィールが正常に保存されました')
  }
}

このComposableにより、プロフィールデータの保存処理が簡潔かつ安全に実装できます。

Composable設計の利点

1. 関心の分離

データアクセス層: Firestoreとの通信処理を分離
ビジネスロジック: プロフィール関連の処理を集約
状態管理: ローディング状態を一元管理

2. テスト容易性

// テスト例
const mockFirestore = createMockFirestore()
const { saveProfile } = useProfile(mockFirestore)

モックオブジェクトを使用した単体テストが容易
ビジネスロジックとデータアクセス層の分離により、テストの範囲を明確化

3. 再利用性

複数のコンポーネントで同じロジックを共有
プロフィール関連の機能拡張時の影響範囲を最小化

プロフィール作成ページ

app/pages/home/create-profile.vue

<script setup lang="ts">
// プロフィール作成フォームコンポーネントをインポート
import ProfileForm from '~/components/ProfileForm.vue'

// プロフィール保存機能とローディング状態を取得
const { saveProfile, loading } = useProfile()
// 認証されたユーザー情報を取得
const { user } = useAuth()

// エラーメッセージを管理するリアクティブ変数
const error = ref('')

// プロフィール送信処理
const handleProfileSubmit = async (data: {
  nickname: string
  age: string
  gender: string
}) => {
  // プロフィール保存を実行（ユーザーIDも含める）
  const { error: saveProfileError } = await saveProfile(
    data.nickname,
    data.age,
    data.gender,
    user.value?.uid ?? ''
  )

  // エラーが発生した場合はエラーメッセージを表示して処理を終了
  if (saveProfileError) {
    error.value = saveProfileError.message
    return
  }

  // プロフィール保存成功後、ホームページにリダイレクト
  await navigateTo('/home')
}
</script>

<template>
  <!-- プロフィール作成用のカードコンポーネント -->
  <v-card class="mx-auto my-8" max-width="500">
    <v-card-item>
      <v-card-title>プロフィール作成</v-card-title>
    </v-card-item>
    <v-card-item>
      <!-- エラーが発生した場合に表示するアラート -->
      <v-alert
        v-if="error"
        type="error"
        :text="error"
        variant="tonal"
        class="mb-4"
      />
      <!-- プロフィールフォームコンポーネント -->
      <!-- loading状態を渡し、submitイベントをハンドル -->
      <ProfileForm :is-submitting="loading" @submit="handleProfileSubmit" />
    </v-card-item>
  </v-card>
</template>

ページコンポーネントの設計思想

1. 責任の明確化

ページコンポーネント: ルーティング、認証、エラーハンドリングを担当
フォームコンポーネント: UI表示とバリデーションを担当
Composable: データアクセスとビジネスロジックを担当

2. エラーハンドリング戦略

const error = ref('')

if (saveProfileError) {
  error.value = saveProfileError.message
  return
}

ユーザーフレンドリー: 技術的なエラーを分かりやすいメッセージに変換
視覚的フィードバック: Vuetifyのアラートコンポーネントでエラーを表示
処理の継続: エラー発生時は適切に処理を停止

3. ナビゲーション管理

await navigateTo('/home')

成功時の遷移: プロフィール保存成功後に適切なページへリダイレクト
非同期処理: awaitを使用して確実に遷移を実行

ベストプラクティスと注意点

セキュリティ考慮事項

1. Firestoreセキュリティルール

// firestore.rules
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /profiles/{userId} {
      allow read, write: if request.auth != null && request.auth.uid == userId;
    }
  }
}

認証チェック: ログインユーザーのみアクセス可能
所有者チェック: 自分のプロフィールのみ編集可能
データ検証: 入力データの形式をサーバーサイドで検証

2. クライアントサイドバリデーションの限界

// クライアントサイドバリデーションは補助的なもの
const ageRules = [
  (v: string) => !!v || '年齢は必須です',
  (v: string) => /^\d+$/.test(v) || '年齢は数字で入力してください',
  // サーバーサイドでも同様の検証が必要
]

UX向上: リアルタイムフィードバックでユーザビリティを向上
セキュリティ: サーバーサイドバリデーションは必須
二重チェック: クライアント・サーバー両方で検証を実装

パフォーマンス最適化

1. コンポーネントの最適化

// 不要な再レンダリングを防ぐ
const nickname = ref(props.initialNickname)
const age = ref(props.initialAge)
const gender = ref(props.initialGender)

// 計算プロパティでメモ化
const isValidForm = computed(() => {
  return nickname.value && age.value && gender.value
})

2. Firestoreクエリの最適化

// 必要なフィールドのみ取得
const profileData: ProfileData = {
  nickname,
  age: parseInt(age),
  gender,
  createdAt: new Date(),
  updatedAt: new Date(),
}
// インデックスを適切に設定
await setDoc(doc(firestore, 'profiles', userId), profileData)

エラーハンドリングのベストプラクティス

1. 階層的エラーハンドリング

try {
  const { error: saveProfileError } = await saveProfile(...)
  if (saveProfileError) {
    // ビジネスロジックエラー
    error.value = saveProfileError.message
    return
  }
} catch (error) {
  // 予期しないエラー
  console.error('予期しないエラーが発生しました:', error)
  error.value = 'システムエラーが発生しました。しばらく時間をおいて再度お試しください。'
}

2. ユーザーフレンドリーなエラーメッセージ

const getErrorMessage = (error: Error): string => {
  switch (error.code) {
    case 'permission-denied':
      return 'この操作を実行する権限がありません。'
    case 'unavailable':
      return 'サービスが一時的に利用できません。しばらく時間をおいて再度お試しください。'
    default:
      return 'エラーが発生しました。しばらく時間をおいて再度お試しください。'
  }
}

アクセシビリティの考慮

1. セマンティックHTML

<template>
  <v-form ref="form" @submit.prevent="submit" role="form" aria-label="プロフィール作成フォーム">
    <v-text-field
      v-model="nickname"
      label="ニックネーム"
      :rules="nicknameRules"
      aria-describedby="nickname-error"
    />
    <!-- エラーメッセージに適切なIDを設定 -->
  </v-form>
</template>

2. キーボードナビゲーション

Vuetifyコンポーネントは標準でキーボードナビゲーションをサポート
フォーカス管理とタブオーダーを適切に設定
スクリーンリーダー対応のaria属性を活用

まとめ

この記事では、Vue.js + Nuxt.js + Firebase + Vuetifyを使用したプロフィール作成画面の実装について詳しく解説しました。

実装のポイント

コンポーネント設計: 再利用性と保守性を重視した設計
型安全性: TypeScriptによる厳密な型定義
エラーハンドリング: ユーザーフレンドリーなエラー処理
セキュリティ: Firestoreセキュリティルールの適切な設定
アクセシビリティ: すべてのユーザーが利用可能なUI設計

今後の拡張可能性

プロフィール画像アップロード: Firebase Storageとの連携
プロフィール編集機能: 既存データの更新処理
バリデーション強化: より詳細な入力値チェック
国際化対応: 多言語サポートの実装
オフライン対応: PWA機能の追加

この実装をベースに、より高度な機能を追加していくことで、本格的なWebアプリケーションを構築できます。

GitHubで編集を提案

はじめに

実装する機能

技術スタック

要件

アーキテクチャ概要

コンポーネント設計のポイント

Firebase Firestore Databaseとは

主な特徴

データ構造

プロフィールデータの保存例

バリデーションルール

ニックネーム

年齢

性別

入力項目のコンポーネントの作成

設計思想

主要な処理の流れ

1. Props定義

2. リアクティブデータの初期化

3. バリデーションルールの定義

4. フォーム送信処理

5. テンプレート部分

特徴

実装のポイント

1. Props設計の工夫

2. バリデーション戦略

3. イベント駆動設計

プロフィールデータをFirestoreに保存する

主要な処理の流れ

1. インポートとインターフェース定義

2. Composableの初期化

3. プロフィール保存処理

4. 戻り値

特徴

使用例

Composable設計の利点

1. 関心の分離

2. テスト容易性

3. 再利用性

プロフィール作成ページ

ページコンポーネントの設計思想

1. 責任の明確化

2. エラーハンドリング戦略

3. ナビゲーション管理

ベストプラクティスと注意点

セキュリティ考慮事項

1. Firestoreセキュリティルール

2. クライアントサイドバリデーションの限界

パフォーマンス最適化

1. コンポーネントの最適化

2. Firestoreクエリの最適化

エラーハンドリングのベストプラクティス

1. 階層的エラーハンドリング

2. ユーザーフレンドリーなエラーメッセージ

アクセシビリティの考慮

1. セマンティックHTML

2. キーボードナビゲーション

まとめ

実装のポイント

今後の拡張可能性

Discussion