3年がたちやっと完成

おはこんばんちは

やっと完成しました。かかる期間が長すぎましたが、その間に得ることも多かったのでここにまとめようかと思いました。

まずはどのような軌跡を辿ったのか、お話ししようと思います。

  1. Studioはよさそうだけど高いし、サーバーとドメインを自分で管理して、サイトはHTMLとCSSで作成しよう
  2. サイトは完成したけど、管理とか運用が大変そう
  3. CMS(Wordpress)とかは管理が楽そうだけど、重そうだし問題を抱えてそうだし使いたくないなあ
  4. コードをテンプレート管理できるソフトを知るも、いまさらDreamweaver使いたくないし、Pinegrowは機能不足(ファイルパスを一括変更ができなかった)
    それに加え、アーカイブページやトップページを記事を追加するたびに変更しないといけないことが変わっていないことに気づき、この方法には無理があるなと思った
  5. PHPを使って、ヘッダーやフッターなどの共通部分をテンプレート化し、ページの表示を行えるものをとりあえず作成できたが、AIがいまいち頼りなく(当時のモデルはo3)、その時にはGithub Copilotのすごさを知らなかったため、ChatGPTをブラウザで開いてコピペで作業を行うのが大変すぎて断念
  6. Claude Opus 4.6を使って2日で完成

AIなしじゃ実現しなかった

VS CodeとGitHub Copilotの画面

画像のようにGitHub Copilotを使用することで、VS Code自体でAIを使用することができ、コードの変更や作成だけでなく、ファイルの削除や作成まで行ってくれます。

Figmaで作成したデザイン

Figmaでデザインを大まかに決めて、AIに画像を渡して動くものを作成してもらい、デザインの粗削りな部分は細かい指示を直接AIにすることで仕上げていきました。

正直AIが作業を行ってくれなければ、私は永遠に完成させることができなかったと思います。

クオリティは二の次で動くものを作ろう

3年間作成を行い、重要だと実感したことがありました。

動くものをとりあえず作成

Facebook創始者であるザッカーバーグの名言として有名な言葉ですが、"Done is better than perfect(完璧よりも実行することが重要である)"というものがあります。

ユーザのもとに渡った後も、改善を行うことは可能です。

冗長な部分をなくし、保守と、コンテンツの管理や更新が容易に行えるようにする

冗長とは、同じ処理や情報が複数箇所に存在することを指します。

例えば、ページのHTMLごとにフッターやヘッダーのコードを入れていた場合どうなるでしょうか?
変更が必要になった場合、すべてのHTMLを修正する必要があります。これでは保守が非常に大変です。

そのため、共通部分はテンプレート化し、一箇所を修正するだけで全体に反映されるようにすることが重要です。

技術的負債は最小限に抑える

技術的負債とは、将来的に問題となる可能性のあるコードや設計のことを指します。言葉通り借金のようなものです。

時間がたつにつれ最良の状態との差が開いていき、放置していると取り返しのつかないことになります。
作成時には最新の技術やベストプラクティスを取り入れるのはもちろん、定期的にメンテナンスを行い、そもそも技術的負債ができないよう保つのが理想です。

みずほ銀行のシステム障害の原因も技術的負債が原因と言われていますよね。

Claudeを使う

将来はわかりませんが、現時点(2026年2月)ではコーディングに関してはClaudeのほうが明らかに優秀です。

ChatGPTはエラーが出ないコードを出してくれること自体が少なく、エラーコードを教えて修正を頼んでも、エラーとは関係ない部分を変更し他のエラーが出るということがかなりの頻度でありストレスを感じていました。

一方でClaudeに反しては、エラーが出ないものを一発で出してくれるので、非常に楽です。

積極的に更新していきます!

ここまで読んでいただき、ありがとうございました。

なかなか完成できず発信が今まで行えてなかったために、今後の更新がとても楽しみです。

使用したソフト等

  • Figma
  • VS Code + GitHub Copilot
  • Affinity(AdobeのAiやPsのようなことができる超有能ソフト)
  • RLogin(SFTPでサーバーへデータを転送)