Skip to content
/ sdenv Public template

ウェブサイト(not ウェブアプリケーション)のためのフロントエンド開発スターターキット

Notifications You must be signed in to change notification settings

yuheiy/sdenv

Repository files navigation

sdenv

sdenv(読み方: えすでぃーえんぶ)は、ウェブサイト(not ウェブアプリケーション)のためのフロントエンド開発スターターキットです。モダンなプラクティスを取り入れながらも、より多くのウェブサイト開発者に向けたHTML中心の開発環境を構成しています。

Note

「ウェブサイト vs. ウェブアプリケーション」の二分法には反論があります。「The Website vs. Web App Dichotomy Doesn't Exist」では、ウェブサイトを分類するための観点に加えて、開発技術の適用範囲についても言及されています。

次のツールを採用しています:

  • Astro: ウェブサイト構築のためのフレームワーク
  • Tailwind CSS: ユーティリティファーストCSSフレームワーク
  • Alpine.js: HTMLに直接振る舞いを記述できるようにするJavaScriptフレームワーク

加えて、これらを快適に使用できるように、ESLintPrettierVSCodeの設定が組み込まれています。

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

About

ウェブサイト(not ウェブアプリケーション)のためのフロントエンド開発スターターキット

Resources

Stars

Watchers

Forks