はじめに
私は32歳の既婚男性で実務未経験です。
エンジニア転職でポートフォリオが必要と知り、
出来るだけモダンな技術を使用してアプリを実装しました。
当記事では、ポートフォリオ完成までの過程を振り返りながら、まとめます。
転職活動の結果
「結局、この人は転職できたの？」って疑問に思われる方のために
結果を載せておきます。
- 活動期間: 約2.5ヶ月
- エントリー企業数: 60社
- 内定企業数: SES1社、受託開発3社、自社開発2社
自社開発企業以外はwantedlyスカウト経由で内定までいきました。
ポートフォリオ概要
転職が叶ったので、7/13時点でサービスを停止しました。申し訳ありません。
ただ一通りの機能はGitHubから見れるようにしてますので参考にどうぞ
- アプリ名: Engists
- サービス内容: エンジニア転職をサポートする情報サイト
- 対象: プログラミング学習中・転職活動中の人、内定者
- フレームワーク： Rails, Vue
レスポンシブ対応
ダークモード
検索機能
DM機能
ランキング機能
こだわったポイント
- VueはCompositionAPIのscript setupで記述する
- ECSはBlue/Greenデプロイメントを採用する
- ダークモードとレスポンシブ対応を実現するためにTailwindCSSを使う
「同じ技術をポートフォリオに組み込みたいけど、どう学習しよう…」と悩んでいる人は多少は参考になるかもです。
私が学習に使用した教材(Udemyや書籍など)を載せてます。
以降から、学習過程を説明していきます！
1. 基礎学習
学習期間：2020年12月~2021年5月
この期間は会社を退職後に職業訓練校に通っていた時期です。
本当にエンジニアになりたいのか？と探りながら生活していました。
職業訓練校では
- ラダー図
- コンピュータサイエンス
- Linux
- データベース
- HTML / CSS / JavaScript
- Java
を学習しました。
受講時間は原則9：00〜15：00でして、
居住地から少し離れた訓練校を選んだため
移動には片道1.5時間ほど掛かっていました。
訓練校への出発前・移動中・帰宅後の時間を活用して
書籍、Progate/ドットインストール、Udemy、Railsチュートリアルで
以下項目を学習していました。
- コンピュータサイエンス
- HTML / CSS
- JavaScript
- Ruby
- データベース
- Git / GitHub
- Rails
以上をざぁーっと学習し終えてから、ポートフォリオ作成のフェーズに移りました。
この時点で転職活動もしましたが、職業訓練校の斡旋はSES企業が中心で
面接で話を伺っても「これは開発経験が積めないのでは…？」と肌感で感じたので
卒業後、独学をしようと決心しました。
2.設計と基本機能の実装
学習期間：2021年6月1日~6月30日
最初は、ポートフォリオ1作品目の画面遷移図・画面設計図・ER図から作成しました。
どう設計すれば良いか分からない状態でしたが、他の方のポートフォリオを参考に
自分なりに組み立てて10日間ほど掛かったと思います。
■画面設計図・画面遷移図
■ER図
設計を終えた後は、以下の基本機能を実装しました。
- ユーザー新規登録/ログイン
- ユーザー情報編集
- 簡単ログイン
- 記事投稿
- 記事一覧
- 記事詳細
- フォロー
- フォロワー一覧
- コメント
- いいね
- ブックマーク
- ダイレクトメッセージ
- 検索
Railsチュートリアル/Qiita記事を参考にして実装できました。
実装しながら、CRUD / RestAPI / MVC について理解が深まりました。
3.RSpecテスト
学習期間：2021年7月1日~7月20日
これまで実装した機能に対するテストコードをRSpecで書きました。
RSpecは以下書籍で学習しました。
都度でJunichi ItoさんのQiita記事をリファレンスにして実装しました。
見慣れないコードで戸惑ったのを覚えていますが
モデルのバリデーション、コントローラーの処理、ビューの表示を
各Specのコードでテストが上手く通った時は
こうやって自動テストを書くのか！と少し実感できました。
4.UI/UXブラッシュアップ
学習期間：2021年7月21日~8月10日
純粋なCSSでスタイルを書きました。
理由はBootStrapは採用担当者が見飽きてると情報に目にしたからです。
以下書籍を読んだ後に、しまぶーさんのyoutube動画で
FrexboxやGridのレイアウトについて学びました。
しかし全てCSSで書くのは難易度が高すぎた為、
結果的に想像よりクオリティが低い仕上がりになりました。
余計な先入観を持たずにBootStrapを入れて
部分的にカスタマイズした方が
この時点では良かったな…と反省しています。
ただ、レイアウトは少し改善されたので
完璧な仕上がりは目を伏せて、次の実装に移すことにしました。
(後工程でVueを導入して最終的にはデザインを改善しようと思っていました。)
5.インフラをAWSで構築する
学習期間：2021年8月10日~8月28日
ここまでの工程で、ローカル環境にのみアプリが存在する状態でしたので
本番環境としてAWSのEC2上にアプリをホストしました。
またCapistranoを使用して自動デプロイで行う仕組みを作りました。
VPCでリソースを配置する場所を確保し、パブリック/プライベートサブネットに定義して
RailsサーバーとMySQLサーバーをそれぞれ配置させる構成です。
(Railsの投稿画像はCloudFrontを経由し、S3に保存/取得させました。)
また、独自ドメインを取得しクライアントからのリクエストは
Route53がALBに向けるように設定しました。
AWSはcloud9以外は触ったこともない状態でしたので
基礎学習を下記書籍で行った上で、実装しました。
AWSでインフラ構築を経験することで、インターネットで公開されているwebサービスが
裏側ではセキュリティやアクセス負荷を考慮して基盤が構築されているんだな…と
少し想像できるようになりました。
6.開発環境にDockerを導入する
学習期間：2021年8月29日~2021年9月4日
docker-composeを用いて複数コンテナを同時起動させる開発環境を構築しました。
最初にDockerを導入するメリットを調査してから、下記の入門Dockerを触ってみました。
その後に、小島さんのUdemy教材を途中まで学習し、
山浦さんのyoutube動画でもとに実アプリにDockerを組み込みました。
Docker環境の構築後には
今までローカルに必要なライブラリなどを個別にインストールしていた
あの煩わしい作業がなくなって快適になるんだな…と実感しました。
Dockerの設定方法をQiita記事にまとめました。
7.CircleCIでCI/CDパイプラインを構築する
学習期間：2021年9月5日~9月12日
ローカルリポジトリからリモートリポジトリにpushした際にCircleCIが検知し、
自動テストが通れば、EC2にデプロイする仕組みを作りました。
学習は公式サイトの入門ガイドを見て、GitHubのリポジトリをCircleCIに繋げてみました。
その後はQiita記事を参考にして、
自動ビルド/テスト（CI）と自動デプロイ(CD)の実装を分けて
ひたすらCircleCIが通るか検証を繰り返して、実装しました。
CI/CDパイプラインを構築後は
手動でrubocop/RSpec/Capistranoを起動するコマンドを実行する必要もなくなり、
開発作業が短縮されることを実感できました！
CircleCIもQiita記事にまとめました。
8.応用機能の実装
学習期間：2021年9月13日~9月24日
以下機能の実装およびテストコードを記述しました。
- 検索条件に並び替えの指定を追加
- フォロワーが多いユーザー / いいね数が多い記事 をランキング形式で表示
- DM / コメント / いいね / フォローされた際の通知
いま振り返ると、応用機能じゃないですが
予定していた残りの機能を完成させました。
9.Vueの基礎学習
学習期間：2021年9月25日~11月15日
なぜフロントエンドのSPA構成が浸透しているかを調べた上で学習に入りました。
ここではJavaScriptをProgate/ドットインストールでざっと復習した後、
以下のUdemy教材で、Vue / Nuxt / TypeScriptを学習しました。
以上３つの動画は
- VueかNuxtどちらで開発するかが未定
- TypeScriptは導入したい
という観点から選択しました。
ですが、もっと情報整理して
- Vue2 or Vue3 どちらを使いたいか
- さらにOptionsAPI、CompositionAPIどちらで書くか
- TypeScriptは開発当初から必要か
をしっかり考えて学習に入った方が効率が良かったな…と反省しています。
結果として、３つの動画で学習した内容は実アプリに反映しませんでした。
最終的には
- NuxtはVue3に対応したバージョンがβ版しかないので選定から外す
- Vue3の中でもCompositionAPIの文法で書く
- TypeScriptは読み解くのが難しいので、まずはJavaScriptで機能実装する
と判断したため、下記教材でVue3（CompositionAPI）を学習しました。
このフェーズで実アプリへの反映がストップし、気持ちが焦りましたが、
気分転換にVue導入ではなく、インフラの難しい技術を取り組むことにしました。
10.EC2からECS/Fargateに変更する
学習期間：2021年11月16日~12月15日
アプリのホスト先をEC2からECS/Fargateに変更しました。
また新旧の環境を即座に切替できるblue/greenデプロイメントを採用しました。
以下教材で学習をした後に、具体的にRailsをECS/Fargate上にホストする方法を調査して実装しました。
EC2では必要なライブラリを手動でインストールしないといけない為、管理コストが高いデメリットがありましたが
ECSはDockerコンテナで環境を構築できるため、EC2のような管理コストはなくなりました。
さらにアクセス負荷に応じて起動コンテナ数を増やすことも可能な為、ECSが使われているんだな…と理解できました。
ECS/Fargateを構築した手順もQiita記事にまとめました。
11.Terraformでインフラ構築をコード化する
学習期間：2021年12月16日~2022年1月4日
前章のAWS全リソースをTerraformコードからコマンド実行で生成できるようにしました。
IaCの代表例であるTerraformを採用しました。
Terraformの学習は、津郷さんのUdemy動画が神教材でしたのでオススメします。
ただしECS/Fargateのコンテナ構築のみ範囲外でしたので、下記書籍でカバーしました。
以前までAWSマネジメントコンソール画面でボタンを押してインフラ構築していたことが、
コード実行により一発でインフラ構築ができた時は、感動しました！
TerraformもQiitaにまとめています。
12.Vue × Railsで2作品目を作成
学習期間：2022年1月5日~2022年3月31日
ここまで1作品目のポートフォリオでアウトプットしてきたのですが、
実装しながら、モヤモヤした気持ちがありました。
それはこのポートフォリオ自分も使いたいと思う?でした。
前職の経験から1作品目のテーマに決めていましたが、途中で
自分も使うアプリの方が、ユーザー目線の改善箇所が見えてくるのでは…
と感じるようになり、思い切って2作品目を作ることにしました！
1作品目は転職用のポートフォリオとして提出できないレベルですが、一応herokuには残してます。
(CSSフレームワーク入れてないのでUI/UXが十分ではないです…)
何が実装できたか
1作品目で学んだことを活かしつつ、以下工程で進めていきました。
- 画面遷移図 / 画面設計図 / ER図の設計 ← (全て簡易的にしました)
- docker-composeでVueとRailsを連携させる開発環境を構築
- VueからaxiosでHTTP通信しRailsAPIを呼ぶ実装を行う
- CircleCIでS3上にVue、ECS上にRailsをデプロイさせる
- TailwindCSSでUI/UXをブラッシュアップする
最終的に下記アプリが作成できました！
どう勉強したか
【docker-composeによってフロント・バックのコンテナを分離させた開発環境の構築】
安藤さんのUdemy講座を参考させて頂きました。
教材で使用されているフロントエンドの技術はNuxtですが、各コンテナで環境変数を渡す方法が分かりやすく学べました。
【フロントエンドにVue、バックエンドにRailsを用いた実装方法】
豊田さんのtechpit教材で学習しました。
Vue.jsのCompositionAPIは前述した教材で勉強したのですが、それだけでは開発イメージつかなかったので、この教材が助けになりました。
初学者にもめちゃくちゃ分かりやすいです。
【本番環境の構築】
これはmentaを利用してメンターさんに相談しました。
フロントエンドにVue、バックエンドにRailsの構成で
本番環境を構築する記事が見当たらず、非常に苦戦したのを覚えています。
（調査はしましたがNuxt記事が多かったです。）
そこでmentaを契約して、実現したいアプリ構成を相談したところ、
VueをAWSのS3に配置して、ECS/Fargate上のRailsと通信させる
解決策を教えて頂きました。
どのようにVueをECSに配置させるか…ばかりに気を取られて、
他のアプリ構成を全く入れれてませんでしたので
メンターさんに出会えて、本当に良かったです。
【CSSフレームワークのTailwindCSS】
アオキさんのUdemy教材で学習しました。Vuetifyが現状だとVue3に正式対応していないので、TailwindCSSを選択しました。
TailwindCSSの旧バージョン2と新バージョン3を比較してくれてるので学習しやすいです。
その他、CompositionAPIの'script setup'で書く文法は
公式ドキュメントなどを閲覧して、解消していきました。
何を学んだか
Rails単体のMPAでコードを書いていた時は、
複数ページをユーザーに応じて動的に変化させるwebサービスの基本的な仕組みが
少し理解できました。
Vue×RailsのSPAでコードを書くと、
JavaScript(クライアント側)でも仮想的にルーティングが実現できること
Ruby(サーバー側)はDBと連携しデータを取得・加工するAPI機能に専念させられること
を学べました。
学習ロードマップ
学習をどこから始めれば良いか分からない状態でしたが
KENTAさんのロードマップを大いに参考させて頂きました！
オンラインサロン内ではちょっと質問させて頂く程度でしたが、大変お世話になりました！
優秀なメンターさんが多いので、もっとフル活用しておけば良かった。笑
終わりに
Vue.jsの学習はアプリへの実装だけを見れば無駄もありましたが、
TypeScriptやOptionsAPIにも触れられたので
個人判断で良い経験だった事にします！
長い記事でしたが、最後までお読み頂き、ありがとうございました。