sdenv（読み方: えすでぃーえんぶ）は、ウェブアプリケーションではないウェブサイトを開発するためのベストプラクティスに基づいて構成されたフロントエンド開発環境です。やりすぎずちょうどいい使い勝手の実現を念頭に置いて設計されている、より多くのウェブサイト開発者のためのスターターキットです。
次のツールを採用しています:
- Astro: ウェブサイト構築のためのフレームワーク
- Tailwind CSS: ユーティリティファーストCSSフレームワーク
- Alpine.js: HTML上に直接振る舞いを記述できるJavaScriptフレームワーク
sdenvを利用する際には、これらのツールの使い方を理解している必要があります。理解が不十分な点があれば、それぞれの公式ドキュメントなどを参照してください。
加えて、これらのツールを快適に使用できるように、ESLint、Prettier、VSCodeの設定が組み込まれています。
依存パッケージのインストール:
npm ciローカルサーバーの起動:
npm run dev本番用ビルド:
npm run build自動テスト:
npm testソースコードの静的検証:
npm run lintソースコードの静的検証および自動修正:
npm run lint:fix.
├── @types/ # 依存パッケージ用の型定義
├── public/ # ビルドによって加工されないアセット
├── src/ # メインのソースコード
│ ├── components/ # Astroコンポーネント
│ ├── content/ # Astroのコンテンツコレクション
│ ├── layouts/ # ページの構造を規定するAstroコンポーネント
│ ├── pages/ # ページと対応するAstroコンポーネント
│ ├── scripts/ # クライアントサイドで利用されるスクリプト
│ └── styles/ # Tailwind CSSで読み込まれるCSSファイル
├── astro.config.ts # Astroの設定
├── package.json # 依存パッケージを管理するための設定
├── tailwind.config.cjs # Tailwind CSSの設定
└── tsconfig.json # TypeScriptの設定
詳しくは、Astro公式ドキュメントの「Project Structure」も参照してください。