実践練習

ToDoリストアプリケーション

ToDoリストアプリケーションは、Vue 3の基本的な機能を学ぶのに最適なプロジェクトです。このアプリケーションを作成する過程で、Vue 3のComposition API、Vue Router、Vuexを使用した状態管理、そして基本的なCRUD（Create, Read, Update, Delete）操作を実践します。ここでは、<script setup>構文を使用して、ToDoリストアプリケーションの基本的な構成を説明します。

プロジェクトのセットアップ

  1. Vue CLIを使用してプロジェクトを作成します。
    vue create todo-app
  2. Vue RouterとVuexをインストールします。
    cd todo-app
vue add router
vue add vuex

ToDoリストコンポーネント

以下は、ToDoリストの基本的なCRUD操作を行うコンポーネントの例です。この例では、Vue 3のComposition APIを使用しています。

src/components/ToDoList.vue
<script setup>
import { ref } from 'vue';

const todos = ref([]);
const newTodo = ref('');

// ToDoを追加
function addTodo() {
  if (!newTodo.value.trim()) return;
  todos.value.push({ id: Date.now(), text: newTodo.value, completed: false });
  newTodo.value = '';
}

// ToDoを削除
function deleteTodo(id) {
  todos.value = todos.value.filter(todo => todo.id !== id);
}

// ToDoの完了状態をトグル
function toggleTodoCompletion(todo) {
  todo.completed = !todo.completed;
}
</script>

<template>
  <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new todo" />
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      <input type="checkbox" v-model="todo.completed" @change="toggleTodoCompletion(todo)" />
      {{ todo.text }}
      <button @click="deleteTodo(todo.id)">Delete</button>
    </li>
  </ul>
</template>

Vue Routerの統合

ToDoリストアプリケーションにおいて、Vue Routerを使用してページ遷移を管理します。src/router/index.jsを編集して、ルートを設定します。

src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

Vuexの統合

Vuexを使用して、ToDoリストの状態をグローバルに管理します。これにより、アプリケーション全体でToDoリストの状態を共有できます。

src/store/index.js
import { createStore } from 'vuex';

export default createStore({
  state: {
    todos: [],
  },
  mutations: {
    addTodo(state, todo) {
      state.todos.push(todo);
    },
    deleteTodo(state, todoId) {
      state.todos = state.todos.filter(todo => todo.id !== todoId);
    },
    toggleTodoCompletion(state, todoId) {
      const todo = state.todos.find(todo => todo.id === todoId);
      if (todo) todo.completed = !todo.completed;
    },
  },
  actions: {
    addTodo({ commit }, todoText) {
      const todo = { id: Date.now(), text: todoText, completed: false };
      commit('addTodo', todo);
    },
    deleteTodo({ commit }, todoId) {
      commit('deleteTodo', todoId);
    },
    toggleTodoCompletion({ commit }, todoId) {
      commit('toggleTodoCompletion', todoId);
    },
  },
});

ブログアプリケーション

ブログアプリケーションの開発は、Vue 3の機能を深く理解するのに役立つ複雑なプロジェクトです。このプロジェクトでは、マークダウンエディタの統合、コメント機能の実装、そして認証と認可の仕組みを取り入れます。<script setup>構文を使用してVue 3アプリケーションを構築する方法を見ていきましょう。

プロジェクトのセットアップ

  1. Viteを使用して新しいVue 3プロジェクトを作成します。
    npm create vite@latest my-blog-app -- --template vue
cd my-blog-app
npm install
  2. Vue RouterとVuexをプロジェクトに追加します。
    npm install vue-router@4 vuex@4
  3. マークダウンエディタとしてmarkdown-itをインストールします。
    npm install markdown-it

マークダウンエディタコンポーネント

マークダウンエディタのためのコンポーネントを作成します。このコンポーネントは、ユーザーが入力したマークダウンテキストをリアルタイムでHTMLに変換し表示します。

src/components/MarkdownEditor.vue
<script setup>
import { ref } from 'vue';
import MarkdownIt from 'markdown-it';

const md = new MarkdownIt();
const markdownText = ref('');

const renderedHtml = computed(() => {
  return md.render(markdownText.value);
});
</script>
<template>
  <div class="markdown-editor">
    <textarea v-model="markdownText" placeholder="Enter markdown text"></textarea>
    <div v-html="renderedHtml" class="preview"></div>
  </div>
</template>
<style>
.markdown-editor {
  display: flex;
}
textarea {
  width: 50%;
  height: 300px;
}
.preview {
  width: 50%;
  padding: 20px;
  border-left: 1px solid #ccc;
  overflow-y: scroll;
}
</style>
app.vue
<script setup>
import { MarkdownEditor } from '@/components/MarkdownEditor.vue';
</script>
<template>
  <MarkdownEditor />
</template>

コメント機能

コメント機能を実装するためには、各ブログ投稿に対してコメントを保存し、表示する機能が必要です。この例では、Vuexを使用してコメントデータを管理します。

src/store/index.js
import { createStore } from 'vuex';

export default createStore({
  state: {
    comments: {}
  },
  mutations: {
    addComment(state, { postId, comment }) {
      if (!state.comments[postId]) {
        state.comments[postId] = [];
      }
      state.comments[postId].push(comment);
    }
  },
  actions: {
    addComment({ commit }, { postId, comment }) {
      commit('addComment', { postId, comment });
    }
  }
});

認証と認可

認証と認可の実装には、Firebase AuthやAuth0などのサービスを利用するのが一般的です。ここでは、具体的な認証サービスの統合方法は説明しませんが、Vue Routerのナビゲーションガードを使用して、認証されたユーザーのみが特定のルートにアクセスできるようにする基本的なアイデアを示します。

src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import Post from '../views/Post.vue';
import Login from '../views/Login.vue';
import { isAuthenticated } from '../auth'; // 認証状態をチェックする関数

const routes = [
  { path: '/', component: Home },
  { path: '/post/:id', component: Post, meta: { requiresAuth: true } },
  { path: '/login', component: Login }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});



router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login');
  } else {
    next();
  }
});

export default router;

この教材では、Vue 3の<script setup>構文を使用して、ブログアプリケーションの基本的な部分を構築する方法を概説しました。実際のアプリケーション開発では、APIからのデータ取得、認証サービスとの統合、そしてより複雑な状態管理が必要になるかもしれませんが、これらの基本を理解することで、より高度な機能に進むための土台が築けます。