JavaScriptで最初のAstroを動かす

用意する知識は小さく

HTMLでは見出し・リンク・ボタン・フォーム、CSSでは余白・レイアウト・画面幅への対応を押さえます。JavaScriptはconst、関数、配列、オブジェクト、map、import/exportが入口です。非同期の取得にはasync/awaitを使います。型注釈を先に覚える必要はありません。

CLIで最小構成をつくる

公式のcreate astroで空のプロジェクトを作り、案内に従って依存関係をインストールします。確認時の公式要件はNode.js 22.12.0以上で、奇数メジャー版は対象外です。実際には採用するAstro版の要件を確認し、対応するLTSを選びます。生成されたtsconfig.jsonは補完などに使われる設定で、JavaScript教材でも残します。

ファイルの置き場所

src/pagesはURLになるページ、src/componentsは再利用する部品です。src/layoutsは共通の外枠を置く慣習的な場所。publicはfaviconやPDFなど、原則そのまま配信したいファイルに使います。秘密の値や公開したくないファイルはpublicへ置きません。

• astro.config.mjs：Astroの設定
• package.json：コマンドと依存関係
• dist：ビルド後の出力。通常は直接編集しない

開発サーバーと公開物を分ける

npm run devは編集しながら確認するためのサーバー。npm run buildは公開する出力を作り、npm run previewはビルド済みの結果をローカルで確認するために使います。devだけ成功しても本番で成功するとは限りません。実際の公開方法は12で確認します。

新規作成から起動まで

npm create astro@latest
# 保存先を astro-practice とし、最小のテンプレートを選ぶ
cd astro-practice
# 作成時に依存関係を入れなかった場合だけ実行
npm install
npm run dev

新しい練習用フォルダーで実行します。既存プロジェクトを上書きしません。表示されたローカルURLをブラウザーで開きます。

一覧づくりに使うJavaScript

const notes = [
  { title: '港の散歩', published: true },
  { title: '下書き', published: false },
];
const titles = notes
  .filter((note) => note.published)
  .map((note) => note.title);
console.log(titles); // ['港の散歩']

Astroに依存しない練習です。ブラウザーのコンソールでも試せます。