書籍詳細（速習 Astro）

速習 Astro 書影

速習 Astro

山田祥寛 著

著者山田祥寛
出版社WINGSプロジェクト
価格500円（税込）
判形Kindle版・4色
ページ数261ページ
発売日2024年8月8日
シリーズ 速習（QUICK MASTER - WINGS）
対象レベル初級
Amazonで購入
B!

サクッと学べる。初級者のためのAstro解説書。

本書は、JavaScriptライブラリであるAstroの使い方を9つのPartに分けて、サンプルコードとともに詳しく解説しています。導入からAstroの構成要素、データベース連携、コンテンツの効率的な管理までをサクッと短時間で習得していただくことを目的としています。
本書掲載のサンプルは、サポートページからダウンロード可能です。どんどん動かして試してみてください。
速習 Astro ロゴ

更新履歴

更新情報はありません。

目次

  • 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 個々の記事を表示

正誤表

現在、正誤情報はありません。

FAQ

現在、FAQはありません。

お問い合わせ

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

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