昔作ったWebアプリをClaude Codeで丸ごとリプレース

174 Views

July 10, 25

#Claude Code #Webアプリ #リプレース #SvelteKit #AI開発

スライド概要

profile-image
スライド一覧

Docswellを使いましょう

（ダウンロード不可）

関連スライド

slide-thumbnail

猫でも分かるUnreal Engineの学び方 - 超初心者向け編 - 2023 v1.0
ue4 ue5 ue-beginner
user-img エピック ゲームズ ジャパン 1.6M
slide-thumbnail

Unreal Engine5 Lumenの仕組みと肝心なところ
ue5 ue-rendering ue-lumen
user-img エピック ゲームズ ジャパン 1.3M
slide-thumbnail

Meta XR SDK(V66-74)でQuestアプリを開発
spatial anchor unity quest pro shaperecognizeractivatestate oculus integration transformfeaturestateprovider building blocks transformrecognizeractivestate ovrsemanticclassification jointdeltaprovider ovrscenemanager jointvelocityactivestate オクルージョン sequenceactivestate scene manager ambisonic depth api metaxraudiosource playerlocomotor meta xr sdk quest3 ovrplayercontroller マルチモーダル meta haptics studio direct touch ui meta xr haptics sdk ovrspatialanchor ovrtrackedkeyboard hapticclipplayer fingerfeaturestateprovider hapticclip ワイドモーションモード wmm mruk mr utility kit voice sdk jointrotationactivestate meta horizon os ui set asw application spacewarp ovr metrics tool unityscene manager colocation discovery コロケーション mx ink passthrough camera api hand tracking microgestures webcamtexturemanager passthroughcamerautils cameraviewermanager hand pose selector recorder
user-img あうぜん 1.1M
slide-thumbnail

UE5レンダリングフロー総おさらい(2024) 基礎編！[CEDEC+KYUSHU 2024]
ue5 unreal engine ue-rendering
user-img エピック ゲームズ ジャパン 1.1M
slide-thumbnail

最新の6.0で学ぶ！初めてのひとのためのSpring Security
java spring security
user-img tada 1M
slide-thumbnail

猫でも分かる UE5.0, 5.1 におけるアニメーションの新機能について【CEDEC+KYUSHU 2022】
ue5 cedec+kyushu ue-animation ue-optimize ue-bp ue-physics ue-sequencer
user-img エピック ゲームズ ジャパン 1M
各ページのテキスト
1.

昔作ったWebアプリをClaude Codeで丸ごとリプレース 昔作った Web アプリを Claude Code で丸ごとリプレース DE-TEIU(@de_teiu_tkg) SAPPORO ENGINEER BASE #07 2025/07/11 1

2.

昔作ったWebアプリをClaude Codeで丸ごとリプレース 自己紹介 名前 ： DE-TEIU（@de_teiu_tkg） 職業 ： 株式会社 LIC エンジニア(雑用) 趣味 ： クソアプリ開発、麻雀 サイト： Uselesscode 近況 ： 技術書典 18 オンラインマーケットにて、 初めて同人誌を出しました。無料配布中で す。 SAPPORO ENGINEER BASE #07 2025/07/11 2

3.

昔作ったWebアプリをClaude Codeで丸ごとリプレース 前提情報 - Claude Code とは Anthropic 社が提供するエージェント型 AI コーディングツール 何かしらのタスクを与えると、AI 側でタスクを細分化し、その通 りにファイルの生成やコマンドの実行をやってくれる コーディング 設計 テスト SAPPORO ENGINEER BASE #07 2025/07/11 3

4.

昔作ったWebアプリをClaude Codeで丸ごとリプレース 背景 そういえば、昔作ったアプリの中には、何かしらの事情で動かなくな ったものもいくつかあるな ↓ しかし、わざわざ作り直すのも面倒だなと思って ↓ これ、ClaudeCode に過去のソースコードを丸ごと与えて作り直し てもらえば良いのでは？ 完全放置 SAPPORO ENGINEER BASE #07 2025/07/11 4

5.

昔作ったWebアプリをClaude Codeで丸ごとリプレース 結論：できた SAPPORO ENGINEER BASE #07 2025/07/11 5

6.

昔作ったWebアプリをClaude Codeで丸ごとリプレース 成果物 遅延証明書ジェネレーター 架空の遅延証明書を好き勝手に でっち上げられるぞ！ SAPPORO ENGINEER BASE #07 2025/07/11 6

7.

昔作ったWebアプリをClaude Codeで丸ごとリプレース 技術スタック（旧システム） Nuxt.js → Vue.js ベースの JS フレームワーク Vuetify → Vue.js の UI コンポーネントライブラリ Firebase → Google が提供してる PaaS SAPPORO ENGINEER BASE #07 2025/07/11 7

8.

昔作ったWebアプリをClaude Codeで丸ごとリプレース 技術スタック（新システム） SvelteKit → Svelte ベースの JS フレームワーク Tailwind → ユーティリティファーストの CSS フレームワーク Vercel → Web サイト、Web アプリケーションのインフラ提供に特化した PaaS SAPPORO ENGINEER BASE #07 2025/07/11 8

9.

昔作ったWebアプリをClaude Codeで丸ごとリプレース どうやって作った? SAPPORO ENGINEER BASE #07 2025/07/11 9

10.

昔作ったWebアプリをClaude Codeで丸ごとリプレース 手順 1. 新システムの開発環境を用意（重要） Vite で SvelteKit のプロジェクトを作成 Tailwind を入れる 他、アプリの実装に必要なライブラリとか入れる → こうすると、Claude による新システムの実装がブレにくい。勝 手に知らんライブラリを放り込んだりしてこない。 旧システムのソースコードを用意 3. Claude Code に投げるプロンプトを用意 2. SAPPORO ENGINEER BASE #07 2025/07/11 10

11.

昔作ったWebアプリをClaude Codeで丸ごとリプレース プロンプト SAPPORO ENGINEER BASE #07 2025/07/11 11

12.

昔作ったWebアプリをClaude Codeで丸ごとリプレース そしてどうなった 一発でそこそこ出来上がった。 あとは画面レイアウトを微調整して、現行踏襲は完了。 しかし、どうせならちょっと機能を追加したい。 SAPPORO ENGINEER BASE #07 2025/07/11 12

13.

昔作ったWebアプリをClaude Codeで丸ごとリプレース 追加した機能 - OGP 動的生成 ※OGP とは…URL を SNS やチャットなどで共有した時に表示され る、Web ページの説明文やサムネイル画像 SAPPORO ENGINEER BASE #07 2025/07/11 13

14.

昔作ったWebアプリをClaude Codeで丸ごとリプレース 追加した機能 - OGP 動的生成 +server.ts SvelteKit では、 を用意することで、サーバサイドのロ ジックを実装できる。 → しかし、当然このロジック内では DOM の生成・操作ができない。 → フロントエンドでやっている、canvas を使った遅延証明書の画像 生成ができない @napi-rs/canvas → という、サーバサイド JS で canvas 生成を 力ずくで実現するライブラリがある。これ使って解決。 SAPPORO ENGINEER BASE #07 2025/07/11 14

15.

昔作ったWebアプリをClaude Codeで丸ごとリプレース まとめ 遅延証明書は自作する時代だ！ Claude Code は 0 から新規アプリの開発だけでなく、リプレース にも使える 移行先の開発環境をあらかじめ作っておくと、Claude Code の暴 走を抑制できる SvelteKit ではサーバサイドに OGP の生成を任せることで、それ を動的に生成できる SAPPORO ENGINEER BASE #07 2025/07/11 15