今すぐ始めるAstro入門
- カテゴリー
- Jamstack >
- 静的サイトジェネレーター
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の特徴の紹介と、大まかな開発手順を体験してもらうことを目的としています。