WINGS(Www INtegrated Guide on Server-architecture)
Www INtegrated Guide on Server-architecture :
   ホーム お問い合わせ サーバーサイド環境構築設定 つぶやき ブックマーク レンタルサーバー 総合FAQ/訂正&ダウンロード このエントリーをはてなブックマークに追加        
  • 刊行書籍情報  [書籍マップ
  • オンライン公開 技術記事
  • シリーズ別書籍リスト
  • 「WINGS News」登録/解除
  • WINGSプロジェクト紹介
  • WINGSプロジェクトメンバ募集





【カテゴリ】 JavaScript


速習 Astro  

速習 Astro

山田祥寛/著
WINGSプロジェクト/発行
定価 700円
Kindle版・ 261ページ・ 4色
発刊日: 2024年8月08日

[Amazon.co.jpからオンライン購入する]

   FAQ 本書訂正 アンケート ダウンロード

本書の特徴

サクッと学べる。初級者のための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 個々の記事を表示

本ページへのリンクには、このロゴをご利用ください。


著作権情報個人情報保護について広告掲載についてRSSフィードについて
出版社の方々へ会社概要スタッフ紹介サイトマップ  
書籍/記事に関するご質問/お問い合わせは「WINGSお問い合わせフォーム」をご利用ください。
Copyright(c) 1998-2024,Yamada Yoshihiro.  All Right Reserved.