CodeGrid 12th Event Site

今すぐ始めるAstro入門

全12回

AstroはWebフレームワークのひとつで、Next.jsやGatsbyのようななどと伍する機能を持ち、独自の設計思想があります。Astroによる開発の基礎を解説します。

最終回 Content Collectionsを使う

Astro 2.0から新しく追加された機能、Content Collectionsを使って詳細ページを作成してみましょう。Content Collectionsは型定義ができるため、受け取るコンテンツの型を管理することができます。

第11回 Markdownファイルの扱い方

Markdownファイルを元にページを生成する方法を解説します。特定のテンプレートに流し込んだり、ファイルの内容を抽出したり、柔軟に扱うことができます。

第10回 外部データからページを生成する

外部のJSONファイルやAPIからデータを取得し、データをもとに動的にタイトル名のHTMLファイルを生成する方法を解説します。Astroのファイルルーティングの基礎知識も押さえましょう。

第9回 Astroで非同期処理を扱う

既存のAPIからデータを非同期で取得し、ページとして表示するサイトをつくります。Astroでの非同期データの扱いは使いやすくさまざまな工夫がされていますが、その取り回しの基礎を一通り解説します。

第8回 Astroで定義した変数をCSSで使う

Astroで定義した変数は、さまざまなコンポーネントのCSSプロパティの値として使用できます。スタイリングの共通化を図る方法のひとつとして解説します。

第7回 Tailwind CSSを利用したスタイリング

今回はTailwind CSSを用いたスタイリングを紹介します。Tailwind CSSを用いると、Astroコンポーネント、UIフレームワーク関係なく共通のクラスを使用できるメリットがあります。

第6回 UIフレームワークでのスタイリング

AstroでUIフレームワークを使用した場合のスタイリングについて解説します。今回は公式ドキュメントにもある標準的な方法として、CSS Modulesの使用、外部CSSのインポートやgooberというライブラリを紹介します。

第5回 AstroファイルでのCSSの書き方

AstroファイルにおけるCSSの書き方にはいくつかの方法があります。この記事ではCSSを適用させたい箇所を、個別コンポーネントだけの場合とサイト全体の場合の2つのスコープに分けて、CSSの記述方法を解説します。

第4回 クライアントサイドでJavaScriptを動作させる

Preactで実装したハンバーガーメニューをクライアントサイドで動作するように、JavaScriptの読み込み指定を行います。このような読み込みの制御ができるのがAstroの特徴のひとつです。

第3回 UIコンポーネントの導入と実装

ユーザーによって開閉可能な、JavaScriptを必要とするインタラクティブなハンバーガーメニューをPreactで実装します。Preactの導入から、コンポーネントの実装までをやってみましょう。

第2回 Astroコンポーネントの実装

Astroでの開発の基礎として、Astroコンポーネントの実装を解説します。基本は素のHTMLとCSSのような書き味で実装を進めることができます。

第1回 Astroの特徴

AstroはWebフレームワークのひとつです。Next.jsやGatsbyなどと伍する機能をもち、独自の設計思想があります。今回はAstroの特徴の紹介と、大まかな開発手順を体験してもらうことを目的としています。