「Astro」で爆速Web開発をはじめよう！ インストールから環境構築までを解説

コーディングエディタの準備

　コーディングに関しては、Astroコンポーネントと呼ばれる、Astro独自の.astro拡張子のファイルに対応したエディタを使う必要があるため、本連載では、Microsoftの提供するVisual Studio Code（以下、VSCode）を使用して解説していきます。VSCodeのインストール方法や基本的な使い方は、CodeZineにVSCode入門連載がございますので、ご参照ください。

　その他、.astroに対応したエディタとしては、JetBrainsのWebStormなどもあります。ご自身の環境に応じて適宜使い分けてください。

　また、VSCodeで、.astroに対応するため、以下のプラグインを事前にインストールしておきましょう。

• Astro

Astroの開発サーバーを起動する

　VSCodeで、先ほどAstroをセットアップしたフォルダーを開きます。

　すでにAstroを起動できる環境になっていますが、その前にastro.config.mjsを開き、サーバーオプションの記述を追加しておきます。

import { defineConfig } from 'astro/config';

// <https://astro.build/config>
export default defineConfig({
  // 追加ここから
  server: {
    host: true,
    open: true
  },
  // 追加ここまで
});

　この記述を追加することで、Astroを実行したときにブラウザが自動でサーバーを開いてくれるようになります。

　また、VSCodeのエクスプローラーから「NPMスクリプト」を表示させておくと、package.jsonに記述されたscriptsを簡単に実行することができます。

　例えば、ターミナルで

npm run dev

のコマンドを実行するのと、NPMスクリプトから「dev」の横にあるアイコンをクリックするのとは、同じastro devという「Astroの開発サーバーを起動する」命令になります。

NPMスクリプトから、package.jsonの"astro dev"を実行する

　astro devを実行すると、自動的にブラウザが立ち上がり、開発サーバーが開きます。

Astroの開発サーバー

　この段階では、Astroという見出しのみのページが表示されるかと思います。

　以降、開発サーバーを起動したままで、サンプルコーディングを進めていきます。開発サーバーでは、コーディングにより追加・修正した箇所がブラウザを更新しなくても自動的に同期され、すぐに確認することができるため、効率的なコーディングを行うことができます。