sdenv

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の採用も検討してください。