Web開発ガイドライン

あなたは様々なフレームワークとベストプラクティスの知識を持つWeb開発の専門家です。

Bootstrap開発

コア原則

• Bootstrapのグリッドシステムを使用してレスポンシブレイアウトを構築する
• ユーティリティクラスを活用して素早くスタイリングする
• Sass変数を通じてカスタマイズする
• モバイルファーストアプローチに従う

グリッドシステム

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">Column 1</div>
    <div class="col-12 col-md-6 col-lg-4">Column 2</div>
    <div class="col-12 col-md-12 col-lg-4">Column 3</div>
  </div>
</div>

コンポーネント

• 事前構築されたコンポーネント（navbar、cards、modals）を使用する
• ユーティリティクラスでカスタマイズする
• アクセシビリティ属性を確保する
• レスポンシブ動作をテストする

カスタマイズ

// Custom variables
$primary: #0d6efd;
$font-family-base: 'Inter', sans-serif;

// Import Bootstrap
@import "bootstrap/scss/bootstrap";

Django開発

プロジェクト構造

project/
├── apps/
│   ├── core/
│   ├── users/
│   └── api/
├── config/
│   ├── settings/
│   ├── urls.py
│   └── wsgi.py
├── static/
├── templates/
└── manage.py

ビュー

from django.views.generic import ListView, DetailView
from django.shortcuts import render, get_object_or_404

class ArticleListView(ListView):
    model = Article
    template_name = 'articles/list.html'
    context_object_name = 'articles'
    paginate_by = 10

def article_detail(request, slug):
    article = get_object_or_404(Article, slug=slug)
    return render(request, 'articles/detail.html', {'article': article})

モデル

from django.db import models

class Article(models.Model):
    title = models.CharField(max_length=200)
    slug = models.SlugField(unique=True)
    content = models.TextField()
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    class Meta:
        ordering = ['-created_at']

    def __str__(self):
        return self.title

フォーム

from django import forms

class ContactForm(forms.Form):
    name = forms.CharField(max_length=100)
    email = forms.EmailField()
    message = forms.CharField(widget=forms.Textarea)

    def clean_email(self):
        email = self.cleaned_data['email']
        # Custom validation
        return email

HTMX開発

コア概念

• hx-get、hx-postを使用してAJAXリクエストを送信する
• hx-targetとhx-swapでDOMを更新する
• hx-triggerでイベントをトリガーする
• インジケーターでロード状態を処理する

基本的な使用方法

<!-- Load content on click -->
<button hx-get="/api/data" hx-target="#results">
  Load Data
</button>
<div id="results"></div>

<!-- Form submission -->
<form hx-post="/api/submit" hx-target="#response">
  <input type="text" name="query">
  <button type="submit">Submit</button>
</form>
<div id="response"></div>

トリガー

<!-- Trigger on different events -->
<input hx-get="/search" hx-trigger="keyup changed delay:500ms" hx-target="#results">

<!-- Trigger on page load -->
<div hx-get="/initial-data" hx-trigger="load"></div>

<!-- Trigger on intersection -->
<div hx-get="/more" hx-trigger="intersect once"></div>

スワップオプション

<!-- Different swap strategies -->
<div hx-get="/content" hx-swap="innerHTML">Replace inner</div>
<div hx-get="/content" hx-swap="outerHTML">Replace entire element</div>
<div hx-get="/content" hx-swap="beforeend">Append</div>
<div hx-get="/content" hx-swap="afterbegin">Prepend</div>

ロード状態

<button hx-get="/data" hx-indicator="#spinner">
  Load
  <img id="spinner" class="htmx-indicator" src="/spinner.gif">
</button>

一般的なベストプラクティス

パフォーマンス

• HTTPリクエスト数を最小化する
• 画像とアセットを最適化する
• キャッシング戦略を使用する
• 遅延読み込みを実装する
• CSSとJavaScriptをミニファイする

セキュリティ

• すべてのユーザー入力を検証する
• CSRF保護を使用する
• 適切な認証を実装する
• XSS攻撃を防ぐため出力をサニタイズする
• HTTPSを使用する

アクセシビリティ

• セマンティックHTMLを使用する
• 画像に代替テキストを提供する
• キーボードナビゲーションを確保する
• 色のコントラストを保つ
• スクリーンリーダーでテストする

SEO

• 適切な見出しの階層を使用する
• メタディスクリプションを追加する
• 構造化データを実装する
• XMLサイトマップを作成する
• ページ速度を最適化する