Uibook

UibookはReactコンポーネントの視覚的テストツールです。 実際のメディアクエリとさまざまなpropsの組み合わせで、デスクトップおよびモバイルビューのコンポーネントを素早く確認できます。

主な機能:

• 開発者向けの実際のメディアクエリを使ったレスポンシブテスト
• デザイナーや編集者向けのライブテキスト編集でコンテンツを確認
• Webpackプラグインとしてインストールし、追加のビルダーは不要

:triangular_flag_on_post: Uibookのデモプロジェクトはこちらからご覧いただけます: https://uibook.vrizo.net/.

使い方

クイックインストール :hatching_chick:

Uibookはプロジェクトへのシームレスな統合を念頭に設計されています。 Webpackプラグインとしてインストールするだけで準備完了です。 Uibookは別途バンドラーを必要としません。

_webpack.config.js_

const UibookPlugin = require('uibook/plugin')
module.exports = {
  …
  plugins: [
    new UibookPlugin({
      outputPath: '/uibook',
      controller: path.join(__dirname, '../src/uibook-controller.js'),
      hot: true
    })
  ],
}

インストールの詳細はこちら → CRACOを使ったCreate React Appへのインストール →

ページ内のコンポーネントを記述する :hatched_chick:

定義すべきは次の2つだけです：

• ページ — テストするコンポーネント名とケースを持つ単純なオブジェクト；
• ケース — コンポーネントへのpropsとコールバックのセット。

_button.uibook.js_

import UibookCase from 'uibook/case'
import Button from '../src/button'
export default {
  component: Button,
  cases: [
    () => Button,
    () => Small button
  ]
}

設定についてもっと読む →

ページをコントローラーに渡す :baby_chick:

最初のUibookページが完成したら、Uibookコントローラーを書く準備ができています。 ここはすべてのページが含まれ、 UibookStarterに渡される場所です :sparkles:

_uibook-controller.js_

import UibookStarter from 'uibook/starter'
import ButtonUibook from './button.uibook'
export default UibookStarter({
  pages: {
    Button: ButtonUibook
  }
})

コントローラーについてもっと読む →

起動 :rocket:

追加のサーバーやwebpackインスタンスは不要です。 Uibookはあなたのプロジェクトに統合されるため、バンドラーを実行して ブラウザで/uibook（またはカスタムアドレス—outputPath）を開くだけです。

さらに詳しく

• トラブルシューティング
• 例
• 質問はこちら

ライブテキスト編集

このモードは各ケースでcontentEditableを有効にし、マネージャー、 デザイナー、インターフェース編集者がコンポーネント内のコンテンツをプレビューできます。

特別感謝

• @ai
• @demiazz
• @marfitsin
• @iadramelk
• @ikowalsker
• @antiflasher
• @HellSquirrel

どなたでも貢献を歓迎します。現在のタスクは PLAN.mdで確認できます。 プロジェクトに関する質問には喜んでお答えします。

--- Tranlated By Open Ai Tx | Last indexed: 2026-03-26 ---