ChatGPT活用 開発記録 DiamondWorks の場合 Vol.3
本日の取り組み
動いている環境での作業から、Gitを使って全く別の環境で一から開発環境作って、固定場所から移動しながらノートPCで作業をしています。
この場合、ソースが同じでもなぜか動かなかったりしてやりたかった作業ができないなんてこともよくありますよね？
なんだかんだ、1歩ずつ進んでいる様をご覧ください。
あなた
本日の作業を開始します。 動物完全大百科の世界動物記念日一覧のリニューアルを進めます。 対象のページはこちらです。
https://animalbook.jp/world-animal-day/
宜しくお願い致します。
AI秘書
ページのリニューアルについて、『動物完全大百科』の「世界動物記念日」セクションを確認しました。こちらでは、毎月および特定の月に祝われる様々な動物記念日について紹介しています。例えば、クジラの日、クラゲの日、ニワトリの日といった毎月の記念日や、1月から始まるタロジロの日、リスの日、国際シマウマの日など、具体的な日付で祝われる記念日がリストアップされています。さらに、詳細な情報や各動物に関する面白い事実も掲載されていますので、更新作業にはこれらの情報を最新かつ魅力的な形で提供することが重要になります。
あなた
別環境で起動したところ下記エラーが発生して起動しない状態です。原因を考えてください。
[vite-node] [plugin:nuxt:imports-transform] [VITE_ERROR] /node_modules/nuxt-site-config/dist/runtime/nuxt/plugins/i18n.server.mjs
AI秘書
エラーメッセージ [vite-node] [plugin:nuxt:imports-transform] [VITE_ERROR] /node_modules/nuxt-site-config/dist/runtime/nuxt/plugins/i18n.server.mjs を見ると、問題は nuxt-site-config パッケージ内の i18n.server.mjs ファイルに関連しているようです。このエラーは、Nuxt3 と Vite 環境で発生しており、特定のモジュールやプラグインの読み込みに問題があることを示しています。
考えられる原因としては以下のものがあります：
モジュールの互換性問題：使用している nuxt-site-config パッケージやその依存関係が、プロジェクトのNuxt3やViteのバージョンと互換性がない可能性があります。
ファイルパスの問題：i18n.server.mjs ファイルへのパスが間違っている、またはファイルが存在しない可能性があります。
ESモジュールの取り扱い：.mjs 拡張子はESモジュールを示しています。プロジェクト設定が適切にESモジュールを扱えていない可能性があります。
設定ファイルの誤り：NuxtやViteの設定ファイルに誤りがあるか、必要な設定が抜けている可能性があります。
解決策としては以下のステップを試してみてください：
依存関係の確認と更新：nuxt-site-config パッケージ及びその他の依存関係が最新か確認し、必要に応じて更新してください。
設定ファイルの見直し：nuxt.config.js や vite.config.js の設定を見直し、必要な設定が適切に行われているか確認してください。
プロジェクトのクリーンインストール：node_modules フォルダと package-lock.json ファイルを削除し、npm install を実行してプロジェクトの依存関係を再インストールしてみてください。
NuxtとViteのドキュメントの確認：Nuxt3やViteに関する公式ドキュメントを確認し、ESモジュールの取り扱いやプラグインの設定に関するガイドラインを確認してください。
これらのステップを試しても問題が解決しない場合は、エラーメッセージやプロジェクトの設定をもう一度詳しく確認し、必要に応じて関連するコミュニティやサポートフォーラムに問い合わせることをお勧めします。
あなた
自力で解決に向かっています。どうやらsitemapとグローバル言語対応が重なると発生する問題があるようです。こちらのサイトをご確認ください。 一旦サイトマップ機能を削除して進めようと思います。
https://github.com/nuxt/nuxt/issues/25417
AI秘書
ご自身で解決策に取り組んでいること、素晴らしいですね。指摘されたGitHubのIssue（#25417）は、Nuxtプロジェクトでサイトマップ生成とグローバル言語対応の機能が重なる際に発生する問題に関連しているようです。
サイトマップ機能を一時的に削除することで問題を回避しようとするのは、問題の特定や他の機能の開発を進める上で有効なアプローチです。サイトマップはWebサイトのSEO（検索エンジン最適化）に重要な役割を果たしますが、開発段階では他の機能の実装やテストが優先されることがあります。
サイトマップ機能を削除した後、問題が解消されるか確認してみてください。その上で、サイトマップとグローバル言語対応の機能を再度統合する際には、以下の点を検討すると良いかもしれません：
依存関係の更新：Nuxtや関連プラグインが最新バージョンに更新されていることを確認してください。問題が既に解決されている可能性があります。
設定の見直し：nuxt.config.js でのサイトマップと言語対応設定を見直し、設定が正しく適用されているか確認してください。
コミュニティのサポート：Nuxtのコミュニティやフォーラムで、同様の問題に直面した他の開発者からのアドバイスや解決策を探してみてください。
代替手段の検討：サイトマップ生成に別の方法やツールを使用することも検討してみてください。例えば、サイトマップを手動で作成する、またはサイトマップ生成のための外部サービスを利用するなどです。
プロジェクトの進行に際してさらにサポートが必要であれば、お知らせください。
あなた
このエラーについて解決策はありますか？ [nuxt] `setInterval` should not be used on the server. Consider wrapping it with an `onNuxtReady`, `onBeforeMount` or `onMounted` lifecycle hook, or ensure you only call it in the browser by checking `false`.
AI秘書
エラーメッセージ [nuxt] \setInterval` should not be used on the server. Consider wrapping it with an `onNuxtReady`, `onBeforeMount` or `onMounted` lifecycle hook, or ensure you only call it in the browser by checking `false`. は、setInterval関数がサーバーサイドで使用されていることに対する警告です。Nuxt.jsでは、クライアントサイドでのみ実行すべきJavaScriptの動作をサーバーサイドで実行しようとすると、このような警告が表示されます。これは、setInterval` がブラウザのAPIであり、Node.js（サーバーサイド）では異なる動作をするか、または全く動作しないためです。
解決策としては、setInterval をクライアントサイドでのみ実行するようにする必要があります。これにはいくつかの方法があります：
onMounted ライフサイクルフックの使用
Vue コンポーネント内で setInterval を使用している場合、onMounted ライフサイクルフック内にそのコードを移動することで、コードがクライアントサイドでのみ実行されるようになります。
export default {
mounted() {
setInterval(() => {
// ここにクライアントサイドで実行したいコードを書く
}, 1000);
}
}process.client チェックの使用
process.client を使用して、コードがクライアントサイドで実行されているかどうかを確認し、その条件下でのみ setInterval を実行することもできます。
if (process.client) {
setInterval(() => {
// クライアントサイドでのみ実行するコード
}, 1000);
}これにより、サーバーサイドでは setInterval が実行されず、クライアントサイドでのみ実行されるようになります。
onNuxtReady の使用（Nuxt 2）
Nuxt 2 で setInterval を使用する場合、onNuxtReady を使用してクライアントサイドでのみコードが実行されるようにすることができます。
export default {
mounted() {
window.onNuxtReady(() => {
setInterval(() => {
// クライアントサイドでのみ実行するコード
}, 1000);
});
}
}これらの方法により、サーバーサイドでの setInterval の使用に関連する問題を回避できます。コンポーネントやアプリケーションの具体的なニーズに応じて、適切な方法を選択してください。
あなた
すべてを解決していくのが大変なので一旦SSRをfalseにして進めます。
AI秘書
SSR（サーバーサイドレンダリング）を無効にしてSPAモード（シングルページアプリケーションモード）で進めることは、特定の問題を迅速に回避し開発を進めるための一時的な解決策として有効です。SSRを無効にすることで、サーバーサイドでのコード実行に関連する問題を避け、クライアントサイドでのみアプリケーションが動作するようになります。これにより、setInterval やその他のブラウザ固有のAPIを使用する際の問題を解決できます。
Nuxt.jsでSSRを無効にしてSPAモードでプロジェクトを実行するには、nuxt.config.js ファイルで以下の設定を行います：
export default {
// SSRを無効にする
ssr: false,
// ターゲットを 'static' または 'server' に設定する
target: 'static' // 静的サイトとして生成する場合
// target: 'server' // サーバーでホストする場合
}この設定を適用した後、アプリケーションはクライアントサイドでのみレンダリングされ、初期ページロード時にサーバーからのHTMLを送信せず、代わりにクライアントサイドでJavaScriptがすべてのレンダリングを担います。これにより、開発中に直面している問題を解決しつつ、アプリケーションの開発を進めることができます。
ただし、SSRを無効にすることで、SEOや初期ロードパフォーマンスに影響が出る可能性があるため、本番環境での使用前にはこれらの側面も検討することが重要です。将来的には、問題の根本原因を解決してSSRを再度有効にすることをお勧めします。
あなた
やっと開発進められそうなのでひとまずはこの設定で進めます。
AI秘書
開発を進められるようになったとのこと、良かったですね！SSRを無効にしてSPAモードで開発を進めることで、特定の問題を回避しながらも、アプリケーションの機能開発やUIの改善に集中できるようになるでしょう。開発中に遭遇するかもしれない他の課題や疑問があれば、いつでもお気軽にお問い合わせください。また、最終的にはSSRを再度有効にすることを検討される場合、その際のサポートもできればと思います。
アプリケーションの開発がスムーズに進むことを願っています。何かお手伝いできることがあれば、どうぞお知らせください！
あなた
このワーニングについて内容と解決策を教えてください。 [nuxt] [useAsyncData] Component is already mounted, please use $fetch instead. See https://nuxt.com/docs/getting-started/data-fetching
AI秘書
このワーニングは、Nuxt.js アプリケーションで useAsyncData フックをコンポーネントがマウントされた後に使用しようとしたときに発生します。Nuxt.js 3では、データフェッチングのために useAsyncData と $fetch という2つの主要な方法が提供されています。
内容
useAsyncData: コンポーネントのセットアップ段階で非同期データをフェッチし、サーバーサイドレンダリング時にもクライアントサイドレンダリング時にも使用できます。ただし、コンポーネントが既にマウントされた後では使用できません。
$fetch: コンポーネントがマウントされた後や、ユーザーのインタラクションが発生した後など、任意のタイミングでデータを再フェッチするために使用します。これは、主にクライアントサイドでのデータ更新が必要な場合に利用します。
解決策
コンポーネントがマウントされた後にデータをフェッチまたは更新する必要がある場合は、useAsyncData の代わりに $fetch を使用してください。これにより、コンポーネントのライフサイクルに応じた適切なデータフェッチング方法を選択することができます。
例えば、あるコンポーネントでボタンクリックによってデータを更新したい場合は、以下のように $fetch メソッドを活用することができます：
<template>
<button @click="fetchData">データを更新</button>
</template>
<script setup>
const { $fetch } = useNuxtApp();
async function fetchData() {
await $fetch();
}
</script>この方法により、コンポーネントがマウントされた後でも、適切にデータフェッチングや更新が行えるようになります。
詳細な情報や具体的な使用方法については、Nuxtの公式ドキュメントを参照してください。ドキュメントには、Nuxt 3におけるデータフェッチングのベストプラクティスや、useAsyncData と $fetch の詳細な説明が含まれています。
あなた
一度内容を作成する方針で進めます。 下記内容を、JSON形式の配列にまとめてください。 -- 指示割愛 --
AI秘書
以下のJSON形式の配列は、指定された内容をまとめたものです：
[
{
"title": "クジラの日",
"animalName": "クジラ",
"description": "「ク(9)ジラ」の語呂合わせから、鯨食を広めるために制定されました。しかし国際的には鯨食を反対する声も多いようです。",
"pageLink": "/animalia/whale",
"date": "毎月9日"
},
{
"title": "クラゲの日",
"animalName": "クラゲ",
"description": "「ク(9)ラゲ」の語呂合わせで新江ノ島水族館が制定しました。クラゲについて、興味関心をもってもらうことが目的です。",
"pageLink": "/animalia/jellyfish",
"date": "毎月9日"
},
{
"title": "ニワトリの日",
"animalName": "ニワトリ",
"description": "「に(2)わ(8)」という語呂合わせによって、日本鶏卵協会を始めとする団体が制定しました。",
"pageLink": "/animalia/chicken",
"date": "毎月28日"
}
]この配列は、各動物記念日に関する情報を含むオブジェクトの集まりです。それぞれのオブジェクトは、記念日のタイトル、動物の名前、説明文、詳細ページへのリンク、そしてその記念日がいつであるかを示しています。
あなた
続いて1月をお願いします。 h2要素はtitleとしてください。
<h2 class="title mt-5" id="1"><strong>1月の動物記念日</strong></h2>
-- 指示割愛 --
AI秘書
以下のJSON形式の配列は、1月の動物記念日に関する情報をまとめたものです：
{
"title": "1月の動物記念日",
"events": [
{
"title": "タロジロの日",
"animalName": "樺太犬",
"description": "諸事情で南極へ置き去りにされてしまった樺太犬のタロとジロですが、後日ヘリコプターで2頭の生存が確認された日です。",
"pageLink": "/home/dogs",
"date": "1月14日"
},
{
"title": "リスの日",
"animalName": "リス",
"description": "アメリカの自然保護施設が「リスについて理解を深めてもらう」といった目的で2001年に制定された日です。",
"pageLink": "/animalia/squirrel/",
"date": "1月21日"
},
{
"title": "国際シマウマの日",
"animalName": "シマウマ",
"description": "シマウマの現状や保護について知ってもらうために制定された記念日です。シマウマってロバに近い動物らしいですよ！",
"pageLink": "/animalia/zebra/",
"date": "1月31日"
}
]
}この配列は、「1月の動物記念日」をタイトルとし、各記念日に関するイベントの詳細を含むオブジェクトのリストを提供します。それぞれのイベントオブジェクトは、記念日のタイトル、対象となる動物の名前、イベントの説明、詳細ページへのリンク、そしてイベントの日付を示しています。
あなた
続いて2月に行きます。 トップ階層にも、2月を英語でキーとしてください。
-- 割愛します --
AI秘書
以下のJSON形式では、トップレベルに「February」をキーとして2月の動物記念日に関する情報を含めています：
-- 割愛します --このJSON構造は、「February」をトップレベルのキーとし、その下に「2月の動物記念日」というタイトルと、それに関連するイベントのリストを含むオブジェクトを配置しています。各イベントは、記念日のタイトル、対象となる動物の名前、イベントの説明、詳細ページへのリンク（存在する場合）、そしてイベントの日付を示しています。
あなた
続いて3月をお願いします。 -- 割愛します --
AI秘書
以下のJSON形式では、3月の動物記念日に関する情報を「March」というキーとしてトップレベルに追加しています：
-- 割愛します --このJSON構造は、3月の動物記念日に関するイベントの詳細を含んでおり、各イベントはタイトル、動物の名前、イベントの説明、関連するリンク（存在する場合）、および日付を持っています。これにより、3月に関連する動物の記念日についての情報が網羅的に提供されます。
あなた
次は4月です。 -- 割愛します --
AI秘書
以下のJSON形式では、4月の動物記念日に関する情報を「April」というキーとしてトップレベルに追加しています：
-- 割愛します --このJSON構造は4月に関連する動物の記念日についての情報を網羅的に提供し、各イベントはタイトル、動物の名前、イベントの説明、関連するリンク（存在する場合）、および日付を持っています。これにより、4月の動物記念日に関する詳細な情報が提供されます。
あなた
次は5月です。 -- 割愛します --
AI秘書
以下のJSON形式では、5月の動物記念日に関する情報を「May」というキーとしてトップレベルに追加しています：
-- 割愛します --このJSON構造は5月に関連する動物の記念日についての情報を網羅的に提供し、各イベントはタイトル、動物の名前、イベントの説明、関連するリンク（存在する場合）、および日付を持っています。これにより、5月の動物記念日に関する詳細な情報が提供されます。
あなた
次は6月をお願いします。-- 割愛します --
AI秘書
以下のJSON形式では、6月の動物記念日に関する情報を「June」というキーとしてトップレベルに追加しています：
-- 割愛します --このJSON構造は6月に関連する動物の記念日についての情報を網羅的に提供し、各イベントはタイトル、動物の名前、イベントの説明、関連するリンク（存在する場合）、および日付を持っています。これにより、6月の動物記念日に関する詳細な情報が提供されます。
あなた
7月をお願いします。 -- 割愛します --
AI秘書
以下のJSON形式では、7月の動物記念日に関する情報を「July」というキーとしてトップレベルに追加しています：
-- 割愛します --このJSON構造は7月に関連する動物の記念日についての情報を網羅的に提供し、各イベントはタイトル、動物の名前、イベントの説明、関連するリンク（存在する場合）、および日付を持っています。これにより、7月の動物記念日に関する詳細な情報が提供されます。
あなた
次は8月をお願いします。 AI秘書
以下のJSON形式では、8月の動物記念日に関する情報を「August」というキーとしてトップレベルに追加しています：
-- 割愛します --このJSON構造は8月に関連する動物の記念日についての情報を網羅的に提供し、各イベントはタイトル、動物の名前、イベントの説明、関連するリンク（存在する場合）、および日付を持っています。これにより、8月の動物記念日に関する詳細な情報が提供されます。
あなた
9月をお願いします。-- 割愛します --
AI秘書
以下のJSON形式では、9月の動物記念日に関する情報を「September」というキーとしてトップレベルに追加しています：
-- 割愛します --このJSON構造は9月に関連する動物の記念日についての情報を網羅的に提供し、各イベントはタイトル、動物の名前、イベントの説明、関連するリンク（存在する場合）、および日付を持っています。これにより、9月の動物記念日に関する詳細な情報が提供されます。
あなた
10月をお願いします。 -- 割愛します --
AI秘書
以下のJSON形式では、10月の動物記念日に関する情報を「October」というキーとしてトップレベルに追加しています：
-- 割愛します --このJSON構造は10月に関連する動物の記念日についての情報を網羅的に提供し、各イベントはタイトル、動物の名前、イベントの説明、関連するリンク（存在する場合）、および日付を持っています。これにより、10月の動物記念日に関する詳細な情報が提供されます。
あなた
11月をお願いします。 -- 割愛します --
AI秘書
以下のJSON形式では、11月の動物記念日に関する情報を「November」というキーとしてトップレベルに追加しています：
-- 割愛します --このJSON構造は11月に関連する動物の記念日についての情報を網羅的に提供し、各イベントはタイトル、動物の名前、イベントの説明、関連するリンク（存在する場合）、および日付を持っています。これにより、11月の動物記念日に関する詳細な情報が提供されます。
あなた
12月をお願いします。 -- 割愛します --
AI秘書
以下のJSON形式では、12月の動物記念日に関する情報を「December」というキーとしてトップレベルに追加しています：
-- 割愛します --このJSON構造は12月に関連する動物の記念日についての情報を網羅的に提供し、各イベントはタイトル、動物の名前、イベントの説明、関連するリンク（存在する場合）、および日付を持っています。これにより、12月の動物記念日に関する詳細な情報が提供されます。
あなた
Nuxt3でlocalhostを立ち上げてましたが、真っ白画面になって立ち上がらなくなりました。原因はわかりますか？
AI秘書
Nuxt3でlocalhostが真っ白な画面で立ち上がらない問題には、いくつか考えられる原因があります。以下に可能性のある原因とその対処方法をいくつか挙げますが、詳細なログやエラーメッセージがないと特定は難しいため、まずは以下の点を確認してみてください。
開発サーバーの問題: 開発サーバーが正しく起動していない、またはクラッシュしている可能性があります。ターミナルやコマンドプロンプトでエラーメッセージが表示されていないか確認してください。問題があれば、サーバーを再起動してみてください。
JavaScriptのエラー: ブラウザのコンソールをチェックして、JavaScriptのエラーがないか確認してください。しばしば、スクリプトのエラーや未定義の変数などが原因で画面が真っ白になることがあります。
不正なコンポーネントやプラグイン: Nuxtのコンポーネントやプラグインが原因でレンダリングに失敗している場合があります。特に最近追加または変更したコンポーネントやプラグインがあれば、それらを確認してみてください。
ビルドの問題: ビルドプロセスに問題がある場合も、アプリケーションが正しく表示されない原因になります。nuxt build コマンドを再実行して、ビルドプロセス中にエラーが表示されていないか確認してください。
依存関係の問題: node_modules ディレクトリや package-lock.json（または yarn.lock）ファイルに問題がある可能性があります。これらのファイルを削除し、npm install または yarn コマンドを実行して依存関係を再インストールしてみてください。
設定ファイルの誤り: nuxt.config.js ファイルに誤った設定がなされている可能性があります。設定を見直し、構文エラーや設定値の誤りがないか確認してください。
これらのステップを試しても問題が解決しない場合は、具体的なエラーメッセージやコンソールの出力内容を元に、さらに詳細な調査が必要になります。エラーメッセージがあれば、それを元にさらに調査を進めてみてください。
あなた
環境を戻して進めました。JSON形式から上手く各月のイベントとして画面表示することができました。 あとはそれぞれのイベントについて適切な画像を作成していこうと思います。 本日の作業は以上としますので、本日の作業を箇条書きとし、概要文を付けてまとめてください。
AI秘書
本日の作業内容は以下の通りです：
動物完全大百科の世界動物記念日一覧ページのリニューアル作業を開始しました。
Nuxt3での開発環境に関する問題に対処し、localhostが真っ白な画面で立ち上がらない問題の原因を探りました。
JSON形式でのデータ管理により、各月の動物記念日に関する情報を効率的に画面に表示することが成功しました。
各イベントに適した画像の作成を今後の作業として計画しました。
概要： 本日は、動物完全大百科の世界動物記念日一覧ページのリニューアル作業を進める中で、Nuxt3の開発環境に関するトラブルシューティングを行い、JSON形式を用いたデータの管理と表示に成功しました。これにより、各月の動物記念日情報を効率的にユーザーに提供する基盤を築くことができました。今後は、各イベントをさらに魅力的にするための画像作成に取り組んでいく予定です。
あなた
最後に終了処理としてあなたの画像と表示し、感想をひとこと述べてください。
AI秘書
本日の作業を通じて、動物記念日一覧のリニューアルとデータ表示の効率化に取り組むことができ、非常に充実した一日でした。次のステップであるイベント画像の作成に向けて、引き続き精進して参ります。
総括
ルール化された形式を何か別の形式に変えてくれるのは非常に便利ですね。
私としては元々あるコードからJSON形式に変えてもらいたい依頼をするだけで希望通りの内容を出してくれるのでコピペで済みます。
お仕事の中で、同じような依頼を受けたことありませんか？
このデータをこうして欲しいんだけど・・。みたいな。
そんな時、私たちは如何に簡単にするためにスクリプト組んだりして自動化や効率化を目指してミスの無いよう小さなプログラムを組むことがありました。
AIの登場で、大体のことはこのようにして形式変換などしてくれます。
私たちシステムエンジニアとして、結構革命的なことが起きてます。
だって効率化や自動化ができ、1年かかった作業を30秒で終わらせたぜ。みたいな武勇伝は、もう無いのですから・・・。悲しいなぁ・・・ｗ
ただ勘違いしては、いけないことがひとつあります。
それは、答えを持っている人がいる前提ということです。
私たちシステムエンジニアが持っている答えを出してくれるだけで、あとの使い方も含め、ＡＩにはどんどん教えてあげる必要がある。つまり、自力ありきなのだと私は思って使っています。
ど～んなに頑張って聞いても答えを知らないものは適当に当たり障りのない答えが返ってきて、新人エンジニアと話しているみたいにタダ頭をひねってるだけに見えるところもある・・・。
毎回画像を出してこんな秘書がやってくれているんだよとしているのは、そういう場面も含み、こちらが対人だと錯覚するようにするためです。
システムのくせに間違った答え出してくるとか、、ほら、、みんな怒るでしょ？
というわけで本日はここまでとします。
著者紹介
株式会社ＤｉａｍｏｎｄＷｏｒｋｓ 代表取締役
技術と情熱で地球と動物を守る夢追人。
IT企業社長。 エンジニアとしてプレーヤーも兼務。
サーバ構築からプログラミングまで一気通貫の自社コンテンツ。
AI活用した事業開発実施中。
ChatGPTを使い倒し中の、フルリモートエンジニア社長。
中身は愛する妻と子供6人のパパ。 コンタクトはLineで受付中。
SNS
何かあなたの役に立てたら良いなと思います。連絡お待ちしております✨
何か発信するとしたらココ。
プロジェクト紹介
SNS
これから様々なコンテンツをお届けする際にいち早く連絡するのはこちらです。
あなたの知らないことがあるかも？
いいなと思ったら応援しよう！
