書籍詳細（Astro フロントエンド開発の教科書）

Astro フロントエンド開発の教科書 書影

ISBN: 978-4-297-15008-2

Astro フロントエンド開発の教科書

WINGSプロジェクト 齊藤 新三 著

著者WINGSプロジェクト 齊藤 新三
監修山田祥寛
出版社技術評論社
価格3,200円（税別）
判形B5変版・1色
ページ数360ページ
発売日2025年7月7日
シリーズ フロントエンド開発の教科書
対象レベル初中級
Amazonで購入
B!

Astroを使ったSSG／SSRによる実践的なサイト制作を完全解説！

近年モバイルファーストやSEOの観点から再び注目されている「静的サイトジェネレータ」（SSG）による静的サイトの制作に適したフレームワーク「Astro」の解説書です。
Astroはビルド時にJavaScriptを最大限除去することで、シンプルで高速な静的Webサイトの生成を可能にしています。また、ReactやVueなどのフレームワークと連携することで、静的Webサイトのビルドツールとしても利用できます。
Astro フロントエンド開発の教科書 ロゴ

更新履歴

  • 正誤訂正：2025年7月3日 更新

目次

  • 第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 フロー

正誤表

該当頁 該当箇所 修正刷
訂正箇所 訂正事項 更新日
p.94 １行目 -
（※コマンドが抜けている） winget install Volta.Volta 2025/07/03

FAQ

現在、FAQはありません。

お問い合わせ

書籍に関するご質問や誤りのご報告、ご意見・ご感想などをお寄せください。

Powered by メールフォーム 『オレンジフォーム』