技術概要

本システムは、Spring Boot（バックエンド）、Vue.js（フロントエンド）、MyBatis（データアクセス層）を統合して構築されたアパレル商品情報管理システムです。Spring Bootによる簡潔なAPI設計、Vue.jsによるリアクティブなUI、MyBatisによる柔軟なデータベース操作を通じて、効率的かつスケーラブルなアプリケーション構築を実現します。

バックエンド：Spring Boot

Spring Bootは、内蔵Webサーバーと自動構成機能を備えたJavaベースのフレームワークです。これにより、設定の手間を省き、迅速な開発が可能になります。

以下は、Spring Bootの基本的なアプリケーション構成例です：

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@SpringBootApplication
public class AppMain {
    public static void main(String[] args) {
        SpringApplication.run(AppMain.class, args);
    }

    @GetMapping("/api/status")
    public String statusCheck() {
        return "System is running";
    }
}

フロントエンド：Vue.js

Vue.jsは、仮想DOMとリアクティブデータバインディングを活用した軽量で柔軟なJavaScriptフレームワークです。

以下のコードは、Vue.jsによるシンプルなUI操作の例です：

<div id="app">
  <p>{{ message }}</p>
  <button @click="updateMessage">メッセージ更新</button>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: '初期メッセージ'
  },
  methods: {
    updateMessage() {
      this.message = '更新されたメッセージ';
    }
  }
});
</script>

データアクセス層：MyBatis

MyBatisは、SQLとJavaオブジェクトをマッピングする永続化フレームワークです。動的SQLのサポートにより、柔軟なクエリ構築が可能です。

以下は、商品情報を取得するMyBatis Mapperの例です：

public interface ProductMapper {
    @Select("SELECT * FROM product WHERE id = #{id}")
    Product selectById(Long id);

    @Select("SELECT * FROM product")
    List<Product> selectAll();
}

システムテスト

本システムでは、主にブラックボックステストを用いて、主要な機能の動作検証を実施しました。

ログイン機能のテスト

商品管理機能のテスト

商品の追加、編集、削除機能についても同様にテストケースを設計し、検証を行いました。

データベース設計

商品情報を管理するためのテーブル構造は以下の通りです：

CREATE TABLE product (
  id BIGINT PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(100) NOT NULL,
  price DECIMAL(10, 2) NOT NULL,
  description VARCHAR(200),
  stock INT NOT NULL,
  create_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  update_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='商品情報テーブル';

サンプルデータ挿入：

INSERT INTO product (name, price, description, stock)
VALUES ('シャツA', 299.99, 'ビジネス向け長袖シャツ', 200);