SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Astroで始める静的サイト作成入門

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

 本連載は、Web制作者である筆者が、Astro(アストロ)というフレームワークに出会って、爆速静的サイト構築に向けて歩き出すまでの物語です。第2回では、Astro開発環境の構築と、.astro拡張子のファイルを用いたコーディングの基本を解説していきます。

  • X ポスト
  • このエントリーをはてなブックマークに追加

開発環境構築の準備

 多くのフレームワークやライブラリがそうであるように、Node.js(ブラウザ上で動作するJavaScriptを、パソコン上で実行できる環境を作る仕組み)を使って開発環境を構築します。

 Web開発者にとってはお馴染みの流れなので、勝手知ったる方は「Astroのインストール」の章にお進みください。

 初めて開発環境を構築するという方は、以下の流れで、まずAstroをインストールできる環境を構築してください。

  1. Node.jsの公式サイトから推奨版のNode.jsをダウンロードしてインストールします。
  2. ターミナル、いわゆる黒い画面を開き、Astroの開発環境を展開する場所に移動します。
cd <開発環境を展開する場所までのパスを指定>

#例
cd /Users/user/develop

Astroのインストール

 次に、ターミナルで以下のコマンドを入力することで、インストールウィザードを使ってAstroの新規プロジェクトをセットアップすることができます。

npm create astro@latest

 インストールウィザードでは、いくつかの質問に沿ってセットアップが進んでいくので、以下を参考に選択・入力してください。

  1. Where should we create your new project?

 Astroの開発ファイル一式を展開するフォルダー名を入力します。 お好きな名前でよいですが、ここでは便宜上「astro-test」と入力します。

2. How would you like to start your new project?
  • Include sample files (recommended)
  • Use blog template
  • Empty

 どのように開発ファイルを展開するのか? サンプルファイルやブログ用のテンプレートを使うかどうかの選択肢です。カーソルキーの上下で「Empty」を選択して、エンターを入力します。

3. Install dependencies?

  • Yes
  • No

 開発に必要なパッケージのインストールまで行うかどうかの選択肢です。 カーソルキーの左右で「Yes」を選択して、エンターを入力します。

4. Do you plan to write TypeScript?

  • Yes
  • No

 TypeScriptを使うかどうかの選択肢です。 お好みで選択して、エンターを入力します。よくわからなければ、「No」で問題ありません。

5. Initialize a new git repository?

  • Yes
  • No
 Gitレポジトリとして初期化するかどうかの選択肢です。 お好みで選択して、エンターを入力します。よくわからなければ、「No」で問題ありません。
Astroのインストールウィザード
Astroのインストールウィザード

 すべてのステップを入力することで、問題なければ、生成されたフォルダーの中に、以下のように関連ファイルが展開されているかと思います。

 Astroセットアップ後のファイル構造

Astroセットアップ後のファイル構造(フォルダー名を「astro-test」にした場合)

 これらのファイル/フォルダーは、大きく分けて以下のような役割を持っています。

  • public/* 特別な処理なくそのまま書き出されるアセット群
  • src/* Astroによって最適化・バンドル化されるファイル群
  • src/pages/* 静的HTMLページとして書き出されるソースコード
  • src/env.d.ts Astroが内包するViteのクライアント型定義ファイル
  • astro.config.mjs Astroの設定ファイル
  • tsconfig.json TypeScriptの設定ファイル

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
コーディングエディタの準備

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Astroで始める静的サイト作成入門連載記事一覧

もっと読む

この記事の著者

池原健治(イケハラ ケンジ)

 ゲーム会社のUXデザイナー。デザイン、プロトタイピング、コーディングなどを担当する他、SNSでの情報発信や、登壇活動など、幅広く活動している。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/18075 2023/09/13 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング