はじめに

こんにちは！りあるぱ(@realpa931)と申します。

2023年6月〜11月の半年間、職業訓練校(Javaシステム科)で「Java言語および関連技術を活用したWebシステム開発方法」を学びました。
その集大成として開発したポートフォリオを紹介します。

自己紹介

大学卒業後、新卒でメーカーに入社。技術職として機械部品の設計や評価に従事。
退職を機に、プログラミング学習を開始(2022年11月〜)。
2024年3月からWeb系企業(自社/受託/SES)で受託開発に従事予定。

1. ポートフォリオの紹介

【ジードライブ関係者向け】ランチ口コミアプリ『ランジー』

(※『ジードライブ』とは開発者がお世話になった職業訓練校名です)

(1)アプリ概要

①開発目的

職業訓練中の昼休憩は45分間と短いため、外食する場合には「お店選び」が重要
お店選びには『Googleマップ』などを利用する場合が多いが、「食事にかかる時間」の情報はほとんど無い
そこで、「食事にかかる時間」にフォーカスした口コミプラットフォームを開発することにより、お店選びを楽にしたいと考えた

②コンセプト
「ジードライブ関係者のランチのお店選びを楽に」
(アプリ名の『ランジー』は、「ランチ × ジードライブ」から名付けました)

③特徴

口コミ評価項目は「時間的余裕」(「移動時間 + 食事にかかる時間のゆとり」を星5段階で評価)
口コミ評価が高いお店を選ぶことで、時間にゆとりのある外食が可能となる

④GitHubのリポジトリ
https://github.com/yamamoto117/lunz

⑤実装期間
約2ヶ月

(2)主な機能

お店検索	検索結果並び替え	口コミ投稿

(3)機能一覧

①メイン機能

ジードライブ周辺のお店情報閲覧
- キーワード検索
- ジャンル検索
- 評価が高い順に並び替え
口コミ投稿(訪問日 / 時間的余裕 / コメント)

②認証機能

ユーザー登録
ログイン / ログアウト
ゲストログイン

(4)使用技術

①フロントエンド

HTML
CSS
JavaScript
Tailwind CSS 3.3.3

②バックエンド

Java 17.0.6
Spring Boot 2.7.16
Thymeleaf 3.0.15
MyBatis 2.3.1
MySQL 8.0.23
Maven 3.2.0
jBCrypt 0.4.3
Node.js 18.12.1 / npm 8.19.2

③インフラ

Apache Tomcat 9.0.41

④その他

Google Maps API (Places API / Directions API / Maps API)
Git 2.37.1 / GitHub
Eclipse
Windows 10 / macOS

(5)ER図

2. 選定技術の採用理由

基本的には職業訓練で学んだ技術を使用していますが、以下2点についてはカリキュラムの範囲外であったため、個人的に学習し使用しました。

CSSフレームワーク：Tailwind CSS

検討技術： Bootstrap
採用理由

おしゃれなデザインが容易に作れるため

Google Maps API (Places API / Directions API / Maps API)

採用理由

お店情報を容易に取得可能なため

3. ポートフォリオ作成までに学習したこと

(1)独学(2022年11月〜2023年11月)

(2)職業訓練校(2023年6月〜11月 / 総訓練時間：600時間)

IT技術基礎(6時間)

VDT作業と安全衛生
コンピュータ基礎
データ構造とアルゴリズム
データベース基礎
ネットワーク基礎

PC操作基礎(4時間)

パソコンの基本操作
テキストエディタ、WebブラウザやFTPソフトの基本的な使い方

Javaプログラミング実習(72時間)

Javaの概要
Javaの開発環境
基本書式
変数と型
配列
演算
分岐処理
反復処理
定数
クラスの作成と利用
コーディング規約
継承
抽象クラス
インターフェース
クラスライブラリ
入出力処理
例外処理
UML図の作成

HTML / CSS / JavaScript実習(54時間)

HTML5 / CSS3 / Javascriptを使用したWebページの作成
CSSフレームワーク

JSP / Servlet実習(42時間)

Tomcat / JSP / JSTL / Servlet / クッキー / セッション等を使用した動的ページの作成

データベースプログラミング実習(48時間)

開発環境のセットアップ
MySQLによるデータベース操作
ER図の作成
JDBCによるデータベース操作
ユーザ認証
セキュリティ対策

Webシステム開発基礎実習(30時間)

Linux上でのHTTPサーバ / データベースサーバ構築
Webアプリケーションの配備
バージョン管理システム
開発工程と文書作成

Javaフレームワーク実習(52時間)

Webアプリケーションフレームワーク(Spring Boot)
テンプレートエンジン(ThymeLeaf)
データベース用フレームワーク(MyBatis)

Webシステム設計実習(58時間)

Webシステムの基本設計と詳細設計の作業および各設計ドキュメントの作成

Webシステム開発応用実習(114時間)

Java / MySQL / JSP / Servlet / HTML5 / CSS3 / JavaScriptを使用したWebシステムの開発

Webシステム開発発展実習(120時間)

Java / MySQL / Webアプリケーションフレームワーク(Spring Boot) / テンプレートエンジン(ThymeLeaf) / データベース用フレームワーク(MyBatis) / HTML5 / CSS3 / JavaScriptを使用したWebシステムの開発

4. ポートフォリオ作成の進め方

(1)アプリ検討(2023年6月)

(2)【第1期アプリ開発】お店情報の閲覧機能(2023年8月下旬〜9月下旬)

Google Maps APIを使用したジードライブ(職業訓練校)周辺のお店情報の閲覧
検索機能(キーワード / ジャンル)
Tailwind CSSを使用したデザイン改善

(3)【第2期アプリ開発】口コミ投稿機能(2023年10月下旬〜11月下旬)

口コミのCRUD機能
認証機能(ゲストログイン含む)
検索結果並び替え機能(評価が高い順)

(4)デプロイ(2023年11月下旬)

(5)GitHubへのアップロード / README作成(2023年12月上旬)

おわりに

本アプリを開発するにあたり、以下に注力しました。

必要最小限の機能
親しみやすいデザイン

その結果、シンプルで馴染みやすいものになったのではないかと思います。

以上、参考になれば嬉しいです。
最後までご覧いただきありがとうございました。

【職業訓練校】ポートフォリオ『ランジー』を開発しました【Java / Spring Boot / Google Maps API】