Course curriculum

    1. 本講座で学べること

    2. 本講座の完成品デモ

    3. 完成品のソースコード

    4. Astroって何？他のフレームワークの違いは？

    1. Astroフレームワークの雛形を作成してみよう

    2. Astro専用のエディタ拡張機能をインストールしておこう

    3. Aboutページを作成してみよう

    4. ナビゲーションリンクとBlogページを作成してみよう

    5. マークダウン形式でブログ記事を書いてみよう

    6. 投稿したブログ記事へのリンクを追加してさらにブログを書いてみよう

    7. Astroのフロントマター(frontmatter)について学んでみよう

    8. もっとJavascriptを記述してみてフロントマターの練習をしてみよう

    9. ページ固有のスタイリングCSSを適用させてみよう

    10. CSS変数を使ってスタイリングしてみよう

    11. ページ全体のCSSを変更するためにglobal.cssを追加しよう

    12. Astroでファイル保存時に自動整形できるように変更しよう

    1. ナビゲーションコンポーネントを作成してみよう

    2. フッターコンポーネントを作成してみよう

    3. ソーシャルメディアコンポーネントを作成してみよう

    4. フッターに対してCSSを追加して装飾しよう

    5. ヘッダーコンポーネント作成してみよう

    6. レスポンシブ対応させるためにCSSを追加しよう

    7. ハンバーガーメニューコンポーネントを作成してみよう

    8. scriptタグを書いてハンバーガーメニューとして機能させよう

    9. ブラウザで動くJavascriptファイルは別ファイルに定義しておこう

    10. 初めての共通レイアウトコンポーネントを作成しよう

    11. About/Blogページも同様にBaseLayoutコンポーネントを使って置き換えよう

    12. ページ固有の値をレイアウトコンポーネントにpropsで渡してみよう

    13. マークダウン専用レイアウトコンポーネントを作成しよう

    14. 共通レイアウトを2重に利用してみよう

    1. Astro.glob()を利用して記事を動的に表示しよう

    2. ブログ投稿用コンポーネントを作成しよう

    3. 動的ルーティングとgetStaticPathsを利用して個別タグページを作成しよう

    4. getStaticPathsからタグの値を取得して表示してみよう

    5. 動的ルートでpropsを使用してみよう

    6. タグワードでブログ記事をフィルタリングしてみよう

    7. 投稿済みのブログから重複しないタグのみの配列を抽出しよう

    8. 動的にparamsとpropsが設定されるように修正しよう

    9. タグのインデックスページを作成してみよう

    10. 各ブログ記事の下部に使用しているタグ一覧を表示してみよう

    1. Astroアイランドとは何か？

    2. PreactをアイランドとしてAstroに導入してみよう

    3. インタラクションな機能の実装とclientディレクティブ設定をしてみよう

    1. Astroコンテンツコレクションとは何か？

    2. tsconfig.tsファイルでTypescript設定を追加してみよう

    3. コレクションスキーマの定義をしてみよう

    4. コレクションからブログ記事ページを生成しよう

    5. MarkdownPostLayoutの共通レイアウトを使って修正しよう

    6. getCollection()を使ってエラーページを解消してみよう

About this course

  • 24,900円
  • 57回のレッスン
  • 3.5時間の動画コンテンツ

Discover your potential, starting today