新入社員が Webサービスを 3日で作った話

● 作成したWebサービスの紹介 ● 新入社員、田中が持っていた技術 ● 使用したAIサービス ● 作成手順 ○ アプリの要件定義 ○ v0でデザインを作成 ○ ClaudeのArtifactsでプロトタイプ作成 ○ CursorのComposerで微修正 ● 苦労した点と解決策 ● 最後に 目次

作成したWebサービスの紹介

田中が持っていた技術 Pythonなどのデータサイエンス技術 Reactなどのフロントエンド技術 フロントエンドについてほぼ何も知らない状態

使用したAIサービス Claude v0 Cursor

作成手順 ②v0でデザインを作成 ①アプリの要件定義 ③ClaudeのAritifactsでプロトタイプ作成 ④CursorのComposerでエラー修正 「タイトル」 概要： ～～～～～～～ ～～～～～～～ 〇〇〇〇 ・~~~ ・~~~ スライドメーカー

● Marp(MarkDown)とChatGPTを使用して文章からスライドを生成する Webアプリを作成したい アプリの要件定義 ● 「編集」と「プレビュー」でタブを切り替えられるようにする。 ● 編集タブに入力欄があり、そこに文章を入力し、「スライドを生成」ボタンを押したらスライドが生成される ● スライドを生成ボタンを押したときの裏側の処理は入力した文章を ChatGPTのAPIを使って送信し、文章から Marp形式の コードに変換する。その変換された Marp形式のコードをプレビュータブでスライドとして表示をする ● 「スライドを生成」ボタンを押して、スライドが生成されたら自動で「プレビュー」タブに切り替わるようにする ● プレビュー」タブにさらに「スライド」タブと「 Marpコード」タブを追加し、「スライド」タブではスライドを表示し、「 Marpコード」タブ では、いつでもChatGPTが生成したMarpコードを編集して、「適用」ボタンで Marpコードを修正して適用できるようにする 要件

プロンプト： Marp(MarkDown)とChatGPTを使用し て文章からスライドを生成する Webアプリを作成したいです。 下記に従うデザインをreactを使ってコー ドを生成してください。 ● 入力欄があり、文章を入力できる。 ● 入力欄の下側に「スライドを生成」 ボタンがある。 ● 入力欄の上側に「編集」タブと「プレ ビュー」タブがあり、切り替えられ る。 ● 「プレビュー」タブではスライドを可 視化できるようにする。 v0でデザインを作成 文章から デザイン作成

ClaudeのArtifactsでプロトタイプ作成 プロンプト： … （v0で出力されたコード） … 上記のコードを用いて、Marp(MarkDown) とChatGPTを使用して文章からスライドを 生成する Webアプリを作成したいです。 要件は以下の通りです。 ● 「スライドを生成」ボタンを押したら入 力欄の文章をChatGPTを使って Marp形式にしてください。 ● そのMarp形式のものをスライドとして 可視化してください。 プロトタイプ作 成

● Claudeに作ってもらったアプリをローカルで動かして確認 ● Composer機能を使ってアプリの起動の仕方も教えてくれる CursorのComposerで微修正 　修正作業のフローチャート 　 修正箇所や エラーを発見 関連するファイルを 探して修正する アプリを起動して人 間の目で確認 繰り返す 後は、デプロイをしてアプリ完成！

苦労した点と解決策 ● PDF出力している処理を目視で確認 ● 公式ドキュメントを読む (@docs) ● PDF出力にMarpを用いた 解決策 ● Composerで修正できず ● 原因 ○ スライド表示はMarp ○ PDF出力はHTML, CSS PDF出力時の崩れ ● Composerがファイルの変更や削除を 提案してくる ● 変更前の状態や削除ファイルの復元 にとても苦労した ファイル管理 ● Gitを使って管理する ● Composer機能の中にあるrestoreを 使っても変更前に戻せるが、 削除されたファイルは戻らない 解決策

最後に 根気強く試す 使用ツールや順番はカスタマイズ可 最終チェックは人間 AIと2人で作っていく