AIアシスタント向けコンテキスト

このドキュメントは、AIアシスタント（GitHub Copilot, Claude, Geminiなど）がこのプロジェクトの目的、構造、ルールを理解し、開発者を効果的に支援するためのガイドです。

1. プロジェクト概要

• プロジェクト名: hello-programmer-world
• 目的: プログラミング初学者を対象とした、ウェブサイト形式の研修資料。
• 対象読者: プログラミング完全未経験者、学習を始めたばかりの初心者。
• ゴール: 読者がプログラミングの基本的な概念（HTML, CSS, JavaScript, コマンドラインなど）を理解し、簡単なコードを自力で書けるようになること。

2. 技術スタック

このプロジェクトは以下の技術で構築されています。

• フレームワーク: Astro
• UIライブラリ: Preact (Astroコンポーネント内で部分的に使用)
• コンテンツ形式: MDX (.mdx)
• スタイリング: Tailwind CSS
• UIコンポーネント(CSS): daisyUI
• コードブロック表示: Astro Expressive Code
• 静的解析/フォーマット: Biome

3. ディレクトリ構造

主要なディレクトリとその役割です。

• src/pages/: コンテンツの本体であるMDXファイルが格納されています。
  • html/, js/, cli/のように技術トピックごとにサブディレクトリが作られています。
  • ファイル名は 00-introduction.mdx のように、学習順序を示す番号で始まります。
• src/components/: サイト全体で再利用されるAstroコンポーネント (.astro) やPreactコンポーネント (.jsx, .tsx) があります。
• src/layouts/: MDXファイルに適用される共通のページレイアウト (MarkdownLayout.astroなど) を定義しています。
• src/styles/: グローバルなCSSファイルが格納されています。
• src/sample/: 記事内で使用するコードサンプル（HTML, JSファイルなど）が格納されています。
• src/playground/: 読者が演習を行うためのファイルが置かれています。
• public/: 画像や robots.txt などの静的アセットが格納されています。

4. コンテンツ作成の指針

コンテンツの追加や修正を行う際は、以下の点を遵守してください。

• 常に初学者を意識する: 専門用語は避け、やむを得ず使用する場合は必ず平易な言葉で解説を加えてください。
• 丁寧な言葉遣い: 全てのテキストは「ですます調」を基本とします。
• 一貫性のあるファイル命名: 新しいページを追加する際は、既存の [番号]-[slug].mdx という命名規則に従ってください。
• コードは明確に:
  • コードスニペットは astro-expressive-code を利用して分かりやすく表示します。
  • 複雑なコードには、コメントで各行の役割を説明することを検討してください。
• 実践的な演習: 読者が手を動かして学べるよう、src/playground を活用した演習問題を積極的に取り入れてください。

5. AIアシスタントへの期待

上記の内容を理解した上で、以下のような支援を期待します。

• コンテンツの新規作成・リファクタリング: 新しい技術トピックの記事作成や、既存記事の改善提案。
• コード生成: Astro/Preactコンポーネント、サンプルコード、演習問題の作成。
• 誤字脱字や表現の校正: 初学者にとって分かりにくい表現を、より平易なものに修正。
• 技術的な質問への回答: プロジェクトの文脈を踏まえた、AstroやTypeScriptに関する質問への回答。

このドキュメントはいつでも更新可能です。プロジェクトの状況に合わせて、常に最新の状態を保つようにしてください。