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

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

### 1. Bootstrap を導入

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

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

```bash
npm install bootstrap
```

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

```javascript
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` クラスで緑色のボタンに仕上げます


```html
<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 で微調整**
```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` クラスで緑色のアウトラインボタンに仕上げます

```html
<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 で微調整**

```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 アプリのデザインを実現できました。色々なカラーパレットでデザインを作れるためご自身の理想に合ったものが作れると思います。
今回の実装では説明できていないクラスなどは[公式](https://getbootstrap.jp/docs/5.3/getting-started/introduction/)サイトをご確認ください。

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

![スクリーンショット 2024-06-14 15.22.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2544275/80c54959-241d-768e-1413-a0d178b91079.png)

![スクリーンショット 2024-06-14 16.30.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2544275/9856180a-9f0d-a589-0248-eac7685a077e.png)

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

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