| 
 
 
 
 
 | 
	
		【カテゴリ】 JavaScript
	
	
	
	 
 
	
		
			速習 Astro  
			
 
|  | 
		山田祥寛/著
		WINGSプロジェクト/発行
 定価
		500円
 Kindle版・
		261ページ・
		4色
 発刊日:
		2024年8月08日
 
 ![[Amazon.co.jpからオンライン購入する]](https://wings.msn.to/image/buy.gif)  |  
	 
 
	本書の特徴
	 
 
	サクッと学べる。初級者のためのAstro解説書。本書は、JavaScriptライブラリであるAstroの使い方を9つのPartに分けて、サンプルコードとともに詳しく解説しています。導入からAstroの構成要素、データベース連携、コンテンツの効率的な管理までをサクッと短時間で習得していただくことを目的としています。本書掲載のサンプルは、サポートページからダウンロード可能です。どんどん動かして試してみてください。
 
 
	
	| Contents |  
	| 
		
 
	Part 1:イントロダクション
	 1.1 WebアプリとWebサイト1.1.1 Astroの得意分野はWebサイト開発
 1.2 ページ開発を効率化するためのフレームワーク「Astro」
 1.2.1 コンポーネントによる解決
 1.2.2 React/Vue.jsとの違い
 1.2.3 Astroの5つの特長
 
Part 2:Astroの基本
	 2.1 Astro開発の準備2.1.1 Node.jsのインストール
 2.1.2 VSCodeのインストール
 2.2 基本的なアプリの作成
 2.2.1 補足:npm startコマンド
 2.2.2 補足:Astro Dev Toolbar
 2.3 サンプルアプリの内容を読み解く
 2.3.1 コンポーネント(狭義)
 2.3.2 レイアウト
 2.3.3 ページ
 2.4 以降の学習を進めるにあたって
 2.4.1 ダウンロードサンプルの利用方法
 2.4.2 ダウンロードサンプルでの注意点
 
Part 3:コンポーネントの基本
	 3.1 {…}式3.1.1 コメント構文
 3.1.2 エスケープ処理を解除する
 3.1.3 {…}式を無効化する
 3.2 条件分岐と繰り返し処理
 3.2.1 繰り返し(ループ)
 3.2.2 条件分岐
 3.3 スロット
 3.3.1 スロットの基本
 3.3.2 名前付きスロット
 3.3.3 フォールバックコンテンツ
 3.3.4 入れ子のスロット
 
Part 4:スタイルとクライアントスクリプト
	 4.1 スタイルシート4.1.1 外部スタイルのインポート
 4.1.2 class:list/define:vars属性
 4.1.3 スコープ付きスタイルの意味
 4.1.4 Tailwind CSSの導入
 4.2 クライアントスクリプト
 4.2.1 <script>要素
 4.2.2 <script>要素の処理方法
 4.2.3 is:inline属性によるインライン化
 4.2.4 外部スクリプトの読み込み
 4.2.5 Reactとの連携
 
Part 5:ルーティング
	 5.1 ファイルベースルーティング5.1.1 リンクの生成
 5.1.2 プリフェッチの設定
 5.2 動的ルーティング
 5.2.1 動的ルーティングの基本
 5.2.2 複数のルートパラメーター
 5.2.3 異なる深さのパスにマッチするパラメーターを設置する
 5.2.4 補足:ルートの優先順位
 5.2.5 リダイレクト
 5.3 ページネーション
 5.3.1 ページネーションの基本
 5.3.2 ページャーの実装
 
Part 6:組み込みコンポーネント
	 6.1 画像を最適化する - Imageコンポーネント6.1.1 注意:リモート画像を利用する場合
 6.2 デバイスに応じて最適な画像を選択する - Imageコンポーネント(2)
 6.2.1 デバイスの解像度に応じて画像を切り替える
 6.2.2 表示幅に応じて画像を切り替える
 6.3 ページ遷移にアニメーション効果を付与する - ViewTransitionsコンポーネント
 6.3.1 View Transitionsの基本
 6.3.2 組み込みエフェクトの適用 - transition:animate属性
 6.3.3 同一要素を特定する - transition:name属性
 6.3.4 要素の状態を維持したい - transition:persist属性
 6.4 ソースコードをハイライト表示する - Codeコンポーネント
 6.5 オブジェクトの値を簡単に確認する - Debugコンポーネント
 
Part 7:データベース連携
	 7.1 Prismaの準備7.1.1 Prismaのインストール
 7.1.2 Prismaの設定
 7.1.3 データモデルの定義
 7.1.4 データベースの作成
 7.1.5 テストデータの準備
 7.2 アプリからPrismaへのアクセス
 7.2.1 データの取得
 7.3 オンデマンドレンダリング
 7.3.1 オンデマンドレンダリングの準備
 7.3.2 SSR対応のページを作成する
 7.3.3 データベースへの登録
 
Part 8:さまざまなコンテンツ形式
	 8.1 Markdown形式8.1.1 Markdownページの基本
 8.1.2 レイアウトの適用
 8.1.3 Contentコンポーネント
 8.2 MDX形式
 8.2.1 MDX拡張の導入
 8.2.2 MDXの基本
 8.3 エンドポイント(.ts/.js形式)
 8.3.1 エンドポイントの基本
 8.3.2 オンデマンドレンダリングの例
 
Part 9:コンテンツコレクション
	 9.1 コンテンツコレクションの準備9.1.1 コンテンツの作成
 9.1.2 スキーマ情報の定義
 9.2 コンテンツコレクションの取得
 9.2.1 記事リストの作成
 9.2.2 個々の記事を表示
 
 |  
	
		  |