【補足記事】ゼロから３ヶ月半でモダンなポートフォリオ (Fargate/Terraform/Nuxt.js/Ruby) をリリースするまで③（フェーズ２. フロントエンド・バックエンド）

この記事は、「[ゼロからAWS/Terraform/Nuxt.js/Rubyを学習し始めると、ポートフォリオのリリースまでにどのような過程を踏むことになるのか？][1]」 の補足記事です。
[1]:https://qiita.com/wonderglot/items/cf0d4faa77b925960802

この記事は108日間のツイートのうち、フェーズ２（フロントエンド・バックエンド）を整理したものです。ツイートを複数埋め込んでいるため非常にページが重いです。（2021年8月7日現在、執筆途中）

本記事
「ゼロからAWS/Terraform/Nuxt.js/Rubyを学習し始めると、ポートフォリオのリリースまでにどのような過程を踏むことになるのか？

補足記事
【補足記事】ゼロから３ヶ月半でモダンなポートフォリオ (Fargate/Terraform/Nuxt.js/Ruby) をリリースするまで ②（フェーズ１. インフラ）
[【補足記事】ゼロから３ヶ月半でモダンなポートフォリオ (Fargate/Terraform/Nuxt.js/Ruby) をリリースするまで ④（フェーズ３. 振り返り）](【補足記事】ゼロから３ヶ月半でモダンなポートフォリオ (Fargate/Terraform/Nuxt.js/Ruby) をリリースするまで ④（フェーズ３. 振り返り）)

---

実際に、WEBアプリケーションを初めて開発する人が、どのような工程で開発を進めたかの参考資料として目指しています。

本記事で紹介している通り、フェーズ１の４５日間でインフラを整備している間に、作りたいポートフォリオを構想していました。
そして、次のフェーズ２の４５日間でフロントエンド・バックエンドに着手しました。

当時、Vuetify のドキュメントを読んで、いけると思ったUIが以下の通りです。

原案

Rails × Nuxt.js × AWS 49日目

ドキュメンテーションを読んで、Vuetify が実現できる機能を一通り把握🔥

その次に、Figma で画面設計書づくり✏️

ママ会パパ会のマッチングWebサービスになる予定。さて、どうなるか😌#今日の積み上げ #駆け出しエンジニアと繋がりたい pic.twitter.com/Qi5ivpTKoo

— Kent@Rails×AWSでPF作成中 (@kent_0n) April 5, 2021

####48日目

Rails × Nuxt.js × AWS　48日目

さぁ仕切り直しだ。

自動デプロイ ( ECS × CircleCI × Terraform ) を達成したからインフラはゴール 🎉ちょっと死んでた笑

見栄えのいいフェーズへ✨ まずは Vuetify で components ( Parallax & Grid ) から❗️#今日の積み上げ #駆け出しエンジニアと繋がりたい pic.twitter.com/7X8L9pfl2y

— Kent@Rails×AWSでPF作成中 (@kent_0n) April 4, 2021

####50日目

Rails × Nuxt.js × AWS 50日目

開発中のヘッダーが、好奇心ドリブンでうるさくなっていく🤤

VS Code で、Vuetifyの文法を記述するのが楽しい。機能を実装したり分解したり😆

フロントが苦手だったけど、雪解けだ#今日の積み上げ #駆け出しエンジニアと繋がりたい pic.twitter.com/iBjbzuEEA4

— Kent@Rails×AWSでPF作成中 (@kent_0n) April 6, 2021

####53日目

Rails × Nuxt.js × AWS 53日目

ログインモーダル完成 🙌

ログイン実装はオプションが豊富で時間が食われる。なのに UI を占める割合は少ない。

時間的に採算が合わない知識が多い。Linux レベル2 の攻略してるみたい😕
概要だけ押さえて次へ！#今日の積み上げ#駆け出しエンジニアと繋がりたい pic.twitter.com/B8zOvJs3Wg

— Kent@Rails×AWSでPF作成中 (@kent_0n) April 9, 2021

####54日目

Rails × Nuxt.js × AWS 57日目

[✔︎] ログイン/ログアウト実装🐤

リダイレクトで誘拐されて帰ってこれなくなることはもうなくなった。

ホームに戻れる。成長した。初めてのお使いを達成した気分だ… 🍰#今日の積み上げ#駆け出しエンジニアと繋がりたい pic.twitter.com/EdOWRu17LH

— Kent@Rails×AWSでPF作成中 (@kent_0n) April 13, 2021

####55日目

Rails × Nuxt.js × AWS 55日目

Vuex 習得しました😉

これによって、Nuxt.js (フロントエンド) × Rails (バックエンド) のサーバー連携ができる。高速なWebサイトになる🎉

Snackbar (フラッシュメッセージ) も覚えた。疲れた〜❗️#今日の積み上げ#駆け出しエンジニアと繋がりたい pic.twitter.com/ruSSNWzWzE

— Kent@Rails×AWSでPF作成中 (@kent_0n) April 11, 2021

####56日目　57日目

Rails × Nuxt.js × AWS 57日目

[✔︎] ログイン/ログアウト実装🐤

リダイレクトで誘拐されて帰ってこれなくなることはもうなくなった。

ホームに戻れる。成長した。初めてのお使いを達成した気分だ… 🍰#今日の積み上げ#駆け出しエンジニアと繋がりたい pic.twitter.com/EdOWRu17LH

— Kent@Rails×AWSでPF作成中 (@kent_0n) April 13, 2021

####60日目

Rails × Nuxt.js × AWS 60日目

[ ✔︎ ] フォロー機能実装 🕊

Rails チュートリアル でのラスボスみたいな機能 😁 あの時は挫折したけど、久しぶり！

そして Twitter を全力でリスペクトである。UI すごい！勉強になる✏️ #今日の積み上げ#駆け出しエンジニアと繋がりたい pic.twitter.com/Gn0mTiPt4f

— Kent@Rails×AWSでPF作成中 (@kent_0n) April 16, 2021

####61日目

Rails × Nuxt.js × AWS 61日目

// イベントカード制作
// アルバムページ制作

Vuetify 文法の理解度が見た目に直結するので、試されている📝

フロント楽しくなってきた😆#今日の積み上げ#駆け出しエンジニアと繋がりたい pic.twitter.com/2rnurjhxJc

— Kent@Rails×AWSでPF作成中 (@kent_0n) April 17, 2021

####67日目

Rails × Nuxt.js × AWS 67日目

[ ✔︎ ] 記事投稿機能🐶
(Floating Action Button でどのページからでも投稿可能。)

今日みたいに気圧変動があると、集中力削られる。

完璧を目指すよりまず終わらせろ。70点かな😬 次いこう#今日の積み上げ#駆け出しエンジニアと繋がりたい pic.twitter.com/PmF4XC4aLA

— Kent@Rails×AWSでPF作成中 (@kent_0n) April 23, 2021

####68日目

Rails × Nuxt.js × AWS 68日目②

ページ制作中。形になってきたけど…。

なんか、違うっ、微妙なところの制御が、効かない…😫

左はぴょこんと跳ねるな💢 右はちょっと沈むな… がんばれ…💧#今日の積み上げ #プログラミング #駆け出しエンジニアと繋がりたい pic.twitter.com/pAcnYqgk6k

— Kent@Rails×AWSでPF作成中 (@kent_0n) April 24, 2021

####70日目

Rails × Nuxt.js × AWS 70日目②

[ Vuetify (transition) × CSS (radius) ]

少しずつだけど、思ったものができるようになってきている😊#今日の積み上げ #プログラミング #CSS #HTML #Webデザイン#駆け出しエンジニアと繋がりたい pic.twitter.com/eIEBsKgZLF

— Kent@Rails×AWSでPF作成中 (@kent_0n) April 26, 2021

####71日目

Rails × Nuxt.js × AWS 71日目

UIのブラッシュアップ✨

Vuetify に不思議と導かれるところがあって、マテリアルデザインの実装が体感的にわかってきたところ☺️#今日の積み上げ #プログラミング #駆け出しエンジニアと繋がりたい pic.twitter.com/vlREbwdG51

— Kent@Rails×AWSでPF作成中 (@kent_0n) April 27, 2021

####73日目

Rails × Nuxt.js × AWS 73日目

≪ UI のブラッシュアップ✨
— Rails (def search) の発展形 ≫

もう一日中、プログラミングやっててもいい😚 楽しくて、時間が高速で過ぎていく🐇#今日の積み上げ #プログラミング #駆け出しエンジニアと繋がりたい pic.twitter.com/Ril9CQD120

— Kent@Rails×AWSでPF作成中 (@kent_0n) April 29, 2021

####75日目

Rails × Nuxt.js × AWS 75日目

[ △ ] スマホ対応 🤔

綺麗なコードは綺麗に収まっている（右）。逆に、汚いコードは見事に荒れている。

プログラミングの理解度が結果として現れるんだなぁ。量をこなす時期だ。#今日の積み上げ #駆け出しエンジニアと繋がりたい pic.twitter.com/IaZOChdkIm

— Kent@Rails×AWSでPF作成中 (@kent_0n) May 1, 2021

####77日目

Rails × Nuxt.js × AWS 77日目

[ ✔︎ ] イベント参加ボタン × SPA化

現職のインフラヘルプデスクはGWで繁忙期。そんな中、こうやって一日１個だけでも実装できると気持ち良い🙂

空中技みたいな SPA は、データ通信を操り切れるとすごく楽しい⭐️#今日の積み上げ #駆け出しエンジニアと繋がりたい pic.twitter.com/B2zu2N0X8r

— Kent@Rails×AWSでPF作成中 (@kent_0n) May 3, 2021

####78日目

Rails × Nuxt.js × AWS 78日目

[ v-btn × props ( Vue.js のコンポーネント指向 ) ]

やっていることはデータのキャッチボール。最低限のコード行で最大限に機能の幅を利かせる。自分がSPA化を空中技だと思う由縁🕊 今日もお疲れ🍵#今日の積み上げ #駆け出しエンジニアと繋がりたい pic.twitter.com/56ZUSGj3nA

— Kent@Rails×AWSでPF作成中 (@kent_0n) May 4, 2021

####79日目

Rails × Nuxt.js × AWS 79日目

UI ブラッシュアップ 🏃‍♂️

なんだか残念なデザインの詰め合わせみたい😅

あとちょっと…。あとちょっとな気はしているんだけどなぁ…💧#今日の積み上げ #駆け出しエンジニアと繋がりたい pic.twitter.com/iaGjn3fdCM

— Kent@Rails×AWSでPF作成中 (@kent_0n) May 5, 2021

####80日目

Rails × Nuxt.js × AWS 80日目

UI ブラッシュアップ 🏃‍♂️🏃‍♀️
一つずつ着実に修正を…。

props で 親子孫関係 を繋げられるようになって、ひと山越えた感じ🦅 バックエンド⇔フロントエンドの行き来だってもう怖くない🔥 うぉ〜❗️#今日の積み上げ #駆け出しエンジニアと繋がりたい pic.twitter.com/dHZWuwNcYM

— Kent@Rails×AWSでPF作成中 (@kent_0n) May 6, 2021

####81日目

Rails × Nuxt.js × AWS 81日目

SPA でデータ間のやり取りがうまくいかないところがあって、ちょっと停滞😓

記事ページのブラッシュアップをして本日のプログラミングは終了✏️#今日の積み上げ #駆け出しエンジニアと繋がりたい pic.twitter.com/3QKmlBhLQd

— Kent@Rails×AWSでPF作成中 (@kent_0n) May 7, 2021

####82日目

Rails × Nuxt.js × AWS 82日目

[ コンポーネントの分離化 ( emit & props ) ]

生産効率が20倍上がったって感じた瞬間😊

コード一振りで Webアプリ全体を統一的にいじれるようになった。

たぶんここからデザインの力が一気についていくと思う🔥#今日の積み上げ #駆け出しエンジニアと繋がりたい pic.twitter.com/xn7wqN3XFo

— Kent@Rails×AWSでPF作成中 (@kent_0n) May 8, 2021

####83日目

Rails × Nuxt.js × AWS 83日目

UI ブラッシュアップ🏃‍♂️🏃‍♀️🏃‍♂️

レイアウト崩壊問題を解決😄

トップページの大事な部分だから達成感が大きい。サウナに入った後には答えが大体見つかる。

明日は何ができるかな🕊#今日の積み上げ #駆け出しエンジニアと繋がりたい pic.twitter.com/GMq7zB84O4

— Kent@Rails×AWSでPF作成中 (@kent_0n) May 9, 2021

####84日目

Rails × Nuxt.js × AWS 84日目

✏️ UI ブラッシュアップ

コンポーネントの分離化を推進。デザインのバランス向上。

今日もお疲れ様でした 🍵#今日の積み上げ #駆け出しエンジニアと繋がりたい pic.twitter.com/wR9vMBVR0o

— Kent@Rails×AWSでPF作成中 (@kent_0n) May 10, 2021

####87日目

Rails × Nuxt.js × AWS 87日目

収束フェーズ😌

中途半端に散らかしていたコードの後始末。ESLint/Jest を CircleCI で通していく。

残念だけど実力以上のものはできない。辛いけど形にしなくてはいけない。#今日の積み上げ#駆け出しエンジニアと繋がりたい pic.twitter.com/XS8tilGB33

— Kent@Rails×AWSでPF作成中 (@kent_0n) May 13, 2021

####89日目

Rails × Nuxt.js × AWS 89日目②

⭐️レイアウト再修正⭐️

入れられる技術は入れて、叶わないものは省いていく。一つずつ着実に。#今日の積み上げ#駆け出しエンジニアと繋がりたい pic.twitter.com/CX9zInkZc5

— Kent@Rails×AWSでPF作成中 (@kent_0n) May 15, 2021

後日、Seedsを入れて形になる。

Seed を入れました。#今日の積み上げ#駆け出しエンジニアと繋がりたい pic.twitter.com/qByfrvlnHb

— Kent@Rails×AWSでPF作成中 (@kent_0n) May 24, 2021

##ドキュメントは正義
####89日目

Rails × Nuxt.js × AWS 89日目

レイアウト崩壊問題再解決☺️

Pinterest っぽい！…かな？

Google で見つからない答えはドキュメントにあり。でも体力がある時にしか見つからず。

焦らずペースを保って😬#今日の積み上げ#駆け出しエンジニアと繋がりたい pic.twitter.com/aZh8NnO6xr

— Kent@Rails×AWSでPF作成中 (@kent_0n) May 15, 2021

Googleの検索で見つけることができなかったが、ドキュメントに答えがあった。

##63日目 　テーマが確立されたのは２ヶ月を過ぎてから

Rails × Nuxt.js × AWS 63日目

ドメイン登録 ＆ 証明書発行。
これでテーマ確定。

インフラ → バック → フロント… を経て、ようやくWebアプリケーションの全容が見えた。

けど、情報過多で頭が重い。踏ん張りどきだなぁ……#今日の積み上げ#駆け出しエンジニアと繋がりたい pic.twitter.com/IseXCQ1311

— Kent@Rails×AWSでPF作成中 (@kent_0n) April 19, 2021

私の場合、つくりたいポートフォリオの構想ができるまで時間がかかっており、その間にインフラを構築していました。

実際、開発に取りかかってからドメインが決まるまでに２ヶ月かかっています。

---

本記事
「ゼロからAWS/Terraform/Nuxt.js/Rubyを学習し始めると、ポートフォリオのリリースまでにどのような過程を踏むことになるのか？

補足記事
【補足記事】ゼロから３ヶ月半でモダンなポートフォリオ (Fargate/Terraform/Nuxt.js/Ruby) をリリースするまで ②（フェーズ１. インフラ）
[【補足記事】ゼロから３ヶ月半でモダンなポートフォリオ (Fargate/Terraform/Nuxt.js/Ruby) をリリースするまで ④（フェーズ３. 振り返り）](【補足記事】ゼロから３ヶ月半でモダンなポートフォリオ (Fargate/Terraform/Nuxt.js/Ruby) をリリースするまで ④（フェーズ３. 振り返り）)