Astroの環境構築をするために

プログラミングを習得しようと思い立った時、まず壁として立ち塞がってくるのが環境構築である。「コードを書きたい」と思ったとしても、そもそもそのコードを打ち込むための準備が必要という単純な話であるが、この準備で何人が心砕けたことか。

しかしAstroに限って言えばコマンドだけで環境構築は完結している。Astroの公式ドキュメントも充実しているため、比較的導入が容易なフレームワークかと思う。どこぞの個人ブログを読むよりも、公式ドキュメントを見ることをオススメしたい。

とはいえ公式ドキュメント含め、ITについてある程度は知識がある前提で説明がなされていることは否めない。筆者もエンジニアの端くれ、過去にした環境構築の経験を踏まえて実施したため、正直、公式ドキュメントはあまり読んでいなかったりする。

本記事を書くに当たり、ちゃんと公式ドキュメントの手順書を読み込んだ。エンジニアとして、そこそこの歴があるため内容の理解にはあまり苦労はしなかった。しかし本当にそうなのだろうか。どうやらCLIウィザードによる環境構築と、手動セットアップの2つの方法があるらしいことは分かった。

Astroで初めて環境構築をしますよ、という方にこれらのことが理解できるのだろうか？　本記事では公式の環境構築を深掘りすることで、「環境構築」の手順を理解することを目標としたい。

Astro環境構築の2つの方法（CLI・手動）を徹底比較

冒頭でも書いたように、Astroの環境構築をするためには下記の2つの方法がある。それぞれを深掘りしていきたい。

• CLIウィザードによる環境構築
• 手動セットアップ

CLIウィザードによる環境構築

CLIウィザードについて端的に説明すると、「コマンドライン上で質問に答えていくことで目的が達成されるツール」である。つまり、Astroフレームワークを導入する上で「何を導入できるのか？」といった疑問を抱えたまま、ただ一つのコマンドを叩き、その後の質問に答えていくだけで望んだ状態でフレームワークを導入できる。初心者は勿論のこと、上級者に至るまでゼロからフレームワークを手軽に導入することが可能だ。

そんな魔法のようなたった一つのコマンドが下記である。

npm create astro@latest

コマンドを実行した際に表示される対話型の質問は以下の5つ。これらの質問に回答することで、期待するプロジェクトの状態に持って行くことができるのだ。

1. Where should we create your new project? (または Where would you like to create your new project?)
   • 内容: プロジェクトを作成するディレクトリ（フォルダ名）を指定します。
   • 入力例: ./my-astro-site や ./tutorial などを入力します。
2. How would you like to start your new project? (または How would you like to setup your new project?)
   • 内容: プロジェクトのテンプレート（初期状態）を選択します。
   • 選択肢:
     • Include sample files (推奨: サンプルファイルを含むベストプラクティス構成)
     • Use blog template (ブログ用のテンプレート)
     • Empty (空のプロジェクト) など
3. Install dependencies? (または Would you like to install npm dependencies?)
   • 内容: 必要なパッケージ（依存関係）を自動でインストールするかどうかを聞かれます。
   • 選択肢: Yes / No
4. Initialize a new git repository? (または Would you like to initialize a new git repository?)
   • 内容: Gitリポジトリを新しく初期化するかどうかを聞かれます。
   • 選択肢: Yes / No
5. How would you like to setup TypeScript?
   • 内容: TypeScriptの設定の厳密さ（型チェックのレベル）を選択します。
   • 選択肢:
     • Strict (厳格)
     • Strictest (最も厳格)
     • Relaxed (緩め)

手動セットアップ

すでに稼働しているReact、Vue、または素のHTML/JSで作られたWebサイトやアプリのディレクトリ内に、後からAstroを相乗りさせたい場合、CLIウィザードは使えない。先ほどの説明に書いた質問の一つ目、プロジェクトを作成するディレクトリを指定する必要があるように、新規のプロジェクト立ち上げのために用意された方法だからだ。つまり既存の環境や設定ファイルを壊さないためには「手動セットアップ」が必須になる。

相乗りさせたい場合、これをあまり想像できないかもしれないが、既存はReactなどで作成していたウェブサイトに、ブログを新設しようとした場合、表示速度やコンテンツ管理において有利となるAstroで ブログだけ 作るといったケースが考えられ、そういった使い方には「手動セットアップ」するしかない。

公式ドキュメントの手順を抜き出してみると下記の通り。Astroで作ったページを見てみたいという場合、最短で手順3まで進めた時点でビルドして実行すれば確認可能となっている。残りの4以降は、ページに機能であったり、実際にサーバーにあげて公開しようとした場合に必要になってくる。

1. ディレクトリを作成する: mkdir でフォルダ作成、npm init -y で package.json を生成。
2. Astroをインストールする: npm install astro を実行し、package.json の編集。
3. 最初のページを作成する
4. 最初の静的アセットを作成する: /publicフォルダを作成し、robots.txtなどを追加。
5. astro.config.mjsを作成する: Reactなどの別フレームワークを導入する場合必須。
6. TypeScriptサポートを追加する: tsconfig.jsonを作成して、TypeScriptを導入する。
7. .gitignoreを作成する（任意）: Gitで管理する場合、依存関係などをコミットされないようにする。

また、手順2でのpackage.json編集では、ビルドする場合のコマンドに関わってきたり、手順5でのフレームワーク導入は、CLIウィザードでプロジェクト生成したとしても編集することになる。自分はCLIウィザードを使うから関係ないという話ではなく、自分にも関わってくるかもしれないという視点は大切にしよう。

まとめ

Astroの環境構築における2つの方法について、その手順と裏側の仕組みを深掘りしてきた。最後に、それぞれの方法がどんな人・どんなケースに向いているのかを端的に整理しておく。

構築方法	難易度	こんなケースに最適	具体的なメリット
CLIウィザード	簡単	Astroを初めて触る 新規プロジェクトを立ち上げる	コマンド1つと質問に答えるだけで、ベストプラクティスな環境が即座に完成する。
手動セットアップ	中級～	既存のReact等のプロジェクトにAstroを相乗り（一部導入）させたい	既存の環境や設定を壊さず、必要なパッケージだけをカスタマイズして導入できる。

環境構築はプログラミングにおける最初の壁だが、Astroのそれは非常に洗練されており、開発者体験（DX）が驚くほど高い。本記事で「環境構築で何が行われているか」を理解できたなら、あとは実際にコードを書いてAstroの快適さを存分に味わってほしい。