<h1 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h1>
<p data-line="2" class="code-line">約 1150 円を払うことで、blog アプリの原型をフルスクラッチで作成でき、vercel へデプロイまでできました。</p>
<p data-line="4" class="code-line">概略を備忘録として残しておきます。</p>
<ul data-line="6" class="code-line">
<li data-line="6" class="code-line">FW : nextjs</li>
<li data-line="7" class="code-line">css : tailwind</li>
<li data-line="8" class="code-line">エディタ : vscode</li>
<li data-line="9" class="code-line">拡張機能 : Cline</li>
<li data-line="10" class="code-line">使用した AI モデル : claude-3.7-sonnet</li>
<li data-line="11" class="code-line">所要時間 : 1 時間程度</li>
<li data-line="12" class="code-line">かかった料金 : 7.69 ドル（約 1,152 円）　（149.79 円/ドル）</li>
</ul>
<h1 id="%E6%88%90%E6%9E%9C%E7%89%A9" data-line="14" class="code-line">
<a class="header-anchor-link" href="#%E6%88%90%E6%9E%9C%E7%89%A9" aria-hidden="true"></a> 成果物</h1>
<p data-line="16" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__e9044ab56bdfa" src="https://embed.zenn.studio/card#zenn-embedded__e9044ab56bdfa" data-content="https%3A%2F%2Fnextjs-blog-app-roan.vercel.app%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://nextjs-blog-app-roan.vercel.app/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://nextjs-blog-app-roan.vercel.app/</a></p>
<p data-line="18" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__5d49fb53aff03" src="https://embed.zenn.studio/card#zenn-embedded__5d49fb53aff03" data-content="https%3A%2F%2Fgithub.com%2Fnekoallergy22%2Fnextjs-blog-app" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/nekoallergy22/nextjs-blog-app" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/nekoallergy22/nextjs-blog-app</a></p>
<h1 id="%E8%A9%B3%E7%B4%B0" data-line="20" class="code-line">
<a class="header-anchor-link" href="#%E8%A9%B3%E7%B4%B0" aria-hidden="true"></a> 詳細</h1>
<h2 id="clinerules" data-line="22" class="code-line">
<a class="header-anchor-link" href="#clinerules" aria-hidden="true"></a> clinerules</h2>
<p data-line="24" class="code-line">下記の clinerules を設定しました。</p>
<details><summary>作成した clinerules</summary><div class="details-content">
<p data-line="28" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__e233f6acfc3af" src="https://embed.zenn.studio/github#zenn-embedded__e233f6acfc3af" data-content="https%3A%2F%2Fgithub.com%2Fnekoallergy22%2Fnextjs-blog-app%2Fblob%2Fmain%2F.clinerules" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/nekoallergy22/nextjs-blog-app/blob/main/.clinerules" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/nekoallergy22/nextjs-blog-app/blob/main/.clinerules</a></p>
</div></details>
<p data-line="32" class="code-line">本ルールを作成するにあたって、下記の clinerules を参考にしました。<br>
これは python 用のルールだったので、Web 開発用に書き直して使用しました。</p>
<details><summary>参考にした clinerules</summary><div class="details-content">
<p data-line="36" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__076457703c0a1" src="https://embed.zenn.studio/github#zenn-embedded__076457703c0a1" data-content="https%3A%2F%2Fgithub.com%2Fkaraage0703%2Fpython-boilerplate%2Fblob%2Fmain%2F.clinerules" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/karaage0703/python-boilerplate/blob/main/.clinerules" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/karaage0703/python-boilerplate/blob/main/.clinerules</a></p>
</div></details>
<h2 id="%E6%89%80%E6%84%9F" data-line="39" class="code-line">
<a class="header-anchor-link" href="#%E6%89%80%E6%84%9F" aria-hidden="true"></a> 所感</h2>
<h3 id="%E6%9C%80%E9%AB%98%E3%81%AA%E7%82%B9" data-line="41" class="code-line">
<a class="header-anchor-link" href="#%E6%9C%80%E9%AB%98%E3%81%AA%E7%82%B9" aria-hidden="true"></a> 最高な点</h3>
<p data-line="43" class="code-line">良かった点をまとめます。</p>
<ul data-line="45" class="code-line">
<li data-line="45" class="code-line">自動生成
<ul data-line="46" class="code-line">
<li data-line="46" class="code-line">ほとんどの処理を自動で実行できた</li>
<li data-line="47" class="code-line">人間はコマンド実行時に承認ボタンを押すのみ</li>
<li data-line="48" class="code-line">git 操作、github 操作、vercel へのデプロイもコマンドのみで完結</li>
</ul>
</li>
<li data-line="49" class="code-line">ドキュメントも自動生成
<ul data-line="50" class="code-line">
<li data-line="50" class="code-line">clinerules で設定した通り、プロジェクトの最初は<a href="https://github.com/nekoallergy22/nextjs-blog-app/blob/main/docs/design.md" target="_blank" rel="nofollow noopener noreferrer">docs/design.md</a>を作成する</li>
<li data-line="51" class="code-line">作成した要件に沿ってモデルは作業を進める。</li>
</ul>
</li>
<li data-line="52" class="code-line">gh コマンドを使うことで github の処理を任せられた
<ul data-line="53" class="code-line">
<li data-line="53" class="code-line">リモートリポ作成</li>
<li data-line="54" class="code-line">プルリクエスト作成</li>
<li data-line="55" class="code-line">マージの実行</li>
<li data-line="56" class="code-line">ブランチ保護の設定</li>
</ul>
</li>
<li data-line="57" class="code-line">テンプレ化することでルールを統一できた
<ul data-line="58" class="code-line">
<li data-line="58" class="code-line"><a href="https://github.com/nekoallergy22/nextjs-blog-app/blob/main/.github/git-conventions.md" target="_blank" rel="nofollow noopener noreferrer">ルール</a></li>
<li data-line="59" class="code-line"><a href="https://github.com/nekoallergy22/nextjs-blog-app/blob/main/.github/COMMIT_TEMPLATE.md" target="_blank" rel="nofollow noopener noreferrer">コミットのテンプレ</a></li>
<li data-line="60" class="code-line"><a href="https://github.com/nekoallergy22/nextjs-blog-app/blob/main/.github/BRANCH_TEMPLATE.md" target="_blank" rel="nofollow noopener noreferrer">ブランチのテンプレ</a></li>
<li data-line="61" class="code-line"><a href="https://github.com/nekoallergy22/nextjs-blog-app/blob/main/.github/pull_request_template.md" target="_blank" rel="nofollow noopener noreferrer">プルリクのテンプレ</a></li>
</ul>
</li>
</ul>
<h3 id="%E3%82%A4%E3%83%9E%E3%82%A4%E3%83%81%E3%81%AA%E7%82%B9" data-line="63" class="code-line">
<a class="header-anchor-link" href="#%E3%82%A4%E3%83%9E%E3%82%A4%E3%83%81%E3%81%AA%E7%82%B9" aria-hidden="true"></a> イマイチな点</h3>
<p data-line="65" class="code-line">独自実装は一切していません。そのため、機能が不十分な点や、ルールに沿っていない部分が見られます。</p>
<ul data-line="67" class="code-line">
<li data-line="67" class="code-line">記事の作成、修正、削除が UI からできない
<ul data-line="68" class="code-line">
<li data-line="68" class="code-line">理由は記事情報の格納が DB ではなく、ディレクトリ上の json への直接書き込みのため。</li>
<li data-line="69" class="code-line">そもそも、管理者用の画面を用意するべき。</li>
</ul>
</li>
<li data-line="70" class="code-line">clinerules で Docker 使えって言ったのに実装してくれなかった
<ul data-line="71" class="code-line">
<li data-line="71" class="code-line">順番的に後の操作だから、前の操作のボリュームが多く、なんやかんや埋もれてしまった。</li>
<li data-line="72" class="code-line">テストコード実装も同様に未実装</li>
</ul>
</li>
<li data-line="73" class="code-line">build エラーが発生した際に、nextjs のバージョンを下げようとしてきた
<ul data-line="74" class="code-line">
<li data-line="74" class="code-line">実際は node のバージョンが足りなかった</li>
<li data-line="75" class="code-line">「nextjs のバージョンを変えずに」と指示することで対応。最初から rule に追加していればよかったかも。</li>
</ul>
</li>
<li data-line="76" class="code-line">不要な UI のこだわり
<ul data-line="77" class="code-line">
<li data-line="77" class="code-line">ボタンの UI なんかを独自でカスタマイズしはじめた。</li>
<li data-line="78" class="code-line">理由は、clinerules の tailwindcss に関する指示で、「複雑なスタイルは～」と記述してしまったせいかも</li>
<li data-line="79" class="code-line"><a href="https://github.com/nekoallergy22/nextjs-blog-app/blob/main/src/components/ui/Button.tsx" target="_blank" rel="nofollow noopener noreferrer">たとえばこれ</a></li>
</ul>
</li>
<li data-line="80" class="code-line">マイグレーションのエラーが発生し、沼ってしまった
<ul data-line="81" class="code-line">
<li data-line="81" class="code-line">5 回くらい Try＆Error を繰り返していた</li>
<li data-line="82" class="code-line">最終的に改善したのでよし</li>
<li data-line="83" class="code-line">今後同じミスをしないように、docs ディレクトリに<a href="https://github.com/nekoallergy22/nextjs-blog-app/blob/main/docs/next-15-migration-notes.md" target="_blank" rel="nofollow noopener noreferrer">notes</a>を置いておいた。</li>
</ul>
</li>
</ul>
<h3 id="%E4%BB%8A%E5%BE%8C%E3%81%AE%E6%94%B9%E5%96%84%E7%82%B9" data-line="85" class="code-line">
<a class="header-anchor-link" href="#%E4%BB%8A%E5%BE%8C%E3%81%AE%E6%94%B9%E5%96%84%E7%82%B9" aria-hidden="true"></a> 今後の改善点</h3>
<ul data-line="87" class="code-line">
<li data-line="87" class="code-line">もっと自動生成
<ul data-line="88" class="code-line">
<li data-line="88" class="code-line">docker 環境の自動構築</li>
<li data-line="89" class="code-line">テストコード自動生成</li>
</ul>
</li>
<li data-line="90" class="code-line">Issue 管理ができていなかったので、タスクは前もって Issue を発行する
<ul data-line="91" class="code-line">
<li data-line="91" class="code-line">Issue 発行 -&gt; ブランチ切る -&gt; 実装 -&gt; push -&gt; PR 出す -&gt; マージ の流れが理想</li>
<li data-line="92" class="code-line">gh コマンドで自動化したい</li>
<li data-line="93" class="code-line">Issue の前にタスク分解して docs においておく</li>
</ul>
</li>
<li data-line="94" class="code-line">Vercel Authentication を無効化する
<ul data-line="95" class="code-line">
<li data-line="95" class="code-line">デフォルトの設定で vercel へデプロイすると、<a href="https://vercel.com/docs/deployment-protection/methods-to-protect-deployments/vercel-authentication" target="_blank" rel="nofollow noopener noreferrer">Vercel Authentication</a>によってサイトが保護されている。</li>
<li data-line="96" class="code-line">Vercel アカウントを持つユーザーのみアクセスを許可する。</li>
<li data-line="97" class="code-line">これによってログインなしの一般ユーザからはサイトへアクセスできない。無効にする設定が必要。</li>
<li data-line="98" class="code-line">無効化設定は CLI ではできない模様。vercel api を使えばできるっぽい？</li>
</ul>
</li>
</ul>
<h3 id="%E3%82%82%E3%81%A3%E3%81%A8%E5%B0%86%E6%9D%A5%E7%B3%BB" data-line="100" class="code-line">
<a class="header-anchor-link" href="#%E3%82%82%E3%81%A3%E3%81%A8%E5%B0%86%E6%9D%A5%E7%B3%BB" aria-hidden="true"></a> もっと将来系</h3>
<ul data-line="102" class="code-line">
<li data-line="102" class="code-line">OSS ライセンス自動付与</li>
<li data-line="103" class="code-line">独自ドメイン付与</li>
<li data-line="104" class="code-line">google analytics</li>
<li data-line="105" class="code-line">google ads</li>
<li data-line="106" class="code-line"><a href="https://vercel.com/templates/next.js/nextjs-fastapi-starter" target="_blank" rel="nofollow noopener noreferrer">FastAPI なども組み合わせれるっぽい</a></li>
</ul>
<h1 id="%E3%81%95%E3%81%84%E3%81%94%E3%81%AB" data-line="108" class="code-line">
<a class="header-anchor-link" href="#%E3%81%95%E3%81%84%E3%81%94%E3%81%AB" aria-hidden="true"></a> さいごに</h1>
<p data-line="110" class="code-line">世界中の誰かの助けになれば幸いです。</p>
<h1 id="%E8%BF%BD%E8%A8%98" data-line="112" class="code-line">
<a class="header-anchor-link" href="#%E8%BF%BD%E8%A8%98" aria-hidden="true"></a> 追記</h1>
<p data-line="114" class="code-line">claude の UI 上で API 使用量を見ると、下記のような感じでした。</p>
<p data-line="116" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--P4X5rXuu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/f18e7b2ce00f5423331c0d14.png%3Fsha%3D6217c2c3c7c74c9d0b74dbd2665f6b18952a1b86" alt="claude-price-ui" class="md-img" loading="lazy"></p>
<details><summary>claude 3.7 sonnet による分析結果</summary><div class="details-content">
<p data-line="120" class="code-line">この画像は Claude の API を使用した際の料金内訳を示しています。以下の内訳が表示されています：</p>
<ul data-line="122" class="code-line">
<li data-line="122" class="code-line">Input: USD 0.00（入力料金）</li>
<li data-line="123" class="code-line">Prompt caching write: USD 1.80（プロンプトキャッシュ書き込み料金）</li>
<li data-line="124" class="code-line">Prompt caching read: USD 4.74（プロンプトキャッシュ読み取り料金）</li>
<li data-line="125" class="code-line">Output: USD 1.37（出力料金）</li>
</ul>
<p data-line="127" class="code-line">この料金内訳から、プロンプトキャッシングが積極的に使用されていることがわかります。特にプロンプトキャッシュの読み取り料金が最も高額（USD 4.74）であり、多くのリクエストでキャッシュされたプロンプトが再利用されていることを示しています。</p>
<p data-line="129" class="code-line">キャッシュ書き込み（USD 1.80）はキャッシュ読み取りよりも低い金額ですが、これは新しいプロンプトパターンの初回処理に対する費用です。通常、キャッシュ書き込みはベース入力料金より高く、キャッシュ読み取りはベース入力料金より安くなるため、頻繁に同じプロンプト構造を使用する場合はコスト効率が向上します。</p>
<p data-line="131" class="code-line">Anthropic の場合、</p>
<ul data-line="133" class="code-line">
<li data-line="133" class="code-line">キャッシュ書き込みトークンはベース入力トークンより 25%高いコストがかかります</li>
<li data-line="134" class="code-line">キャッシュ読み取りトークンはベース入力トークンより 90%安くなります</li>
</ul>
<p data-line="136" class="code-line">入力料金が 0.00 ドルとなっているのは、すべての入力がキャッシュ処理されているためと考えられます。全体として、この使用パターンはプロンプトキャッシングを効果的に活用していることを示しています。</p>
</div></details>


1152円と1時間でブログアプリをデプロイできる

github

Discussion