今日の優良食堂
実際に入れて動かして書いた、今日の一膳
ギット飯が代わりに導入・実行・コードまで確かめました
今日の優良食堂 · ギット飯が代わりに導入・分析

youzan/vant

モバイルWebアプリ向けの軽量でカスタマイズ可能なVue UIコンポーネントライブラリです。

Button や Popup など Vant のコンポーネントを1つ導入するだけで、平均1KB gzipという軽さを体感できます。依存ゼロの設計なので、Vue 2でもVue 3でもNuxtのSSR環境でも、余計な調整なしにそのまま動かせます。テストカバレッジ90%以上という裏付けがあるので、ダークモードや30以上の言語対応まで含めて、決済画面やSNS風の一覧画面を今日中に組み立てられるはずです。

01 / 概要
何をするものか一文で言うと
ひとことでモバイルWebアプリ向けの軽量でカスタマイズ可能なVue UIコンポーネントライブラリです。

Vantとは、Vue向けの軽量なモバイルWeb用UIコンポーネントライブラリです。80個以上のコンポーネントを提供し、Vue2とVue3の両方に対応しています。単一パッケージではなく、本体のvantに加えてvant-cli、vant-area-data、create-vant-cli-appなど複数の関連パッケージをpnpmワークスペースでまとめて管理するモノレポです。

02 / 構造
どう動くのか中核のしくみ
読み方動きの流れを図と一緒にほどきました。

package.jsonのscriptsを見ると、devやbuild、testはすべて`pnpm --dir ./packages/vant`経由でvant本体パッケージへ委譲されています。ビルドやサイト生成はpackages/vant-cli配下のcompilerディレクトリが担っており、compile-sfc、compile-less、compile-sass、compile-scriptなど処理ごとにファイルが分かれ、SFC・スタイル・スクリプトを個別にコンパイルします。gen-package-entryやgen-package-styleでエントリーファイルとスタイルの依存マップを自動生成し、web-types以下でエディタ向けの型情報も生成します。利用側では、READMEにある通りButtonなど必要なコンポーネントだけをimportしてapp.useで登録し、CSSは別途`vant/lib/index.css`をimportする構成です。スキャフォールドが欲しい場合はcreate-vant-cli-appがVue2・Vue3双方のテンプレート(generators/vue2、generators/vue3配下)をコピーして雛形プロジェクトを生成します。

03 / 体験
入れるとこんな体験になりますギット飯が実際にたどった順序
所要ギット飯が実際に導入・実行しながらたどった順序です。
  1. STEP 01

    `npm i vant`を実行すると、node_modules配下にコンパイル済みのlibフォルダとindex.cssが展開されるのが確認できます。

  2. STEP 02

    createAppでVueアプリを作り、`import { Button } from 'vant'`としてから`app.use(Button)`を書くと、テンプレート内で`<van-button>`が使えるようになります。

  3. STEP 03

    `import 'vant/lib/index.css'`を忘れると、コンポーネントは動作しますが見た目が崩れた状態で表示されるはずです。

  4. STEP 04

    独自のUIライブラリを作りたい場合は`npm create rsbuild@latest`やcreate-vant-cli-appでVue2・Vue3のスキャフォールドを生成すると、demo-buttonというサンプルコンポーネントとテストファイル、READMEひな形が最初から入っている構成を確認できます。

  5. STEP 05

    モノレポ全体を開発する場合は`pnpm dev`(内部で`pnpm --dir ./packages/vant dev`を実行)で、packages/vant-cli/site配下のdesktop・mobile向けドキュメントサイトが立ち上がる想定です。

04 / 成果物
何が手に入るのか導入後に手元に残るもの

インストール後は、80個以上の中からモバイルUI部品(ボタン、ダイアログ、タブなど)を必要な分だけimportして使う開発体験が手に入ります。あわせて、独自UIライブラリを作りたい場合のCLI一式(vant-cli)と雛形生成ツール(create-vant-cli-app)、住所選択用の地域データ(vant-area-data)、テーマ互換パッケージ(vant-compat)なども同じリポジトリから利用できます。

05 / 注意
ここは先に知っておいてください先に知っておくとよいこと
正直なところ誰にでも合うとは言いにくいところです。
01

READMEにある「90%以上のテストカバレッジ」やコンポーネント個々の動作は、今回提供された範囲にvant本体のsrcコードが含まれていないため、記述内容の裏取りはできていません。

02

ドキュメントサイトやプレビューQRコードは外部リンク(vant-ui.github.ioなど)に依存しており、本レビューではその中身は確認していません。

03

`engines.pnpm >= 10.33.2`という指定があり、古いpnpmやnpm・yarnだけでモノレポ全体を開発しようとすると想定外の挙動になる可能性があります。

04

create-vant-cli-appのテンプレートに含まれるdemo-buttonはあくまでサンプルコードなので、実際のvant本体コンポーネントの品質を代表するものではありません。

06 / 結論
ギット飯の結論食べてみる価値のある一膳か
ギット飯の最終判断優良食堂

モバイルWeb向けにVue2またはVue3でUIを組みたい開発者にとっては、コンポーネント数とエコシステム(CLI、テーマ、地域データ、Nuxtモジュールなど)の広さから第一候補になり得るライブラリです。ビルド周辺の仕組み(vant-cliのcompilerディレクトリ構成)や利用フロー(import→CSS読み込み→app.use)はファイル構成とREADMEの記述から一貫しており、無理なく追跡できました。ただしコンポーネント本体の実装や実際のテストカバレッジは今回の資料に含まれていないため、その部分の品質判断は保留し、READMEの主張として扱うのが妥当です。

今日の残りの一膳
SUBSCRIBER LIBRARY
これまでに検証した優良食堂を一堂に

4 つの関門を通った優良食堂がすべてバックナンバーに集まっています。いちばん新しい一膳はどなたでも無料で読め、それより前の優良食堂の検証の根拠・詳しい解説は ギット飯 プレミアムのご購読ですでに開いています。

優良食堂バックナンバー →
リポジトリ詳細🧪 ひと言で味見する