🚀

Astro4の現状の開発環境を作成してみました。

2024/01/21に公開

JavaScript

はじめに

実務でもAstroを使用する機会があり、開発環境を作成しました。
このフレームワークはぱっと導入できる・参入障壁が低いように個人的に感じています。

開発の効率化や技術に興味がある方は、是非覗いてみてください！

動作環境

node: 18.17.1
npm: 9.6.7

Astro4の使用には、Node.jsのバージョンが18以上である必要がありまあす。

このテンプレートではVoltaで管理しています。
お使いのPCにVoltaがインストールされていれば、npm iの実行のみで問題ないです。
Voltaについても今後ご紹介できればと思っています。

リポジトリ

事前準備

基本的なnpmコマンドを実行してください。

npm i

npm run dev

フォルダ構成

src
|-components
| |-elements
| | |-card
| |-layouts
| | |-article
| | |-footer
| | |-header
|-layouts
|-pages
|-styles

src/components

各コンポーネントを格納します。
layoutsには、headerやfooterなどのレイアウトを作成するコンポーネントを作成します。
基本的にはLayout.astroにimportする前提になります。

それ以外のコンポーネントはelementsに格納します。

プロジェクトが大きくなればお好みでフォルダを増やしても良いかも知れません。

src/layouts

Layout.astroを格納しています。
headerとfooterをcomponentsからimportするようになっています。
mainの中身をslotにしており、pagesフォルダの中の各ファイルの中身を表示します。

src/pages

ここはAstroのデフォルトのままです。

src/styles

このテンプレートではscssを使用しており、global.scssとmixinを設定するファイルを格納しています。
global.scssにはプロジェクト全体への共通のスタイルを追加します。
mixinはastro.config.mjsでプロジェクト全体に読み込んでいます。

import用のパスの設定

全てのファイルで等しい記法でimportするための設定を行なっています。

tsconfig

{
  "compilerOptions": {
    "paths": {
      "@components/*": ["src/components/*"],
      "@layouts/*": ["src/layouts/*"],
      "@styles/*": ["src/styles/*"]
    }
  }
}

上記を設定することで全てのディレクトリのファイル内のimportの記述でパスの先頭を@componentsのように統一できます。

import Header from '@components/layouts/header/Header.astro';

Linter・Formatter

LinterはESLint・FormatterはPrettierを採用しています。
prettier:watchのコマンドを実行することで、ファイル保存時にPrettierが自動で実行されます。