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

「AI時代の開発革命：新入社員が3日で実現したWebサービス開発の軌跡」
フロントエンド未経験の新入社員が、最新のAIツールを駆使してたった3日でWebサービスを開発した事例をご紹介します。

本事例では、Marpとマークダウンを活用したスライド生成Webアプリの開発過程を詳しく解説。ChatGPT、Claude、Cursorなど複数のAIツールを組み合わせることで、従来では考えられなかったスピードで開発を実現しました。

特に注目すべきは、AIツールの特性を活かした開発フローです。ClaudeのArtifacts機能でプロトタイプを作成し、CursorのComposer機能で効率的にデバッグを行うなど、AIの長所を最大限に引き出しています。

また、PDF出力時の表示崩れやファイル管理といった実際の開発現場で直面する課題に対して、従来の開発知識（Git等）とAIツールを組み合わせて解決した過程も詳細に解説しています。

このスライドを通じて、AI時代における効率的な開発手法と、それを実現するためのプラクティカルなノウハウをお伝えします。新しい時代の開発スタイルに興味をお持ちの方は、ぜひご覧ください。
#AI開発 #効率化 #新人教育 #WebDevelopment #ChatGPT #Claude #Cursor

Transcript

1. 新入社員が Webサービスを 3日で作った話
2. • 作成したWebサービスの紹介 • 新入社員、田中が持っていた技術 • 使用したAIサービス • 作成手順 ◦ アプリの要件定義 ◦ v0でデザインを作成 ◦ ClaudeのArtifactsでプロトタイプ作成 ◦ CursorのComposerで微修正 • 苦労した点と解決策 • 最後に 目次
3. 作成したWebサービスの紹介
4. 田中が持っていた技術 Pythonなどのデータサイエンス技術 Reactなどのフロントエンド技術 フロントエンドについてほぼ何も知らない状態
5. 使用したAIサービス Claude v0 Cursor
6. 作成手順 ②v0でデザインを作成 ①アプリの要件定義 ③ClaudeのAritifactsでプロトタイプ作成 ④CursorのComposerでエラー修正 「タイトル」 概要： ～～～～～～～ ～～～～～～～ 〇〇〇〇 ・~~~ ・~~~ スライドメーカー
7. • Marp(MarkDown)とChatGPTを使用して文章からスライドを生成する Webアプリを作成したい アプリの要件定義 • 「編集」と「プレビュー」でタブを切り替えられるようにする。 • 編集タブに入力欄があり、そこに文章を入力し、「スライドを生成」ボタンを押したらスライドが生成される • スライドを生成ボタンを押したときの裏側の処理は入力した文章を ChatGPTのAPIを使って送信し、文章から Marp形式の コードに変換する。その変換された Marp形式のコードをプレビュータブでスライドとして表示をする • 「スライドを生成」ボタンを押して、スライドが生成されたら自動で「プレビュー」タブに切り替わるようにする • プレビュー」タブにさらに「スライド」タブと「 Marpコード」タブを追加し、「スライド」タブではスライドを表示し、「 Marpコード」タブ では、いつでもChatGPTが生成したMarpコードを編集して、「適用」ボタンで Marpコードを修正して適用できるようにする 要件
8. プロンプト： Marp(MarkDown)とChatGPTを使用し て文章からスライドを生成する Webアプリを作成したいです。 下記に従うデザインをreactを使ってコー ドを生成してください。 • 入力欄があり、文章を入力できる。 • 入力欄の下側に「スライドを生成」 ボタンがある。 • 入力欄の上側に「編集」タブと「プレ ビュー」タブがあり、切り替えられ る。 • 「プレビュー」タブではスライドを可 視化できるようにする。 v0でデザインを作成 文章から デザイン作成
9. ClaudeのArtifactsでプロトタイプ作成 プロンプト： … （v0で出力されたコード） … 上記のコードを用いて、Marp(MarkDown) とChatGPTを使用して文章からスライドを 生成する Webアプリを作成したいです。 要件は以下の通りです。 • 「スライドを生成」ボタンを押したら入 力欄の文章をChatGPTを使って Marp形式にしてください。 • そのMarp形式のものをスライドとして 可視化してください。 プロトタイプ作 成
10. • Claudeに作ってもらったアプリをローカルで動かして確認 • Composer機能を使ってアプリの起動の仕方も教えてくれる CursorのComposerで微修正 　修正作業のフローチャート 　 修正箇所や エラーを発見 関連するファイルを 探して修正する アプリを起動して人 間の目で確認 繰り返す 後は、デプロイをしてアプリ完成！
11. 苦労した点と解決策 • PDF出力している処理を目視で確認 • 公式ドキュメントを読む (@docs) • PDF出力にMarpを用いた 解決策 • Composerで修正できず • 原因 ◦ スライド表示はMarp ◦ PDF出力はHTML, CSS PDF出力時の崩れ • Composerがファイルの変更や削除を 提案してくる • 変更前の状態や削除ファイルの復元 にとても苦労した ファイル管理 • Gitを使って管理する • Composer機能の中にあるrestoreを 使っても変更前に戻せるが、 削除されたファイルは戻らない 解決策
12. 最後に 根気強く試す 使用ツールや順番はカスタマイズ可 最終チェックは人間 AIと2人で作っていく