概要

本書は，近年モバイルファーストやSEOの観点から再び注目されている「静的サイトジェネレータ」（SSG）による静的サイトの制作に適したフレームワーク「Astro」の解説書です。これまでのJavaScriptフロントエンドフレームワークは，動的サイトの生成（CSR／SSR）を主目的としていましたが，Astroはビルド時にJavaScriptを最大限除去することで，シンプルで高速な静的Webサイトの生成を可能にしています。また，ReactやVueなどのフレームワークと連携することで，静的Webサイトのビルドツールとしても利用できます。本書では，Astroの基本からコンポーネントベースのWebサイト制作の進め方，SSGモードによる静的サイト制作／SSRモードによる動的サイト制作，エンドポイント／アクション／ミドルウェアなどのサーバサイド機能まで，Astroの機能を網羅して解説します。

こんな方におすすめ

• Astroを使った「静的サイトジェネレータ」（SSG）による静的サイトの制作を学びたい人

目次

第1章　Astroを初体験

• 1.1　Astroとは
• 1.2　Astroの環境構築
• 1.3　Astroプロジェクトの作成と実行
• 1.4　本書で必要なTypeScript文法

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

• 2.1　Astroのコンポーネントと基本構文
• 2.2　Astroコンポーネントでの変数の表示
• 2.3　Astroコンポーネントでの制御構文

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

• 3.1　コンポーネントの埋め込み
• 3.2　コンポーネントのProps
• 3.3　子コンポーネントをカスタマイズするSlot

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

• 4.1　ルーティングとルートパラメータ
• 4.2　レイアウト機能
• 4.3　ページネーション

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

• 5.1　コンポーネントベースのWebサイト制作ケーススタディの概要
• 5.2　BaseLayoutの作成
• 5.3　TOPページの作成
• 5.4　ニュースページとマークダウンファイル
• 5.5　デプロイの準備

第6章　動的サイトとSSR

• 6.1　ケーススタディの概要と準備
• 6.2　天気情報コンポーネントの追加とSSGの問題点
• 6.3　Astroで動的処理を実現する方法
• 6.4　Astroのアイランド
• 6.5　SSRデプロイ

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

• 7.1　コンテンツコレクション
• 7.2　動的ルートとSSRの組合せ
• 7.3　Storyblokによるコンテンツ管理

第8章　Astroのその他の機能

• 8.1　バックサイドに関する機能
• 8.2　フロントサイドに関する機能

サポート

現在サポート情報はありません。