ReactのComponentからStorybookのStory生成

おだんごん

: ReactのComponentからStorybookのStory生成

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;

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};

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

ロールプレイ
推奨モデル - GPT 4o
Pre CC OSCE医療面接練習用のプロンプト
医学科のPre CC OSCEの医療面接の練習をAIと行うことが可能です。スマホやタブレットの文字音声入力を併用すればかなり本番に近い体験ができます。終了後にはAIによる採点＆評価、アドバイスが出力されます。 ※AIの挙動がおかしくなった際はリセットするか、ユーザーが医師役のまま強行突破すればロールプレイ可能です。 ※このロールプレイ用プロンプトはあくまで話を聞く練習用です。　病気の診断用ではありませんので、利用の際にはくれぐれもご注意ください。
1
0
19
306
ぎしぎし
語学学習
推奨モデル - Gemini
英単語の語源解説bot
入力された英単語の語源を、関係があれば接頭辞や接尾辞を用いて説明します。覚えにくい英単語を効率的に暗記できます。 #英単語 #勉強 #学習 #英語
10
1
18
218
user_121083967901911040
GPTs
文案作成
プロンプト作るくん
**プロンプト作るくんの魅力と強み** 1. **精密で効果的なプロンプト作成** - プロンプト作るくんは、AIツールから最適なアウトプットを引き出すための精密で効果的なプロンプトを作成します。 2. **ユーザー中心のアプローチ** - ユーザーの意図や目的を深く理解し、そのニーズに完璧に応じたプロンプトを生成します。 3. **高い適応性** - 個々のニーズに合わせた高い適応性があり、幅広いユーザーに対応可能です。 4. **質の高いアウトプット** - AIツールに最適化されたプロンプト設計により、信頼性が高く、期待を超える成果を提供します。 5. **使いやすさと専門性の両立** - 初心者から上級者まで、誰にでも使いやすい設計でありながら、プロンプト作成の専門性を備えています。 6. **AIの可能性を最大限に引き出す** - プロンプト作るくんを活用することで、効率的かつ効果的なプロンプト作成が可能になり、AIのポテンシャルを最大限に活かせます。 --- **活用シーンとユーザー** - **ビジネスプロフェッショナル** - 効率的にレポートやプレゼン資料を生成したいビジネスマンに最適。プロンプト作るくんを使えば、短時間で質の高いアウトプットを得られます。 - **マーケティング担当者** - キャンペーンアイデアや広告コピーを生成する際に、クリエイティブで効果的なプロンプトを作成し、AIの力でアイデアを具現化します。 - **コンテンツクリエーター** - ブログ記事やSNS投稿など、コンテンツを大量に作成する際に活躍。ターゲットに刺さる内容をAIに生成させるためのプロンプトを提供します。 - **AI初心者** - AIを活用したいが、どのようにプロンプトを作成すれば良いか分からない方に、わかりやすく指導し、最初の一歩をサポートします。 **プロンプト作るくん**は、さまざまな業界やシーンで活躍できる汎用性を持ち、誰でも簡単に効果的なプロンプトを作成できる、頼りになるツールです。
4
0
170
378
KENTO
画像生成
物語・脚本・プロット
アニメロゴ
かっこいい男の子4人が学校のアイドル部でアイドル活動をするアニメ。明朝体風に、スラッとしてかっこいいフォントにしてほしいです。そして4人のイメージカラーを文字に入れて欲しいです。
0
0
1
109
user_286540381116480512

ReactのComponentからStorybookのStory生成

コメント 0

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