ReactコンポーネントにおけるLorem Ipsum

ReactコンポーネントにおけるLorem Ipsum

React開発者は、コンポーネント開発、Storybookドキュメント、UIプロトタイピングにプレースホルダーテキストを頻繁に必要とします。ここではLorem IpsumをReactワークフローに効果的に統合する方法を説明します。

基本的なコンポーネント使用

最もシンプルなアプローチはLorem Ipsum定数を定義することです：

const LOREM_SHORT = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
const LOREM_MEDIUM = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, " +
  "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";

function Card({ title, description }: { title?: string; description?: string }) {
  return (
    <div className="card">
      <h3>{title ?? "Lorem Ipsum Dolor"}</h3>
      <p>{description ?? LOREM_MEDIUM}</p>
    </div>
  );
}

Storybookストーリー

Lorem IpsumはStorybookでコンポーネントバリアントをデモンストレーションするために不可欠です：

export const Default: Story = {
  args: {
    title: "Lorem Ipsum Dolor",
    body: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem.",
  },
};

export const LongContent: Story = {
  args: {
    title: "Lorem Ipsum Dolor Sit Amet Consectetur",
    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, " +
      "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. " +
      "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.",
  },
};

モックデータファクトリ

テスト用に、Lorem Ipsumデータを生成するファクトリ関数を作成します：

function createMockArticle(overrides = {}) {
  return {
    id: crypto.randomUUID(),
    title: "Lorem Ipsum Dolor Sit Amet",
    excerpt: "Consectetur adipiscing elit, sed do eiusmod tempor.",
    body: generateLoremIpsum({ paragraphs: 3 }),
    author: "Lorem Author",
    publishedAt: new Date(),
    ...overrides,
  };
}

Lorem Ipsum用カスタムフック

動的プレースホルダーテキストが必要なコンポーネント用の再利用可能なフックを作成できます：

function useLoremIpsum(wordCount: number): string {
  return useMemo(() => generateLoremIpsum({ words: wordCount }), [wordCount]);
}

デザインシステムドキュメント

コンポーネントライブラリを構築する際、すべてのコンポーネントには、単語から複数段落まで、さまざまなテキスト長をどのように処理するかを示すLorem Ipsumの例が必要です。