tech-craft

Astroに乗り換えてみる

以前はgulpやwebpackでEJS、SCSS、JSのコンパイルを行っていましたが、比較的簡単に環境構築ができるAstroに乗り換えることにしました。いくつかの記事に分けてAstroの構築方法を紹介します。Astroとは何かという説明は他の記事に譲るとして、ここでは割愛します。

インストール

Astroを使用するにはNode.jsが必要です。Node.jsをインストールしたら、以下のコマンドでAstroをインストールできます。

npmの場合:

npm create astro@latest

yarnの場合:

yarn create astro

プロジェクト名を入力するよう求められるので、例えばastro-demoと入力し、使用するテンプレートを選択します。ここではEmptyを選択して最低限の構成で作成します。次にTypeScriptを使用するか、Gitで管理するかの確認が表示されますので、お好みで選択してください。下では両方をyesで構成しています。

そうすると以下のようなファイル構成ができあがります。

これでAstroでの環境構築ができました。

開発サーバーの立ち上げ

Astroで開発する場合は、以下のコマンドを使用して開発サーバを起動します。

yarn dev

npmでAstroをインストールした場合は、以下のように入力してください。

npm run dev

実機で確認する場合は、package.jsonに以下を追加してください。

"scripts": {
	"dev": "astro dev --host",
	...
}

package.json

devに--hostを追加することでLocalの下にNetworkのURLが追加で表示されるので、ご自身のスマホにそのURLを入力することで実機確認ができます。

このような画面が表示されればOKです。

拡張機能について

VS codeを使用されている方はAstroという拡張機能があるので、これを入れておきましょう。マークアップ時にハイライトがききます。

ページの編集

この画面表示はsrc/pages/index.astroの内容が表示されていますので、ここを編集することで表示が変わります。試しにh1要素をAstro demoに変更し、その下にp要素で「Astroのデモページです。」という内容を追加してみます。

<h1>Astro demo<h1>
<p>Astroのデモページです。</p>

index.html

画面を保存すると以下のような表示に変更されます。

ページを追加する場合はsrc/pagesの中にファイルを作成してください。例えば、about.astroというページを以下の内容で作成します。

---
---

<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="viewport" content="width=device-width" />
		<meta name="generator" content={Astro.generator} />
		<title>Astro</title>
	</head>
	<body>
		<h1>About</h1>
		<p>Aboutのページです。</p>
	</body>
</html>

about.astro

URLの最後に/aboutを追加するとそのページにアクセスできます。このように複数のページを追加する場合はpagesの配下にファイルを追加してください。

ビルド

ビルドはターミナルでyarn buildを実行すればpublicフォルダにhtmlファイルなどが生成されます。

$ yarn build
yarn run v1.22.19
warning package.json: No license field
warning ..\..\..\..\package.json: No license field
$ astro build
(node:32700) ExperimentalWarning: stream/web is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
07:48:17 [content] No content directory found. Skipping type generation.
07:48:17 [build] output target: static
07:48:17 [build] Collecting build info...
07:48:17 [build] Completed in 83ms.
07:48:17 [build] Building static entrypoints...
07:48:19 [build] Completed in 2.41s.

 generating static routes 
▶ src/pages/index.astro
  └─ /index.html (+6ms)
Completed in 15ms.

まとめ

これで環境の構築までが完了しました。
次からはAstroの機能をいろいろと使って構築を進めていきたいと思います。

🚀Astroの構築方法（初期の構築）

Astroに乗り換えてみる

インストール

開発サーバーの立ち上げ

拡張機能について

ページの編集

ビルド

まとめ