未経験者がポートフォリオを作成してみた。【Laravel /Vue.js/ AWS】

1.はじめに

• 友人／家族／恋人との休日の行き先、ルートを提案してくれる「デートプラン提案アプリ」という物を作成しましましたので紹介させていただきます。

2.自己紹介

• こんにちはishii28と申します。
当記事は実務未経験者がポートフォリオをつく
WEB制作をはじめ、プログラミングに興味を持ち始めた。

• 私は「人の役に立ちたい」また「物作りを通して誰かの課題を解決したい」という思いがあった。
この観点から考え、エンジニアはそれを実現できると確信した。
この先はエンジニアという仕事を通じて人の課題に寄り添ったサービスを提供していけるようなっていきたいと考えエンジニアを目指した。


3.簡単に自己紹介

• 現在29歳でwebエンジニアになるために就職活動中です。

• 多くの人々の問題を解決し、人の役に立てる人間になっていきたい、 エンジニアはそれを実現できると確信しエンジニアを目指し始めた。

• 趣味は読書に没頭すること。


4.開発背景

• PFのテーマを選定する所から始まり、身近な友人や家族から実際に困っている事や不便に思っている事はないか調査する所が始まりました。

• 私の友人の田口くんに実際に聞き込みをした所、恋人とのデートの行き先が、毎回同じ場所になってしまいマンネリ化している・・・・という悩み聞きました。
その悩みをシステムを使い、解決してあげたいと思い「デートプラン提案アプリ」の作成を考えました。

• 悩みを聞き込みする中で他にも候補がありましたが「デートプランに特化している」アプリの数が少なく長期的に参入しやすいと思いました。
また今回は友人一人の悩みであったため、広範囲の需要があるという根拠が持てない中、まずは一番身近な友人の課題解決をする事がエンジニアとしても第一歩だと思い開発する事を決めました。


5.使用技術

• フロントエンド：HTML／Bootstrap4／SCSS／JavaScript(Vue.js)
• バックエンド：Laravel（9.2）
• DB：RDS（MySQL）
• インフラ：AWS（EC2／Route53／ALB／RDS)
• ソース管理：Git／GitHub

6.アプリの完成イメージ



7.作業内容

• 課題定義
• 要件定義
• 画面遷移図作成
• ER図を書いてDB設計
• 開発環境
• AWSにデプロイ
• SSL化

8.要件定義

要求を分析して最終的な要件が間違っていないか進めました。
また機能要件、非機能要件も定義し運用を考慮して作成しました。
以下のような要件定義をおこないました

• 機能要件

• 業務フロー

• 画面遷移図

• WF(ワイヤーフレーム)

• 機能・データ


作成した業務フロー


作成した画面遷移図



作成したWF(ワイヤフレーム)



• 機能要件/非機能要件をゴールイメージを明確にした段階で、オペレーション（運用）なども考慮し以下の様な定義になりました。

• 機能要件
  • 関係毎のコース選択ができる
  • 行き先が指定できる
  • ルートを確認できる
  • ユーザーの登録／削除／修正ができる
  • snsにシェアできる
• 非機能要件
  • 高齢者でも迷うことなく使用できる
  • 画面が1秒以内に表示できる

9.タスクばらし

• タスクばらしとは
  • 仕事に取り掛かる前に、仕事をタスクにばらすこと
  • 仕事の要素を分解する
• タスクばらしの方法
  • ゴールを確認・理解する
  • ゴール達成のために必要な項目をリストアップする　
  • 実行順に並び替える
    実際にプロジェクト管理ツールのRepsonaを使ってガントチャートを作成しました。
作成当初は、ガントチャートに従って作業するという事に慣れていなくて、自分の頭の中だけでタスクを考えてしまいゴール達成のために必要な項目が一つ一つを把握できていないない状態になっていました。
その点スクールの講師の方に「いつまにで何を終わらせなければならないのか整理
するためにガントチャートがある」という事を改めてご指導いただいき自分が目標に対してどの位置にいるかをガントチャートで確認しつつ「いつまにで何を終わらせなければならないか」をガントチャートで全体像を把握する事ができました。
今ではガントチャートでスケジュールを立てる→スケジュール通りにタスクを進めるという、ガントチャートの基本が身に付きました。また一つ一つ小さな作業に対してのゴールがあってそれに対して何をしなければいけないかを考えて作業する力などもついたと思います。

10.DB設計

• エンティティの洗い出し
設計はER図作成から始まりどのような仕様にするか試行錯誤しながら設計まで進めていきました。
ER図作成の前にエンティティの洗い出しの作業で理解が間違った解釈をしていて、そこに膨大な時間を費やしてしまいました。
当初の私の設計に対する認識は「画面数：テーブル配置になるはず」という間違った認識でいました。
講師の方から正しくは、エンティティの洗い出しで全てにテーブルを設けるのではなく、データをどういう風に持ちたいかで「システムの登場人物を全部洗い出していき、整理して行くのがデータベース設計」ですと。ご指導頂き、ようやくエンティティの洗い出しが理解できたと思っていました・・・が私が作ったWFの画面から抽出していたのは「機能」から考えて洗い出しをしていました。機能を洗い出しするのではなく「データ項目を洗い出しする」のですよとここでも再度講師の方にご指導いただいて、ここで理解していたつもりだったエンティティの洗い出しについて本当に理解することできたと感じております。
そして洗い出したデータ項目をテーブル単位に分けていき、それぞれのテーブルにどのデータ項目が収まるのかシミュレーションしてようやくER図の作成に向かいました。

• ER図の作成

  ER図を作成する前にデータモデル•リレーションの多重度について（1:nの関係/n:nの 関係）などについて勉強し、以下の様なER図となりました。
  

11.インフラ

インフラ構成図は以下のようになりました。

12.実装

• このアプリで実装予定の機能は以下の機能です。
  • ユーザー登録
・ログイン/ログアウト
・プラン選択機能
・LINE通知
・関係選択
・行き先選択
・スワイプ
・行き先一覧表示

13.今後の実装する機能

• 以下の機能がまだ終わっていなく追加する機能です。
  • ユーザー登録
・プラン選択機能
・LINE通知
・関係選択
・行き先選択
・スワイプ
・行き先一覧表示
    webアプリケーションとしてほとんど未完成の状態ですが、上記の機能を追加して完成に向けて取り組んでいきます。

14.感想

• スクールでは「成長」するために、その日の成果や次の目標を毎日、日報としてアウトプットをしました。
毎週のミーティングでは、TODOやプレゼンを想定した資料作成や技術的な課題が与えられ、理解が不足している点などはスクールのメンバー間でもくもく会などの交流会を行う中で確かめ合ったり、お互い技術を高め合いながら開発をする事ができました。

• まだアプリ自体は未完成なままですが、開発期間を通して、上流から下流工程までを学び経験できた事はこれからエンジニアとしての職種に着く前にとても貴重な期間を
過ごさせていただいたととても、実感しています。

• 今後は転職活動と併用してPFの開発を進めていく予定です。
まだまだ未熟な所もあり多くの課題も残してはいますが今後も一つ一つの積み重ねを大事にしていきエンジニアとしても人としても成長をしていきたいと考えております。
ここまで読んでくださり本当にありがとうございました！