コーディングエディタの準備
コーディングに関しては、Astroコンポーネントと呼ばれる、Astro独自の.astro拡張子のファイルに対応したエディタを使う必要があるため、本連載では、Microsoftの提供するVisual Studio Code（以下、VSCode）を使用して解説していきます。VSCodeのインストール方法や基本的な使い方は、CodeZineにVSCode入門連載がございますので、ご参照ください。
その他、.astroに対応したエディタとしては、JetBrainsのWebStormなどもあります。ご自身の環境に応じて適宜使い分けてください。
また、VSCodeで、.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の開発サーバーを起動する」命令になります。
astro devを実行すると、自動的にブラウザが立ち上がり、開発サーバーが開きます。
この段階では、Astroという見出しのみのページが表示されるかと思います。
以降、開発サーバーを起動したままで、サンプルコーディングを進めていきます。開発サーバーでは、コーディングにより追加・修正した箇所がブラウザを更新しなくても自動的に同期され、すぐに確認することができるため、効率的なコーディングを行うことができます。
