|
【カテゴリ】 JavaScript
速習 Astro
|
山田祥寛/著
WINGSプロジェクト/発行
定価
700円
Kindle版・
261ページ・
4色
発刊日:
2024年8月08日
|
本書の特徴
サクッと学べる。初級者のための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 個々の記事を表示
|
|