道場公式ページを編集する

前提知識は全て叩き込んだので，ここからは道場公式ページのプロジェクトの構成と編集方法を教える。

前の章で散々HTMLを学んでもらったが，道場公式ページのプロジェクトではHTMLを直接書くことはしない。 HTMLのファイルを出力するプログラムを作って管理する形をとっている。

なぜHTMLを直接書かないのかというと，以下の理由が挙げられる。

各ページに共通する部分(道場公式ページ右上のメニューボタンとか)を使い回すため
- HTMLを直接書くと，共通する部分を各HTMLファイルに全て記述しなければならず，保守性が悪い
使用するライブラリのバージョン管理をしやすくするため
出力するページのサイズを自動で小さくするため
- ページの読み込み速度が高いと，Google検索で上位に表示されやすい

使用技術

Astro

そういうわけで，道場公式ページではAstroというフレームワークを使っている。このフレームワークは素のHTMLの文法を拡張したような形式で記述するので学習コストが低い。

Astroの一通りの使い方は公式のドキュメントを参照するのがよいだろう。自分でAstroを使ってテキトーなページを作ってみるのが近道である。

なお，近年のWebページ制作ではページを構成する要素を「コンポーネント」という部品単位で管理する，ということを知っておくと読みやすいだろう。

また特に，コンテンツコレクションの仕組みは理解しておくこと。道場公式ページでガッツリ使っているが，初見では理解しづらいので。

Tailwind CSS

CSSを書く手間を減らすためにTailwind CSSというCSSフレームワークを使っている。こちらも公式のドキュメントを参照されたい。

Cloudflare Pages

Webページを全世界に配信するサービス。GitHubのリポジトリと連携させてあるのでいじる必要は特にない。もし設定をいじりたい時は筆者に連絡してほしい。

プロジェクト構造

道場公式ページのリポジトリ(探究道場のOrganizationに入ってないと閲覧不可)をクローンすると，以下のようなディレクトリ構造になっている。

.
├── assets
├── public
└── src
    ├── components
    ├── content
    │   ├── award
    │   │   ├── 2023
    │   │   ├── 2024
    │   │   └── 2025
    │   └── schools
    ├── layouts
    ├── pages
    │   ├── for-stuff
    │   │   └── …
    │   ├── 404.astro
    │   ├── award.astro
    │   ├── index.astro
    │   ├── partnerschools.astro
    │   └── workshop.astro
    ├── styles
    └── content.config.ts

といっても概ねAstroの公式ドキュメントに書いてあるような構成なので，そこまで困ることはないと思うが…

`src/pages/index.astro`

トップページ。

`src/pages/award.astro`

受賞履歴を表示するページ。

受賞歴のデータはsrc/content/awards/以下に年度別で保存している。このデータはYAML形式で管理する。

`src/pages/partnerschools.astro`

連携校を表示するページ。

連携校のデータはsrc/content/schools/以下に地方別で保存している。このデータはMarkdown形式(わからなかったらggれ！)で管理していて，フロントマターには次の値を記述する。

name: 学校名
link: その学校のホームページのリンク
location: [緯度, 経度]の形式で記述。学校の所在地の座標。

※ locationは連携校一覧地図に表示するのに使う。Google Mapで調べることができる。