Zenn
😀

[未経験からエンジニア転職成功]ポートフォリオ

2021/03/24に公開
AWS
CircleCI
Docker
Rails
Ruby
tech

はじめに

今回は、2021年3月に転職活動が終了した際の僕のポートフォリオについて下記の方に向けて解説します。

・転職活動中の方
・プログラミング学習中の方

そこで、まずは僕自身のことをお話させていただくと、2020年10月よりプログラミング学習を開始し、2021年3月下旬に自社開発+SESをしている企業様に内定をいただきました。

また、それ以外にも12社からスカウトされ、そのうちの4社が自社開発系の企業様で1社は東証一部上場の企業様からのスカウトでした。

使用技術

  • HTML/CSS
  • Bootstrap
  • JavaScript/jQuery/Ajax
  • Ruby 2.6.5
  • Rails 6.0.0
  • MySQL 5.6.50
  • Nginx(Web Server)
  • Unicorn(Application Server)
  • Docker 20.10.0
  • docker-compose 1.27.4
  • CircleCI(CI/CD)
  • Capistrano
  • AWS EC2 (Amazon Linux2)/RDS(MariaDB)/S3/VPC/IAM
  • AWS(ACM,Route53,ALB)

使用技術については、これらの技術を使いました。
最近だと本当にレベルの高い方はAWS環境でもDockerを使用したり、VueやReactを使用してSPA化をしている方もいて、実際に高評価を得ているようです。

ですが、僕自身はそこまでできなかったので、ある程度のレベルの高いポートフォリオを作ったら転職活動にコミットしました。
それに、これは年齢も関係しますが、開発環境にDockerとdocker-compose、CircleCIでAWSとCI/CDをしていれば今の所、それなりのポートフォリオとしての評価をしていただけます。

実際に僕自身、ポートフォリオについての評価をしていただいた企業様からは、それなりに高評価を得られました。

インフラ構成

104869515-93344500-5989-11eb-9741-a41cff8fd5bb.png

インフラ構成はこのようにして、AWSによる独自ドメインを取得し常時SSL化まで行いました。

作成したアプリ

僕が作成したアプリは「Plans App」というアプリで、よくある記事投稿系のアプリです。
一部をお見せすると以下のような感じのアプリです。

105937646-55c26c80-6099-11eb-897d-2fcccb0d2f14.png

104876419-faa6c080-599a-11eb-8321-77ff44e9caa1.png

104876421-fd091a80-599a-11eb-8ac9-73bf8274644d.png

本当によくあるし、よく見かけるアプリですが、1番意識したのは「誰のどんな問題を解決するのか」を意識し、それを解決したりサポートしたりするために機能をつけるということです。

正直、ここが1番重要なのに、ポートフォリオで技術アピールする人が結構いるらしいです。
なので、ポートフォリオは確かに未経験でのエンジニアには必須なんですけど、技術よりも100倍「誰の課題を解決」するのかを明確にしてから作成しないと、痛い目にあいます。

例えば、自分の場合だと、「読書や知識を得ても行動する人とそうでない人がいるのはなんでだろう」という疑問から、アプリを作成しました。
この仮説から「行動できない・しない人、知識を成果に繋げられない人」の課題を解決するために、知識のアウトプットだけでなく、アクションプランのアウトプットもして行動できるようなアプリを作成しようと思い、このアプリを作りました。

技術やデザインなどよりも、普遍的なアプリだけど「誰の課題を解決するのか」が明確に話せるようにアプリを作成すると面接でもプラスの評価を得やすくなります。
なぜなら、エンジニアの仕事はただコードを書くだけでなく、「0→1で誰かの課題を解決すること」がメインだからです。

ですので、ポートフォリオ作成にはそこまでリソースを割かずに、面接練習メインで転職活動するほうが転職成功につながると思います。

機能一覧

機能についてはいかに一覧をまとめました。

ユーザー機能

  • ユーザー新規登録・ログイン機能(Gem: devise)
  • SNS 認証ログイン機能(Twitter/Facebook API/ Gem: omniauth)
  • ゲストログイン
  • ユーザー情報編集機能(Gem: ActiveStorage)
  • ユーザーアイコンプレビュー表示機能
  • ユーザー詳細ページ表示機能
  • ユーザー週間アナリティクス機能

投稿機能

  • 新規投稿機能(画像投稿用に Gem: ActiveStorage 使用)
  • 投稿一覧表示機能(いいね順・新着順で表示を分けています)
  • 投稿詳細表示機能
  • 投稿編集機能
  • 投稿削除機能
  • SNS 共有機能(Twitter/Facebook/LINE)
  • ページネーション機能(Gem: kaminari)
  • マークダウン形式による投稿・投稿表示(Gem: redcarpet, Gem: coderay)
  • タグ付機能
  • タグ付け機能(Form オブジェクト)
  • タグのインクリメンタルサーチ機能(Ajax/非同期処理)
  • タグ一覧表示機能

コメント機能

  • コメント新規投稿機能(画像投稿に Gem: ActiveStorage 使用)
  • コメント削除機能
  • コメント一覧表示機能

検索機能

  • キーワード検索機能

フォロー・フォロワー機能

  • フォロー・フォロー解除機能
  • フォロー、フォロワー一覧表示機能

いいね機能

  • いいね・いいね解除機能
  • いいね一覧表示機能
  • いいねしたユーザー一覧表示機能

通知機能

  • いいね・フォロー・コメントの通知
  • 通知一覧表示機能
  • 通知削除機能

DM機能

  • ユーザー間チャット作成機能(相互フォロー同士のみ)
  • チャットルーム内メッセージ投稿機能
  • チャットルーム削除機能

メモ機能

  • アプリ内メモ機能
  • ドラック&ドロップ機能(JavaScript)
  • メモ既読機能(Ajax/非同期通信)
  • メモ一括削除機能

テスト機能

  • RSpec/Rubocop テスト機能
  • エラーメッセージの日本語表示
  • モデルに対するバリデーション(正規表現)

意識したこと

僕が意識したこととしては、何回も言いますが、課題解決です。

でも、さすがにこれは聞き飽きた方もいると思うので、技術的な面で意識したことをいかにリスト化しておきます。

  • 使い方が直感的に理解できること
  • UI/UXが整っていること
  • レスポンスが高速なこと
  • リアルなデモデータが登録されていること
  • 機能数が十分に多いこと
  • テストが十分に書かれていること
  • 不具合がないこと
  • DRY原則
  • GitHubの活用
  • やや難易度の高い技術を使用

これを意識して作成すれば、高評価につながるポートフォリオを作成できるはずです。
その中でも特に重要なのが、レスポンスの速さとテスト、機能数、UI/UXかなと個人的には思います。

やはり、ポートフォリオは転職活動には必須ですが、現場のエンジニアの方がガッツリ見てくれるかと言うと、そうでもないからです。
自分の仕事がある中で評価しているので、それを考慮した上でアプリケーションを作成しないといけません。

ですので、レスポンスの速さ・UI/UXは特に重要で、「第一印象が大事」と言われるように、この2項目はアプリの第一印象を決めます。
それだけでなく、「この人は気遣いできない人」という印象を抱かせてしまい、「ユーザー視点が持てないのかな?」と思われる原因にもなりかねません。

また、これは余談ですが、Herokuでのデプロイはおすすめしません。
使ったことがある方はわかると思いますが、Herokuはレスポンスが非常に遅いです。
なので、デプロイはAWSを使用するのが初学者でも必須となります。

さらに、テストも同様で、未経験からのスタートとなるとテスターなど簡単な業務からのスタートが一般的なので、テストコードを書いていないということは「舐めているのか」と捉えられかねません。

ですので、単体テストだけでなく、結合テストまでしっかりと書きましょう。

その上で、難易度の高い技術に挑戦してください。

さいごに

ここまで読んでくださり、ありがとうございます。
自分は転職成功するまで約280社応募し内定いただけたのが1社のみでした。

それも、はっきり言って「運が良かった」としか言いようがありませんし、結局の所、どれだけメンタル的に折れずに続けられるかという精神論的なところに行き着きます。
ただ、やはり何よりも重要なのは「この人と一緒に働きたいか」と考えてもらえる・思ってもらえることが何よりも重要です。

ここまでポートフォリオを作り込んでも、あなたが思っているほど見られませんし、評価もされません。
厳しいですが、現実はこんなもんということを痛感させられます。

ですので、僕から最後に言えることは、「お互いまだまだ未熟者、気長に頑張ろう」ということです。

今回は以上です。
最後まで読んでいただきありがとうございます。この記事が少しでもあなたの参考になれば嬉しいです！

参考文献

『Web系エンジニアになろう』

Discussion