はじめてみよう

jellee は、管理画面向けに設計された Web Components ライブラリです。フレームワーク（React, Vue, Angular, Svelte）を問わず、HTMLのみのプレーンな環境でも動作します。

CDN から読み込む（推奨）

最も簡単な導入方法です。以下の2行を HTML に追加するだけで、すぐに使えます。

<!-- CSS（デザイントークン・スタイル） -->
<link rel="stylesheet" href="https://jellee.joydea.jp/cdn/jellee/v0.1.0-beta.11/jui.css">

<!-- JS（コンポーネント本体） -->
<script type="module" src="https://jellee.joydea.jp/cdn/jellee/v0.1.0-beta.11/jui.esm.js"></script>

最小構成のサンプル

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Jellee デモ</title>
  <link rel="stylesheet" href="https://jellee.joydea.jp/cdn/jellee/v0.1.0-beta.11/jui.css">
  <script type="module" src="https://jellee.joydea.jp/cdn/jellee/v0.1.0-beta.11/jui.esm.js"></script>
</head>
<body>
  <jui-button variant="brand">ボタン</jui-button>
  <jui-alert variant="success">CDNから読み込み成功！</jui-alert>
</body>
</html>

バージョン指定

3つの方法でバージョンを指定できます。

URLキャッシュ用途
.../v0.1.0-beta.11/jui.esm.js1年（immutable）完全固定 — 本番環境で確実に同じバージョンを使いたい場合
.../v0/jui.esm.js1日メジャー追従 — パッチ・マイナー更新を自動で取得
.../latest/jui.esm.js5分常に最新 — 開発・プロトタイプ向け
<!-- 本番環境（推奨）：バージョン完全固定 -->
<script type="module" src="https://jellee.joydea.jp/cdn/jellee/v0.1.0-beta.11/jui.esm.js"></script>

<!-- 本番環境：メジャーバージョン追従（パッチ自動更新） -->
<script type="module" src="https://jellee.joydea.jp/cdn/jellee/v0/jui.esm.js"></script>

<!-- 開発環境：常に最新 -->
<script type="module" src="https://jellee.joydea.jp/cdn/jellee/latest/jui.esm.js"></script>

⚠️ 本番環境では v0.1.0-beta.11 のようなバージョン固定、または v0 のメジャー追従を推奨します。latest は予告なく更新される場合があります。

バージョン情報 API

現在のバージョンや利用可能なバージョン一覧を JSON で取得できます。

GET https://jellee.joydea.jp/cdn/jellee/version.json
{
  "latest": "0.1.0-beta.11",
  "versions": [
    {
      "version": "0.1.0-beta.11",
      "date": "2026-06-18",
      "aliases": ["latest", "v0"]
    }
  ]
}

npm / bun でインストール（バンドラ利用時）

Vite・webpack・Next.js などバンドラを使うプロジェクトでは、パッケージとして導入できます。

# bun
bun add jellee

# npm
npm install jellee

エントリーポイントでローダーを一度だけ呼び出し、グローバル CSS を読み込みます。

// main.ts / main.tsx など
import { defineCustomElements } from 'jellee/loader';
import 'jellee/dist/jui/jui.css';

defineCustomElements();

前提環境: Node.js 22.12 以上（または bun）。TypeScript 型定義はパッケージに同梱されています。

各フレームワークでの利用

Laravel (Blade)

レイアウトファイルに以下を追加します。

{{-- layouts/app.blade.php --}}
<head>
  <link rel="stylesheet" href="https://jellee.joydea.jp/cdn/jellee/v0.1.0-beta.11/jui.css">
  <script type="module" src="https://jellee.joydea.jp/cdn/jellee/v0.1.0-beta.11/jui.esm.js"></script>
</head>

Bladeテンプレートで直接使えます。

<jui-button variant="brand">送信</jui-button>

<jui-card card-title="{{ $item->title }}">
  <p>{{ $item->description }}</p>
</jui-card>

@foreach ($users as $user)
  <jui-avatar initials="{{ $user->initials }}"></jui-avatar>
@endforeach

Yii2

AssetBundle を作成して読み込みます。

// assets/JuiAsset.php
class JuiAsset extends AssetBundle
{
    public $css = [
        'https://jellee.joydea.jp/cdn/jellee/v0.1.0-beta.11/jui.css',
    ];
    public $jsOptions = ['type' => 'module'];
    public $js = [
        'https://jellee.joydea.jp/cdn/jellee/v0.1.0-beta.11/jui.esm.js',
    ];
}
<?php JuiAsset::register($this); ?>

<jui-button variant="brand">送信</jui-button>
<jui-input placeholder="名前を入力" label="名前"></jui-input>

React / Next.js

エントリーポイントでローダー関数を呼び出します。

// main.tsx または _app.tsx
import { defineCustomElements } from 'jellee/loader';
import 'jellee/dist/jui/jui.css';

defineCustomElements();
export default function App() {
  return (
    <div>
      <jui-button variant="brand">Reactで表示したボタン</jui-button>
    </div>
  );
}

Vue / Nuxt

jui- で始まるタグをカスタム要素として扱うようコンパイラへ伝え、エントリーポイントでローダーを登録します。

// vite.config.ts
import vue from '@vitejs/plugin-vue';

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.startsWith('jui-'),
        },
      },
    }),
  ],
};
// main.ts
import { createApp } from 'vue';
import { defineCustomElements } from 'jellee/loader';
import 'jellee/dist/jui/jui.css';
import App from './App.vue';

defineCustomElements();
createApp(App).mount('#app');

プロパティは :prop でバインドし、値の変更は jui* イベントで受け取ります（v-model は使えないため .detail から値を取り出します）。

<template>
  <jui-input
    label="名前"
    :value="name"
    @juiInput="name = $event.detail.value"
  ></jui-input>

  <jui-modal :open="isOpen" @juiClose="isOpen = false">
    <p>本文</p>
  </jui-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const name = ref('');
const isOpen = ref(false);
</script>

Nuxt では defineCustomElements() をクライアント専用プラグイン（~/plugins/jellee.client.ts）で呼び出してください（SSR 時に window を参照するため）。

テーマのカスタマイズ

CSS カスタムプロパティを上書きするだけで、プロジェクト全体のテーマを変更できます。

<style>
  :root {
    /* ブランドカラーを変更 */
    --jui-color-brand: #7c3aed;

    /* 背景色を変更 */
    --jui-color-surface: #FAFAFA;
    --jui-color-surface-raised: #FFFFFF;

    /* 角丸を変更 */
    --jui-radius-md: 12px;
  }
</style>

特定のコンポーネントだけスタイルを変えたい場合は、::part() を使います。

/* ボタンを丸くする */
jui-button::part(button) {
  border-radius: 999px;
}

/* カードの影を強くする */
jui-card::part(card) {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

次のステップ

  • コンポーネント一覧 で利用可能な全コンポーネントを確認
  • 各コンポーネントページで Props・Events・使用例を確認