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

#### はじめに
<b>25歳（リリース当時）、実務未経験者</b>です。フルタイムで働きながらプライベートの<b>３ヶ月半すべてを開発に</b>投じました。
108日間でポートフォリオのリリースまで辿り着いたので、解き直しと反省を兼ねながらまとめます。
<b>太字</b>を追えば、<b>記事の８割が理解できる</b>ようになっています。


#### ※ 6月30日追記
投稿して<b>半日</b>も経たずに<b>１００いいね</b>頂きました。
ありがとうございます！ 励みになります🙇‍♂️ これからも頑張っていきますね❗️
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">【モダンなポートフォリオ記事】<br><br>▶︎ 独学３ヶ月半の集大成です。<br>　- 完全SPA化<br>　- コンテナ基盤にFargate<br>　- インフラをTerraformでコード化<br><br>子どもの社会問題をベースに、UI/UX を考えました。どうぞよろしくお願いします🙇‍♂️<a href="https://twitter.com/hashtag/Qiita?src=hash&amp;ref_src=twsrc%5Etfw">#Qiita</a> <a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a> <a href="https://t.co/Dw5pDIO1Sj">https://t.co/Dw5pDIO1Sj</a></p>&mdash; Kent@Nuxt×AWSで転活中 (@kent_0n) <a href="https://twitter.com/kent_0n/status/1409829089624555524?ref_src=twsrc%5Etfw">June 29, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


##👧ポートフォリオ（サービス名：MeetWithKids）

![Screen Shot 2021-06-25 at 16.06.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335807/74408f5c-91ea-9873-ce1a-4c4f072b4d9f.png)
![Screen Shot 2021-06-25 at 16.06.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335807/8b7de7e8-57e0-49a7-b197-8ddae73d916b.png)

####概要
<b>子どもたちのネットワークに異年齢間の交友関係を作り出したい</b>という思いで制作。
実際に異年齢保育/教育（０〜１２歳）の現場で親御さんに直接リサーチしました。
また、SNSでママパパのコミュニティの情報も毎日集めたところ、
<b>子どもたちのコミュニティで異年齢間の交友が減っている</b>という問題を認識しました。

その解決のためには、<b>ママパパのコミュニティを広げることが必要</b>であるという経験則から、
マッチングアプリを開発。<b>気軽に “Let’s meet with kids!” できるようなサービス</b>を目指しました。

　~~◇ URL：https://meetwithkids.org （※リンク先で、ページ上の「ヘルプ」を押して下さい）~~
　◇ ソースコード：https://github.com/kent7k/rr
　　　<b>※2021/8/13に配信停止しました。</b>

####制作背景
<b>異年齢保育（０〜１２歳）を実践する保育園で、利用理由を親御さんに直接リサーチ</b>したところ、
その<b>目的は「幼い頃から幅広い年齢層と関わり合うこと」</b>でした。
年齢別の学級・学年では得難い機会が求められていました。

私自身も幼少期から幅広い年齢層と関わり合うことが多く、その保育システムに好感を持ちました。
実際に現場に携わったところ、幅広い年齢の子どもたちが、緊張したり恥ずかしがったりしながらも、
次第に、年下から慕われたり年上から可愛がられたりして、<b>人間的に急成長していく</b>姿を見るのは喜ばしかったです。

一方で、<b>そのような機会が得られない子どもたちがいるのではないか？</b>と考えが及びます。

同時期、プライベートでも子どもたちを預かる機会が多くあり、
「色んな子に出会えて嬉しがっている」との声を聞かせてもらいました。
その声の裏側にどのようなリアルがあるのか気になり、
<b>親御さんたちの発信をSNSで毎日リサーチ</b>したところ、

> 「スマホで動画ばかり見て、友達と遊ばない。将来大丈夫かしら」
> 「いつもクラスの同じ友達とゲームばかりしている」

<b>子どもたちの中で異年齢間の交友が以前よりも薄まっている問題を認識</b>しました。
悪いことに、この問題はコロナにより深刻化します。

>「ステイホームで外での付き合いがほとんどなくなってしまった」
>「１年に一度しかない全学年合同の行事が中止になってしまった」

この問題を解決するために、直接子どもたちのネットワークに異年齢間の交友関係をつくることはできないかと思案しました。
しかし小学生でスマホを持つ現代と言えど、ITの力でそれを実現させるのは非常に難しいと感じました。

そこで、<b>ママパパのコミュニティにアプローチをかけることが現実的かつ有効な手段</b>になり得ると考えました。
これは、かつて私が学童設立する際に行った経験に基づいており、
実際の話として、<b>親御さんの交友関係が広がれば、自ずと子どもの交友関係も広がります</b>。

とはいえ、多くの親御さんは異年齢間の関係を与える余裕を持てないでいます。
なぜなら、家事・育児・仕事に追われているからです。
しかしながら、ママパパは時間のやり繰りをして生活をうまく回しています。
その中に、隙間時間が確かにあります。
私はその隙間にすべり込んで、<b>親御さんの中に、<b>“Let’s meet with kids!” の気持ちを生み出したい</b>。
それも気軽な気持ちとして。だからサービス名もカジュアルな文法で "Meet with kids"。

<b>ひいては、子どもたちのネットワークに異年齢間の交友関係を作り出したい</b>。
よろしくお願いします。




## インフラ構成図
![infrastructure3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335807/e5e5ac65-5b6f-02d5-6fb0-3b343cbeacd1.png)

#### 補足
| フロントエンド  | バックエンド  | インフラ |
| :--- | :--- | :--- |
| HTML / CSS / JavaScript | Ruby 2.7.1 | Docker |
| Nuxt.js + Vuetify | Rails 6.0.3 | CircleCI |
| Jest / ESLint + Prettier | RSpec / Rubocop | AWS + Terraform |


## ER図
![ER4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335807/12292c3e-f4f5-3f80-9e1a-93cfe2137025.png)




## 工夫した点

#### UI/UX の点で意識したこと
・色に「太陽」と「野原」を意識したこと。
・柔らかい雰囲気になるように、全体的に丸みを帯びさせたこと。
・<b>50人以上のペルソナを用意して、1人ずつ別々の投稿を考えた</b>こと。
  
・<b>参加までの導線を引いて、忙しい親御さんが隙間時間で気軽に利用できるようにした</b>こと（以下参照）。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Rails × Nuxt.js × AWS 85日目<br><br>✏️✏️ UI ブラッシュアップ <br><br>SPA化による一連のフローが完成。<br><br>♡（いいね）ボタンでリストインさせ、リストから非同期でページビューさせる。<br><br>モダンな Webアプリ😊<a href="https://twitter.com/hashtag/%E4%BB%8A%E6%97%A5%E3%81%AE%E7%A9%8D%E3%81%BF%E4%B8%8A%E3%81%92?src=hash&amp;ref_src=twsrc%5Etfw">#今日の積み上げ</a> <a href="https://twitter.com/hashtag/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0?src=hash&amp;ref_src=twsrc%5Etfw">#プログラミング</a><a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a> <a href="https://t.co/MzcMXo54Xg">pic.twitter.com/MzcMXo54Xg</a></p>&mdash; Kent@Nuxt×AWSで転活中 (@kent_0n) <a href="https://twitter.com/kent_0n/status/1392081284067778563?ref_src=twsrc%5Etfw">May 11, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#### 全体の構成で意識したこと
・<b>忙しい親御さんに利用してもらえるように、完全SPA化で高速なWEBサイトを目指した</b>こと。そのために、Rails (APIモード) と Nuxt.js を掛け合わせて対応したこと。
・<b>参加するまでのコンバージョン率を上げるために、ページ遷移を無くして、インデックスページ上で作業を完結できるようにした</b>こと。また、参加を検討するためにストックするリストを用意したこと。

#### Devops の点で意識したこと
・CircleCI で解析ツール（Rubocop/ESLint/Prettier）を通してエラーの早期発見に対応したこと。
・CircleCI と Fargate を連動させることで、<b>ユーザの声に迅速に対応できるデプロイを可能にした</b>こと。
・Terraform を用いて AWS を完全にコード化したことで、<b>柔軟なスケールにも対応できるようにした</b>こと。







## 制作過程 (ハイライト)

### フェーズ1. 01日目〜45日目　インフラ

- 余計なエラーを出さないために、"Hello World"でデプロイ
- インフラに取り組んでいる間に、制作したいポートフォリオのテーマとレイアウトを構想

・（02日目） Heroku で ”Hello World"
・（18日目） AWS (EC2) で ”Hello World"
・（24日目） AWS (EC2) × Docker で ”Hello World"
・（37日目〜41日目） Terraform で AWS をコード化。
　　　　[実施対象：EC2, ECR, ECS, VPC, S3, Route53, ALB, RDS, ACM, Cloudwatch]
・（42日目） CircleCI のキャッシュ処理をしてパイプライン高速化
・<b>（45日目） ECS × ECR × CircleCI × Terraform で ”Hello World"</b>

### フェーズ2. 46日目〜90日目　バックエンド＆フロントエンド　

-　Vuetify のドキュメントを読破し、達成しうるUIを推量してから着手
-　多忙な親御さんの立場を考えながら、SPA化でUXを次々に改善


・（49日目）Figmaにて原案となるレイアウトを構想
・（57日目）ログイン・ログアウト機能
・（60日目）フォロー機能
・（63日目）テーマ確定／ドメイン取得
・<b>（64日目）初のイベントカードを展開</b>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img width="600" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335807/796c3dec-c36f-e511-b0c5-b5ad82eec7e9.jpeg">

・（67日目）ポスト機能
・（73日目）検索機能
・<b>（79日目）イベントダイアログを実装</b>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;![E0mYM-1VEAMOSQX.mp4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335807/d0adf8e4-ff7b-a7b3-4d13-6ef78aebc01a.gif)
・<b>（81日目）イベントダイアログを改修</b>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;![Untitledsadf.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335807/8cf68af6-2443-f4d6-4d06-5d503de44062.gif)

・（82日目）props & emit でリファクタリング
・<b>（83日目）レスポンシブル対応</b>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;![Untitleddad.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335807/721ffd43-826c-3ad2-d2fb-a4388c8dd5f5.gif)




### フェーズ3. 90日目〜108日目　リリース

・（90日目〜98日目）Seeds の作成
・（99日目〜107日目）エラー500の解決
・<b>（108日目）リリース</b>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img width="600" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335807/17f094d2-14bd-bb04-fb0c-623f762a63d6.png">


### フェーズ4. 現在 
~~・転職活動中~~
~~・利用するための心理障壁を下げるために、スマホ対応を目指して開発中~~
~~・可読性の向上と大規模開発に対応できるように、TypeScript化を目指して学習中~~
<b>・転職活動を終え、エンジニアとして実務スタート (2021/09/02追記)</b>

##制作過程 (詳細)

実際の制作ではどのようなことを考えていたのかについては次のリンク先に情報を整理しました。<b>108日間のツイート</b>をまとめています。<b>制作者（初学者）向け</b>です。


|補足記事|
|:-----------|
|[【補足記事】ゼロから３ヶ月半でモダンなポートフォリオ (Fargate/Terraform/Nuxt.js/Ruby) をリリースするまで ②（フェーズ１. インフラ）](https://qiita.com/wonderglot/items/86b90d3e6f03988c5160)|
|[【補足記事】ゼロから３ヶ月半でモダンなポートフォリオ (Fargate/Terraform/Nuxt.js/Ruby) をリリースするまで③（フェーズ２. フロントエンド・バックエンド）](https://qiita.com/wonderglot/items/1f709cf35ae828b0f6dd)|
|[【補足記事】ゼロから３ヶ月半でモダンなポートフォリオ (Fargate/Terraform/Nuxt.js/Ruby) をリリースするまで ④（フェーズ３. 振り返り）](https://qiita.com/wonderglot/items/3cbfd4f4b0d4058bab9e)|


#### 独学者（私）を支えてくれた書籍
<b>独学者を志す方向けのメッセージ</b>になります。

IT分野ではないですが、独学するための方法論や制作のヒントが書いており、いつも傍らに置いていました。

資料名|学習内容|
| :--- | :--- |
|<b>独学大全</b><br>著: 読書猿|独学者は苦悩して自己嫌悪に陥る。それでも自分の弱さを受け入れ、強くありたい。そんな<b>独学者の心の支えになる本</b>。独学の方法論として「外部足場」を利用するという発想は、必要な情報を見つけたり、エンジニアに質問をしたり、ポートフォリオ制作の始めから終わりまで役に立つはずです。この書を読んでからは、私自身も発想の中心にこれを据えています。|
|<b>五輪書</b><br>著: 宮本武蔵|<b>自分にあった拍子で戦うことが強くなれる道</b>であるということを教えてくれます。※この書籍については、以下のリンクが入門としてわかりやすく解説されています。( Youtubeリンク：[【人生逆転の極意】五輪書　宮本武蔵　～心の迷いや不安を断ち切る、最強の人生攻略マニュアル～](https://www.youtube.com/watch?v=3TH597mKL2o)）|
|<b>問題解決大全</b><br>著: 読書猿|古代から現代に至るまでのあらゆる問題解決の方法を記した人文書。<b>人類の歴史の中から、自分にあう拍子の解決方法が見つかる</b>はず。方法の一つに、エジソンが試した「総当たり方式」が記されていますが、高度な文明になった今でもエラー対応については今も昔も変わらないことを教えてくれます。また、この記事を書く際にも「フロイトの解き直し」という方法を参考にしています。|
|<b>英単語の語源図鑑</b><br>共著: 清水建二<br>・すずきひろし<br>イラスト:本間昭文|<b>エラーに強くなれます</b>。エラーにおける難解単語 { "idempotence": "冪等性", "deprecated": "​将来のサポートが保証されない", ... } の意味がわかるようになります。私の前記事でも同じ方法論が使われています。（Qiitaリンク：[Rubocop のエラー解決法。Style/RedundantFetchBlock: in 'config/puma.rb' について](https://qiita.com/Kent7/items/2391cc657d9346707076)）|


#### IT関連書籍
<b>初学者様向けのメッセージ</b>になります。

ここでは本来、おすすめを紹介すべきかと思いますが、宮本武蔵曰く「<b>自身にあった拍子が最も強くなれる</b> (超訳)」ということなので、初学者さんにとってご自身に合ったものを探すのが良いのかなと思っています。

私も初心者用の書籍を分野ごとに１冊手に取りましたが、参考にした程度なので割愛します。

一つだけお伝えするのであれば、<b>書籍を読む目的は「以下のようなドキュメントを読むことができるようにするため」</b>であると思っています。

バックエンド・フロントエンド：[Rails](https://railsdoc.com/) / [Nuxt.js](https://ja.nuxtjs.org/) / [Vuetify](https://vuetifyjs.com/ja/getting-started/installation/) / [Axios](https://axios-http.com/docs/intro)
インフラ： [AWS](https://docs.aws.amazon.com/ja_jp/) / [CircleCI](https://circleci.com/docs/ja/) / [Docker](https://docs.docker.jp) / [Terraform](https://www.terraform.io/docs/index.html)  

## さいごに
<b>ゼロの知識からポートフォリオをリリースさせる</b>ということは私にとって一つの<b>困難</b>でした。

しかし開発中、「<b>困難は分割して順序立てること</b>」を心掛けてきました。
その心掛けを実践できるように、「<b>進捗を記録して、客観的な視点で軌道を修正すること</b>」を繰り返してきました。
そのことにより、以上のような結果を生むことができました。

今回リリースできたという成功体験をもとに、また新たな困難に取り組んでいきます。

ここまで読んでくださり、誠にありがとうございました。