【24歳/未経験/完全独学】Webアプリケーションのポートフォリオ 第二弾

はじめに

表題の通り、未経験からWeb系エンジニアへ転職するために2回目のポートフォリオを制作しました！
初心者レベルですが簡単にご紹介します。

もし参考にして頂ければとても嬉しいです！

参考:
本ポートフォリオでの環境構築についてまとめました
1回目のポートフォリオ

経歴

自己紹介

• 24歳
• 専門学校卒業(事務・経理科)
• カスタマーサービス(2年)→IT系職業訓練校(半年)→一般事務(半年)→現在
  IT系職業訓練校に通っていましたがVBAに力を注いでいて、
  授業を受けただけなのでほとんど0からのスタートです。

1回目のポートフォリオを作成した後、
Springフレームワークを0から学びながら作成しました。

ポートフォリオ

サービス名：「LearningStopwatch」

• サイトURL(http://learning-sw.ddo.jp/)
• Githubリポジトリ(https://github.com/Takthustra)

「LearningStopwatch」は学習用ストップウォッチのWebサイトです。
プログラミングの学習をしている時に、「学習時間を記録してくれるサイトがあれば良いのに…」という想いから作成しました。

想定ユーザー

以下のような方を想定したサービスです。

• 時間を計って学習したい方
• 学習の進捗を確認しながら学習したい方
• 資格取得等、どの程度時間をかけたのか振り返りたい方

制作期間

2023/8/14 - 2023/8/30の17日間です。

上記期間は平均で8-10時間程度取り組みました。

技術面

使用技術

フロントエンド
Thymeleaf 3.1.1
Bootstrap 5.1.0
JavaScript
バックエンド
Spring 3.1.2
・Spring Boot DevTools
・Spring Data JDBC
・Spring Validation
・Spring Web
・Lombok
・MariaDB Driver
開発環境
Eclipse IDE 4.28.0
Visual Studio Code 1.81.1
インフラ関連
Google Cloud Platform(VPC:CentOS7)
Tomcat 10.1.10
Mariadb 10.11.4

技術選定理由

今回は「フレームワーク中心の構築」を目的に学習しました。
前回よりも即戦力の基礎力をつけることを意識しました。

以下、今回のポートフォリオで各技術を使う目的と、その技術にした理由について整理します。

• Spring
  • 目的
    • バックエンド処理を効率的に開発する
  • 選定理由
    • Javaが案件数が最も多い開発言語であり、Javaの中で最もメジャーなフレームワークのため
    • 前回、JavaEEを用いた開発を行っており他言語より学習しやすいため
• Thymeleaf
  • 目的
    • フロントエンド処理を効率的に開発する
  • 選定理由
    • Spring Bootのテンプレートエンジンで利用が推奨されているため
    • 動的にページを記述できるため
    • HTMLで記述するので最終的なイメージが崩れない強みがあるため
• Bootstrap
  • 目的
    • フロントエンドのデザイン部分を効率的に開発する
  • 選定理由
    • レスポンシブ対応できるため
    • デザイン部分の素早い開発が可能になるため
• Google Cloud Platform
  • 目的
    • クラウドインフラを利用する
  • 選定理由
    • Googleアカウントを持っていればすぐに使用できるため
• Mariadb
  • 目的
    • データベースを構築する
  • 選定理由
    • Linuxで使用できる主要なデータベースのため
    • 前回のポートフォリオで使用して知見があるため
• Tomcat
  • 目的
    • Webサーバーを構築する
  • 選定理由
    • 前回のポートフォリオで使用して知見があるため

実装機能

• ユーザ関係
  • ログイン機能
    • 入力フォームのバリデーション（ユーザ名・パスワード）
  • ゲストログイン機能
    • ログイン時にデータのクリア処理
  • ログアウト機能
  • パスワード更新機能
    • 入力フォームのバリデーション（ユーザ名・パスワード）
  • ユーザ削除機能
    • 確認ページの表示
• ストップウォッチ関係
  • 計測機能(JavaScript)
  • 保存機能
    • リロード時に前回値取得
  • メモ機能
• マイページ関係
  • ユーザ名・作成日時・総学習時間表示機能
  • 総学習記録表示機能
• その他
  • ログインの有無でナビゲーションバーの内容を動的に変更

ER図

インフラ構成図

制作した感想

最後に、今回もポートフォリオを制作した感想を共有します！

※個人的な意見も含んではおりますので、その前提で読んでいただけたらと思います。

作って失敗して次に生かす

1回目のポートフォリオでインプットが多めだったので、今回はポートフォリオ制作にすぐ入りました。

着手が早いのは良い点ですが、Springを0から勉強しながら制作したため、
事前の設計が甘く、途中で何度もリファクタリングを重ねることになりました。

しかし、なぜ失敗したか、どう防ぐかを考えるきっかけとなり、
次回の開発の改善に繋げられます。

恐らく、この繰り返しでエンジニアとしての能力が上がるのだと思いました。

なんでも始めてみる

フレームワークを学び始めるまで「すごく難しい」と想像していました。
しかし、始めてみると想像していたより簡単で、
もっと様々なフレームワークについて学びたいと思っています。

月並みですが、考えるよりもまずは始めることが大切だと感じました。

参考教材

ポートフォリオを作成にあたって参考にした教材を紹介します。

参考書	コメント
Spring Framework超入門 やさしくわかるWebアプリ開発	Springは難しいフレームワークと聞いてますが、書籍化されているもので最も分かりやすく解説されていると思います。
Bootstrap 5 入門: 基礎から実演まで Web開発入門	Kindle書籍。私はこの本でBootstrapを1日のインプットで構築できました。

おわりに

前回と引き続き、随時ポートフォリオを発展させつつ、転職活動に励みます。
未経験なので厳しいとは思いますが引き続き技術を磨きます！
最後までご覧いただき、ありがとうございました。