概要
目標：ある会社のフロントエンドエンジニア職にアルバイトとして受かること。そのためにポートフォリオを作成していく。
投稿内容：毎日目標に向けてやったことを記録していく
また、この記事では初めてポートフォリオを作る人のリアルな進捗を伝えたいので、途中で設計を変更したりしてもどんどん後付けで書いていく。
意識すること、条件
・一貫性のある内容
・使われるサービス+採用のアピールになるもの
・分割法で作成する
・next.jsで開発する
・Githubを使って開発、公開
・バグがない
・簡単なものを改善していく
・デプロイする（AWSかVercel）
・（team開発）
やっていくこと
目標はフロントエンドエンジニアとして雇ってくれるアルバイト先に受かるためのポートフォリオを作成すること。
大きくやることは以下の４つ
①どんなポートフォリオを作成することで採用されやすいのか調査
②調査結果をもとに設計
③設計を実装に落とし込む
④ブラッシュアップ
やることの細分化
①どんなポートフォリオを作成することで採用されやすいのか調査
・一貫性のある内容
・使われるサービス+採用のアピールになるもの
・誰のどんな問題を解決するのか、用途が明確なもの
・UI/UXが整っていて使い勝手がいい
・レスポンスが良好
・書かれている内容が実際にサービスとして公開された時のことを考慮したものであること
・機能数が十分多いこと
・READEMEが整理されていること
・可読性の高いコード
・テストが十分書かれている
・Githubを使って開発、公開
・バグがない
・簡単なものを改善していく
・デプロイする（AWSかVercel）
・（team開発）
②調査結果をもとに設計
・機能の一覧表を作成
・簡単な画面遷移図と画面一覧を作成
・データベースのスキーマを設計
・next.jsで開発する(TS+React)
・インフラとバックエンドはAWS（？）
①のメモ
NYK再建民をつなげるSNSアプリを作りたい!
NYK再建とは・・・NYK再建はNBAの人気チームnewyorkknicksのファンが集まるyoutubeのコミュニティです。以下のリンクからチャンネルに飛べます。
NYK再建プロジェクト
プログラミングの力で誰かの小さな問題から大きな問題まで解決したい（一貫性）
NYK再建民という最高のコミュニティがあるのになかなかオフラインで出会うような機会を作ることができない。東京ではオフ会を開催していたが、地方で開催することは難しい、、そこでそれぞれの地域の再建を繋げ、オフラインで会えるようなSNSを作成したいと思った。
使われると想定する人たち・・・NYK再建民（特に地方の人たち）
採用のアピールになるもの・・・自分でサービスを１から作成した経験
どんな問題を解決するか、用途・・・オフラインで会うことが難しい人々をつなげることができる
②のメモ
機能の一覧
ログイン画面
新規登録画面
登録してくれた人たちのプロフィールの一覧を表示するメインページ
プロフィールを作成するためのページ（できたら、メインページからそれぞれの人のプロフィールに飛ぶことができるものを作成する。）
画面遷移図と画面一覧表
技術選定
書籍 ：next.js+mongoDB+vercel
今回：next.js++mongoDB+vercel+nextauth.js
③設計を実装に落とし込む
まずは大きく３つに分けて開発していく。
1.まったくあたらしいnext.jsプロジェクトをvercelにデプロイする。
2.アプリの内容は書籍と同じ状態でデータベースとインフラをmongodb,vercelに変更する
3.アプリの内容を変更し、今回使用したい技術で開発する
1.アプリの内容は書籍と同じ状態でインフラのみVercelに変更し、デプロイする
まず、DBをmongoDBで動かせる状態にし、ローカル上ではアプリが完成した。
あとは前に書いた記事に基づいてデプロイをしていく。
ここで問題発生。mongoDBをAWSに接続しようとすると大幅に労力がかかってしまう。またAWSのサービスを使うならDynamoDBの方が開発がしやすい。そこでdynamoDBに変更していこうと思う。よってまず行うことを以下に変更する。
1.まったくあたらしいnext.jsアプリをaws amplifyにデプロイする。→これを変更し、vercelへデプロイする
aws amplifyへの自動デプロイとローカルの初期化まで完了。ここからはnext.jsにcognitoを追加する方法だけをまずは学んでいく。
next.jsにcognitoで認証機能をつけるのがとても難しい。というかなぜかできない。
next.jsにawsのサービスを使ったものの情報が少ないのでまずはvercelで作成してみる。
完成版をgithubからダウンロードし、それを自分のレポジトリでアップロードする。そしてまたそれをvercelでデプロイする。
①vercelに前編のソースコードをデプロイ
②vercelに後編のソースコードをデプロイ
デプロイがやっと完了した。そして基本的なデータはデータベースと接続して変更した。
あとは
・ 認証機能
・サイトの微調整を行う
次はitem/updateファイルの編集から
2.アプリの内容は書籍と同じ状態でデータベースとインフラをmongodb,vercelに変更する
インフラをvercel、データベースをmongoDBに変更
・readsingleページの修正、編集ページの修正
3.アプリの内容を変更し、今回使用したい技術で開発する
・画像のアップロード機能
・javascriptからtypescriptに移行する →辞めて新機能を追加する
・認証をnextauth.jsに変更する →JWTで最低限の機能にとどめる
・ヘッダーのタイトルの横に再建民のロゴを載せる
・メインページの背景に画像を載せる。MSGの写真など
ここまでで設計図に記載した機能は実装が完了した
よって次は新たな機能の追加に移っていく。
・候補１ google map APIを使ってNBA観戦ができる店を検索できるページを作成する。
Next.jsにgoogle map apiを追加する方法を理解した。
page.js（クライアントコンポーネント）でマップを表示する仕組みはできた。だが外部APIのデータを直接クライアントコンポーネントで読み込んでいることや、まだピンを一件しか立てれていないことが問題。なのでここから修正することは
・route handlerを使用して外部APIから情報を取得する
・ピンを複数たてられる仕組みを作る、つまりデータベースを作成する。
サーバーサイドの処理も考え始めるとかなりややこしくなってきた。なので一旦はクライアントサイドで複数のピンを表示できるような仕組みをつくる