【Astro入門】爆速で動くWebサイトが作れるAstroを使ってブログ構築しながら学ぶAstroマスター講座

Description

AstroはReactやNext.jsに代わる革新的なWeb開発フレームワークです。この講座では、まずAstroの概要とその使い方、実装方法を学びます。基礎を固めた後、コンポーネントの最適化やSSGを通じてAstroの高度な活用方法についてハンズオン形式で深く掘り下げていきます。

これからプロジェクトでAstroを使う方々の入門として最適な内容となっています。最終的にはCloudflare Pagesへデプロイしてブログ運用のやり方までレクチャーします。

※本講座はAstro公式のチュートリアルに沿った内容となっています。すでにチュートリアルを行った方には学習の効果が薄くなる可能性がございますのでご了承ください。

■ 本コースの対象者

・Astroが右も左も分からない方

・これから現場でAstroを使用する予定（または使用している）がある方

・ReactやNext.jsに代わるモダンなフレームワークAstroの導入方法が分からない方

・プロジェクト内でのWebサイト構築やパフォーマンス最適化にお困りの方

・高速なWeb開発とSSGの利点を生かしたい方

・モダンな技術をキャッチアップしてみたい方

・etc...

■ 本コースを受講する際の注意点

・HTML/CSS/JavaScriptの基本的な文法とルールは教えていません。

・Reactの基礎知識は知っている前提でお話を進めております(コンポーネントやJSX記法等)。

・ある程度Javascriptを触ったことがある人だとスムーズに受講できると思います。

What You Will Learn!

• Astroフレームワークの基礎的な開発手法が学べる
• Astroで高速で動くブログサイトが作れるようになる
• Astroで動的ルーティングが実装できる
• マークダウン形式でブログを投稿して公開できるようになる
• Astroにおけるフロントマターの意味と使い方が理解できる
• AstroにおけるスタリングCSSの扱い方が理解できる
• AstroとPrettierを組み合わせて保存時に自動フォーマットできる方法が分かる
• AstroUIコンポーネントの作成と設計が学べる
• レスポンシブ対応したヘッダーが作れるようになる
• ハンバーガーメニューを作りインタラクティブ操作ができるようになる
• ページ共通のレイアウト作成して実装する方法が分かる
• マークダウン形式でブログ投稿＆記事専用レイアウトの作成ができる
• 共通レイアウトの入れ子構造の実装ができる
• Astro APIを利用してデータ一括取得やタグ取得ができる
• 動的ルーティングとgetStaticPathsを利用してSSGが実現できる
• 重複タグ多重配列から重複しない1つの配列へ抽出する実装ができる
• タグのインデクスページが作成できる
• タグ付きのブログ投稿ができるようになる
• Astroアイランドアーキテクチャについて理解できる
• Preactを利用してAstroでUIコンポーネントの導入ができる
• クライアントディレクティブ設定でJSのハイドレーションタイミングを操れる
• Astroのコンテンツコレクションの理解と実装ができる
• コレクションスキーマの定義ができる
• View Transitionを使ってページ遷移時のアニメーションが実装できる
• Cloudflare Pagesを使ってブログサイトのデプロイができる
• wrangler CLIを使ってデプロイ作業を行うことができる
• lighthouseを利用してWebパフォーマンス測定ができる
• Astro公式テンプレートからブログ生成ができるようになる

Who Should Attend!

• Astroを学んでみたい方
• Astroとは何か？どうやってブログやWebサイトを作ればいいのか分からない方
• トレンドのWebフレームワークを学ぶことでフロントエンドのキャッチアップがしたい方
• ただただAstroに興味があって楽しんでプロジェクト開発がしたい方

TAKE THIS COURSE