Vue 3でカレンダーライブラリを作成してみた

今回は、Vue 3を使ってカスタムデートピッカーライブラリ「vue3-datepick」を作成しました。なぜこのライブラリを作ったのか、どういった技術を選定したのかを、細かい実装例や設計思想とともに詳しく解説していきます。最終的にはnpmに公開し、使える形に仕上げました。
リポジトリはこちら: vue3-datepick GitHubリポジトリ。

作ったもの

vue3-datepickは、Vue 3コンポーネントとして簡単にインストールして利用できるカレンダーライブラリです。次の機能を持っています:

シンプルで直感的なUI
日付フォーマットのカスタマイズ (YYYY-MM-DD, DD/MM/YYYY など)
特定の日付を無効化
日本語を含む多言語対応

作った理由

vue2 PJのvue3 リプレースにおいて、vue2で使用していたカレンダーライブラリと同じ使用感のものがvue3になかったためです。
個人的な時間で開発・メンテしています。

実装例

基本的な使い方は以下の通りです:

<template>
  <DatePick v-model="selectedDate" :disable-dates="disableDates" />
</template>

<script setup>
import { ref } from 'vue';
import DatePick from 'vue3-datepick';

const selectedDate = ref(null);
const disableDates = ['2024-01-01', '2024-12-25'];
</script>

上記のように、v-modelで日付の双方向バインディングを行い、特定の日付（例: 祝日）を無効化することができます。

開発理由

Vue 3の特性を活かしたカスタマイズ可能なデートピッカーを作りたいという思いが出発点です。特に、既存ライブラリで満たされない要件があったため、軽量かつVue 3と親和性の高いものを自作することにしました。

選定理由

Vite

ビルドツールとしてViteを選定しました。開発サーバーの立ち上がりが速く、ホットリロードも軽快です。さらに、Vue 3との組み合わせがシンプルで、パフォーマンスも向上しました。

npm create vite@latest vue3-datepick --template vue
cd vue3-datepick
npm install
npm run dev

上記のコマンドで即座に開発環境が整います。

VitePress

ドキュメント生成にはVitePressを採用しました。VueコンポーネントとMarkdownファイルの統合が容易で、プロジェクトのドキュメンテーションがスムーズに進行できます。特に、Viteとの親和性が高く、シンプルな構成で済むのが魅力です。

npm install vitepress

これで、ドキュメントを簡単に作成・ホスティングできます。

Vitest

テストには、軽量かつ高速なVitestを使用しました。Vueコンポーネントのテストに最適で、既存のJestの知識もそのまま活かせます。

以下は日付の無効化機能のテストコードです。

import { mount } from '@vue/test-utils';
import { expect, test } from 'vitest';
import DatePick from './DatePick.vue';

test('should disable specific dates', () => {
  const wrapper = mount(DatePick, {
    props: {
      disableDates: ['2024-01-01'],
    },
  });

  expect(wrapper.find('[data-date="2024-01-01"]').classes()).toContain('disabled');
});

特定の日付を無効化するロジックが正しく動作するかを確認できます。

SCSS + BEM

スタイル管理にはSCSSを用い、クラス名にはBEM（Block Element Modifier）を採用しました。これにより、スタイルの再利用性を高めつつ、可読性を保つことができます。

.date-picker {
  &__input {
    padding: 10px;
    border: 1px solid #ccc;
  }
  &__calendar {
    display: flex;
    flex-direction: column;
  }
  &__day--disabled {
    color: #ddd;
    pointer-events: none;
  }
}

BEMでの構造化により、大規模なプロジェクトでも拡張しやすくなっています。

CI / CD

Release → npm publish

リリース作業はGitHub Actionsを使って自動化しています。特定のタグをプッシュするだけで、npmに自動的にパッケージが公開されます。

name: Publish

on:
  push:
    tags:
      - 'v*.*.*'

jobs:
  release:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm ci
      - run: npm publish --access public

これにより、リリースフローの自動化が実現し、ミスが減りました。

Test, Lint, Stylelint, and Prettier Checks

コードの品質を維持するために、テストやLint、Stylelint、PrettierによるチェックをCIに組み込んでいます。すべてのプルリクエストに対して自動的にこれらのツールが走り、クリーンなコードベースを保ちます。

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm ci
      - run: npm run lint
      - run: npm run prettier --check

これでコードの一貫性とスタイルの整合性を保つことができます。

Vercel（VitePress）

Vercelを使って、VitePressで作成したドキュメントをホスティングしています。Vercelはデプロイが簡単で、プレビュー環境も提供してくれるため、ドキュメントの更新がスムーズに行えます。

まとめ

Vue 3を用いて、軽量かつカスタマイズ性の高いデートピッカーライブラリを開発しました。Vite、VitePress、Vitest、SCSS + BEMといった技術スタックを組み合わせ、快適な開発体験とモジュール性を重視した設計です。さらに、GitHub Actionsを用いたCI/CDパイプラインにより、リリース作業の自動化とコード品質の維持も実現しました。

今後も継続的に改善していく予定です。興味があればぜひvue3-datepickをチェックしてみてください！