コントリビューションガイド

概要

🎉 Vant へのコントリビューションにようこそ！選んでいただきありがとうございます。

このガイドは Issue や PR を提出する際の作法をまとめたものです。短時間で目を通していただければ、プロジェクトへの参加がよりスムーズになります。

Issue 規約 🎨

問題報告の前に以下をご確認ください：

🔍 重複確認：既存の Issue を検索して重複がないか確認します。
📝 明確な記述：現象・環境・再現手順を簡潔に記述してください。

開発への参加 👨‍💻

ローカル開発 🛠️

開始前に Node.js >= 18 を用意してください。

セットアップ手順：

bash

# リポジトリを取得
git clone git@github.com:vant-ui/vant.git

# pnpm を有効化
corepack enable

# 依存関係のインストール
pnpm i

# 開発モード起動（ブラウザで localhost を確認）
pnpm dev

🌳 開発ブランチの選択：

main ブランチ 🌟 - Vant 4（Vue 3）
3.x ブランチ 🌿 - Vant 3（Vue 3）
2.x ブランチ 🌱 - Vant 2（Vue 2）

ディレクトリ構成 🗺️

Vant は monorepo 構成で、主要パッケージは packages 配下に配置されています：

root
└─ packages
   ├─ vant        # コンポーネントライブラリ
   ├─ vant-cli    # CLI
   ├─ vant-icons  # アイコン
   ├─ vant-use    # Composition API ユーティリティ
   └─ ....        # その他の周辺パッケージ

packages/vant がコンポーネントライブラリの中心です：

vant
├─ docs             # ドキュメント
├─ src              # コンポーネントソース
├─ test             # テストユーティリティ
└─ vant.config.mjs  # ドキュメントサイト設定

packages/vant/src 配下では各コンポーネントが独立ディレクトリに配置されます：

src
└─ button
   ├─ demo             # デモコード
   ├─ test             # ユニットテスト
   ├─ Component.tsx    # コンポーネント
   ├─ index.ts         # エントリ
   ├─ index.less       # スタイル
   ├─ README.md        # 英語ドキュメント
   └─ README.zh-CN.md  # 中国語ドキュメント

コード規約 ✨

以下の規約に従ってください：

🔍 ESLint：リポジトリの ESLint を通過させます。
🎨 Prettier：フォーマッタでコード整形します。
⚡ 互換性：対象環境で動作する API のみを使用します。

Pull Request の提出 🌸

参考ガイド 📚

オープンソースへの参加が初めての場合は次をご参照ください：

Pull Request 規約 🎁

PR は以下を心掛けてください：

🎯 集中：1 PR につき 1 つの問題修正や機能追加に限定します。
🛡️ テスト：追加・変更にはユニットテストを付与します。
📝 説明：詳細な説明と関連 Issue を記載します。

Pull Request の流れ 🚀

手順：

🍴 フォーク：メインリポジトリを自分のアカウントへフォークします。
🌿 ブランチ作成：main から作業ブランチを作成（例 feature/button_color）。
🎨 実装：作業ブランチで開発し、完了後に main へ PR を作成します。
👥 レビュー：レビューを経てマージされます。
🎉 リリース：定期リリースにて変更が公開されます。

PR タイトル形式 📝

良いタイトルは詩の題名のように内容を一目で伝えます。Pull Request のタイトルは次の形式に従ってください：

bash

type(ComponentName?)：commit message

例：

docs: fix typo in quickstart
build: optimize build speed
fix(Button): incorrect style
feat(Button): add color prop

タイプ例：

fix
feat
docs
perf
test
types
style
build
chore
release
refactor
breaking change
revert:

ベストプラクティス 🌟

コード貢献のコツ

🎯 単一機能に集中

javascript

// ✅ 良い例：単一機能に集中
// Button に loading 状態を追加
const Button = ({ loading, children, ...props }) => {
  return (
    <button disabled={loading} {...props}>
      {loading ? <Loading /> : children}
    </button>
  );
};

// ❌ 避ける：1 PR で複数の無関係な変更

📝 明確なコミットメッセージ

bash

# ✅ 良いメッセージ
feat(Button): add loading state support
fix(Dialog): resolve overlay z-index issue
docs: update Button component examples

# ❌ 抽象的メッセージ
update button
fix bug
change style

テスト作成ガイド

🧪 新機能にテストを付与

javascript

// 新機能のテストケース
describe('Button Loading State', () => {
  test('should show loading icon when loading is true', () => {
    const { container } = render(<Button loading>Submit</Button>);
    expect(container.querySelector('.van-loading')).toBeTruthy();
  });

  test('should disable button when loading', () => {
    const { container } = render(<Button loading>Submit</Button>);
    expect(container.querySelector('button')).toBeDisabled();
  });
});

よくある問題 🔧

開発環境の問題

❓ ローカル開発サーバーが起動しない

bash

# 依存を削除して再インストール
rm -rf node_modules package-lock.json
npm install

# または pnpm を使用
rm -rf node_modules pnpm-lock.yaml
pnpm install

❓ ESLint のチェックに失敗

bash

# 自動修正を実行
npm run lint:fix

# 残りの問題を確認
npm run lint

❓ ユニットテストが失敗

bash

# 特定のテストファイルのみ実行
npm test -- Button

# スナップショットを更新
npm test -- --updateSnapshot

Git の課題

❓ ブランチ同期の競合

bash

# rebase で履歴を整える
git fetch upstream
git rebase upstream/main

# 競合解消後に続行
git add .
git rebase --continue

❓ コミット履歴が散らかっている

bash

# interactive rebase で整理
git rebase -i HEAD~3

# 複数コミットを 1 つに統合（エディタで pick を squash に変更）

コントリビュータの成長パス 🚀

初級 🌱

ドキュメントの誤記修正
小さなバグ修正
Issue 議論への参加

中級 🌿

新機能の追加
既存コンポーネントの性能改善
詳細なテストケースの作成

上級 🌳

新しいコンポーネント設計
技術設計の議論への参加
新規貢献者の支援

メンテナー 🏆

主要機能開発のリード
コード規約の策定
プロジェクトの継続的な維持

コミュニティ参加ガイド 💬

議論への参加

🗣️ Issue で支援

問題の再現と確認
解決策の提案
関連経験の共有

💡 建設的な提案

ユースケースの詳細記述
設計案の提示
後方互換性の配慮

🤝 協調開発

レビューへの迅速な対応
積極的なヘルプ依頼
開発知見の共有

デザインインスピレーション 🎨

コンポーネント設計原則

🎯 ユーザー体験優先

直感的な API 設計
一貫したインタラクション
適切なエラーハンドリング

🔧 開発者フレンドリー

明確なドキュメント
充実した使用例
柔軟なカスタマイズ

📱 モバイル最適化

タッチフレンドリーな操作
レスポンシブ設計
パフォーマンス最適化

機能改善の提案

🌈 テーマシステム強化

動的テーマ切り替え
カスタムテーマジェネレーター
テーマのプレビュー

♿ アクセシビリティ

キーボードナビゲーションの改善
スクリーンリーダー対応
高コントラストモード

🚀 パフォーマンス最適化

按需ロードの最適化
仮想スクロールの対応
メモリ使用の最適化

参考資料 📚

技術ドキュメント

オープンソースへの貢献

デザインリソース

🎉 ご協力に感謝します！ すべての PR・Issue・議論が Vant をより良くします。最高のモバイル UI ライブラリを一緒に育てていきましょう！

コントリビューションガイド ​

概要 ​

Issue 規約 🎨 ​

開発への参加 👨‍💻 ​

ローカル開発 🛠️ ​

ディレクトリ構成 🗺️ ​

コード規約 ✨ ​

Pull Request の提出 🌸 ​

参考ガイド 📚 ​

Pull Request 規約 🎁 ​

Pull Request の流れ 🚀 ​

PR タイトル形式 📝 ​

最新コードの同期 🔄 ​

ベストプラクティス 🌟 ​

コード貢献のコツ ​

テスト作成ガイド ​

よくある問題 🔧 ​

開発環境の問題 ​

Git の課題 ​

コントリビュータの成長パス 🚀 ​

初級 🌱 ​

中級 🌿 ​

上級 🌳 ​

メンテナー 🏆 ​

コミュニティ参加ガイド 💬 ​

議論への参加 ​

デザインインスピレーション 🎨 ​

コンポーネント設計原則 ​

機能改善の提案 ​

参考資料 📚 ​

技術ドキュメント ​

オープンソースへの貢献 ​

デザインリソース ​

コントリビューションガイド

概要

Issue 規約 🎨

開発への参加 👨‍💻

ローカル開発 🛠️

ディレクトリ構成 🗺️

コード規約 ✨

Pull Request の提出 🌸

参考ガイド 📚

Pull Request 規約 🎁

Pull Request の流れ 🚀

PR タイトル形式 📝

最新コードの同期 🔄

ベストプラクティス 🌟

コード貢献のコツ

テスト作成ガイド

よくある問題 🔧

開発環境の問題

Git の課題

コントリビュータの成長パス 🚀

初級 🌱

中級 🌿

上級 🌳

メンテナー 🏆

コミュニティ参加ガイド 💬

議論への参加

デザインインスピレーション 🎨

コンポーネント設計原則

機能改善の提案

参考資料 📚

技術ドキュメント

オープンソースへの貢献

デザインリソース