【初心者向け】プログラミングの「レイヤー」概念理解

みなさん、プログラミングを学んでいて「レイヤー」や「階層化」という言葉を聞いたことはありませんか？

レイヤー（層）の概念は、プログラミングの世界では非常に重要な考え方です。大きなシステムを作る時、すべてのコードを1つのファイルに書くのではなく、役割ごとに分けて整理することで、理解しやすく、保守しやすいプログラムを作ることができます。

この記事では、プログラミング初心者の方でも理解できるように、レイヤーの概念から実際の応用例まで、身近な例を使って丁寧に解説していきます。

レイヤー（層）とは

レイヤーとは、システムを機能や役割によって階層的に分割する設計手法のことです。

簡単に言うと、「複雑なものを、わかりやすく整理整頓する方法」です。

各レイヤーは特定の責任を持ち、上位のレイヤーは下位のレイヤーのサービスを利用しますが、その逆はありません。この一方向の依存関係により、システム全体の構造が明確になります。

身近な例で理解する

会社組織の例

会社の組織構造もレイヤー化されています。

経営陣 ← 戦略・方針決定 ↓ 管理職 ← 計画・調整 ↓ 一般職員 ← 実際の業務実行 ↓ アルバイト ← 基本作業

各層には明確な役割があり、上の層は下の層のサービスを利用します。

建物の例

建物も階層的に設計されています。

屋上 ← 設備・メンテナンス ↓ 上階 ← 居住・オフィス空間 ↓ 1階 ← エントランス・受付 ↓ 地下 ← 駐車場・設備 ↓ 基礎 ← 建物全体を支える

各階には異なる目的があり、下の階がしっかりしていないと上の階は成り立ちません。

プログラミングでのレイヤー

プログラミングでも同様に、システムを役割ごとに分けて整理します。

基本的な3層構造

プレゼンテーション層 ← ユーザーとの接触面 ↓ ビジネスロジック層 ← 業務ルール・計算 ↓ データアクセス層 ← データの保存・取得

なぜレイヤー化が重要なのか

理解しやすさの向上

複雑さの分割

大きな問題を小さな問題に分けることで、理解しやすくなります。

レイヤー化なしの例

// ❌ すべてが混在して複雑
function handleUserLogin() {
    // HTML要素の取得
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;
    
    // バリデーション
    if (!email.includes('@')) {
        alert('無効なメール');
        return;
    }
    
    // パスワード暗号化
    const hashedPassword = btoa(password);
    
    // データベース接続
    const connection = new Database('localhost:5432');
    
    // SQL実行
    const result = connection.query(
        `SELECT * FROM users WHERE email='${email}' AND password='${hashedPassword}'`
    );
    
    // レスポンス処理
    if (result.length > 0) {
        localStorage.setItem('user', JSON.stringify(result[0]));
        window.location.href = '/dashboard';
    } else {
        alert('ログイン失敗');
    }
}

レイヤー化された例

// ✅ 役割ごとに分離
// プレゼンテーション層
class LoginView {
    getCredentials() {
        return {
            email: document.getElementById('email').value,
            password: document.getElementById('password').value
        };
    }
    
    showError(message) {
        alert(message);
    }
    
    redirectToDashboard() {
        window.location.href = '/dashboard';
    }
}

// ビジネスロジック層
class AuthService {
    constructor(userRepository) {
        this.userRepository = userRepository;
    }
    
    async login(email, password) {
        // バリデーション
        if (!this.isValidEmail(email)) {
            throw new Error('無効なメールアドレス');
        }
        
        // 認証処理
        const user = await this.userRepository.findByEmailAndPassword(email, password);
        if (!user) {
            throw new Error('認証に失敗しました');
        }
        
        return user;
    }
    
    isValidEmail(email) {
        return email.includes('@');
    }
}

// データアクセス層
class UserRepository {
    async findByEmailAndPassword(email, password) {
        const hashedPassword = btoa(password);
        const connection = new Database('localhost:5432');
        
        return await connection.query(
            'SELECT * FROM users WHERE email = ? AND password = ?',
            [email, hashedPassword]
        );
    }
}

関心の分離

各レイヤーが異なる関心事を扱うことで、コードが整理されます。

各レイヤーの関心事

• プレゼンテーション層：ユーザーインターフェース
• ビジネスロジック層：業務ルール・計算
• データアクセス層：データの永続化

保守性の向上

変更の影響範囲を限定

1つのレイヤーの変更が他のレイヤーに影響しにくくなります。

例：データベースの変更

// データアクセス層のみ変更すれば済む
class UserRepository {
    // MySQL から PostgreSQL への変更
    async findByEmailAndPassword(email, password) {
        // 変更前：MySQL接続
        // const connection = new MySQL('localhost:3306');
        
        // 変更後：PostgreSQL接続
        const connection = new PostgreSQL('localhost:5432');
        
        return await connection.query(
            'SELECT * FROM users WHERE email = $1 AND password = $2',
            [email, hashedPassword]
        );
    }
}

// ビジネスロジック層とプレゼンテーション層は変更不要

テストの容易さ

各レイヤーを独立してテストできます。

// ビジネスロジック層のテスト
describe('AuthService', () => {
    test('有効なメールアドレスを検証する', () => {
        const authService = new AuthService(mockUserRepository);
        
        expect(authService.isValidEmail('test@example.com')).toBe(true);
        expect(authService.isValidEmail('invalid-email')).toBe(false);
    });
});

// データアクセス層のテスト（モック使用）
describe('UserRepository', () => {
    test('ユーザーを正しく検索する', async () => {
        const mockDatabase = new MockDatabase();
        const userRepository = new UserRepository(mockDatabase);
        
        const user = await userRepository.findByEmailAndPassword(
            'test@example.com', 
            'password123'
        );
        
        expect(user).toBeDefined();
        expect(user.email).toBe('test@example.com');
    });
});

再利用性の向上

共通の機能を別のプロジェクトでも使いまわせます。

// データアクセス層は他のプロジェクトでも利用可能
class UserRepository {
    async findByEmail(email) {
        // このメソッドは他のプロジェクトでも使える
    }
    
    async create(user) {
        // ユーザー作成機能も再利用可能
    }
}

// ビジネスロジック層も独立して再利用可能
class AuthService {
    validateEmail(email) {
        // バリデーション機能は他でも使える
    }
}

一般的なレイヤー構造

3層アーキテクチャ

最も基本的なレイヤー構造です。

プレゼンテーション層（UI層）

ユーザーとの接触面を担当します。

責任

• ユーザー入力の受け取り
• 結果の表示
• 画面遷移の制御

技術例

• HTML/CSS/JavaScript
• React、Vue.js、Angular
• モバイルアプリのUI

実装例

class ProductListView {
    constructor(productService) {
        this.productService = productService;
    }
    
    async displayProducts() {
        try {
            const products = await this.productService.getAllProducts();
            this.renderProducts(products);
        } catch (error) {
            this.showError('商品の取得に失敗しました');
        }
    }
    
    renderProducts(products) {
        const container = document.getElementById('product-list');
        container.innerHTML = products.map(product => `
            <div class="product">
                <h3>${product.name}</h3>
                <p>価格: ${product.price}円</p>
            </div>
        `).join('');
    }
    
    showError(message) {
        document.getElementById('error-message').textContent = message;
    }
}

ビジネスロジック層（サービス層）

業務ルールや計算処理を担当します。

責任

• 業務ルールの実装
• データの加工・計算
• 他のサービスとの連携

実装例

class ProductService {
    constructor(productRepository, discountService) {
        this.productRepository = productRepository;
        this.discountService = discountService;
    }
    
    async getAllProducts() {
        const products = await this.productRepository.findAll();
        
        // 業務ルール：割引価格の計算
        return products.map(product => ({
            ...product,
            discountedPrice: this.discountService.calculateDiscount(product)
        }));
    }
    
    async createProduct(productData) {
        // 業務ルール：商品名の重複チェック
        const existingProduct = await this.productRepository.findByName(productData.name);
        if (existingProduct) {
            throw new Error('商品名が重複しています');
        }
        
        // 業務ルール：価格の妥当性チェック
        if (productData.price <= 0) {
            throw new Error('価格は0より大きい値である必要があります');
        }
        
        return await this.productRepository.create(productData);
    }
}

class DiscountService {
    calculateDiscount(product) {
        // 業務ルール：1万円以上で10%割引
        if (product.price >= 10000) {
            return product.price * 0.9;
        }
        return product.price;
    }
}

データアクセス層（リポジトリ層）

データの永続化を担当します。

責任

• データベースとの接続
• CRUD操作の実装
• データの変換

実装例

class ProductRepository {
    constructor(database) {
        this.database = database;
    }
    
    async findAll() {
        const query = 'SELECT * FROM products WHERE deleted_at IS NULL';
        const results = await this.database.query(query);
        
        return results.map(row => this.mapToProduct(row));
    }
    
    async findByName(name) {
        const query = 'SELECT * FROM products WHERE name = ? AND deleted_at IS NULL';
        const results = await this.database.query(query, [name]);
        
        return results.length > 0 ? this.mapToProduct(results[0]) : null;
    }
    
    async create(productData) {
        const query = `
            INSERT INTO products (name, price, description, created_at)
            VALUES (?, ?, ?, NOW())
        `;
        
        const result = await this.database.query(query, [
            productData.name,
            productData.price,
            productData.description
        ]);
        
        return await this.findById(result.insertId);
    }
    
    mapToProduct(row) {
        return {
            id: row.id,
            name: row.name,
            price: row.price,
            description: row.description,
            createdAt: row.created_at
        };
    }
}

より詳細な層構造

大規模なアプリケーションでは、さらに細かく分けることもあります。

コントローラー層

プレゼンテーション層とビジネスロジック層の間に位置します。

class ProductController {
    constructor(productService) {
        this.productService = productService;
    }
    
    async getProducts(request, response) {
        try {
            const products = await this.productService.getAllProducts();
            response.json({ success: true, data: products });
        } catch (error) {
            response.status(500).json({ 
                success: false, 
                message: error.message 
            });
        }
    }
    
    async createProduct(request, response) {
        try {
            const productData = request.body;
            const product = await this.productService.createProduct(productData);
            response.status(201).json({ success: true, data: product });
        } catch (error) {
            response.status(400).json({ 
                success: false, 
                message: error.message 
            });
        }
    }
}

ドメイン層

ビジネスの核となるルールやエンティティを管理します。

class Product {
    constructor(id, name, price, description) {
        this.id = id;
        this.name = name;
        this.price = price;
        this.description = description;
    }
    
    // ドメインルール：商品の有効性チェック
    isValid() {
        return this.name && 
               this.name.length > 0 && 
               this.price > 0;
    }
    
    // ドメインルール：割引適用
    applyDiscount(discountRate) {
        if (discountRate < 0 || discountRate > 1) {
            throw new Error('割引率は0-1の範囲である必要があります');
        }
        
        return new Product(
            this.id,
            this.name,
            this.price * (1 - discountRate),
            this.description
        );
    }
    
    // ドメインルール：税込価格計算
    getPriceWithTax(taxRate = 0.1) {
        return Math.floor(this.price * (1 + taxRate));
    }
}

実際のプロジェクト例

シンプルなToDoアプリ

レイヤー化されたToDoアプリケーションの例を見てみましょう。

ディレクトリ構造

todo-app/ ├── presentation/ # プレゼンテーション層 │ ├── views/ │ └── controllers/ ├── business/ # ビジネスロジック層 │ └── services/ ├── data/ # データアクセス層 │ └── repositories/ └── domain/ # ドメイン層 └── models/

ドメイン層

// domain/models/Todo.js
class Todo {
    constructor(id, title, description, completed = false, createdAt = new Date()) {
        this.id = id;
        this.title = title;
        this.description = description;
        this.completed = completed;
        this.createdAt = createdAt;
    }
    
    // ドメインルール
    isValid() {
        return this.title && this.title.trim().length > 0;
    }
    
    complete() {
        return new Todo(
            this.id,
            this.title,
            this.description,
            true,
            this.createdAt
        );
    }
    
    isOverdue(dueDays = 7) {
        const daysDiff = (new Date() - this.createdAt) / (1000 * 60 * 60 * 24);
        return !this.completed && daysDiff > dueDays;
    }
}

データアクセス層

// data/repositories/TodoRepository.js
class TodoRepository {
    constructor() {
        this.todos = []; // 簡単のため配列で管理
        this.nextId = 1;
    }
    
    async findAll() {
        return [...this.todos];
    }
    
    async findById(id) {
        return this.todos.find(todo => todo.id === id);
    }
    
    async create(todoData) {
        const todo = new Todo(
            this.nextId++,
            todoData.title,
            todoData.description
        );
        
        this.todos.push(todo);
        return todo;
    }
    
    async update(id, updates) {
        const index = this.todos.findIndex(todo => todo.id === id);
        if (index === -1) {
            throw new Error('Todo not found');
        }
        
        this.todos[index] = { ...this.todos[index], ...updates };
        return this.todos[index];
    }
    
    async delete(id) {
        const index = this.todos.findIndex(todo => todo.id === id);
        if (index === -1) {
            throw new Error('Todo not found');
        }
        
        this.todos.splice(index, 1);
        return true;
    }
}

ビジネスロジック層

// business/services/TodoService.js
class TodoService {
    constructor(todoRepository) {
        this.todoRepository = todoRepository;
    }
    
    async getAllTodos() {
        return await this.todoRepository.findAll();
    }
    
    async getCompletedTodos() {
        const todos = await this.todoRepository.findAll();
        return todos.filter(todo => todo.completed);
    }
    
    async getPendingTodos() {
        const todos = await this.todoRepository.findAll();
        return todos.filter(todo => !todo.completed);
    }
    
    async createTodo(todoData) {
        // バリデーション
        if (!todoData.title || todoData.title.trim().length === 0) {
            throw new Error('タイトルは必須です');
        }
        
        if (todoData.title.length > 100) {
            throw new Error('タイトルは100文字以下である必要があります');
        }
        
        return await this.todoRepository.create(todoData);
    }
    
    async completeTodo(id) {
        const todo = await this.todoRepository.findById(id);
        if (!todo) {
            throw new Error('Todoが見つかりません');
        }
        
        if (todo.completed) {
            throw new Error('このTodoは既に完了しています');
        }
        
        return await this.todoRepository.update(id, { completed: true });
    }
    
    async getOverdueTodos() {
        const todos = await this.todoRepository.findAll();
        return todos.filter(todo => todo.isOverdue());
    }
}

プレゼンテーション層

// presentation/views/TodoView.js
class TodoView {
    constructor(todoService) {
        this.todoService = todoService;
        this.setupEventListeners();
    }
    
    setupEventListeners() {
        document.getElementById('add-todo-btn').addEventListener('click', () => {
            this.handleAddTodo();
        });
        
        document.getElementById('show-all-btn').addEventListener('click', () => {
            this.displayAllTodos();
        });
        
        document.getElementById('show-pending-btn').addEventListener('click', () => {
            this.displayPendingTodos();
        });
    }
    
    async handleAddTodo() {
        const title = document.getElementById('todo-title').value;
        const description = document.getElementById('todo-description').value;
        
        try {
            await this.todoService.createTodo({ title, description });
            this.clearForm();
            this.displayAllTodos();
            this.showMessage('Todoを追加しました', 'success');
        } catch (error) {
            this.showMessage(error.message, 'error');
        }
    }
    
    async displayAllTodos() {
        try {
            const todos = await this.todoService.getAllTodos();
            this.renderTodos(todos, 'すべてのTodo');
        } catch (error) {
            this.showMessage('Todoの取得に失敗しました', 'error');
        }
    }
    
    async displayPendingTodos() {
        try {
            const todos = await this.todoService.getPendingTodos();
            this.renderTodos(todos, '未完了のTodo');
        } catch (error) {
            this.showMessage('Todoの取得に失敗しました', 'error');
        }
    }
    
    renderTodos(todos, title) {
        const container = document.getElementById('todo-list');
        
        container.innerHTML = `
            <h2>${title}</h2>
            ${todos.map(todo => `
                <div class="todo-item ${todo.completed ? 'completed' : ''}">
                    <h3>${todo.title}</h3>
                    <p>${todo.description}</p>
                    <small>作成日: ${todo.createdAt.toLocaleDateString()}</small>
                    ${!todo.completed ? `
                        <button onclick="todoView.completeTodo(${todo.id})">
                            完了
                        </button>
                    ` : ''}
                </div>
            `).join('')}
        `;
    }
    
    async completeTodo(id) {
        try {
            await this.todoService.completeTodo(id);
            this.displayAllTodos();
            this.showMessage('Todoを完了しました', 'success');
        } catch (error) {
            this.showMessage(error.message, 'error');
        }
    }
    
    clearForm() {
        document.getElementById('todo-title').value = '';
        document.getElementById('todo-description').value = '';
    }
    
    showMessage(message, type) {
        const messageEl = document.getElementById('message');
        messageEl.textContent = message;
        messageEl.className = `message ${type}`;
        
        setTimeout(() => {
            messageEl.textContent = '';
            messageEl.className = 'message';
        }, 3000);
    }
}

レイヤー設計のベストプラクティス

依存関係の管理

依存性の注入

各レイヤーが他のレイヤーに直接依存しないよう、依存性を注入します。

// ❌ 直接依存（悪い例）
class TodoService {
    constructor() {
        this.todoRepository = new TodoRepository(); // 直接依存
    }
}

// ✅ 依存性注入（良い例）
class TodoService {
    constructor(todoRepository) {
        this.todoRepository = todoRepository; // 注入された依存性
    }
}

// 使用側
const todoRepository = new TodoRepository();
const todoService = new TodoService(todoRepository);

インターフェースの活用

抽象的なインターフェースを定義して、実装の詳細を隠蔽します。

// インターフェース（契約）の定義
class ITodoRepository {
    async findAll() {
        throw new Error('Must implement findAll method');
    }
    
    async create(todoData) {
        throw new Error('Must implement create method');
    }
    
    async update(id, updates) {
        throw new Error('Must implement update method');
    }
}

// 具体的な実装
class DatabaseTodoRepository extends ITodoRepository {
    async findAll() {
        // データベースから取得
    }
}

class MemoryTodoRepository extends ITodoRepository {
    async findAll() {
        // メモリから取得
    }
}

エラーハンドリング

各レイヤーで適切なエラーハンドリングを行います。

// データアクセス層：技術的エラー
class TodoRepository {
    async findAll() {
        try {
            return await this.database.query('SELECT * FROM todos');
        } catch (error) {
            throw new DatabaseError('データベース接続エラー', error);
        }
    }
}

// ビジネスロジック層：業務エラー
class TodoService {
    async createTodo(todoData) {
        if (!todoData.title) {
            throw new ValidationError('タイトルは必須です');
        }
        
        try {
            return await this.todoRepository.create(todoData);
        } catch (error) {
            if (error instanceof DatabaseError) {
                throw new ServiceError('Todoの作成に失敗しました', error);
            }
            throw error;
        }
    }
}

// プレゼンテーション層：ユーザー向けエラー
class TodoView {
    async handleAddTodo() {
        try {
            await this.todoService.createTodo(todoData);
        } catch (error) {
            if (error instanceof ValidationError) {
                this.showValidationError(error.message);
            } else if (error instanceof ServiceError) {
                this.showSystemError('システムエラーが発生しました');
            } else {
                this.showUnknownError('予期しないエラーが発生しました');
            }
        }
    }
}

学習の進め方

段階的な理解

ステップ1：小さなプロジェクトから

最初は簡単な3層構造から始めましょう。

練習プロジェクト例

• 計算機アプリ
• メモ帳アプリ
• 簡単なゲーム

ステップ2：責任の分離を意識

各層の責任を明確に分けることを意識します。

チェックポイント

• UIロジックとビジネスロジックが混在していないか？
• データアクセスロジックがサービス層に漏れていないか？
• 各層が単一の責任を持っているか？

ステップ3：より複雑な構造への挑戦

慣れてきたら、より詳細な層構造に挑戦します。

学習対象

• MVC（Model-View-Controller）
• MVP（Model-View-Presenter）
• MVVM（Model-View-ViewModel）
• クリーンアーキテクチャ

実践的な練習

リファクタリング演習

既存のコードをレイヤー化してみましょう。

// 練習：この1つの関数をレイヤー化してみてください
function handleUserRegistration() {
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;
    
    if (!name || !email || !password) {
        alert('すべての項目を入力してください');
        return;
    }
    
    if (!email.includes('@')) {
        alert('有効なメールアドレスを入力してください');
        return;
    }
    
    const users = JSON.parse(localStorage.getItem('users') || '[]');
    
    if (users.find(user => user.email === email)) {
        alert('このメールアドレスは既に登録されています');
        return;
    }
    
    const newUser = {
        id: Date.now(),
        name: name,
        email: email,
        password: password,
        createdAt: new Date()
    };
    
    users.push(newUser);
    localStorage.setItem('users', JSON.stringify(users));
    
    alert('登録が完了しました');
    window.location.href = '/dashboard';
}

まとめ

レイヤー（層）の概念は、プログラミングにおいて非常に重要な設計手法です。

レイヤー化のメリット

• 理解しやすさの向上
• 保守性の向上
• テストの容易さ
• 再利用性の向上

基本的な3層構造

• プレゼンテーション層：ユーザーインターフェース
• ビジネスロジック層：業務ルール・計算
• データアクセス層：データの永続化

実践のポイント

• 各層の責任を明確に分ける
• 上位層から下位層への一方向依存
• 依存性の注入を活用
• 適切なエラーハンドリング

最初は難しく感じるかもしれませんが、小さなプロジェクトから始めて徐々に慣れていくことで、必ず身につけることができます。

レイヤー化の考え方を理解することで、より整理された、保守しやすいプログラムを書くことができるようになります。

まずは簡単なアプリケーションで3層構造を意識してコードを書いてみませんか？

継続的な実践により、良い設計ができるプログラマーを目指していきましょう！