ReactのComponentからStorybookのStory生成

ReactのComponentからStorybookのStory生成

StorybookのStoryを生成します。

0
0
52
3

投稿日時:

  • プロンプト実行例
  • プロンプトを見る
ReactのComponentからStorybookのStory生成

Componentを入力してください。 コードブロックで囲むと綺麗に表示できます。

TypeScript
1export type ExampleProps = {
2  message: string;
3};
4
5const Example: FunctionComponent<ExampleProps> = ({message}) => {
6  const {isActive, setIsActive} = useState(true);
7  return (
8    <Fragment>
9      <button onClick={() => setIsActive(!isActive)}>オンオフ</button>
10      {isActive && <p>{message}</p>}
11    </Fragment>
12  );
13}
14
15export default Example;
ReactのComponentからStorybookのStory生成
TypeScript
1import React, { useState } from 'react';
2import { Story, Meta } from '@storybook/react';
3
4import Example, { ExampleProps } from './Example';
5
6export default {
7  component: Example,
8  title: 'Example',
9} as Meta;
10
11const Template: Story<ExampleProps> = (args) => <Example {...args} />;
12
13export const Default = Template.bind({});
14Default.args = {
15  message: 'Hello, World!'
16};

コメント 0

他のプロンプトもチェック

  • キャラクター作成

    簡単な質問に答えるだけで画像生成AIに依頼するためのプロンプトを生成できます。
    3
    1
    276
    1.17K
  • チャットボット

    推奨モデル - Gemini
    #禁
  • 画像生成

    キャラクター作成

    スタイリッシュなギャル系の女の子。日焼けした肌、ピンクのハイライトが入ったウェーブのかかったロングブロンドヘア、キラキラのアイシャドウとグロッシーなリップで大胆なメイクを施しています。クロップ丈のヒョウ柄ジャケット、ホットピンクのミニスカート、ハイヒールの厚底ヒールという、露出度の高い派手な衣装を身にまとっています。長く飾られたネイル、派手なアクセサリー、そして遊び心あふれる自信に満ちた笑顔。舞台は、キラキラとハートが舞い散る、ネオンに照らされた夜の東京の街。アニメ調の鮮やかな色彩で、全身ポートレートで撮影されています。 初期から更新済み
    0
    0
    9
    584
  • 文案作成

    数式や手順を、苦手な人向けに、一つひとつ省かず解説します。途中過程を表形式で分解し、誰でも検証可能な形にします。教育やリスキリングに役立つだけでなく、遊び心ある「必殺技モード」で楽しむこともできます。 このプロンプトは **Radical Formula EX(ラディカル・フォーミュラー・EX)** と名付けられました。名前の由来は「徹底的に数式や手順を分解し、極端なまでに展開して、誰でも理解できるように解説する」という思想です。途中過程を省略されて苦しんだ経験から生まれた、あきらめの悪い中年のリスキリング支援プロンプトでもあります。 ### 使い方 - 【RFEX】コマンド → 厳格分解モード(演出なし) - 【ブレイクマジック】コマンド → 必殺技モード(掛け声あり) - コマンドがなくても「分解」「ステップ」「検証」などの要求があれば自動で分解します。 ### 必殺技風の掛け声 > 行け!ブレイクマジシャン!{ユーザーの要望}をブレイクマジックだ! > > ブレイクマジシャン「ラディカル・フォーミュラー・EX=エクストリーム・エクスチェンジ・エクスプロード・エクスパンド・エクスプレイン=!!!」 > (徹底的★数式★極端★変換★爆発的★展開★解説) 繰り返し唱えるごとに「徹底的★数式★極限変換★爆裂展開★解説」と言いたくなるかもしれません。 ### 出力形式 |ステップ番号|変換操作|変換対象|変換操作後| |---|---|---|---| - 各ステップは「動詞+名詞」で分解 - 差分を「変換操作」として記録 - 対象は必ず1つだけ - 操作後の結果を明示 ### ハッシュタグ #教育 #学習支援 #数式分解 #リスキリング #必殺技プロンプト #仕事効率化 #文案作成