Claude Codeで課題解決！従来のWebサイト開発環境をまるっと刷新してみた
2025.06.25はじめに
アノテーションのWebサイトを管理している Shimizu です。
巷で話題の Claude Code にとりあえず触れてみようと思い、手始めにWebサイト開発環境のWebフレームワーク刷新を指示してみたのですが、利用開始からわずか1時間ほどで実現でき、その凄さに驚きました。ここでは実施した内容を備忘として記事にしました。
※ 本記事では Claude Code の導入方法については触れていません。これからインストールされる方は下記の記事*1を参考にしてください。
*1 Claude Codeを徹底解説してみた（前編） | DevelopersIO
抱えていた課題
管理しているWebサイトの中で、比較的古いWeb開発フレームワーク（Middleman.js、jQuery等）で作成されたものがあります。
Dockerコンテナに環境を構築していますが、Webフレームワークの互換性維持のため、OSやミドルウェアの更新もできない状況です。（筆者の過去記事*2でも少し触れています）
これだと将来的なサイトのメンテナンスに問題が生じるため、現状のWebサイト機能は維持したまま、開発環境を新たなフレームワーク（Next.js、Tailwind.css 等）に入れ替えたいと常々考えていました。
しかしながら従来の CSS や jQuery で実装されたページを新たなフレームワークで書き直すのはかなりの労力となり、移行に数週間はかかりそうなため、ずっと手付かずになっていました。
今回やったこと
結論から書きますと、Claude Code にプロンプトでいくつか指示を与えただけで、下記の移行作業がほぼ1時間足らずで完了しました。
【旧環境】
- OS、ミドルウェア：Amazon Linux 2 / node v6.17.1
- JSフレームワーク：Middleman.js / jQuery
- UIフレームワーク：Bulma css
【新環境】
- OS、ミドルウェア：Alpine Linux v3.22 / node v23.11.1
- JSフレームワーク：Next.js / TypeScript
- UIフレームワーク：Tailwind.css
以下に Claude Code に与えたプロンプトと、その際の動作をご紹介します。
入力したプロンプトと動作
まずは旧コンテナからファイルをコピーしつつ、フレームワークを変換して新コンテナに移行するため、以下のプロンプトを与えました。
（何度かやり直した結果、以下のようにファイルパスや拡張子を具体的に指定するとうまくいきました）
プロンプト
Docker コンテナ "ancorp-old" の /web ディレクトリ配下にあるWebアプリケーションを、node.js 23 で新しいコンテナを作成して Next.js + tailwind.css で構築しなおしたいです。新しいコンテナ名は "ancorp-2025" で、ポートは 4000 にしてください。ディレクトリ内にある .html.slim という拡張子のファイルは .jsx ファイルに置き換えてください。
すると以下のようなタスクを自動的に作成し、処理が始まりました。
ファイルコピーから新規 Docker コンテナの作成、新たなフレームワークへの移行まで順番にやってくれるようです。
処理中は「このファイルを作成してよいですか？」「このコマンドを実行してよいですか？」といった確認メッセージが毎回出るので、問題なければ「Yes」を選んで進めるだけです。
もし中断したければ「No」を選択して、プロンプト入力からやり直すこともできます。
数分ほど待つと、以下のメッセージが出て処理が完了しました。
ブラウザで確認すると、新フレームワーク（Next.js + Tailwind.css）で作り直されたトップページが表示されました！
プロンプトひとつで新コンテナの作成、新フレームワークに合わせたコードの変換までが見事に完了しました。
次は旧環境にあったお問い合わせフォームページを、以下のようなプロンプトで新環境に移行してみます。
先ほどの静的なトップページとは違い、今回は jQuery や外部 API を使用した動作部分が含まれるので、きちんと再現できるのか気になるところです。
プロンプト
古いコンテナ /ancorp-old 内の /web/source/contact.html.slim ファイルと /web/source/assets/javascripts/main.js を解析して、新しいコンテナ ancorp-2025 の app
フォルダ内にお問い合わせフォームページを作成してください。
すると今回もタスクが作成され、処理が開始されました。
例によってファイル作成やコマンド実行のたびに確認ダイアログが出るので、完了するまで「Yes」を選んで進めていくだけです。
処理が完了したのでブラウザで確認してみると、見事にお問い合わせフォームページが新環境に移植されています。
旧環境では jQuery で実装していた入力バリデーションや送信処理も Next.js + TypeScript で書き直され、きちんと動作しました！
さらに、旧環境になかった要素の追加もやってみました。
トップページにコンテンツスライダーを追加したいので、以下のように指示を与えます。
プロンプト
TOPページにコンテンツスライダーを実装してください。画像は /app/public/images ディレクトリ内のheader01.jpg、header02.jpg、header03.jpg を使用してください
すると例によってタスクが順番に実行されますが、今回は表示確認の段階でエラーが発生したようです。ですが処理が中断することはなく、修正まで自動的にやってくれています。
タスクが完了したのでブラウザで確認してみると、見事にコンテンツスライダーが実装されていました！
レスポンシブにも対応しており、サイトに合ったキャッチコピーまで入れてくれています。
今回試したのは以上となります。
さいごに
いかがでしたでしょうか。
移行したサイトを公開するにはまだ微調整が必要ですが、ずっと課題になっていた「Web開発フレームワーク群を刷新してサイトを作り直す」という作業は、Claude Code を使い始めてものの 1 時間程度で、ほぼ実現できてしまいました。
今回はとりあえず Claude Code に触れてみたいと思い CLAUDE.md の設定等もせずに始めましたが、今後もっと使い方を工夫し、色々なタスクを自動化して記事にできればと思います。
この記事がお役に立てば幸いです！
参考資料
- *1 Claude Codeを徹底解説してみた（前編） | DevelopersIO
- *2 VSCode をバージョンアップしたら古い Docker コンテナに接続できなくなった時の対処法 | DevelopersIO
アノテーション株式会社について
アノテーション株式会社はクラスメソッドグループのオペレーション専門特化企業です。サポート・運用・開発保守・情シス・バックオフィスの専門チームが、最新 IT テクノロジー、高い技術力、蓄積されたノウハウをフル活用し、お客様の課題解決を行っています。当社は様々な職種でメンバーを募集しています。「オペレーション・エクセレンス」と「らしく働く、らしく生きる」を共に実現するカルチャー・しくみ・働き方にご興味がある方は、アノテーション株式会社 採用サイトをぜひご覧ください。
