はじめに

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

※ 6月30日追記

投稿して半日も経たずに１００いいね頂きました。
ありがとうございます！励みになります🙇‍♂️ これからも頑張っていきますね❗️

【モダンなポートフォリオ記事】

▶︎ 独学３ヶ月半の集大成です。
　- 完全SPA化
　- コンテナ基盤にFargate
　- インフラをTerraformでコード化

子どもの社会問題をベースに、UI/UX を考えました。どうぞよろしくお願いします🙇‍♂️#Qiita #駆け出しエンジニアと繋がりたい https://t.co/Dw5pDIO1Sj
— Kent@Nuxt×AWSで転活中 (@kent_0n) June 29, 2021

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

インフラ構成図

補足

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

ER図

工夫した点

UI/UX の点で意識したこと

・色に「太陽」と「野原」を意識したこと。
・柔らかい雰囲気になるように、全体的に丸みを帯びさせたこと。
・50人以上のペルソナを用意して、1人ずつ別々の投稿を考えたこと。

・参加までの導線を引いて、忙しい親御さんが隙間時間で気軽に利用できるようにしたこと（以下参照）。

Rails × Nuxt.js × AWS 85日目

✏️✏️ UI ブラッシュアップ

SPA化による一連のフローが完成。

♡（いいね）ボタンでリストインさせ、リストから非同期でページビューさせる。

モダンな Webアプリ😊#今日の積み上げ #プログラミング #駆け出しエンジニアと繋がりたい pic.twitter.com/MzcMXo54Xg
— Kent@Nuxt×AWSで転活中 (@kent_0n) May 11, 2021

全体の構成で意識したこと

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

Devops の点で意識したこと

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

制作過程 (ハイライト)

フェーズ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 のキャッシュ処理をしてパイプライン高速化
・（45日目） ECS × ECR × CircleCI × Terraform で ”Hello World"

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

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

・（49日目）Figmaにて原案となるレイアウトを構想
・（57日目）ログイン・ログアウト機能
・（60日目）フォロー機能
・（63日目）テーマ確定／ドメイン取得
・（64日目）初のイベントカードを展開

・（67日目）ポスト機能
・（73日目）検索機能
・（79日目）イベントダイアログを実装

・（81日目）イベントダイアログを改修

・（82日目）props & emit でリファクタリング
・（83日目）レスポンシブル対応

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

・（90日目〜98日目）Seeds の作成
・（99日目〜107日目）エラー500の解決
・（108日目）リリース

フェーズ4. 現在

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

##制作過程 (詳細)

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

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

独学者（私）を支えてくれた書籍

独学者を志す方向けのメッセージになります。

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

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

IT関連書籍

初学者様向けのメッセージになります。

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

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

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

バックエンド・フロントエンド：Rails / Nuxt.js / Vuetify / Axios
インフラ： AWS / CircleCI / Docker / Terraform

さいごに

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

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

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

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