この記事は、「ゼロからAWS/Terraform/Nuxt.js/Rubyを学習し始めると、ポートフォリオのリリースまでにどのような過程を踏むことになるのか？」 の補足記事です。
この記事は108日間のツイートのうち、フェーズ２（フロントエンド・バックエンド）を整理したものです。ツイートを複数埋め込んでいるため非常にページが重いです。（2021年8月7日現在、執筆途中）
| 本記事 |
|---|
| 「ゼロからAWS/Terraform/Nuxt.js/Rubyを学習し始めると、ポートフォリオのリリースまでにどのような過程を踏むことになるのか？ |
| 補足記事 |
|---|
| 【補足記事】ゼロから３ヶ月半でモダンなポートフォリオ (Fargate/Terraform/Nuxt.js/Ruby) をリリースするまで ②（フェーズ１. インフラ） |
| 【補足記事】ゼロから３ヶ月半でモダンなポートフォリオ (Fargate/Terraform/Nuxt.js/Ruby) をリリースするまで ④（フェーズ３. 振り返り） |
実際に、WEBアプリケーションを初めて開発する人が、どのような工程で開発を進めたかの参考資料として目指しています。
本記事で紹介している通り、フェーズ１の４５日間でインフラを整備している間に、作りたいポートフォリオを構想していました。
そして、次のフェーズ２の４５日間でフロントエンド・バックエンドに着手しました。
当時、Vuetify のドキュメントを読んで、いけると思ったUIが以下の通りです。
原案
Rails × Nuxt.js × AWS 49日目
— Kent@Rails×AWSでPF作成中 (@kent_0n) April 5, 2021
ドキュメンテーションを読んで、Vuetify が実現できる機能を一通り把握🔥
その次に、Figma で画面設計書づくり✏️
ママ会パパ会のマッチングWebサービスになる予定。さて、どうなるか😌#今日の積み上げ #駆け出しエンジニアと繋がりたい pic.twitter.com/Qi5ivpTKoo
48日目
Rails × Nuxt.js × AWS 48日目
— Kent@Rails×AWSでPF作成中 (@kent_0n) April 4, 2021
さぁ仕切り直しだ。
自動デプロイ ( ECS × CircleCI × Terraform ) を達成したからインフラはゴール 🎉ちょっと死んでた笑
見栄えのいいフェーズへ✨ まずは Vuetify で components ( Parallax & Grid ) から❗️#今日の積み上げ #駆け出しエンジニアと繋がりたい pic.twitter.com/7X8L9pfl2y
50日目
Rails × Nuxt.js × AWS 50日目
— Kent@Rails×AWSでPF作成中 (@kent_0n) April 6, 2021
開発中のヘッダーが、好奇心ドリブンでうるさくなっていく🤤
VS Code で、Vuetifyの文法を記述するのが楽しい。機能を実装したり分解したり😆
フロントが苦手だったけど、雪解けだ#今日の積み上げ #駆け出しエンジニアと繋がりたい pic.twitter.com/iBjbzuEEA4
53日目
Rails × Nuxt.js × AWS 53日目
— Kent@Rails×AWSでPF作成中 (@kent_0n) April 9, 2021
ログインモーダル完成 🙌
ログイン実装はオプションが豊富で時間が食われる。なのに UI を占める割合は少ない。
時間的に採算が合わない知識が多い。Linux レベル2 の攻略してるみたい😕
概要だけ押さえて次へ！#今日の積み上げ#駆け出しエンジニアと繋がりたい pic.twitter.com/B8zOvJs3Wg
54日目
Rails × Nuxt.js × AWS 57日目
— Kent@Rails×AWSでPF作成中 (@kent_0n) April 13, 2021
[✔︎] ログイン/ログアウト実装🐤
リダイレクトで誘拐されて帰ってこれなくなることはもうなくなった。
ホームに戻れる。成長した。初めてのお使いを達成した気分だ… 🍰#今日の積み上げ#駆け出しエンジニアと繋がりたい pic.twitter.com/EdOWRu17LH
55日目
Rails × Nuxt.js × AWS 55日目
— Kent@Rails×AWSでPF作成中 (@kent_0n) April 11, 2021
Vuex 習得しました😉
これによって、Nuxt.js (フロントエンド) × Rails (バックエンド) のサーバー連携ができる。高速なWebサイトになる🎉
Snackbar (フラッシュメッセージ) も覚えた。疲れた〜❗️#今日の積み上げ#駆け出しエンジニアと繋がりたい pic.twitter.com/ruSSNWzWzE
56日目 57日目
Rails × Nuxt.js × AWS 57日目
— Kent@Rails×AWSでPF作成中 (@kent_0n) April 13, 2021
[✔︎] ログイン/ログアウト実装🐤
リダイレクトで誘拐されて帰ってこれなくなることはもうなくなった。
ホームに戻れる。成長した。初めてのお使いを達成した気分だ… 🍰#今日の積み上げ#駆け出しエンジニアと繋がりたい pic.twitter.com/EdOWRu17LH
60日目
Rails × Nuxt.js × AWS 60日目
— Kent@Rails×AWSでPF作成中 (@kent_0n) April 16, 2021
[ ✔︎ ] フォロー機能実装 🕊
Rails チュートリアル でのラスボスみたいな機能 😁 あの時は挫折したけど、久しぶり！
そして Twitter を全力でリスペクトである。UI すごい！勉強になる✏️ #今日の積み上げ#駆け出しエンジニアと繋がりたい pic.twitter.com/Gn0mTiPt4f
61日目
Rails × Nuxt.js × AWS 61日目
— Kent@Rails×AWSでPF作成中 (@kent_0n) April 17, 2021
// イベントカード制作
// アルバムページ制作
Vuetify 文法の理解度が見た目に直結するので、試されている📝
フロント楽しくなってきた😆#今日の積み上げ#駆け出しエンジニアと繋がりたい pic.twitter.com/2rnurjhxJc
67日目
Rails × Nuxt.js × AWS 67日目
— Kent@Rails×AWSでPF作成中 (@kent_0n) April 23, 2021
[ ✔︎ ] 記事投稿機能🐶
(Floating Action Button でどのページからでも投稿可能。)
今日みたいに気圧変動があると、集中力削られる。
完璧を目指すよりまず終わらせろ。70点かな😬 次いこう#今日の積み上げ#駆け出しエンジニアと繋がりたい pic.twitter.com/PmF4XC4aLA
68日目
Rails × Nuxt.js × AWS 68日目②
— Kent@Rails×AWSでPF作成中 (@kent_0n) April 24, 2021
ページ制作中。形になってきたけど…。
なんか、違うっ、微妙なところの制御が、効かない…😫
左はぴょこんと跳ねるな💢 右はちょっと沈むな… がんばれ…💧#今日の積み上げ #プログラミング #駆け出しエンジニアと繋がりたい pic.twitter.com/pAcnYqgk6k
70日目
Rails × Nuxt.js × AWS 70日目②
— Kent@Rails×AWSでPF作成中 (@kent_0n) April 26, 2021
[ Vuetify (transition) × CSS (radius) ]
少しずつだけど、思ったものができるようになってきている😊#今日の積み上げ #プログラミング #CSS #HTML #Webデザイン#駆け出しエンジニアと繋がりたい pic.twitter.com/eIEBsKgZLF
71日目
Rails × Nuxt.js × AWS 71日目
— Kent@Rails×AWSでPF作成中 (@kent_0n) April 27, 2021
UIのブラッシュアップ✨
Vuetify に不思議と導かれるところがあって、マテリアルデザインの実装が体感的にわかってきたところ☺️#今日の積み上げ #プログラミング #駆け出しエンジニアと繋がりたい pic.twitter.com/vlREbwdG51
73日目
Rails × Nuxt.js × AWS 73日目
— Kent@Rails×AWSでPF作成中 (@kent_0n) April 29, 2021
≪ UI のブラッシュアップ✨
— Rails (def search) の発展形 ≫
もう一日中、プログラミングやっててもいい😚 楽しくて、時間が高速で過ぎていく🐇#今日の積み上げ #プログラミング #駆け出しエンジニアと繋がりたい pic.twitter.com/Ril9CQD120
75日目
Rails × Nuxt.js × AWS 75日目
— Kent@Rails×AWSでPF作成中 (@kent_0n) May 1, 2021
[ △ ] スマホ対応 🤔
綺麗なコードは綺麗に収まっている（右）。逆に、汚いコードは見事に荒れている。
プログラミングの理解度が結果として現れるんだなぁ。量をこなす時期だ。#今日の積み上げ #駆け出しエンジニアと繋がりたい pic.twitter.com/IaZOChdkIm
77日目
Rails × Nuxt.js × AWS 77日目
— Kent@Rails×AWSでPF作成中 (@kent_0n) May 3, 2021
[ ✔︎ ] イベント参加ボタン × SPA化
現職のインフラヘルプデスクはGWで繁忙期。そんな中、こうやって一日１個だけでも実装できると気持ち良い🙂
空中技みたいな SPA は、データ通信を操り切れるとすごく楽しい⭐️#今日の積み上げ #駆け出しエンジニアと繋がりたい pic.twitter.com/B2zu2N0X8r
78日目
Rails × Nuxt.js × AWS 78日目
— Kent@Rails×AWSでPF作成中 (@kent_0n) May 4, 2021
[ v-btn × props ( Vue.js のコンポーネント指向 ) ]
やっていることはデータのキャッチボール。最低限のコード行で最大限に機能の幅を利かせる。自分がSPA化を空中技だと思う由縁🕊 今日もお疲れ🍵#今日の積み上げ #駆け出しエンジニアと繋がりたい pic.twitter.com/56ZUSGj3nA
79日目
Rails × Nuxt.js × AWS 79日目
— Kent@Rails×AWSでPF作成中 (@kent_0n) May 5, 2021
UI ブラッシュアップ 🏃♂️
なんだか残念なデザインの詰め合わせみたい😅
あとちょっと…。あとちょっとな気はしているんだけどなぁ…💧#今日の積み上げ #駆け出しエンジニアと繋がりたい pic.twitter.com/iaGjn3fdCM
80日目
Rails × Nuxt.js × AWS 80日目
— Kent@Rails×AWSでPF作成中 (@kent_0n) May 6, 2021
UI ブラッシュアップ 🏃♂️🏃♀️
一つずつ着実に修正を…。
props で 親子孫関係 を繋げられるようになって、ひと山越えた感じ🦅 バックエンド⇔フロントエンドの行き来だってもう怖くない🔥 うぉ〜❗️#今日の積み上げ #駆け出しエンジニアと繋がりたい pic.twitter.com/dHZWuwNcYM
81日目
Rails × Nuxt.js × AWS 81日目
— Kent@Rails×AWSでPF作成中 (@kent_0n) May 7, 2021
SPA でデータ間のやり取りがうまくいかないところがあって、ちょっと停滞😓
記事ページのブラッシュアップをして本日のプログラミングは終了✏️#今日の積み上げ #駆け出しエンジニアと繋がりたい pic.twitter.com/3QKmlBhLQd
82日目
Rails × Nuxt.js × AWS 82日目
— Kent@Rails×AWSでPF作成中 (@kent_0n) May 8, 2021
[ コンポーネントの分離化 ( emit & props ) ]
生産効率が20倍上がったって感じた瞬間😊
コード一振りで Webアプリ全体を統一的にいじれるようになった。
たぶんここからデザインの力が一気についていくと思う🔥#今日の積み上げ #駆け出しエンジニアと繋がりたい pic.twitter.com/xn7wqN3XFo
83日目
Rails × Nuxt.js × AWS 83日目
— Kent@Rails×AWSでPF作成中 (@kent_0n) May 9, 2021
UI ブラッシュアップ🏃♂️🏃♀️🏃♂️
レイアウト崩壊問題を解決😄
トップページの大事な部分だから達成感が大きい。サウナに入った後には答えが大体見つかる。
明日は何ができるかな🕊#今日の積み上げ #駆け出しエンジニアと繋がりたい pic.twitter.com/GMq7zB84O4
84日目
Rails × Nuxt.js × AWS 84日目
— Kent@Rails×AWSでPF作成中 (@kent_0n) May 10, 2021
✏️ UI ブラッシュアップ
コンポーネントの分離化を推進。デザインのバランス向上。
今日もお疲れ様でした 🍵#今日の積み上げ #駆け出しエンジニアと繋がりたい pic.twitter.com/wR9vMBVR0o
87日目
Rails × Nuxt.js × AWS 87日目
— Kent@Rails×AWSでPF作成中 (@kent_0n) May 13, 2021
収束フェーズ😌
中途半端に散らかしていたコードの後始末。ESLint/Jest を CircleCI で通していく。
残念だけど実力以上のものはできない。辛いけど形にしなくてはいけない。#今日の積み上げ#駆け出しエンジニアと繋がりたい pic.twitter.com/XS8tilGB33
89日目
Rails × Nuxt.js × AWS 89日目②
— Kent@Rails×AWSでPF作成中 (@kent_0n) May 15, 2021
⭐️レイアウト再修正⭐️
入れられる技術は入れて、叶わないものは省いていく。一つずつ着実に。#今日の積み上げ#駆け出しエンジニアと繋がりたい pic.twitter.com/CX9zInkZc5
後日、Seedsを入れて形になる。
Seed を入れました。#今日の積み上げ#駆け出しエンジニアと繋がりたい pic.twitter.com/qByfrvlnHb
— Kent@Rails×AWSでPF作成中 (@kent_0n) May 24, 2021
ドキュメントは正義
89日目
Rails × Nuxt.js × AWS 89日目
— Kent@Rails×AWSでPF作成中 (@kent_0n) May 15, 2021
レイアウト崩壊問題再解決☺️
Pinterest っぽい！…かな？
Google で見つからない答えはドキュメントにあり。でも体力がある時にしか見つからず。
焦らずペースを保って😬#今日の積み上げ#駆け出しエンジニアと繋がりたい pic.twitter.com/aZh8NnO6xr
Googleの検索で見つけることができなかったが、ドキュメントに答えがあった。
63日目 テーマが確立されたのは２ヶ月を過ぎてから
Rails × Nuxt.js × AWS 63日目
— Kent@Rails×AWSでPF作成中 (@kent_0n) April 19, 2021
ドメイン登録 ＆ 証明書発行。
これでテーマ確定。
インフラ → バック → フロント… を経て、ようやくWebアプリケーションの全容が見えた。
けど、情報過多で頭が重い。踏ん張りどきだなぁ……#今日の積み上げ#駆け出しエンジニアと繋がりたい pic.twitter.com/IseXCQ1311
私の場合、つくりたいポートフォリオの構想ができるまで時間がかかっており、その間にインフラを構築していました。
実際、開発に取りかかってからドメインが決まるまでに２ヶ月かかっています。
| 本記事 |
|---|
| 「ゼロからAWS/Terraform/Nuxt.js/Rubyを学習し始めると、ポートフォリオのリリースまでにどのような過程を踏むことになるのか？ |
| 補足記事 |
|---|
| 【補足記事】ゼロから３ヶ月半でモダンなポートフォリオ (Fargate/Terraform/Nuxt.js/Ruby) をリリースするまで ②（フェーズ１. インフラ） |
| 【補足記事】ゼロから３ヶ月半でモダンなポートフォリオ (Fargate/Terraform/Nuxt.js/Ruby) をリリースするまで ④（フェーズ３. 振り返り） |