astroを基本から学び、astro-notion-blogを理解したい(その1) ~Visual Studio Codeでの開発環境を構築する~

Astroとは

　Astroの勉強を始める前に、AstroについてCopilotに聞いてみました。

　Astroは、モダンなWebサイトを高速かつ効率的に構築できる次世代のフロントエンドフレームワークです。静的サイト生成（SSG）をベースにしながらも、必要な部分だけを動的にレンダリングする「部分的ハイドレーション（Partial Hydration）」という革新的なアプローチを採用しています。
• 超高速なパフォーマンス：不要なJavaScriptを排除し、必要な部分だけをクライアントに送信。
• フレームワーク非依存：React、Vue、Svelte、Solidなど、複数のUIフレームワークを同時に使える柔軟性。
• コンテンツ重視：MarkdownやMDXとの親和性が高く、ブログやドキュメントサイトに最適。
• 開発体験が快適：ファイルベースのルーティング、統合されたビルドツール、豊富なプラグイン。

　Astroは静的で高速なコンテンツを作成することができ、部分的に異なるフレームワークを埋め込むことができるから、様々なフレームワークの良い取りをして簡単にブロクが作れるよってことだと思う。

　ぼんやりだけどAstroのことが分かったので、次は環境構築を始めてみる。

Astroの環境構築

Astroの公式のトップページに記載のプロジェクト作成コマンドをコピーし、ターミナルでプロジェクトを作成するフォルダに移動して、コマンドを実行する。
Astro
Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between.
https://astro.build
npm create astro@latest

“Where should we create your new project?”と聞かれるので、作成するプロジェクトのディレクトリと名前を入力する。今回は、デフォルト値のままで作成した。デフォルト値はランダムで決まるようで、命名規則のルールが良くわからないが、今回は”celestial-crater”という名前になった。

プロジェクトの初期状態を選択する。今回は勉強のためにemptyで作成した。

“Install dependencies?”と聞かれるので、Yesを選択して依存関係のあるパッケージをインストールする。

“Initialize a new git repository?”と聞かれるので、今回はGitリポジトリは使わないのでNoを選択しプロジェクトが作成される。

サーバー立ち上げ

プロジェクトルートから、下記のコマンドを実行することでローカルサーバーが立ち上がる。

npm run dev

うまく立ち上がると、ターミナルにはローカルサーバのURLが表示されるので、URLをコピーしてブラウザでアクセスすると、初期状態のastroのサイトが確認できる。

┃ Local    http://localhost:4321/
┃ Network  use --host to expose

Astroで開発するため、エディタの設定をしましょう。

https://docs.astro.build

Prettierとプラグインのインストールする。実行するディレクトリはどこでもよい。
```
pm install --save-dev --save-exact prettier prettier-plugin-astro
```
プロジェクトルートに、”.prettierrc”ファイルを作成して、ファイルを開いて次の記述をする。
{ "plugins": ["prettier-plugin-astro"], "overrides": [ { "files": "*.astro", "options": { "parser": "astro", } } ] }
VS Code上では、”:”にエラーが表示されているが、無視して問題なかった。
プロジェクトルートで、コマンドを実行するとコードが整形される。
```
npx prettier . --write
```

毎回、手動でコマンドを実行するのは面倒くさいのでファイル保存時に実行されるようにするため、VS CodeのExtentionsから、”Prettier - code formatter”をインストールする。

VS Codeのsettings.jsonを開き下記設定を追加する。setting.jsonを見つけるのに苦労したが、こちらのサイトで無事見つけることができました。ちなみに、プロジェクトのみにformatterを設定したい場合は、プロジェクトルートに.vscodeフォルダを作成してsetting.jsonファイルを作成すればよい。
【VSCode】settings.json の開き方
このページでは、VSCode（Visual Studio Code）における「settings.json の開き方」について解説していきます。最近この settings.js…
https://daeudaeu.com
```
  "editor.formatOnSave": true,
  "[astro]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
```

まとめ

　VS Codeにastroの開発環境を無事に構築できた。ここから、astroのフォルダ構造や文法の学習を始めていく。astro-notion-blogのカスタマイズまでの道のりはまだまだ遠い。

ふつうのITエンジニアの独り言