web-development

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>

コンポーネント

• 既成のコンポーネント（ナビゲーションバー、カード、モーダル）を使用します
• ユーティリティクラスでカスタマイズします
• アクセシビリティ属性を確保します
• レスポンシブな動作をテストします

カスタマイズ

// 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 開発

基本概念

• AJAX リクエストには hx-get、hx-post を使用します
• hx-target と hx-swap で DOM を更新します
• hx-trigger でイベントをトリガーします
• インジケーターで読み込み状態を処理します

基本的な使い方

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


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

トリガー

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


<div hx-get="/initial-data" hx-trigger="load"></div>


<div hx-get="/more" hx-trigger="intersect once"></div>

スワップオプション

<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 サイトマップを作成します
• ページ速度を最適化します