はじめに
こんにちは！りあるぱ(@realpa931)と申します。
2023年6月〜11月の半年間、職業訓練校(Javaシステム科)で「Java言語および関連技術を活用したWebシステム開発方法」を学びました。
その集大成として開発したポートフォリオを紹介します。
自己紹介
大学卒業後、新卒でメーカーに入社。技術職として機械部品の設計や評価に従事。
退職を機に、プログラミング学習を開始(2022年11月〜)。
2024年3月からWeb系企業(自社/受託/SES)で受託開発に従事予定。
目次
1. ポートフォリオの紹介
2. 選定技術の採用理由
3. ポートフォリオ作成までに学習したこと
4. ポートフォリオ作成の進め方
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月上旬)
おわりに
本アプリを開発するにあたり、以下に注力しました。
- 必要最小限の機能
- 親しみやすいデザイン
その結果、シンプルで馴染みやすいものになったのではないかと思います。
以上、参考になれば嬉しいです。
最後までご覧いただきありがとうございました。