*著者注：*このブログ投稿の約90％はAIによって書かれていますが、投稿が読みやすくなるように校正および編集しました。Julesが自分自身を自慢する傾向があったのは面白かったです。この最終結果にたどり着くまでに多くのプロンプトでガイドする必要がありましたが、最後の編集は手動で行う方が簡単でした。PRのコミット履歴で完全な編集履歴を確認できます。注目すべきは、この投稿をポルトガル語（ブラジル）に翻訳することを完全に拒否し、翻訳機能がないと述べたことです。しかし、このブログ全体は以前のインタラクションでJulesを使用して翻訳されました。気分が乗らなかったのでしょう。:)
はじめに#
最近、最新のコンテンツをよりよく強調するために、ブログのホームページを更新することにしました。バックエンドエンジニアとして、フロントエンドの複雑さに深く入り込むことは日常業務ではありません。そのため、あまり馴染みのないドメインで手動ですべての変更をコーディングする代わりに、AIコーディングアシスタントであるJulesの助けを借りました。
この記事では、私たちの反復的な道のり、成功、そして（時には面白い）誤解、そして特にスキルギャップを埋める上で、Web開発のためにAIと効果的に連携することについて学んだことを詳しく説明します。
目標：特集記事セクション#
Julesへの最初の要求は単純でした。
「メインページのレイアウトを変更して、最新のブログ投稿が最近の投稿リストにあるのではなく、ハイライトで表示されるようにしてください。最近の投稿には、最新の投稿を除く他のすべての投稿が含まれている必要があります。この動作は、ブログのランディングページ（ホーム）でのみ表示される必要があります。ユーザーがブログメニューをクリックした場合は、最新の投稿を含むすべての投稿が逆時系列で表示される必要があります。」
Julesはすぐに理解し、Hugoのコードベースを調査し、テンプレートを特定し、それらを変更することを含む計画を提案しました。
反復のハイライト：良い点、悪い点、そしてAI#
私たちのコラボレーションには、物事を正しく行うためにいくつかの反復が含まれていました。
反復1：初期設定 - 基本を正しく行う#
Julesは、Blowfishテーマのパーシャルを正しく特定し、オーバーライド構造を設定しました。「最近の投稿」リストで最新の投稿を他の投稿から分離するロジックはうまく実装されました。
- **うまくいったこと：**コアのHugo構造の理解、投稿の取得、基本的なテンプレートの変更。Julesがテーマとプロジェクトファイルをナビゲートする能力は、ここで大幅な時間節約になりました。
反復2：Tailwindでのスタイリング - 試行錯誤のダンス#
次に、外観（タイトル、幅、画像の寸法）に焦点を当てました。これには、ビジュアルを微調整するための一連のプロンプトが含まれていました。例えば：
「特集記事のタイトルを「特集記事」に変更してください。幅をビューの約80％に調整してください。画像が高すぎる/狭すぎるので、4：3のアスペクト比を試してみましょう。それでもまだ完全ではないので、もっと広く/低くしてください。」
これは、Julesとビジュアル要素で作業する反復的な性質が非常に明白になった場所です。
**Julesのアプローチ：**タイトルのためにi18nファイルを変更し、さまざまなTailwindの幅クラス（例：
md:w-4/5、md:w-2/3、max-w-xl、max-w-2xl）を使用し、画像のアスペクト比のためにpadding-bottomを操作しました。**課題とフラストレーション：**特に、主にバックエンドで作業している私のような人にとって、仲介者を介してTailwindでスタイリングする試行錯誤の性質は、特定の課題でした。Julesは適切と思われるクラスを適用できましたが、視覚的な結果は必ずしも私が最初に考えていたものではありませんでした。Tailwindクラスの変更は、最初の試行で明確に目に見える違いに変換されないことが多く、または効果が期待どおりではありませんでした。これにより、「このクラスを試してください」、「いいえ、もっと狭く/広く/高く/低くしてください」という数ラウンドのやり取りが発生し、最終的には成功しましたが、時にはイライラすることがありました。これは、このAI支援の非同期ワークフローにおけるコードと即時の視覚的フィードバックの間の切断を浮き彫りにしました。
**学習：**視覚的な美学を微調整することは、私の経験の中で最も好まない部分です。指示はしばしば誤検知につながるためです。明確で説明的なフィードバックが重要ですが、画面を直接指したり、リアルタイムで自分で微調整したりできない場合に、ある程度のやり取りが避けられないことを認識することも重要です。しかし、Julesは要求された各変更を熱心に適用し、私のフロントエンドの知識のギャップを埋めるのに役立ちました。
反復3：カスタムCSSとTailwind - 短い回り道#
ある時点で、カードの寸法を非常に具体的に制御するために、次のようにプロンプトを出しました。
「jules、既存のスタイルクラスを使用する代わりに、特集記事カードに一意のスタイルクラスを作成してください。このスタイルは、コンテナの75％の相対的な幅と高さを使用する必要があります…」
Julesの応答： JulesはカスタムCSSルールを正しく作成し、それらを使用するようにカードのパーシャルをリファクタリングしました。
結果と学習： Julesは要求どおりにこれを実装しましたが、結果は、Tailwindベースのブログの残りのデザインとは少し異質に感じられました。カスタムCSSは完全には調和せず、Tailwindとの一貫性を維持することがより重要であるとすぐに判断しました。これは、AIが生成したソリューションでさえ、既存のデザイン言語と、確立されたフレームワークに固執するという私の好みに適合することを確認するための良い教訓でした。Julesは、要求に応じてTailwindに戻りました。
「最後の変更を元に戻し、Tailwindのフォーマットスタイルを復元してください。Tailwindのベストプラクティスを使用して同じスタイルガイドラインを適用してください」
反復4：素晴らしい「コメント」の誤解！#
これはおそらく、AIと人間の相互作用の最も説明的な部分でした。私は次のように述べました。
「コメントが特集記事にレンダリングされています。すべてのコメントを削除するか、非表示にしてください」
- Julesの解釈： Julesは、私がブログのユーザーコメントシステム（UtterancesやGiscusなど）や、閲覧数/いいね数などのメタデータを意味していると想定しました。これにより、Julesが調査し、閲覧数/いいね数のメタデータを条件付きで非表示にしようとする一連のステップが発生しました。
- 私の明確化： これらの変更の後、例を挙げて明確にしました。
「あなたは間違っています。閲覧数といいね数を削除したいとは一度も言っていません。レンダリングでコードコメント（{/* パディングを調整… /}や{/ proseクラスを削除… */}など）を参照しています」
- 解決策： Julesが、私が文字通りのGoテンプレート/HTMLコメント（
{/*...*}を使用して誤ってフォーマットされ、有効なHugoコメントスタイルではないためテキストとしてレンダリングされる）を意味しており、{{/* ... */}}ではないことを理解すると、修正は即座に行われました。テンプレートから問題のあるテキストを削除します。 - うまくいったこと： （誤解された）問題をデバッグするためのJulesの粘り強さと体系的なアプローチは称賛に値しました。
- 課題と学習： これは、AIとの相互作用の重要な側面を浮き彫りにしました。自然言語の曖昧さです。「コメント」には複数の意味があります。私の最初のレポートは十分に正確ではありませんでした。
反復5：最終的な仕上げ#
表示されているテンプレートのコメントを解決した後、最終的な調整を行いました。
「「特集記事」のタイトルを削除してください。カードの幅を50％に変更してください。タイトルと要約のフォントサイズを大きくしてください。画像のアスペクト比を16：9にしてください。」
これにより、カードの幅、フォントサイズ、画像のアスペクト比の最終的な調整が行われました。幅の％は効果がありませんでしたが、アスペクト比を変更することでうまくいきました。
ボーナス反復：Julesがこのブログ投稿を下書きする#
「これは完璧です。これ以上のコード変更は必要ありません。今、私たちが行ったばかりの反復を説明する新しいブログ投稿エントリを作成してほしいです…」
そして、私たちはここにいます！この投稿自体は、私たちのインタラクションログと、今読んでいるまさにその点を含む私の指導的なフィードバックに基づいて、Julesの支援を受けて下書きされました。
Julesでうまくいったこと#
- スキルギャップの橋渡し： バックエンドエンジニアとして、Julesは、私が日常的にあまり経験していないHugoのテンプレート作成やTailwind CSSなどのフロントエンドタスクに取り組む上で非常に貴重でした。Julesは、私の深いフロントエンドの知識の欠如を補い、私がその後指導し、洗練させることができるソリューションを提案し、実装しました。
- 実装の速度： よく理解されている変更の場合、Julesは手動で入力するよりもはるかに速くコードを変更し、ファイルを作成し、構造をリファクタリングできます。
- 複雑な指示の処理： 一般的に、Julesは複数ステップの要求と複雑なレイアウトの目標を理解していました。
- 体系的な問題解決： 誤解があったとしても、Julesはしばしば論理的なプロセスに従いました。
- 反復的な改良： Julesは、微調整のためのフィードバックを一貫して受け入れていました。
課題と学習#
- 言語の正確さ： 「コメント」事件は、正確な言語がいかに重要であるかを強調しています。人間にとって明らかなことや、略語は、AIにとっては曖昧かもしれません。
- 視覚的なフィードバックループとTailwind： Tailwindのスタイリングでの試行錯誤は、重要な課題でした。Julesがアウトプットを「見て」いないと、望ましい視覚的な結果を説明したり、特定のクラスのセットが期待どおりに機能しなかった理由を説明したりするには、忍耐と詳細な説明が必要でした。これは、視覚的なタスクのためのテキストベースのインタラクションに固有のものです。
- 誤解と軌道修正： Julesがタスクを誤解した場合、その間違った道を熱心に進んでいきました。タスクの途中で中断する方法はありませんでした。修正フィードバックを提供する前に、現在の行動シーケンスが完了するのを待つ必要がありました。
- 非同期ワークフローとペース： 作業はほとんど非同期です。各要求とJulesの実装には、より複雑なシーケンスの場合、数分から時には30分かかることがありました。これにより、反復ループは、即時のフィードバックやライブペアプログラミングによる直接コーディングよりも遅くなります。
推奨リソース#
Julesについてもっと知りたい方は、以下をご覧ください。
結論#
全体として、このホームページ機能でJulesと協力したことは、生産的な経験でした。AIを導くダイナミックなやり取りである「vibe-coding」のように本当に感じました。成功の鍵は、明確で反復的なコミュニケーション、誤解中の忍耐、そして具体的で実行可能なフィードバックを提供する意欲にあります。
特にTailwindの試行錯誤やAIの時折の誤解によるフラストレーションは、AI支援開発の現在の状況の一部です。しかし、非同期の性質と一部の世代にかかる時間にもかかわらず、コーディングの機械的な側面をオフロードし、私のコアの専門分野外の分野（特定のTailwindの実装やHugoの構造など）の提案を得る能力は、依然として純利益をもたらしました。この特定の機能のために、必要なすべてのフロントエンドデザインの原則、Hugoの複雑さ、Tailwind CSSのニュアンスをゼロから学ぼうとした場合よりも、大幅に速く、効果的でした。
JulesのようなAIアシスタントは強力なツールです。人間の監視や設計意図を置き換えるものではありませんが、適切な考え方とコミュニケーション戦略でアプローチすれば、信じられないほどの加速器になる可能性があります。