制作ノート #04 |制作環境と制作方法

基本的な制作は、Visual Studio Codeを使っています。WEBサイトの制作は今までWordPressしか使ってこなかったのですが、今回は地図をメインにしたサイトにしたかったので、WEBサイト用のワークフレームであるASTROというものを選択。このワークフレームを使うためにVS Codeを初めて使っています。

VS Codeを使い始めたのは、一年前の2025年の4月。ChatGPTに聞きながら、何度もASTROを構築した。最初はMacのターミナルだけで動かすというもので、何がなんだかわからいまま、言われる通りに進めるとhttp://localhost:4321/にWEBサイトが表示される。しかし、どう編集していいのか全くわからない。

そこで、ASTROでブログサイトを構築し使い方の練習から始めた。ASTROには有志が作ったフリーのブログテーマ(https://astro.build/themes/)があるのでそれを使ってみた。Ubuntuで構築したり、GitHubを使ってみたり、Firebase Studioで構築したりしながら、2ヶ月ぐらいはASTROの構造の理解をするのが中心でした。

ようやくASTROの構造もわかってきた6月頃からWEBサイトの制作に取りかかりました。制作環境もMacにインストールしたVS Codeを使うことに落ち着きました。基本はChatGPTにコードを書いてもらい構築していくスタイルですが、この頃のChatGPTはまだ性能が怪しくて、ASTRO Frameworkのカスタムバージョンをいくつか使ったりと結構大変でした。有料で使うほどの専門家でもないので、自分でもコードが触れるように、吐き出してもらうコードには沢山コメントアウトを付けてもらって。

2026年現在は、VS Codeに標準搭載のGitHub Copilot Chatがかなり優秀で、3月に追加した「サイト管理人が飲んだお酒写真」部分は、日本語での指示しただけで構築してくれた。その後に追加した検索機能は、かなり良い感じに作ってくれていましたが、無料だと途中で使用制限が来てしまい中断。あと、全くコードに関与しないで構築してもらうと、壊れた時のリカバリーが無理なので、GitHub Copilot Chat任せは避け、ChatGPTを併用しながら、コードはわからなくても、何のファイルか理解しながら構築を進めています。