3
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

未経験からエンジニアへ ━ 転職のためのポートフォリオを作成

Last updated at Posted at 2025-02-26

はじめに

私は現在、未経験からエンジニアへの転職を目指して活動しています。その第一歩として、自分のスキルを具体的にアピールできるポートフォリオとしてECサイトを作成しました。
富士ソフトアカデミーでSpringBootを学びながら、バックエンドの設計・実装を進め、最終的にAWS環境へデプロイしました。また、GitHub Actionsを活用してCI/CDパイプラインを構築し、コードの変更が自動的にデプロイされる仕組みを実装しました。これにより、開発の効率化や継続的な改善が容易に行えるようになっています。本記事では、その概要と実装のポイントについて紹介します。

なお、今回作成したECサイトには支払い機能やお問い合わせ機能などが一部未実装になっており、不完全なECサイトではありますが、温かい目で見ていただけますと幸いです。

作成したECサイトのGitHubはこちらです。

作成背景

近年、爬虫類の飼育が趣味として注目を集め、飼育者やこれから飼おうとしている人々のニーズが増加しています。しかし、爬虫類の飼育には専門的な知識やアイテムが必要であり、初心者にとっては情報が分散しているため、適切な商品を選ぶのが難しいという問題があります。

そのため、初心者でも簡単にアクセスできるECサイトを作成することを決意しました。このサイトでは、爬虫類飼育に必要な商品を購入できるだけでなく、飼育初心者が抱える疑問や不安を解消するために、ユーザー同士が意見交換できる掲示板機能も提供します。さらに、荒らしを防止するため、掲示板への投稿にはユーザー登録を必須としました。

作成期間

2024年12月半ばから2025年2月半ばの約2か月間
・要件定義~設計:約2週間
・実装~テスト:約1か月
・AWSへのデプロイ:約2週間

作成内容

主な使用技術

・ SpringBoot
・ AWS(ECS, RDS, S3, ALB)
・ docker
・ GitHub Actions

要件定義

要件定義については、以下のリンクをご参照ください。
Reptalicious ECサイト 要件定義

設計

設計段階として、機能一覧、画面仕様書、ルーティング定義、テーブル定義、ER図、インフラ構成図、テストケース設計を作成しました。

機能

機能一覧
項目 概要 認可
商品一覧 商品のリストを表示。カテゴリーやキーワードで絞り込み検索が可能。 全員
商品詳細 商品の詳細情報を確認するページ。説明文、価格、レビューなどが表示。 全員
カート機能 ユーザーが選んだ商品をカートに追加・削除。購入数量の調整も可能。 認証済
お気に入り機能 ユーザーが選んだ商品をお気に入りに追加・削除。 認証済
購入機能 ユーザーがカート内の商品を購入する処理。 認証済
注文履歴機能 ユーザーが注文した商品の履歴を表示する。 認証済
レビュー機能 ユーザーが購入した商品に対してレビューを投稿する。 認証済
掲示板一覧 掲示板を表示。全てのスレッドとコメントの閲覧が可能。不適切だと思う投稿の通報が可能。 全員
掲示板投稿機能 スレッドおよびコメントを投稿する機能。 認証済
ユーザー管理機能 ユーザー情報の確認、削除ができる管理者向けの機能。 管理者
商品管理機能 商品の追加、編集、削除ができる管理者向けの機能。 管理者
カテゴリ管理機能 商品に紐づけるカテゴリの追加、削除ができる管理者向けの機能。 管理者
在庫管理機能 商品の在庫を変更できる管理者向けの機能。 管理者
注文管理機能 ユーザーの注文情報の確認ができる管理者向けの機能。 管理者
掲示板管理機能 掲示板の表示状態の変更ができる管理者向けの機能。 管理者

画面仕様書

各画面についてこのような画面仕様書を作成しました。
画面仕様書(会員情報画面)

ルーティング定義

認証
メソッド パス コントローラメソッド 説明 認可
GET /auth/login showLoginForm() ログイン画面表示 全員
POST /auth/login - ログイン処理 全員
POST /logout - ログアウト処理 認証済
GET /auth/register showRegistrationForm() 会員登録画面表示 全員
POST /auth/register registerUser() 会員登録処理 全員
GET /auth/complete registerComplete() 会員登録完了画面表示 全員
トップページ
メソッド パス コントローラメソッド 説明 認可
GET / showTopPage() トップページ表示 全員
GET /mypage showMyPage() マイページ表示 認証済
GET /admin showAdminPage() 管理者ページ表示 管理者
会員情報
メソッド パス コントローラメソッド 説明 認可
GET /users/profile showProfile() プロフィール表示 認証済
GET /users/profile/edit editProfile() プロフィール編集画面 認証済
POST /users/profile/edit updateProfile() プロフィール更新 認証済
GET /users/profile/editPass showEditPassword() パスワード変更画面 認証済
POST /users/profile/editPass updatePassword() パスワード変更 認証済
注文履歴
メソッド パス コントローラメソッド 説明 認可
GET /orders listOrders() 注文履歴一覧表示 認証済
GET /orders/{orderId} showOrder() 注文詳細表示 認証済
お気に入り
メソッド パス コントローラメソッド 説明 認可
GET /favorites listFavorites() お気に入り一覧表示 認証済
POST /favorites/add addToFavorites() お気に入りに追加 認証済
POST /favorites/remove/{favoriteId} removeFromFavorites() お気に入りから削除 認証済
POST /favorites/toggle toggleFavorite() お気に入りの登録・削除 認証済
カート
メソッド パス コントローラメソッド 説明 認可
GET /cart showCart() カート内容表示 認証済
POST /cart/add addToCart() カートに商品追加 認証済
POST /cart/update/{cartItemId} updateCartItem() カート内商品数量変更 認証済
POST /cart/remove/{cartItemId} removeFromCart() カートから商品削除 認証済
購入
メソッド パス コントローラメソッド 説明 認可
POST /purchase/inCart cartItemsPurchase() カート内の商品の購入処理 認証済
商品
メソッド パス コントローラメソッド 説明 認可
GET /products listProducts() 商品一覧表示 全員
GET /products/{categoryName} listProductsByCategory() カテゴリでの検索結果表示 全員
GET /products/keyword listProductsByNameContaining() キーワードでの検索結果表示 全員
GET /products/{productId} showProduct() 商品詳細表示 全員
レビュー
メソッド パス コントローラメソッド 説明 認可
GET /reviews/{productId} listReviews() レビュー一覧 全員
GET /reviews/new showCreateForm() レビュー投稿画面 認証済
POST /reviews/new createReview() レビュー投稿処理 認証済
掲示板
メソッド パス コントローラメソッド 説明 認可
GET /bbs listThreads() スレッド一覧表示 全員
GET /bbs/thread/new showCreateThreadForm() スレッド作成画面 認証済
POST /bbs/thread/new createThread() スレッド作成処理 認証済
GET /bbs/{threadId}/edit showEditThreadForm() スレッド編集画面 認証済
POST /bbs/{threadId}/edit updateThread() スレッド更新処理 認証済
GET /bbs/{threadId} showThread() スレッド詳細表示 全員
POST /bbs/{threadId}/remove removeThread() スレッド削除 認証済
GET /bbs/{threadId}/comment showCreateCommentForm() コメント入力画面 認証済
POST /bbs/{threadId}/comment createComment() コメント投稿処理 認証済
GET /bbs/{threadId}/comment/{commentId}/edit showEditCommentForm() コメント編集画面 認証済
POST /bbs/{threadId}/comment/{commentId}/edit updateComment() コメント更新処理 認証済
POST /bbs/{threadId}/comment/{commentId}/remove removeComment() コメント削除 認証済
GET /bbs/reportThread reportThread() スレッド通報処理 全員
POST /bbs/reportComment reportComment() コメント通報処理 全員
会員(管理者)
メソッド パス コントローラメソッド 説明 認可
GET /admin/users listUsers() 会員一覧画面 管理者
GET /admin/users/{userId} showProfile() 会員詳細画面 管理者
POST /admin/users/{userId}/delete deleteUser() 会員削除処理 管理者
POST /admin/users/{userId}/restore restoreUser() 会員復元処理 管理者
注文履歴(管理者)
メソッド パス コントローラメソッド 説明 認可
GET /admin/orders listAllOrders() 注文管理画面 管理者
GET /admin/orders/{orderId} showOrderDetail() 注文詳細表示 管理者
商品(管理者)
メソッド パス コントローラメソッド 説明 認可
GET /admin/products listProducts() 商品一覧画面 管理者
GET /admin/products/create showCreateForm() 商品登録画面 管理者
POST /admin/products/create createProduct() 商品登録処理 管理者
GET /admin/products/{productId}/edit showEditForm() 商品編集画面 管理者
POST /admin/products/{productId}/edit updateProduct() 商品更新処理 管理者
GET /admin/products/{productId} showProduct() 商品詳細画面 管理者
POST /admin/products/{productId}/delete deleteProduct() 商品削除処理 管理者
在庫(管理者)
メソッド パス コントローラメソッド 説明 認可
GET /admin/stocks listStocks() 在庫管理画面 管理者
GET /admin/stocks/{productId} showStock() 在庫変更画面 管理者
POST /admin/stocks/{productId}/edit updateStock() 在庫更新処理 管理者
カテゴリ(管理者)
メソッド パス コントローラメソッド 説明 認可
GET /admin/categories listCategories() カテゴリ一覧画面 管理者
POST /admin/categories/add addCategory() カテゴリ追加処理 管理者
POST /admin/categories/toggle toggleCategory() カテゴリ削除 管理者
掲示板(管理者)
メソッド パス コントローラメソッド 説明
GET /admin/bbs/threads/all listAllThreads() スレッド管理画面
GET /admin/bbs/threads/{threadId} showThread() スレッド詳細画面
POST /admin/bbs/threads/{threadId}/redisplay redisplayThread() スレッド再表示
POST /admin/bbs/threads/{threadId}/remove removeThread() スレッド削除
GET /admin/bbs/threads/{threadId}/comments/all listAllComments() コメント管理画面
GET /admin/bbs/threads/{threadId}/comments/{commentId} showComment() コメント詳細画面
POST /admin/bbs/threads/{threadId}/comments/{commentId}/redisplay redisplayComment() コメント再表示
POST /admin/bbs/threads/{threadId}/comments/{commentId}/remove removeComment() コメント削除

テーブル定義

users(会員)
カラム名 データ型 NULL キー 初期値 説明
id BIGINT NO PK AUTO_INCREMENT ユーザーID
email VARCHAR NO UQ メールアドレス
password VARCHAR NO パスワード(ハッシュ化)
name VARCHAR NO 氏名
nickname VARCHAR YES ニックネーム
phone_number VARCHAR NO UQ 電話番号(ハイフンなし)
address VARCHAR NO 住所
role VARCHAR NO 'ROLE_USER' 権限('ROLE_USER', 'ROLE_ADMIN')
logicalDeleteStatus VARCHAR NO 'ACTIVE' 論理削除('ACTIVE', 'DELETED')
created_at TIMESTAMP NO CURRENT_TIMESTAMP 登録日時
updated_at TIMESTAMP NO CURRENT_TIMESTAMP 更新日時
products(商品)
カラム名 データ型 NULL キー 初期値 説明
id BIGINT NO PK AUTO_INCREMENT 商品ID
name VARCHAR NO 商品名
description TEXT NO 商品説明
price INT NO 価格
stock INT NO 在庫数
image_url1 VARCHAR YES 商品画像URL1
image_url2 VARCHAR YES 商品画像URL2
image_url3 VARCHAR YES 商品画像URL3
logicalDeleteStatus VARCHAR NO 'ACTIVE' 論理削除 ('ACTIVE', 'DELETED')
created_at TIMESTAMP NO CURRENT_TIMESTAMP 登録日時
updated_at TIMESTAMP NO CURRENT_TIMESTAMP 更新日時
categories(カテゴリ)
カラム名 データ型 NULL キー 初期値 説明
id BIGINT NO PK AUTO_INCREMENT カテゴリID
name VARCHAR NO カテゴリ名
logicalDeleteStatus VARCHAR NO 'ACTIVE' 論理削除 ('ACTIVE', 'DELETED')
created_at TIMESTAMP NO CURRENT_TIMESTAMP 登録日時
product_category(商品-カテゴリ)
カラム名 データ型 NULL キー 初期値 説明
id BIGINT NO PK AUTO_INCREMENT 商品カテゴリID
product_id BIGINT NO FK 商品ID
category_id BIGINT NO FK カテゴリID
created_at TIMESTAMP NO CURRENT_TIMESTAMP 登録日時
orders(注文)
カラム名 データ型 NULL キー 初期値 説明
id BIGINT NO PK AUTO_INCREMENT 注文ID
user_id BIGINT NO FK ユーザーID
total_price INT NO 合計金額
orderNumber VARCHAR NO 注文番号
shippingFee INT NO 送料
created_at TIMESTAMP NO CURRENT_TIMESTAMP 登録日時
orderDetails(注文詳細)
カラム名 データ型 NULL キー 初期値 説明
id BIGINT NO PK AUTO_INCREMENT 注文詳細ID
order_id BIGINT NO FK 注文ID
product_id BIGINT NO FK 商品ID
price INT NO 単価
quantity INT NO 数量
created_at TIMESTAMP NO CURRENT_TIMESTAMP 登録日時
cart_items(カート商品)
カラム名 データ型 NULL キー 初期値 説明
id BIGINT NO PK AUTO_INCREMENT カートID
user_id BIGINT NO FK ユーザーID
product_id BIGINT NO FK 商品ID
quantity INT NO 1 数量
created_at TIMESTAMP NO CURRENT_TIMESTAMP 登録日時
updated_at TIMESTAMP NO CURRENT_TIMESTAMP 更新日時
favorites(お気に入り)
カラム名 データ型 NULL キー 初期値 説明
id BIGINT NO PK AUTO_INCREMENT お気に入りID
user_id BIGINT NO FK ユーザーID
product_id BIGINT NO FK 商品ID
created_at TIMESTAMP NO CURRENT_TIMESTAMP 登録日時
reviews(商品レビュー)
カラム名 データ型 NULL キー 初期値 説明
id BIGINT NO PK AUTO_INCREMENT レビューID
user_id BIGINT NO FK ユーザーID
product_id BIGINT NO FK 商品ID
orderDetail_id BIGINT NO FK 注文詳細ID
rating INT NO 1 評価値(0~5)
description TEXT YES レビュー内容
created_at TIMESTAMP NO CURRENT_TIMESTAMP 登録日時
threads(スレッド)
カラム名 データ型 NULL キー 初期値 説明
id BIGINT NO PK AUTO_INCREMENT スレッドID
user_id BIGINT NO FK ユーザーID
report INT NO 0 通報回数
title VARCHAR NO スレッドタイトル
description TEXT NO スレッド内容
display VARCHAR NO 'DISPLAY' 表示状態 ('DISPLAY', 'HIDDEN', 'DELETED')
created_at TIMESTAMP NO CURRENT_TIMESTAMP 登録日時
updated_at TIMESTAMP NO CURRENT_TIMESTAMP 更新日時
comments(コメント)
カラム名 データ型 NULL キー 初期値 説明
id BIGINT NO PK AUTO_INCREMENT コメントID
user_id BIGINT NO FK ユーザーID
thread_id BIGINT NO FK スレッドID
report INT NO 0 通報回数
comment TEXT NO コメント
display VARCHAR NO 'DISPLAY' 表示状態 ('DISPLAY', 'HIDDEN', 'DELETED')
created_at TIMESTAMP NO CURRENT_TIMESTAMP 登録日時
updated_at TIMESTAMP NO CURRENT_TIMESTAMP 更新日時

E-R図

ER図

インフラ構成図

インフラ環境は CloudFormation を使用して構築しました。これにより、インフラの構成をコードとして管理できるため、再現性や変更管理が容易になり、インフラの自動構築が可能になっています。
アプリケーションのアーキテクチャとしては、画像のストレージにS3、データベースに RDS(MySQL)を使用し、Webアプリケーションの実行環境として ECS(Fargate)を採用しました。ECSを利用した理由は、プロジェクトをDockerでコンテナ化し、デプロイを簡単にするためです。さらに、Fargateを選択したことで、サーバーの管理が不要になり、スケーラビリティや運用の負担を軽減できるというメリットもあります。

AWS構成図.png

テストケース設計

単体テストおよびE2Eテストのテストケース設計を作成しました。
テストケースの数が多いため、例としてE2Eテストケース設計を示します。

E2Eテスト
項目 期待される結果
ユーザー登録が成功すること 登録完了のメッセージが表示される
正しい情報でログインできること ログインが成功する
存在しないアカウントでログインできないこと エラーメッセージが表示されてログインに失敗する
ユーザーがユーザー情報を変更できること プロフィールやパスワードが変更される
キーワードで商品検索が機能すること キーワードに沿った検索結果が表示される
カテゴリ検索で商品検索が機能すること カテゴリに沿った検索結果が表示される
カートに商品を追加できること カートに商品が追加される
お気に入りに商品を追加できること お気に入りに商品が追加される
購入手続きが完了すること 購入完了画面が表示される
注文履歴が正しく表示されること 注文履歴一覧が表示される
ユーザーが商品のレビューを投稿できること 商品レビューが投稿される
ユーザーが掲示板に投稿できること 掲示板にスレッドまたはコメントが投稿される
管理者が商品を登録できること 商品一覧に追加される
管理者がカテゴリを登録できること カテゴリ一覧に追加される
管理者が商品の在庫を変更できること 商品の在庫が変更される
管理者が掲示板の表示状態を変更できること スレッドまたはコメントの表示状態が変更される

使用イメージ

作成したECサイトの使用イメージをいくつか示します。

Login

ログイン操作.gif

商品の購入

購入操作.gif

掲示板への書き込み

掲示板操作.gif

商品の登録

商品登録操作.gif

工夫した点

掲示板の投稿に対する検閲

検閲機能を実装していないため、代わりに通報ボタンを作成し、通報回数が一定回数を超えた場合、投稿が非表示になる仕様にしました。

削除処理の方法

削除処理を論理削除で行うようにしました。
これにより、データの整合性が保たれ、削除されたデータに対してのデータ分析が可能となります。

AWS環境のIaC化

AWS環境をIaC化し、簡単に環境構築ができるようにしました。

商品画像のリサイズ処理

商品画像をS3にアップロードする際、縦横比を維持したままリサイズして保存しました。

CI/CDの導入

GitHub Actionsを用いてCI/CDを導入することで、開発の効率化と継続的な改善が容易に行えるようにしました。

つまづいた点

CSSの理解不足

CSSの記載に慣れてなく、思い通りに要素を配置するのに苦労した。

テーブル設計の甘さ

設計段階でのテーブル定義が不十分だったため、実装途中でテーブルを追加する必要が生じた。

CloudFormationの知識不足

IaCについて勉強中ということもあり、CloudFormationでの環境構築がうまくいかず、何度も試行錯誤を繰り返した。

コードレビュー環境の不足

コードレビューをしてもらえる環境がなく、書いたコードが正解か分からず、手探りで実装を進めた。

課題

レスポンシブ対応が未実装

画面がレスポンシブ対応していないため、モバイルデバイスや画面サイズによって表示が崩れてしまう。

掲示板の不適切な内容の検閲

掲示板の投稿に対して、不適切な内容の検閲が行われていないため、問題のある投稿がそのまま表示されてしまう。

HTTPプロトコルの利用

HTTPSではなくHTTPプロトコルを利用しているため、セキュリティ面での懸念がある。

今後の展望

各種機能の向上および追加

お問い合わせ機能の追加やコメントに対して返信を紐づけられる機能を実装する。

掲示板投稿に対する検閲システムの導入

掲示板投稿に対してAIを利用した検閲システムを導入し、不適切な投稿の自動判定を実現する。

テストの充実

JUnitによる単体テストおよびE2Eテストを追加し、アプリケーションの動作を保証する。

ECサイトのモダン化

Spring Bootで構築したECサイトのバックエンドをREST API化し、Reactでモダンなフロントエンドを実装する。

セキュリティの強化

ドメインを取得し、SSL証明書を発行することで、HTTPSプロトコルを導入し、セキュリティ面の強化を図る。

まとめ

まだまだ学習中の身であり、完成度には課題が残るものの、自分なりに試行錯誤を重ねながらポートフォリオを作成しました。十分な出来とは言えませんが、これまで学んできたことを形にすることができたと感じています。今後も継続して学習を重ね、より良いものへとブラッシュアップしていきたいと考えています。
今回は、要件定義からデプロイまで自分で一貫して行ったため、自由に設計・実装することができました。しかし、実際の開発ではステークホルダーとの要件のすり合わせが必要になるため、より広い視点での知識が求められます。今回の経験を通じて、ECサイトの開発だけでなく、ECサイトにおけるビジネスモデルの理解など、幅広い知識を身につける必要があると改めて感じました。

3
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?