Vue 3 で作る！簡単 ToDo アプリ - Bootstrap でCSS をカスタマイズしよう！ #Vue.js

今回は前回のTodoアプリをBootstrap を活用して、爽やかなデザインに仕上げていきたいと思います。

1. Bootstrap を導入

まずは、プロジェクトに Bootstrap を導入します。

npm でインストールする場合は、以下を実行します

npm install bootstrap

その後、main.ts でインポートします。

import 'bootstrap/dist/css/bootstrap.min.css';

2. Bootstrap のコンポーネントを活用したデザイン

Bootstrap のコンポーネントを利用して、各要素のデザインを作成していきます。

ToDo List:

container クラスで要素を中央に配置します
display: flex; align-items: center を使用して、入力欄と追加ボタンを横並びに配置しました
input タグでタスク入力欄を作成し、form-control クラスでスタイリングします
button タグで「追加」ボタンを作成し、btn クラスと btn-success クラスで緑色のボタンに仕上げます

<div class="container">
    <h1>ToDo List</h1>
    <div style="display: flex; align-items: center">
      <input type="text" v-model="newTodoText" class="form-control" />
      <button @click="addTodo" class="btn btn-success">追加</button>
    </div>

    <ul>
      <TodoItem
        v-for="(item, index) in todos"
        :key="index"
        :item="item"
        @toggle="toggleTodo"
        @delete="deleteTodo"
        @edit="finishEditing"
      />
    </ul>
  </div>

CSS で微調整

.container {
  padding: 20px;
}

.container h1 {
  margin-bottom: 20px;
}

.form-control {
  width: calc(100% - 80px); 
  margin-right: 10px; 
}

.btn-success {
  width: 80px; 
}

ToDo Item:

list-group-item クラスで各ToDo アイテムを作成します
d-flex align-items-centerで配置の指定と中央揃えにします
チェックボックスには form-check-input クラス、ラベルには form-check-label クラスを適用します
btn クラスと btn-outline-success クラスで緑色のアウトラインボタンに仕上げます

<li class="list-group-item d-flex align-items-center">
    <!-- チェックボックス -->
    <input
      type="checkbox"
      v-model="completed"
      class="form-check-input me-3"
      @change="emit('toggle', props.item)"
    />
    <!-- タスク表示 -->
    <div v-if="!isEditing" class="flex-grow-1">
      <label
        class="form-check-label"
        :class="{ completed: props.item.completed }"
        @dblclick="startEditing"
        >{{ props.item.text }}</label
      >
    </div>
    <!-- 編集モードのテキストボックス -->
    <input v-else type="text" class="form-control me-2" style="width: 150px" v-model="editText" />
    <!-- 編集モード時のボタン -->
    <div v-if="isEditing" class="btn-group">
      <button class="btn btn-outline-success me-1" @click="finishEditing">編集</button>
      <button class="btn btn-outline-secondary" @click="cancelEditing">キャンセル</button>
    </div>
    <!-- 非編集モード時の削除ボタン -->
    <button v-else class="btn btn-outline-danger" @click="emit('delete', props.item)">削除</button>
  </li>

CSS で微調整

.list-group-item {
  padding: 10px;
  border: none;
}

.form-check-input {
  margin-top: 6px;
}

.form-check-label {
  overflow-wrap: break-word;
}

.form-control {
  width: 100%; 
  display: inline-block; 
  vertical-align: middle; 
}

.btn {
  margin-top: 6px;
  padding: 6px 12px; 
}

.btn-group {
  margin-left: auto; 
}

.ms-auto {
  margin-left: auto; 
}

.text-decoration-line-through {
  text-decoration: line-through; 
  color: #999; 
}

5. まとめ

Bootstrap を活用することで、少ないコードでToDo アプリのデザインを実現できました。色々なカラーパレットでデザインを作れるためご自身の理想に合ったものが作れると思います。
今回の実装では説明できていないクラスなどは公式サイトをご確認ください。

6. 比較

最後にどのようにデザインが変化したのか比較したいと思います。

かなり変化したのがわかると思います。
自分の好きなデザインに変えられると実装していても楽しいですよね！

ご覧いただきありがとうございました。