sdenv（読み方: えすでぃーえんぶ）は、ウェブサイト（not ウェブアプリケーション）のためのフロントエンド開発スターターキットです。モダンなプラクティスを取り入れながらも、より多くのウェブサイト開発者に向けたHTML中心の開発環境を構成しています。
Note
「ウェブサイト vs. ウェブアプリケーション」の二分法には反論があります。「The Website vs. Web App Dichotomy Doesn't Exist」では、ウェブサイトを分類するための観点に加えて、開発技術の適用範囲についても言及されています。
次のツールを採用しています:
- Astro: ウェブサイト構築のためのフレームワーク
- Tailwind CSS: ユーティリティファーストCSSフレームワーク
- Alpine.js: HTMLに直接振る舞いを記述できるようにするJavaScriptフレームワーク
加えて、これらを快適に使用できるように、ESLint、Prettier、VSCodeの設定が組み込まれています。
sdenvは、これらのツールの使い方を理解していることを前提に構成されています。理解が不十分な点があれば、それぞれの公式ドキュメントなどを参照してください。
またsdenvのアプローチは、次のようなコンセプトにも関係しています:
- HTML First: HTML中心のシームレスな開発プロセスを実現するためのガイドライン
- htmx: サーバーとのインタラクションをHTML属性として記述できるようにするライブラリ
- The AHA Stack: Astro、htmx、Alpine.jsを組み合わせてウェブアプリケーションを構築するためのガイド
セットアップ:
npm ciローカルサーバーの起動:
npm run dev本番用ビルド:
npm run build自動テスト:
npm run testソースコードの静的検証:
npm run lintソースコードの自動修正:
npm run fix.
├── public/ # ビルドによって加工されないアセット
├── src/ # サイトのソースコード
│ ├── assets/ # ビルドによって加工されるアセット
│ ├── components/ # Astroコンポーネント
│ ├── content/ # Astroのコンテンツコレクション
│ ├── icons/ # astro-iconから参照されるSVGファイル
│ ├── layouts/ # ページの構造を規定するAstroコンポーネント
│ ├── pages/ # ページのためのAstroコンポーネント
│ ├── scripts/ # クライアントサイドで利用されるスクリプト
│ └── styles/ # Tailwind CSSによって読み込まれるCSSファイル
├── astro.config.ts # Astroの設定
├── package.json # 依存パッケージを管理するための設定
├── postcss.config.js # PostCSSの設定
├── tailwind.config.js # Tailwind CSSの設定
└── tsconfig.json # TypeScriptの設定
詳しくは、Astro公式ドキュメントの「Project Structure」も参照してください。また、大規模なプロジェクトにおいては、Feature-Sliced Designの採用も検討してください。