はじめに
前回の記事では、牌の表示をUnicode絵文字から本物らしいSVG画像に置き換えました。
全34種類の牌が正しく表示されるようになり、しかもその見た目がよくて大満足でした。
こちらはローカル（自分のPC）では快適に動いています。3モード・タイマー・戦歴・BGM・画像牌、かなり本格的なアプリになりました。
しかしここまで、ずっと「自分のPCのブラウザでしか見られない」状態です。
今回は、このアプリをデプロイしていきます。
早速ClaudeCodeに聞いてみます。
投げたプロンプト：
このアプリをデプロイするには？
以下の通り返ってきました。
● 静的ファイル（HTML + 画像）だけなので、どのホスティングサービスでも無料でデプロイできます。
最も簡単：Netlify Drop（アカウント不要）
1. mahjong-app フォルダをそのまま https://app.netlify.com/drop にドラッグ＆ドロップ
2. 即座に https://xxxxxxxx.netlify.app のURLが発行される
注意：アカウントなしだと24時間で消えるので、継続するには無料アカウント登録が必要。
---
GitHub Pages（永続・無料）
# mahjong-appフォルダ内で
git init
git add .
git commit -m "initial commit"
その後 GitHub でリポジトリを作り、push して Settings → Pages → Branch: main で有効化。
URL：https://<ユーザー名>.github.io/<リポジトリ名>/
---
フォルダ構成の確認
デプロイ前に images/ が index.html と同じ階層にあるか確認してください：
mahjong-app/ ← これごとデプロイ
├── index.html
└── images/
├── Man1.svg
├── Pin1.svg
...
---
おすすめ：手軽さなら Netlify Drop、Git を使う予定があるなら GitHub Pages が将来的に管理しやすいです。
✻ Churned for 15s
ただコードを書くだけでなく、チャット機能としてしっかり対話をし道筋を立てることもしてくれるので、「何から始めればいいかわからない」という状態でも、とりあえず聞いてみれば次のアクションが見えてきます。今回で言えば「Netlify Dropで試して、続けるならアカウント登録」という順番が一発で分かりました。
前にバイブコーディングの記事を挙げたとき、Netlifyという無料のホスティングサービスが出てきていたので、今回はこれを使うことにします！
【知識の補完】
●ホスティングサービス
→ 作ったWebサイトやアプリをインターネット上に公開するためのサービス。「サーバーを借りる」というイメージ。
●Netlify（ネットリファイ）
→ 静的サイト（サーバー側の処理が不要なHTML・CSS・JSだけのサイト）を無料で公開できるサービス。
GitHubと連携してワンクリックでデプロイできるのが特徴。今回のアプリはまさにこのタイプ。
●デプロイ
→ 作ったアプリをサーバーに置いて、誰でもアクセスできる状態にすること。「公開する」とほぼ同じ意味。
Netlifyへのデプロイを試みる
まずClaude Codeに準備を手伝ってもらいます。
投げたプロンプト：
このアプリをNetlifyで公開したい。何を準備すればいい？
返ってきたのは以下の通り。
準備するものは3つだけです。
---
1. ファイル構成を確認
mahjong-app/
├── index.html
└── images/
├── Man1.svg 〜 Man9.svg
├── Pin1.svg 〜 Pin9.svg
├── Sou1.svg 〜 Sou9.svg
├── Ton.svg, Nan.svg, Shaa.svg, Pei.svg
└── Haku.svg, Hatsu.svg, Chun.svg
images/ に抜けているファイルがあると、そのタイルだけ表示されないので要確認。
---
2. Netlify アカウントを作る
- netlify.com にアクセス → Sign up（GitHub / Google / メールで無料登録）
---
3. デプロイ（ドラッグ＆ドロップ）
1. ログイン後、トップページに 「Deploy manually」 エリアが表示される
2. mahjong-app フォルダごとドラッグ＆ドロップ
3. 数秒で https://ランダム名.netlify.app のURLが発行される
---
あると便利（任意）
┌────────────────┬──────────────────────────────────────────────────────────────────────┐
│ やること │ 理由 │
├────────────────┼──────────────────────────────────────────────────────────────────────┤
│ サイト名を変更 │ Site settings → Site name で mahjong-quiz.netlify.app 等に変えられる │
├────────────────┼──────────────────────────────────────────────────────────────────────┤
│ 独自ドメイン │ 持っていれば設定可能（なくてもOK） │
└────────────────┴──────────────────────────────────────────────────────────────────────┘
---
以上だけです。ビルド設定や package.json は不要で、フォルダをそのまま投げるだけで動きます。
✻ Worked for 13s
手順がだいぶシンプルです。ビルド設定もpackage.jsonも不要、フォルダをそのまま投げるだけとのこと。以前AIニュース取得アプリを作成したときは、こんな簡単にいかなかったわけですが、その違いも最後にまとめたいと思います。
【知識の補完】
●package.json
→ Node.jsというJavaScript環境で使われる設定ファイル。依存するライブラリの一覧などが書かれている。
今回のアプリは外部ライブラリを一切使っていないので不要。
今更ですが、実は……『netlify』は過去利用したことがあったようです。
開いたら過去履歴がありまして。
そこを見てみると、2つのデプロイ履歴がありました。すっかり忘れていました。
色々なツールが溢れすぎていて、使ったことがあるかないか忘れていることも多い今日このごろです。ツール一覧とかもどこかで作りたいですね。
ひとまず作成した『mahjong-app』 フォルダをアップロードしましてURLをGET！
『https://cheerful-liger-0e5064.netlify.app/』
アクセスすると……繋がりました！
こんなに簡単に外部から見られるようになりました。
スマホからもいけましたので、完璧です！
デプロイが簡単だった理由
今回デプロイがこんなにスムーズだったのには理由があります。
今回のアプリは「静的サイト」だからです。
サーバー側での処理（データベースへのアクセス、ユーザー認証など）が一切なく、HTML・CSS・JavaScript・画像ファイルだけで完結しています。Netlifyはこういったシンプルな構成が最も得意なサービスなので、設定ゼロでデプロイできました。
もしバックエンド（サーバー側の処理）が必要なアプリだったら、もっと複雑な手順が必要になります。
これより前に、PythonとFlaskで「毎朝6時に自動でAIニュースを取得・要約するWebサイト」を作ってRenderというサービスにデプロイしたことがありました。あのときは結構苦労しました。
今回と何が違ったのか、比べてみます。
| 麻雀クイズアプリ（今回） | AIニュースアプリ（以前） | |
|---|---|---|
| 言語 | HTML・CSS・JavaScript | Python（Flask） |
| デプロイ先 | Netlify | Render |
| 手順 | フォルダをドラッグ＆ドロップ | GitHubと連携・環境変数設定・ビルド設定 |
| 詰まったこと | ほぼなし | JSONファイルをGitに含めるか問題、Cron Jobの設定など |
一番大きな違いは、先ほど申した通り「サーバー側の処理があるかどうか」です。
AIニュースアプリはPythonでRSSを取得してGemini APIで要約するという、サーバー側での処理が必要なアプリでした。そのため「RenderはGitHubからしかファイルを取得できない→JSONファイルもGitHubに上げなければいけない」という想定外の問題が発生したり、自動実行の設定に苦労したりしました。
一方、今回の麻雀アプリはHTML・CSS・JavaScriptだけで完結していて、サーバー側の処理が一切ありません。だからNetlifyへのドラッグ＆ドロップだけで終わったのです。
第1回でClaude Codeに「1ファイルのindex.htmlで作って」と指示したことが、ここで活きてきました。
本来は、HTMLはHTML、CSSはCSS、JSはJSとわけるのでしょうけど、1人で作る今回のようなお勉強では分けなくてもいいですよね。
いわゆる「バイブコーディングと実務開発の違い」ってやつですかね！本来分けるべきCSS・JSを1ファイルにまとめたまま最後まで動かしたのはバイブコーディングだから許容できた判断で、チーム開発や長期保守が必要なプロダクトではやるべきではないですね。開発の現場にいたことがない私でもその辺はわかります。
初めてClaudeでアプリを作るよ、という方、是非最初はあまり複雑すぎない程度で、上記のような内容にて簡単なものから挑戦してみてほしいです。
Claude Code観察メモ⑤
| 観察 | 内容 |
|---|---|
| デプロイ方法の提案 | ◎ 選択肢を整理してシンプルに教えてくれた |
| 準備手順の説明 | ◎ 「ビルド設定不要」など余計なものを省いた案内 |
| 実際のデプロイ作業 | ー AIは関係なし。人間がブラウザで操作するだけ |
今回はClaude Codeの出番が少なかった回です。「何を準備すればいいか」を聞いて、あとは自分でポチポチするだけで完成しました。
むしろ今回、Claude Codeの出番はゼロにすることもできましたね。
「Netlifyへのデプロイ手順を教えて」という質問は、ターミナル版のClaude Codeに聞かなくても、普通にブラウザのClaudeに聞けます。ファイルを操作するわけでもないので、Claude Codeを起動してトークンを消費する必要はなかった、ということです。
Claude Codeを使うべき場面・使わなくていい場面、というのも意識しておくといいかもですね。
| Claude Codeが向いている | Claude.aiで十分 |
|---|---|
| ファイルの作成・編集・操作 | 調べもの・手順の確認 |
| コードのバグ修正 | 概念の説明 |
| 機能の追加・リファクタリング | ツールの使い方を聞く |
次回予告
全6回の連載、いよいよ最終回です。
第6回では、この連載全体を振り返りながら総括します。