WINGSプロジェクト 齊藤 新三/著
山田祥寛/監修
株式会社 技術評論社/発行
定価 3,520円
B5変版・ 360ページ・ 1色
ISBN 978-4-297-15008-2
発刊日： 2025年7月07日

第1章 Astro を初体験

1.1 Astro とは
　1.1.1 Web サイト制作の問題点とコンポーネント
　1.1.2 コンポーネントベースの Web サイト制作に必要なツール
　1.1.3 Astro の特徴
　1.1.4 サーバ上で動作する Astro アプリケーション
1.2 Astro の環境構築
　1.2.1 Astro のコーディングに必要なもの
　1.2.2 Visual Studio Code のインストール
　1.2.3 VS Code の Astro 拡張機能のインストール
　1.2.4 Node.js のインストール
1.3 Astro プロジェクトの作成と実行
　1.3.1 Astro プロジェクトの作成コマンド
　1.3.2 Astro プロジェクトの実行コマンド
　1.3.3 Astro プロジェクト作成ウィザード
　1.3.4 Astro プロジェクト内の構成
1.4 本書で必要な TypeScript 文法
　1.4.1 基本構文総まとめ
　1.4.2 オブジェクトの分割代入
　1.4.3 undefined を考慮する演算子
　1.4.4 スプレッド構文
　1.4.5 リテラル型
　1.4.6 type による型定義
　1.4.7 例外処理
　1.4.8 オブジェクトをまとめる方法

第2章 Astro コーディングの基本

2.1 Astro のコンポーネントと基本構文
　2.1.1 Astro のコンポーネント
　2.1.2 Astro コンポーネントの基本は HTML
2.2 Astro コンポーネントでの変数の表示
　2.2.1 変数を利用した .astro ファイルの作成
　2.2.2 変数の表示は波カッコ
　2.2.3 属性への変数の埋め込みも波カッコ
　2.2.4 Astro オブジェクトの表示
2.3 Astro コンポーネントでの制御構文
　2.3.1 条件分岐構文を利用した .astro ファイルの作成
　2.3.2 条件に合致した場合の条件分岐
　2.3.3 条件に合致した場合としない場合の条件分岐
　2.3.4 ループ構文を利用した .astro ファイルの作成
　2.3.5 ループ構文は配列の map() メソッド

第3章 コンポーネント間連携

3.1 コンポーネントの埋め込み
　3.1.1 コンポーネントの再確認
　3.1.2 コンポーネントの作り方
　3.1.3 子コンポーネントの利用方法
　3.1.4 コンポーネントの独立性
　3.1.5 スタイル設定の独立性を確保するカラクリ
　3.1.6 グローバルスタイルにする is:global 属性
3.2 コンポーネントの Props
　3.2.1 Props を利用したサンプルの作成
　3.2.2 Props としてデータを渡す特殊な属性
　3.2.3 Props データが格納された props プロパティ
　3.2.4 Props の属性値を変数で用意する
　3.2.5 Props の構成要素定義
　3.2.6 ループと Props の組合せ 3.3 子コンポーネントをカスタマイズする Slot
　3.3.1 Slot とは
　3.3.2 Props 中のタグ文字列
　3.3.3 子コンポーネントに HTML 要素を埋め込める Slot
　3.3.4 Slot のフォールバックコンテンツ
　3.3.5 名前付き Slot

第4章 ルーティングとレイアウト

4.1 ルーティングとルートパラメータ
　4.1.1 ファイルベースのルーティング
　4.1.2 サンプルプロジェクトの作成
　4.1.3 サブフォルダ中の index
　4.1.4 新着メニューデータを TypeScript で用意
　4.1.5 ルートパラメータ
　4.1.6 動的ルート
　4.1.7 動的ルートでは静的パス設定が必要
　4.1.8 ルートパラメータの取得
4.2 レイアウト機能
　4.2.1 routing プロジェクトの問題点と新プロジェクトの作成
　4.2.2 インターフェースファイル
　4.2.3 Props のプロパティをオブジェクトにする
　4.2.4 データ生成コードの集約
　4.2.5 レイアウト機能によるページ共通コードの一元管理
　4.2.6 レイアウトファイル内の可変データは Props を利用
　4.2.7 レイアウト機能を利用した Astro ページの作成
　4.2.8 dataFactory の利用
　4.2.9 静的パス設定はページファイル内で行う
4.3 ページネーション
　4.3.1 Astro のページネーション
　4.3.2 ページネーション対応のページ作成
　4.3.3 データ分割を自動化する paginate()
　4.3.4 現在表示に関するデータが格納された Props の page
　4.3.5 新着メニュー詳細ページの改変

第5章 コンポーネントベースの Web サイト制作

5.1 コンポーネントベースのWeb サイト制作ケーススタディの概要
　5.1.1 ケーススタディの概説とコンポーネント構成
　5.1.2 ケーススタディプロジェクトのファイル構成と assets フォルダ
　5.1.3 インポート文から相対パスをなくす方法
　5.1.4 PostCSS の利用
5.2 BaseLayout の作成
　5.2.1 画像ファイルの読み込み
　5.2.2 グローバル css ファイルの読み込み
　5.2.3 TOP ページの作成
　5.2.4 フォントファイルの利用
　5.2.5 グローバルナビの作成
5.3 TOP ページの作成
　5.3.1 メインビジュアルの追加
　5.3.2 画像を効率よく配置できる Picture コンポーネント
　5.3.3 サービス紹介の追加
　5.3.4 Heading コンポーネントの役割と class:list 属性
5.4 ニュースページとマークダウンファイル
　5.4.1 ニュース一覧ページの作成
　5.4.2 GlobalHeader に動的タグを導入
　5.4.3 マークダウンページファイル
　5.4.4 ニュースページで利用するコンポーネントの作成
　5.4.5 マークダウンファイルからリストを生成
5.5 デプロイの準備
　5.5.1 アップロードファイル一式の生成
　5.5.2 dist フォルダの内容

第6章 動的サイトとSSR

6.1 ケーススタディの概要と準備
　6.1.1 追加するコンポーネント
　6.1.2 プロジェクトの準備
　6.1.3 フォントの追加
　6.1.4 Web API の準備
　6.1.5 Current Weather Data の利用方法
6.2 天気情報コンポーネントの追加と SSG の問題点
　6.2.1 天気情報取得関数の追加
　6.2.2 weatherIconNameList の追加
　6.2.3 WeatherInfo コンポーネントの追加
　6.2.4 WeatherInfo コンポーネントの埋め込み
　6.2.5 動的処理と SSG の問題点
6.3 Astro で動的処理を実現する方法
　6.3.1 スクリプトコードがそのまま残る script ブロック
　6.3.2 script タグ内では TypeScript コードも可能
6.4 Astro のアイランド
　6.4.1 他のフレームワークのコンポーネントの利用
　6.4.2 他のフレームワークとの連携準備
　6.4.3 Vue 版 WeatherInfo コンポーネントの作成
　6.4.4 Vue 版 WeatherInfo コンポーネントの埋め込み
　6.4.5 アイランドのビルド結果
6.5 SSR デプロイ
　6.5.1 Astro の SSR とホスティングサービス
　6.5.2 プロジェクトの準備
　6.5.3 環境変数の利用
　6.5.4 日時におけるタイムゾーンの設定
　6.5.5 SSR の設定と連携ライブラリの追加
　6.5.6 Netlify へのデプロイ
　6.5.7 Netlify にデプロイされたサイトの確認

第7章 Astro でのコンテンツの扱い

7.1 コンテンツコレクション
　7.1.1 コンテンツコレクションの概要
　7.1.2 ケーススタディの概要とプロジェクトの準備
　7.1.3 コンテンツファイルの配置とコード変更
　7.1.4 コレクション定義ファイルとその作成
　7.1.5 ニュースリスト表示の改造
　7.1.6 各ニュースページの作成
　7.1.7 file() ローダーの利用
7.2 動的ルートと SSR の組合せ
　7.2.1 プロジェクトの準備
　7.2.2 各ニュースページの改造
7.3 Storyblok によるコンテンツ管理
　7.3.1 Storyblok とその準備
　7.3.2 Storyblok を利用するプロジェクトの準備
　7.3.3 Storyblok インテグレーションの設定
　7.3.4 ニュースリスト表示を改造
　7.3.5 各ニュースページの改造

第8章 Astro のその他の機能

8.1 バックサイドに関する機能
　8.1.1 エンドポイント
　8.1.2 アクション
　8.1.3 ミドルウェア
　8.1.4 サーバアイランド
8.2 フロントサイドに関する機能
　8.2.1 カスタムエラーページ
　8.2.2 プリフェッチ
　8.2.3 ビュートランジション
　8.2.4 国際化

コラム

TypeScript
Vite
Volta
Astro のテーマ
JSON
GitHub Desktop
CDN
DI コーディング
汎用 Node.js SSR インテグレーション
GitHub フロー