ホーム>ASPソースコード>その他のカテゴリー
ダウンロード

Understanding Astro


アストロを理解するへようこそ!

この本は、スピードを追求して設計された次世代 Web フレームワークである Astro の究極のガイドです。

Astro を理解するには、何ヶ月もかけて Astro を掘り下げ、その結果を実践的かつわかりやすい方法で伝える必要があります。

Astro を理解したい場合は、適切な情報源にアクセスしてください。

単に別のフレームワークを学ぶだけではありません。理解してください。

電子書籍をダウンロードしたい

目次

以下は、Understanding Astro の詳細な目次です。


導入

導入

  • 不満を言わないでください

  • 公式ドキュメントとの相違点

  • 本の構成

  • 各章の概要

  • 前提条件

  • 印刷上の規則


第 1 章: 最初の Astro アプリケーションを構築する

第 1 章: 最初の Astro アプリケーションを構築する

  • 学べること

  • プロジェクト概要

  • はじめる

    • Node.jsをインストールする

    • コードエディタのセットアップ

  • プロジェクトの構造

    • tsconfig.json

    • パッケージ.json

    • パッケージロック.json

    • astro.config.mjs

    • src/env.d.ts

    • src/pages/index.astro

  • Astro ページの紹介

  • Astro コンポーネントの構造

  • コンポーネントのスタイル

  • ページレイアウト

  • コンポーネントとスロットのレンダリング

  • コンポーネント名を大文字にする

  • グローバルスタイルディレクティブ

  • カスタムフォントとグローバルCSS

  • 独立した Astro コンポーネント

  • インタラクティブスクリプトの追加

  • インタラクティブなテーマの切り替え

  • :global() セレクター

  • イベント処理

  • CSS変数によるテーマ設定

  • グローバルクライアントオブジェクトへのアクセス

  • スクリプトの魔法

  • インラインスクリプトの活用

  • スクリプト内のグローバル セレクター

  • マークダウンページ

  • ページ間の移動

  • マークダウンレイアウト

  • レイアウトの作成

  • コンポーネントの小道具

  • マークダウンのフロントマター プロパティの活用

  • インタラクティブなナビゲーション状態

  • 成分構成

  • テンプレートのデータの流れ

  • 定義:vars の暗い側面

  • 複数のローカルファイルをロードする

  • 静的 Astro サイトのデプロイ

    • 1. 静的な本番アセットを作成する

    • 2. 静的 Web サーバー経由で静的アセットを提供する

    • 手動デプロイの問題

    • 静的 Web サイトの展開を自動化する

  • Astro Web サイトの速度はどれくらいですか?

  • 結論


第 2 章: Astro コンポーネントの詳細

  • 第 2 章: Astro コンポーネントの詳細

  • 学べること

  • 導入

  • アストロのバックボーン

    • Javascript ランタイムの疲労

    • ランタイムの廃止

  • Astro コンポーネントとは何ですか?

    • 1. スタイルはデフォルトでローカルです

    • 2. HTML 要素は常に存在します。

    • 3. スタイルとスクリプトがホイストされる

    • 4. <head> 要素とその子要素はホイストされません。

    • astro コンポーネントは、有効な HTML をレンダリングできる .astro ファイルです。

    • Astro コンポーネントを構成して複雑なページを作成できる

  • Astro コンポーネントは強力なテンプレート構文を活用できます。

    • 変数の消費
    • 動的属性の作成
    • 動的HTML
    • 動的タグ
    • スロットの再訪
    • 完全に JSX ではありません
    • 1. 変数の作成または参照
    • 2. 輸入品の取り扱い
    • 3. データの取得

    • コンポーネントスクリプト

    • コンポーネントテンプレート

  • 結論


第 3 章: 独自のコンポーネント アイランドを構築する

  • 第 3 章: 独自のコンポーネント アイランドを構築する

  • 学べること

  • ここに至るまでの簡単な歴史

    • 部分的な水分補給の利点

    • 部分的な水分補給のデメリット

    • クライアント側のハイドレーションを使用したサーバー側のレンダリングの長所

    • クライアント側のハイドレーションを使用したサーバー側のレンダリングの短所

    • サーバーサイドレンダリングの長所

    • サーバーサイドレンダリングの短所

    • クライアントサイド レンダリング (CSR) の長所

    • クライアントサイドレンダリングの短所

    • すべてが始まる場所

    • クライアントサイド レンダリング (CSR)

    • サーバーサイドレンダリング

    • クライアント側のハイドレーションを使用したサーバー側のレンダリング

    • 勝利のための部分的な水分補給

    • 島の建築はどこから来たのでしょうか？

  • 部分的な水和島アーキテクチャの実装

    • ヴュー

    • プチビュー

    • プリアクト

    • client:idle および client:media 条件のサポート

    • アイドル待ち

    • メディアを待つ

    • 目的

    • インストール

    • API設計

    • はじめる

    • コンテンツテンプレート要素の活用

    • 「client:」属性による遅延ハイドレーションの処理

    • サポートフレームワーク: Vue、Petite-vue、Preact

  • 結論



電子書籍をダウンロードしたいですか?ここをクリック



第 4 章: 独自のコンポーネント アイランドを構築する

  • 第 4 章: 天体構成島の秘密の生活

  • 学べること

  • Astro での島の仕組み

    • バグではありません。それは特徴です。

    • ステップ 1: Astro サイトを構築する

    • ステップ 2: フレームワーク統合をインストールする

    • ステップ 3: コンポーネント フレームワークを作成する

    • ステップ 4: コンポーネント フレームワークをレンダリングする

  • 責任ある水分補給

    • クライアント:ロード

    • クライアント:のみ

    • クライアント:可視

    • クライアント:メディア

    • クライアント:アイドル状態

  • 複数のフレームワークを使用する

    • Vue の賛成票カウンター

    • さまざまなフレームワークコンポーネントのレンダリング

  • コンポーネントアイランド間の共有状態

    • ナノストアの仕組み

    • ナノストアをインストールする

    • 状態値を作成する

    • フレームワークコンポーネントでの状態値の使用

  • 小道具と子をフレームワークコンポーネントに渡す

  • ネストされたフレームワークコンポーネント

  • アストロアイランドの注意点

    • 1. フレームワーク コンポーネントで Astro コンポーネントを使用しないでください。

    • 2. Astro コンポーネントを水和させないでください。

  • なぜ島々なのか？

    • 1. パフォーマンス

    • 2. 責任ある水分補給

    • 3. 並列ロード

  • 結論


ああ、私のリアクト！ (React ドキュメント サイトのクローン)

  • 第5章: ああ、私のリアクト! (React ドキュメント サイトのクローン)

  • 学べること

  • スタータープロジェクトをセットアップする

  • 依存関係のインストール

  • Tailwind を使用して Astro プロジェクトをスタイリングする

    • Tailwind のインストール

    • テイルウィンドはどのように機能しますか?

    • 追い風構成

  • Typescript インポート エイリアス

  • アイランドと同じ場所にあるページコンポーネント

  • 構文の強調表示

    • 長所

    • 短所

    • 長所

    • 短所

    • デフォルトのコードコンポーネント

    • あなたのテーマを持ち込んでください

    • 明るいテーマと暗いテーマの処理

  • コンテンツ コレクションの使用を開始する

    • クイックゾッド

    • .astro フォルダー

    • コンテンツ コレクションはどのような問題を解決しますか?

    • コンテンツコレクションの整理

    • MDX を使用したコンテンツのオーサリング

    • コンテンツコレクションの構成

  • コンテンツ コレクションのクエリとレンダリング

  • 動的ルーティング

    • 1. 名前付きパラメータ

    • 2. 残りのパラメータ

    • 優先順位

  • コンテンツコレクションを含むルートを生成する

    • 各ブログコンテンツのレンダリング

  • MDX コンポーネント

    • カスタマイズされた HTML 要素

    • 内部コンポーネント

    • 外部輸入

    • 自動インポート

  • 統合のスポットライト: Astro SEO

  • Astro のカスタム 404 ページ

  • 結論


第 6 章: Astro のサーバーサイド レンダリング (SSR)

  • 第 6 章: Astro のサーバーサイド レンダリング (SSR)

  • 学べること

  • SSRはいつ必要ですか？

  • SSRを有効にする方法

  • SSR プロジェクトのデプロイ

  • 正しいアダプターを使用してください

  • 静的ページのある SSR

  • リクエストからレスポンスまで

    • リクエストオブジェクト

    • 応答オブジェクト

    • リダイレクト応答

    • Cookieを操作するためのユーティリティ

    • リクエストのIPアドレス

  • 環境変数

    • 環境変数の取得

    • デフォルトの環境変数

    • 環境変数の作成

    • Typescript IntelliSense

  • 動的ルート

    • 1. 名前付きパラメータ

    • 2. 残りのパラメータ

    • 優先順位

  • サーバーエンドポイント

    • サーバーエンドポイントの作成

    • リクエストの詳細

    • 動的APIルート

    • 専用のAPIディレクトリ

    • 他のHTTPメソッドのサポート

  • 小川、ああ小川

    • サーバーストリーミングとは何ですか?

    • なぜわざわざする必要があるのでしょうか？

    • ストリーミングは簡単だけど難しい

    • Astro でのサーバー ストリーミング

    • ストリーミングを活用する

  • 結論


第 7 章: 聞こえるようにしましょう! (フルスタックアストロプロジェクト)

第 7 章: 聞こえるようにしましょう! (フルスタックアストロプロジェクト)

  • 学べること

  • プロジェクトのセットアップ

  • プロジェクト概要

    • ホームページ

    • 記録ページ

    • サインアップページ

    • サインインページ

    • ヘルパーコンポーネントとユーティリティ

  • テクノロジーの選択肢

  • バックエンドのセットアップ

  • 認証の処理

    • クライアントで Firebase を初期化する

    • Firebase エミュレータの使用

    • ユーザーサインアップの処理

    • ユーザーサインインの処理

  • 保護されたページの実装

    • サーバー上で Firebase を初期化する

    • ホームページのルートを保護する

    • リダイレクトURLの更新

    • 保護されたページからユーザーをログアウトする

  • クラウドストレージの設定

  • 音声録音のアップロード

    • API ルートを介したアップロードの処理

    • クライアントからの録音のアップロード

    • フレームワークコンポーネントの UI 変更への対応

  • サーバーからデータを取得する

  • HTMLフォームの送信

  • 結論


第 1 章: 最初の Astro アプリケーションを構築する

  • 第 8 章: 独自の Astro 統合を構築する

  • 学べること

  • アストロとヴィート

  • Astro 統合とは何ですか

  • こんにちは世界。申し訳ありません、こんにちは、統合

    • プロジェクトの目的

    • 初めてのカスタム統合

    • サーバーコンソールへのメッセージの出力

    • ファクトリー機能としてのカスタム統合

  • Astro フックのライフサイクル

    • フックがいつ、そしてなぜ使用されるのか

    • フックの評価順序を調べる

  • デフォルトのプリレンダー統合を構築する

    • プロジェクトの目的

    • 統合API

    • 技術的ソリューションの概要

    • CLI フラグによるプロジェクトの初期化

    • 統合のセットアップ

    • 解決された Astro 構成の検証

    • カスタム統合での Vite プラグインの適用

    • Astro 用の Vite プラグインの作成

    • AST の解析と変換

    • 手動テスト

  • レンダラとライブラリの統合の構築

  • 結論


結論

結論



電子書籍をダウンロードしたいですか?ここをクリック


ライセンス

このプロジェクトは、クリエイティブ コモンズ 表示 - 非営利 - 改変禁止 4.0 国際ライセンスに基づいてライセンスされています。詳細については、LICENSE.md ファイルを参照してください。

拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて