JINMUSOFTWARE

JINMUSOFTWARE

Astro開発

公開日: / 最終更新日: / カテゴリ: Astro / 投稿者: matsuda
Astro Logo

Astroという単語はいろいろなシーンで使われているようですね。

我々の領域では、”Astro js”、 “Astro web”、 “Astro build”、 “Astro 開発” と検索すると辿り着けます。

このページはAstro開発の最初のStepを調査した記事です。

Asstro　公式サイト

Astro.build

結論

Astroの初心者スタートの結論は公式チュートリアルです。そこで学習を開始しましょう。

インタラクティブに学習を体験でき、学習の区切りがよく、自分のテンポで学べます。最終的にNetlifyにデプロイまで学べます。

Tutorial: Build a Blog – astro docs　最高のチュートリアルです。

このページではサクッとAstroを紹介する

公式に最高のチュートリアルがあるのでここではHelloWorldまでを簡単に紹介します。

あればうれしい基礎知識

以下の知識が少々必要ですね。

  • HTML, CSS
  • 何かのフレームワークの経験

開発環境

  • Windows11
  • Node.js v20.15.1 (Astroは v18.14.1 以上が必要です）
  • VSCode
  • VSCode拡張機能 Astro v2.12.8 by astro.build

Astro開発の最初の手順

HelloWorldまであっというまです。

プロジェクト作成

最寄りの作業ディレクトリに移動して以下コマンド実行

npm create astro@latest

いくつかの質問に答えます。

今回は簡単にHelloWorldまでの道のりですので以下のような選択で良いでしょう。

  • プロジェクト名の入力　…その名のディレクトリが作成されます。
  • テンプレートの選択　…Emptyを選択しましょう。
  • TypeScriptの選択　…No
  • 依存関係インストールの選択　…Yes
  • Git使用の確認　…No

プロジェクトの実行

カレントディレクトリをプロジェクトディレクトリに移動してください。

そして、npmコマンド実行してください。プロジェクトが起動します。

npm run dev

出力メッセージに注目してください。案内があります。

http://localhost:4321　にアクセスしてみましょう。

どうです？　上手くいきました？　”Astro”と表示されるだけですけどね。

停止方法です。

Ctrl + C

最初のファイル

VSCodeを立ち上げましょう。

先ほど、プロジェクトを停止した場合は、VSCodeのターミナルを起動して（Ctrl + @）、Astroプロジェクトを起動（npm run dev）しておきましょう。

ブラウザでAstroの画面を表示しておきましょう（http://localhost:4321/）

エントリーポイントは、./src/pages/index.astro ファイルです。

では、index.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>Astro</h1>
</body>
</html>

h1タグの下にpタグでHelloWorldと入力してみましょう。

<h1>Astro</h1>
<p>Hello World</p>

ファイルを編集して保存した瞬間にブラウザの表示が変わります。

編集結果がすぐに反映されるので開発が捗りますね！

最初のHelloWorldでした。

Astroファイルとは

Astroではページ表示用として、いくつかのファイルを扱えます。

  • Astroファイル（.astro）
  • Markdownファイル（.md）
  • mdxファイル（.mdx）

先ほどの編集したファイルは、Astroファイル（.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>Astro</h1>
    <p>Hello World</p>
  </body>
</html>

Astroファイル（.astro）は、ファイル先頭部分のフロントマターとHTML部分の2部構成です。

ファイルの先頭部分に注目してください。

“—” これは、コードフェンスと呼びます。

コードフェンスで囲まれる部分を、フロントマターと呼びます。

フロントマターには、JavaScriptやTypeScriptを記述することができます。主にデータの用意を記述することになると思います。

フロントマター以降にはHTMLを記述します。

HTML部分では変数を展開できます。<head>部に{Astro.generator} と記述がありますね。

変数を扱う

では、Astroファイルのフロントマターで変数を準備して、HTML部分で変数を展開して表示してみましょう。

フロントマター部分で変数定義します。

---
const message = "Hello Astro!";
---

最後のp要素の下で変数を展開してみましょう。

<h1>Astro</h1>
<p>Hello World</p>
<p>{message}</p>

編集を保存すると以下のように表示されます。

ビルドする

開発モードはわかりました。最寄りのレンタルサーバに設置するためにビルドしたファイルが欲しいですね。

一度、開発モードを停止しましょう。（Ctrl + C）

そして、ビルドしましょう。

npm run build

ビルドされたプロジェクトを確認するコマンドもあります。previewです。

npm run preview

ブラウザで確認してみましょう。

同じように表示されましたね。

ビルドファイルの確認

先ほど、npm run preview でビルド結果を確認しましたが、別途サーバで確認してみたくなりますよね。

ここでは、VSCode拡張機能の「Live Server by Ritwick Dey」で確認してみましょう。

もし、開発モード（npm run dev）やPreview中（npm run preview）であれば停止（Ctrl + C）してください。

さて、ビルドされたファイルはどこでしょうか？

そうです、”dist”ディレクトリが生成されていますね。

この”dist”ディレクトリからVSCodeを開いてください。

VSCodeのステータスバーに”Go Live”がありますね？起動しましょう。

ブラウザが勝手に起動してページを確認できます。（http://127.0.0.1:5500/）

どうです？うまくいきました？表示されましたね！

ちなみにindex.htmlを覗いてみると圧縮されていることがわかります。

Link集

Astro　公式です

Astro Docs　公式です。見やすいですね。ここにチュートリアルもありますよ。

astro.new　AstroのSampleを確認できます。

~ おわり ~