IT企業に入社して1年経ったのでSpringBootとVue.jsでポートフォリオを作ってみた

主に伝えたいこと

• モチベーション維持の大変さとその対処
  • 2ヶ月間ですらモチベーションを維持するのは大変でした

筆者背景

• 機械系学科を卒業し新卒でIT企業(非WEB系BtoB)に入社し1年が経ちました
• 1年目はVue.jsとJavaで社内の在庫を管理するシステムを開発させていただきました
• 2年目(今)はAWSに関わるチームにいます

ポートフォリオとその開発について

概要

https://www.techmatch.tokyo/ (サンプル ユーザID/パスワード：testuser/testuser) (非レスポンシブ)

• 個人エンジニア同士を結び付けるようなサービス(のつもり)です
• ユーザがやりたい事を投稿し，他のユーザが一緒にやりたいと思ったら応募するサービスです
• モチベーションの部分でも書きますが，完成度は6割だと思います

開発期間

• 以下の通りで概算65日です。実装中に要件や設計を変更する場面が度々ありました。恐ろしいことに現場でもあるみたいですね。
  1. 要件定義 2日
  2. 設計 2日
  3. 実装・テスト 60日(バックエンド 25日 フロントエンド 35日)
  4. デプロイ 1日

使用した技術

• フロントエンド：Vue.js，Bulma，webpack
• バックエンド：SpringBoot，pom，postgresql
  • 会社でやってたのでクリーンアーキテクチャで実装しました。冗長な気がしますが，コード保守しやすい，テストしやすい。
• インフラ：heroku
  • AWSを触るチームにいるのですが，コスト的にherokuにしました。

ポートフォリオを作った目的

外にエンジニアの知り合いを作ってみたいなぁ 4割

• 挨拶する際に自分の作ったものがあると便利かなと思いました。ただ会社がBtoBなため簡単に私の携わった部分を見せられません。そこで対外的に形を見せられる実績がほしいので作ってみました。

技術を体得したいなぁ 4割

• インフラからフロントまで1人でやることで，今まで会社から与えられていた部分(開発環境・デプロイ環境など)も含めて身に着けたいと思っていました。ポートフォリオ開発を通じてこの目的は果たせたと思います。

こんなサービスあったらいいなぁ 2割

• ITエンジニアがもっともっと活躍できたらいいなあと思っています。

モチベーション維持の大変さとその対処

とにかく面倒くさい

• 開発期間中は，仕事から帰る → 開発する → 仕事に行く の繰り返しでした。とにかく疲れて面倒くさかったです。レイトン教授や登山に逃げたときもありました。レイトン教授で疲れた時もありました。そこで次のようなことをしていました。

対処１：完璧主義から遠ざかる

• これが一番だと思います。「大学なら6割出来れば単位が貰える。とりあえず6割を目指そう。」これを言い聞かせていました。理由としては，完璧を目指す途中で体力消費や現実とのギャップから萎えてデプロイを断念するよりも，6割でデプロイした方が形として残り良い成果だと思ったからです。そのため，見た目や機能に甘々な部分が多々あります。やり残したリストを取っていたのですが見てみると，タスクの大小含め約20個あります。ですが，また追加開発すればいいし，MVP開発なんてのもありますし，何より心の余裕を作るにはこの考え方が良かったです。

対処２：筋トレする

• 筋肉は裏切らない。
• セロトニンが出て気分をリフレッシュできるらしいです。

対処３：手段ではなく，目的を意識する

• 「次は，画像保存の実装かぁ。」「次は，動的検索の実装かぁ。」「次は，メール認証の実装かぁ。」と目的を達成するための手段の手間を考えると面倒くさくてやる気が起きませんでした。そこで「デプロイしたら知り合いが増えるかも知れないぞ。だからやろう。」と目的を言い聞かせてやってました。万人に効果があるかは分かりませんが，私はやる気が起きました。

その他 雑記

デプロイまでに掛かった料金

• 総額：200円
  • ドメイン取得：200円

今後1ヵ月でかかる料金

• 総額：800円
  • レンタルSMTPサーバ：50円
  • heroku：750円

今後1年間でかかる料金

• 総額：2850円
  • SMTPサーバ：600円
  • heroku：2250円
    • 3ヵ月をすぎたらfreeプランに戻し，cloud flareを立ててssl化しようと思っています。

技術で知ったことを10個なんとなくピックアップ

• Vue.jsのトランジションでアニメーションを作れる
• 無限スクロールを実装するなら，"現在の表示高さ+スクロール量>=全体の高さ" を条件にAPIを叩く
• bulmaという名前はドラゴンボールのブルマからきたっぽい
• 複数の拡張子を考慮し画像データを送るならヘッダーのcontent-typeをmultipart/form-dataというMIMEタイプに
• パスワード暗号化方式のbcryptは一方通行なので複合できない
• DBにクエリを発行する際に起きるかもしれないN+1問題
• SpringBootで動的検索するならJpaSpecificationExecutorインタフェース
• SpringBootでHTTPリクエストに独自のフィルタをかけるなら，OncePerRequestFilterを継承したクラスを使う
• WEBアプリをデプロイするならsitemap.xmlを作っておく
• amazon sesで不特定多数にメールを送る場合は申請が必要になる

最後に

• コード書くの楽しいなあ。