文系大学生が独学で学習開始7ヶ月目にReact + Rails API + AWS（SPA）でポートフォリオを製作・公開したお話し

##1. はじめに
<br>
__<font color="RoyalBlue">学習に7ヶ月、開発・公開に3ヶ月掛かったポートフォリオについてお話ししていきたいと思っております。</font>__

今回は__<font color="DarkGreen">小説投稿アプリケーション</font>__を製作しました。

この記事では製作したポートフォリオの中身について色々と記述をしつつ、ポートフォリオを完成させるまでに__<font color="FireBrick">学びになった事や自分なりに気を付けた事、それからキツかった事</font>__などについて書かせて頂きました。

少々長くなってしまった感はありますが、どうか暖かい目で読み進んで頂けたら幸いです。

<br>
##2. 軽い自己紹介
はじめまして、都内の私立大学に通う経済学部生です。
趣味は創作、好きな食べ物は納豆ご飯です。

次へ参ります！


<br>
##3. 学習・開発期間とか学習媒体とか

* 学習時間はポートフォリオ製作含め大体2700時間〜ぐらいです。期間と媒体の内容的には以下のような感じです。

| 期間 | 内容 | 媒体 |
|:-:|:-:|:-:|
| 1ヶ月目 | HTML／CSS／JavaScript<br>フロントエンドでサイト作成  |  [ドットインストールさん](https://dotinstall.com/)<br>[Udemyさん](https://www.udemy.com/?utm_source=adwords-brand&utm_medium=udemyads&utm_campaign=Brand-Udemy_la.JA_cc.JP&utm_term=_._ag_106402441658_._ad_451172770945_._de_c_._dm__._pl__._ti_kwd-310556426868_._li_1009311_._pd__._&utm_term=_._pd__._kw_udemy_._&matchtype=e&gclid=Cj0KCQiAtqL-BRC0ARIsAF4K3WEUkDWyp7K9c1399KVZdHJpUUJ3pRG2ZwcDmwu-39_Fq8oXjK_WUxcaAm4hEALw_wcB)<br>など |
| 2ヶ月目 | Ruby／Rails<br>Railsだけでアプリ製作<br><br>_この辺りからQiitaでのアウトプットなんかを開始したりしました。_ | [Progateさん](https://prog-8.com/)<br>[プロを目指す人のためのRuby入門](https://www.amazon.co.jp/%E3%83%97%E3%83%AD%E3%82%92%E7%9B%AE%E6%8C%87%E3%81%99%E4%BA%BA%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AERuby%E5%85%A5%E9%96%80-%E8%A8%80%E8%AA%9E%E4%BB%95%E6%A7%98%E3%81%8B%E3%82%89%E3%83%86%E3%82%B9%E3%83%88%E9%A7%86%E5%8B%95%E9%96%8B%E7%99%BA%E3%83%BB%E3%83%87%E3%83%90%E3%83%83%E3%82%B0%E6%8A%80%E6%B3%95%E3%81%BE%E3%81%A7-Software-Design-plus%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA/dp/4774193976/ref=asc_df_4774193976/?tag=jpgo-22&linkCode=df0&hvadid=295706574430&hvpos=&hvnetw=g&hvrand=9412078389424396957&hvpone=&hvptwo=&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=1009311&hvtargid=pla-526453131276&psc=1&th=1&psc=1)<br>[現場で使える Ruby on Rails 5速習実践ガイド](https://www.amazon.co.jp/%E7%8F%BE%E5%A0%B4%E3%81%A7%E4%BD%BF%E3%81%88%E3%82%8B-Ruby-Rails-5%E9%80%9F%E7%BF%92%E5%AE%9F%E8%B7%B5%E3%82%AC%E3%82%A4%E3%83%89-%E5%A4%A7%E5%A0%B4%E5%AF%A7%E5%AD%90/dp/4839962227)<br>など |
| 3ヶ月目 | Railsチュートリアル1週目<br>Webに関する学習<br>AWS<br>Docker<br>ネットワーク系<br><br>_Dockerは組み込むと12月までに終わらないと思ったので省きました。_ | [Ruby on Rails チュートリアルさん](https://railstutorial.jp/)<br>[Webを支える技術](https://www.amazon.co.jp/Web%E3%82%92%E6%94%AF%E3%81%88%E3%82%8B%E6%8A%80%E8%A1%93-HTTP%E3%80%81URI%E3%80%81HTML%E3%80%81%E3%81%9D%E3%81%97%E3%81%A6REST-WEB-PRESS-plus/dp/4774142042)<br>[キタミ式イラストIT塾 基本情報技術者](https://www.amazon.co.jp/%E3%82%AD%E3%82%BF%E3%83%9F%E5%BC%8F%E3%82%A4%E3%83%A9%E3%82%B9%E3%83%88IT%E5%A1%BE-%E5%9F%BA%E6%9C%AC%E6%83%85%E5%A0%B1%E6%8A%80%E8%A1%93%E8%80%85-%E5%B9%B3%E6%88%9031-01%E5%B9%B4-%E6%83%85%E5%A0%B1%E5%87%A6%E7%90%86%E6%8A%80%E8%A1%93%E8%80%85%E8%A9%A6%E9%A8%93/dp/4297102110)[ゼロからわかるAmazon Web Services超入門](https://www.amazon.co.jp/%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89%E3%82%8F%E3%81%8B%E3%82%8BAmazon-Web-Services%E8%B6%85%E5%85%A5%E9%96%80-%E3%81%AF%E3%81%98%E3%82%81%E3%81%A6%E3%81%AE%E3%82%AF%E3%83%A9%E3%82%A6%E3%83%89-%E3%81%8B%E3%82%93%E3%81%9F%E3%82%93IT%E5%9F%BA%E7%A4%8E%E8%AC%9B%E5%BA%A7/dp/4297106612/ref=sr_1_6?adgrpid=56125102274&dchild=1&gclid=Cj0KCQiAtqL-BRC0ARIsAF4K3WGONw4ao2saKHKroYyQUbQwRKO4M9SHgpWEcX2RCgxI9loXuO6eGWYaArLMEALw_wcB&hvadid=338597640665&hvdev=c&hvlocphy=1009311&hvnetw=g&hvqmt=e&hvrand=7328706717585476067&hvtargid=kwd-301559774871&hydadcr=16036_11170811&jp-ad-ap=0&keywords=aws+%E6%9B%B8%E7%B1%8D&qid=1607016637&sr=8-6&tag=googhydr-22)<br>[Amazon Web Services 基礎からのネットワーク&サーバー構築](https://www.amazon.co.jp/Amazon-Services-%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E3%81%AE%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF-%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E6%A7%8B%E7%AF%89-%E6%94%B9%E8%A8%823%E7%89%88/dp/4296105442/ref=sr_1_3?adgrpid=56125102274&dchild=1&gclid=Cj0KCQiAtqL-BRC0ARIsAF4K3WGONw4ao2saKHKroYyQUbQwRKO4M9SHgpWEcX2RCgxI9loXuO6eGWYaArLMEALw_wcB&hvadid=338597640665&hvdev=c&hvlocphy=1009311&hvnetw=g&hvqmt=e&hvrand=7328706717585476067&hvtargid=kwd-301559774871&hydadcr=16036_11170811&jp-ad-ap=0&keywords=aws+%E6%9B%B8%E7%B1%8D&qid=1607016637&sr=8-3&tag=googhydr-22)<br>[Udemyさん](https://www.udemy.com/?utm_source=adwords-brand&utm_medium=udemyads&utm_campaign=Brand-Udemy_la.JA_cc.JP&utm_term=_._ag_106402441658_._ad_451172770945_._de_c_._dm__._pl__._ti_kwd-310556426868_._li_1009311_._pd__._&utm_term=_._pd__._kw_udemy_._&matchtype=e&gclid=Cj0KCQiAtqL-BRC0ARIsAF4K3WEUkDWyp7K9c1399KVZdHJpUUJ3pRG2ZwcDmwu-39_Fq8oXjK_WUxcaAm4hEALw_wcB)<br>など  |
| 4ヶ月目 | React環境構築（キツかった）<br>React基礎<br><br>_Reactに関しては眺めてても頭に入って来なかったので簡単なアプリを作りつつ基礎を補完する形で学習しました。<br>ライブラリって実践的な事しつつ学習するのがよいですよね。_ | [React公式様](https://ja.reactjs.org/)<br>[Webpack公式様](https://webpack.js.org/)<br>[ESLint公式様](https://eslint.org/)<br>[Babel公式様](https://babeljs.io/)<br>その他YouTubeや[medium.com](https://medium.com/)など<br>medium.comは月額会員に入ってます。 |
| 5 ~ 6ヶ月目 | Rails API + Reactの学習 <br><br> _この辺も無理矢理アプリ作ってそこに基礎補完する形で学習しました。<br>フロントエンドとバックエンドは分離すると決めていたので気合は十分でした。_| [React公式様](https://ja.reactjs.org/)<br>[Railsガイド様](https://railsguides.jp/) <br>[MDN Web Docs様](https://developer.mozilla.org/ja/)<br>その他YouTubeや[medium.com](https://medium.com/)<br>など |
|7 ~ 10ヶ月| ポートフォリオ作成開始<br>ポートフォリオ完成<br><br>_インフラ構築はAWSの学習と同時並行で進めました_ | [AWS公式ドキュメント様](https://docs.aws.amazon.com/ja_jp/)<br>[React公式様](https://ja.reactjs.org/)<br>[Railsガイド様](https://railsguides.jp/) <br>[MDN Web Docs様](https://developer.mozilla.org/ja/)<br>その他YouTubeや[medium.com](https://medium.com/)<br>など |

<br>

* アプリケーション製作中のコミット状況。所々禿げてるのは躓いて進まなかったところだと思います。<br>
![スクリーンショット 2020-12-04 3.24.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606750/266238df-6121-9753-9e87-b5961c30212d.png)

<br>
##4. アプリケーションの内容
<br>

* __<font color="DarkSlateBlue">Reactアプリ側を軽く解説</font>__

  * __<font color="DarkSlateBlue">アプリケーションは全てReact.jsで書いていて、全てのコンポーネントはHooksを使った関数コンポーネントで構成しています。フロントエンドアプリからバックエンドへの通信にはyarnパッケージのaxiosを使用しています。</font>__

<br>

* __<font color="DarkRed">Railsアプリ側を軽く解説</font>__

 * __<font color="DarkRed">アプリケーションはRuby on RailsをAPIモードで使用しており、ヘッダーの取得を可能にするためにgemのrack-corsを使用してCORSの設定を行っています。</font>__

<br>

>* __<font color="Teal">ホーム画面</font>__
 * __<font color="Teal">シリーズ全件の表示</font>__：1件のシリーズが複数の小説を管理するという形になっており1件のシリーズ内に、__タイトル__、__作者__、__あらすじ__、__総お気に入り数__、__総コメント数__、__登録しているタグ（カッコ内の数字はそのタグを登録しているシリーズの総数を表しています）__、__所有している小説の話数__などを描画しています。
 * __<font color="Teal">ページネーション機能</font>__：実際にコードを書いて実装したかったので、ライブラリなどは使わずにReact側でコードをバーっと書いて実装しました。
 * __<font color="Teal">並び替え機能</font>__：コチラも実際にコードを書いて実装したかったのでライブラリは未使用です。__新着順__、__投稿が古い順__、__お気に入りが多い順__、__お気に入りが少ない順__、__コメントが多い順__、__コメントが少ない順__でソート可能です。並び替えした後も並び替えを保持した状態でページネート可能です。


>![ポートフォリオ1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606750/3db21d5d-cf0b-a93b-e714-bcc51299c026.gif)

<br>

>* __<font color="Teal">小説タグクラウド機能</font>__
   * __<font color="Teal">小説タグクラウド</font>__：現在存在するタグを一覧で表示しています。
   * __<font color="Teal">小説タグ1件</font>__：小説タグ1件をクリックすると、そのタグを登録しているシリーズを一覧で表示します。また、タグを登録しているシリーズだけで並び替えすることも可能です（ページネーションも可能です）

> ![ポートフォリオ8.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606750/dd3c497b-782c-9405-b2ce-ac0f8d97b889.gif)


<br>

>* __<font color="Teal">シリーズ管理画面 & 小説1件表示画面</font>__
   * __<font color="Teal">シリーズ1件の表示</font>__：1件のシリーズに加え、このシリーズが持つ小説を全件表示させています。シリーズは作者だけが編集できるようになっています。
   * __<font color="Teal">小説1件の表示</font>__：ここでは__シリーズタイトル__、__小説1話分のタイトル__、__作者__、__前書き__、__本文の内容__、__現在何話目か__などを表示させています。また、作者だけが編集可能になっています。
   * __<font color="Teal">お気に入り機能</font>__：お気に入りできます。数字部分のクリックでお気に入りしたユーザーがその場で描画されます。
   * __<font color="Teal">コメント機能</font>__：矢印をクリックするとコメントフォームが表示されるので、そのままコメントの送信が可能です。
   * __<font color="Teal">ページネーション機能</font>__：「前話」で1話前へ、「次話」で1話先に遷移します。「目次」をクリックすればシリーズ管理画面へ遷移します。

>![ポートフォリオ2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606750/588702ae-9ee7-7871-20a4-11cc71847fc5.gif)
![ポートフォリオ3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606750/332c1124-31cf-ec9d-8482-90e45eb2d23f.gif)


<br>

>* __<font color="Teal">小説の作成</font>__
   * __<font color="Teal">シリーズ作成</font>__：__タイトル（必須）__、__あらすじ__、__登録したいタグ__、__公開するか非公開かの決定__を入力できます。
   * __<font color="Teal">シリーズへの小説の追加</font>__：__タイトル（必須）__、__前書き__、__本文（必須
）__、__公開するか非公開かの決定__を入力できます。
   * __<font color="Teal">公開・非公開の有無の確認</font>__：自身の作品については、__【公開】もしくは【非公開】ステータスが表示される__ので、自身の作品が公開されているかどうかは一目で確認する事ができます。

> ![ポートフォリオ4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606750/a5648091-6de8-6e9a-b3ac-eaf8e18efaf6.gif)
![ポートフォリオ5.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606750/12ca01b9-bba2-9b28-c137-ae806663b10f.gif)
![スクリーンショット 2020-12-05 16.18.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606750/df9c8c85-5815-3adc-2b3c-fb89b1d9ca30.png)


<br>

>* __<font color="Teal">ユーザープロフィールページ</font>__
   * __<font color="Teal">ユーザー情報の表示</font>__：__ニックネーム__、__紹介文__、__ユーザータグ（ユーザーの趣味をタグに登録できるようにしたもの）__が表示されます。自身のページの場合にのみ編集が可能です。
   * __<font color="Teal">ユーザーが投稿した小説の表示</font>__：ユーザーが投稿した小説を一覧で表示されるようにしています。（ページネーション可能）
   * __<font color="Teal">ユーザーがお気に入りにした小説の表示</font>__：ユーザーがお気に入りにした小説を一覧で表示されるようにしています。（ページネーション可能）
   * __このページ内の投稿作品部分のタブ切り替えですが、ここは[material-uiのTabs](https://material-ui.com/components/tabs/#tabs)を使用して実装しました。__

>![ポートフォリオ6.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606750/3be95b00-2a1c-5953-958b-a739eb2bc3a7.gif)

<br>

>* __<font color="Teal">趣味タグクラウド機能</font>__
   * __<font color="Teal">趣味タグクラウド</font>__：現在存在する趣味タグを一覧で表示します。__趣味タグはユーザー自身に登録できるタグで、趣味や好みのジャンルなどをタグに登録することで、趣味や好みが近しいユーザーをすぐに発見することができます。__
   * __<font color="Teal">趣味タグ1件</font>__：趣味タグ1件をクリックすると、その趣味タグを登録しているユーザーを一覧で表示します。
   * __<font color="Teal">ユーザー情報1件</font>__：__ユーザー名__、__フォロー・フォロワー__、__プロフィール__、__登録している趣味タグ__を表示するようにしています。

> ![ポートフォリオ9.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606750/a0a961e4-7461-b55c-c0dc-3ffe9acc9248.gif)

<br>

>* __<font color="Teal">フォロー機能</font>__
   * __<font color="Teal">フォロー</font>__：自分以外のユーザーであればフォローすることが可能です。
   * __<font color="Teal">フォローユーザーページ</font>__：あるユーザーがフォローしているユーザーを一覧で表示します。
   * __<font color="Teal">フォロワーページ</font>__：あるユーザーをフォローしているユーザーを一覧で表示します。

> ![ポートフォリオ7.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606750/f0467767-52b6-cb3e-a642-8be580d69f13.gif)

<br>

>* __<font color="Teal">認証系</font>__
   * __<font color="Teal">簡単ログイン</font>__
   * __<font color="Teal">新規登録</font>__
   * __<font color="Teal">ログイン</font>__
   * __<font color="Teal">ログアウト</font>__
   * __<font color="Teal">Set-Cookieでログイン保持</font>__
   * ユーザーの認証にはセッションを使用しています。ログイン保持にはセッションストレージのActionDispatch::Session::CookieStoreを使用して、ブラウザ側にCookieのハッシュ値を保存する形を取っています。


<br>
##5. 今回使用した技術
<br>
フロントエンドアプリケーションとバックエンドアプリケーションは分離して開発しています。
<br>

 * __フロントエンド__
  * __HTML／CSS__
  * __React.js（16.13.1）__

 * __インフラ（フロントエンド）__
  * __AWS（S3, IAM, CloudFront, ACM, Route53, CodePipeline, CodeBuild, CodeDeploy）__
 * __バックエンド__
  * __Ruby on Rails（APIモード）（5.2.4.2）__
 
 * __インフラ（バックエンド）__
  * __Amazon Linux 2__
  * __Nginx／Unicorn__
  * __PostgreSQL(12.2)__
  * __AWS（VPC, EIP, IAM, EC2, ALB, ACM, Route53, RDS, CodePipeline, CodeDeploy, S3）__
  
 * __テスト__
  * __Request Specs, Model Specs（total 238 examples）__
  
 * __コード管理__
  * __GitHub__
  * __Sourcetree__
  
 * __デバッギングツール__
  * __Insomnia__  


<br>
##6. インフラ
<br>

* __<font color="DarkOrange">インフラ構成図</font>__

![AWS.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606750/56bd0b31-99ec-104e-6d84-a122b84ec981.jpeg)
<br>

* __<font color="DarkSlateBlue">フロントエンド側のインフラを軽く解説</font>__
  
  * __<font color="DarkSlateBlue">インフラではS3をストレージとしてCloudFront経由で公開しており、Route53でのDNSとACMでのSSL化をしています。加えてCodePipelineをパイプ役としてCodeBuildでアプリをビルド、CodeDeployでデプロイを自動化しています。</font>__

<br>

* __<font color="DarkRed">バックエンド側を軽く解説</font>__

 * __<font color="DarkRed">インフラではEC2にELB（ALB）をアタッチし、このELBにACMを関連付けてSSL化を行っています。ELBはHTTPSをリッスンし、EC2はHTTPをリッスンしている形です。Route53でのDNSも行っています。そして　CodePipelineをパイプ役とし、CodeDeployによりデプロイを自動化しており、この自動デプロイと同時にCodeDeploy内に記述したシェルスクリプトがProduction用のサーバーやDBなどを立ち上げます。</font>__
 
<br>

* __トータル課金額について__<br>
 * トータルで日本円1000円ぐらいでした。内訳は以下のような感じです。半月でこの金額ですので１ヶ月あたり2000円前後かなと思います。
 * RDSやELBの金額が短期間でこれぐらいになっているのは、12/1、12/2に動作確認のために何も考えずに多くのデータ転送をし尽くしたためです。しっかり制御すればもう少し抑えられるかと思います。現に12/3はそこまでのデータ転送を行っていないので12/1にかかった金額の1/3程度です。
 * RDS、ELB、EIPはEC2を停止していても課金されるので注意。

| サービス | 利用期間 | 課金単位 | 私自身の課金学 |
|:-:|:-:|:-:|:-:|
| EC2（EIP含む）  | 11/19 ~ 12/3  | 使用時間1秒毎<br>その他<br>[→Amazon EC2の料金](https://aws.amazon.com/jp/ec2/pricing/) | 4.01$<br>  |
| RDS  | 11/30 ~ 12/3 | 1GB転送/月<br>その他<br>[→Amazon RDSの料金](https://aws.amazon.com/jp/rds/pricing/)  | 2.07$  |
| Route 53  | 12/1 ~ 12/3  | 25ホストゾーン/月<br>ドメイン名管理１件<br>主に従量課金制<br>[→Amazon Route 53の料金](https://aws.amazon.com/jp/route53/pricing/) | 2.00$  |
| ELB  | 12/1 ~ 12/3 | ELBの実行/時間<br>その他<br>[→Elastic Load Balancerの料金](https://aws.amazon.com/jp/elasticloadbalancing/pricing/) | 1.58$  |
| CloudFront  | 12/2 ~ 12/3  | データ転送量（GB毎）/月<br>HTTPリクエスト数（1万件毎）/月<br>その他<br>[→Amazon CloudFrontの料金](https://aws.amazon.com/jp/cloudfront/pricing/) | 0.04$  |
| S3  | 11/30 ~ 12/3 | [→Amazon S3の料金](https://aws.amazon.com/jp/s3/pricing/) | 0$  |
| CodePipeline  | 11/30 ~ 12/3 | [→AWS CodePipelineの料金](https://aws.amazon.com/jp/codepipeline/pricing/)  | 0$  |
| CodeBuild  | 11/30 ~ 12/3 | [→CodeBuildの料金](https://aws.amazon.com/jp/codebuild/pricing/)  | 0$  |
| CodeDeploy  | 11/30 ~ 12/3  | [→CodeDeployの料金](https://aws.amazon.com/jp/codedeploy/pricing/) | 0$  |
| ACM  | 11/30 ~ 12/3  | SSL/TLS証明書発行は無料 | 0$  |
| 税金  | 11/30 ~ 12/3  |   | 0.96$  |
| トータル  | 11/19 ~ 12/3 |   | 10.66$  |


<br>
##7. ER図

<br>
ER図作成にはお馴染みの[draw.io](https://app.diagrams.net/)を使用しました。
<br>

![ER図３.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606750/0f11cc61-4ae2-152e-f7e6-2c16e2752a25.png)

| テーブル | 役割 |
|:-:|:-:|
| User  | ユーザーのデータが格納されます  |
| UserTag  | ユーザーに対して登録するタグ名データが格納されます  |
| UserTagMap  | UserのIDとUserTagのIDを揃えて格納します<br> |
| Relationship  | UserのIDともう一件のUserのIDを揃えて格納されます|
| NovelSeries  | １件のシリーズのデータが格納されます  |
| Novel  | １件の小説のデータが格納されます  |
| NovelTag  | 小説に対して登録するタグ名データが格納されます  |
| NovelTagMap  | NovelTagのIDとNovelSeriesのIDを揃えて格納します |
| NovelFavorite  | NovelのIDとUserのIDを揃えて格納します<br>＝ユーザーの小説に対するお気に入り  |
| Comment  | UserのIDとNovelのIDとコメントの内容を揃えて格納します  |


<br>
##8. 何故小説投稿サービスにしようと思ったのか

<br>

##### 1.  __<font color="Teal">自分が利用するサービス対する疑問・興味を自己解決したかったため。</font>__

　　創作サイトを結構長く利用させて頂いているのですが、長くサービスを利用していると、愛着が湧く反面、恐れ多くも、ここってこうした方がいいかも？みたいな疑問が生まれたり、プログラミングを学習し始めた事で、ここの挙動どうなってんの？？どんな技術使ってるの？？とか、ここは何でこんなにレスポンスが速いんだ？などの興味も生まれました。
　　そんな感じで、__自分で作って確かめてみよう__と思い、小説投稿サービスにしようと思いました。

<br> 
## 8. Reactアプリケーション側で気を付けた・頑張ったポイント

<br>
気を付けた、また頑張ったポイントとしては主に以下の3つです。

*  __<font color="Teal">同じコードの記述を避けること</font>__
*  __<font color="Teal">見やすいUI・使いやすいUXを意識したこと</font>__
*  __<font color="Teal">なるべくライブラリは使わずに、自身で理解してコードを書くこと</font>__

<br>


*  __<font color="Teal">同じコードの記述を避けること</font>__
 *  当然のことではありますが、将来的に機能を追加すること、大幅な修正などすることを考慮し、同じコードの記述を避けるよう努めました。ポートフォリオの機能実装フェーズでは、ここに最も多くの時間を投下したと思います。
 *  具体的な例で挙げると、同じUIを描画する際には、__1つのフォーマットとなるコンポーネントに対して任意のプロパティを渡すだけで済むようにしました。__こうすることで、新たにコンポーネントを追加、修正の際に書くコードや量や時間などが大幅に減少しました。

![Reactコンポーネント.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606750/fe030dea-7ba9-acb9-bd3f-d71615d4cf29.png)

<br>

*  __<font color="Teal">見やすいUI・使いやすいUXを意識したこと</font>__
  *  見やすいUIに関しては、小説投稿サイトということで文字を読むのが主となるサービスですので、基本的な配色を２色にしてその中でも目に優しい（とされる）白と緑を使ってシンプルなものにしました。文字の色もグレーに近い黒を使ったのと、要素の大きさなどもなるべく余裕を持たせるようにしました。緑を選んだのは僕の好みだからというのもあります。
  *  使いやすいUXに関しては、1つのページに含まれる情報量はなるべく簡潔にするようにして、ユーザーが辿り着きたい情報までの導線を明確にするように気を付けました。

<br>

*  __<font color="Teal">なるべくライブラリは使わずに、自身で理解してコードを書くこと</font>__
  * これに関しては、実際の現場ではライブラリを使うというお話しを聞くのでライブラリを実際に使った方が良かったかなと製作中に思ったのですが、自分でコードを書きたいという気持ちが勝ってしまったのと、自分でコードを書いてプログラミングに対する理解を深めたかったのでこのようにしました。個人開発ですしイイかなって。

<br>
## 9. Reactアプリケーション側で苦戦したこと
<br>
苦戦したこととしては主に以下の1つです。

*  __<font color="Teal">アンマウントされたコンポーネントのステート変更</font>__
 * アンマウントされたコンポーネントで管理しているステートに変更を加えるというのは御法度なのですが、僕はこれに気付かずに実際に実装したい機能を実装するのに割と手間をかけてしまいました。<br>
Reactの初歩的なルールなのに見方が変わるだけでスグに見失ってしまうということは理解できていない証拠なので、今回のポートフォリオ製作を機に戒めて反省します…。

<br>
## 10. Railsアプリケーション側で気を付けた・頑張ったポイント

<br>
気を付けた、また頑張ったポイントとしては主に以下の1つです。

*  __<font color="Teal">同じコードの記述を避け、高速でレスポンスを返すこと</font>__
 * 具体的な例で挙げると、このアプリケーションはホームページで取得するデータの量が一番多いのですが、そこでReactからのHTTPリクエストに対し、データを取得する際の__ActiveRecordへのリクエスト回数を減らすよう努め、ControllerのAction内に記述するコードを最低1行まで減らすことができ__、機能の追加、修正が楽になりました。<br><br>
 *  そしてレスポンスをなるべく速くすることも目標にしており、これぐらいのサービスの規模なら300~500msが個人的には許容範囲なのかなと思っていて限界でも500ms以内にはしたかったのですが、リクエストの送信からレスポンス、そしてUIとして描画されるまでを__200ms以内に抑えることができました__。__ここは実現できてとても嬉しかった__ポイントです。（動的コンテンツですのでキャッシュは無効）

![Rails Res.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606750/5cfcddee-7c62-54e0-04db-c085daa637b5.jpeg)

<br>
## 11. Railsアプリケーション側で苦戦したこと

<br>
苦戦したこととしては主に以下の1つです。

*  __<font color="Teal">データを全件取得する必要のある一覧画面で、1度のリクエストで全てのデータを取得すること</font>__<br>
 *  従来の設計<br>
　開発を始めた当初は、ホーム画面でシリーズ全件のデータを取得する際、`シリーズのデータを全件取得`→`シリーズ全件の総数の取得`→`それぞれのシリーズが持つ小説の総数データの取得`→`それぞれのシリーズのお気に入り総数データの取得`→`それぞれのシリーズのコメント総数データの取得`→`それぞれのシリーズが所有するタグデータの取得`それぞれを別々のリクエストで取得しようとしていました。つまり最低でも6回はReactからリクエストを送信しようとしていたわけです。<br>
　そして一度試しに、シリーズのデータと小説の総数データの2つだけでデータを取得しようとしてみました。すると取得するのに`数千ms`もかかってしまいました。<br>
　これはダメだ！ということで設計を変更することにしました。<br>
<br>
 * 変更後の設計<br>
　1度のリクエストで、`シリーズデータ全件`、`シリーズ全件の総数`、`それぞれのシリーズが持つ小説の総数データの取得`、`それぞれのシリーズのお気に入り総数データの取得`、`それぞれのシリーズのコメント総数データの取得`、`それぞれのシリーズが所有するタグデータの取得`を取得する方針に決めました。<br>
　しかし1度に取得する方法が中々簡単には思い浮かばなかったので、とりあえずここは飛ばして開発を進めつつ思いついたら実装しようという方向で進める事にしました。<br>
 <br>
 * ヒラメキ<br>
　上記の設計に変更してから２週間ぐらい経ってからだったしょうか、何故だかはわからないのですが、ある時ふとその方法が頭に浮かんできました。これに関しては調べるという発想が何故か頭になくて、自身のヒラメキのみを頼りにしていたのですがそのヒラメキが期待に応えてくれたようです。<br>
　今になって思うのは何故調べなかったのかという事です。エラー以外の事については確かに調べないでなるべく考えるようにはしていますが、これに関しては3日考えた時点で調べた方がよかったでしょうと今になって思います。
　でも思い付いた時は本当に嬉しかったです。<br>
　最終的に生成されるJSONデータは以下のようになりました。<br>
  ![スクリーンショット 2020-12-04 23.42.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606750/f18a7f4a-d015-8911-9c79-cf0fe48fba3b.png)


<br>
## 12. 選ばれたのはインフラでした
<br>
###<font color="Red">本当にキツかった部門第1位に選ばれたインフラについてのお話しをしていきます。</font>
<br>

 * __<font color="Red">じゃあ具体的に何がキツかったか</font>__

　　　Chromeバージョン80から正式に導入されることとなったSameSiteという属性によるCookieの仕様の変更により、`SSL化していないアプリケーションではデフォルトでCSRF対策が施され、Cookieの保持が不可能になってしまったこと。つまり、フロントエンドアプリケーションと、バックエンドアプリケーションの両方にSSL化を施さなければログイン保持を行わせることができなくなってしまった`ことです。<br>
  
　　　もう少し前の段階であれば、SSL化をせずとも、ローカル環境でやっていたようにCORSやWebサーバーに対して対してオリジン許可設定をするだけで通信が可能だったのだと思いますが、`7/14以降、本格的にSameSiteが導入されることとなったため、Cookieの保持を必要とするアプリケーションを作成する場合には双方のSSL化が必須`となりました。<br>

　　　__キツかった思い出からこんな書き方をしていますが、SameSiteはセキュリティの構築にとって非常にありがたい存在です。__

　　　僕の場合はフロントエンドはSSL化しつつも、バックエンドはSSL化しない（ELBを導入するつもりがなかったので）という今思えばセキュリティ的にどうなの的な設計をしていたのですが、そうは言いつつも既にどちらのアプリもデプロイまで終了していたので、よっしゃもう終わるぞと思いつつ、本番環境のアプリケーション動作チェックのため満を辞してログイン機能を使用しました。
　　　すると、ログイン自体は上手く行くのですが、肝心のSet-Cookieが上手く処理さずログイン保持が出来ていなかった事に気が付きました。
　　　
　　　やばい何これどういうことやと思いつつググってみるとこのSameSiteの情報に行き着きました。SameSiteの記事を読んだ時に、`完走の一歩手前だった事もあり、一気に顔面から血の気が引いてく心地がして、奈落の底に突き落とされた気分でした。正直、プログラミング学習をしてきた９ヶ月の間で最もキツかったです精神的に`。


　　　結果的には解決出来ましたし、SamiSiteという属性が存在している事や、どういう物なのかについても多少であれ知ることが出来たので最終的にはプラスだったと思っています。
　　　でも、初めからちゃんとSPAを製作する際のSSL化はどうすればいいかみたいな文言でググっていれば、設計段階でSameSiteの存在に気付けていたかもしれないわけですのでその部分の後悔はあります。

> __SameSite導入について__
>>July 14, 2020: SameSite cookie enforcement has resumed, with a gradual rollout starting today (July 14) and ramping up over the next several weeks as we continue to monitor overall ecosystem readiness and engage with websites and services to ensure they are prepared for the SameSite labeling policy. The SameSite features are being enabled for Chrome Stable channel users on versions 80 and 81 (who should update Chrome!), 83, as well as the newly released 84.
[The Chromium Projectsより](https://www.chromium.org/updates/same-site)

<br>
## 13. ポートフォリオに組み込めなかったこと・またできなかったこと
<br>

##### <font color="Teal">組み込めなかったこと・できなかったこと一覧</font>
  
 * ダイレクトメッセージ機能などユーザー同士のコミュニケーションツール実装
 * 認証機能のメール認証
 * フォローしているユーザーの創作投稿に対する通知機能
 * 小説インプレッション数カウント機能
 * 小説のランキング機能
 * サードパーティAPIとの連携
 * Dockerによる環境構築
 * 継続的インテグレーションの実装
 * GitHubの有効活用

## 14. 次のステップ

##### <font color="Teal">次に学習すべき・もしくは学習したいこと一覧</font>

* SQL（すべき）
* Web（すべき）
* Rust（したい）
* Java（したい）
* Go（したい）
* Vue.js（したい）
* TypeScript（したい）

もちろん今やっている学習を継続した上で取り組みたいと思っています。

<br>
## 15. 最後に
<br>

* __<font color="Teal">ポートフォリオ製作を完走した感想</font>__

 * 先ずは無事に完成させられたことにホッとしました。友人にも試しに使用してもらったのですが、`普通のサービスとしてリリースできるレベルというお墨付きを頂いたので大きな達成感を得る事ができました`。<br><br>

 * 次に、このポートフォリオ製作の中で`エラー対処`や`デバッグ`のレベルが少しは上がったかなという風に思いました。<br>
　　エラー対処については、自身の起こしてしまったエラー内容に該当する情報だけならば無数にあると思いますが、自身が今まさに陥っているエラーとは異なる状況・環境である事を考慮すべきなのは大前提として、エラーが起きるということは言わずもがな`多少知ってはいるものの知識の足りなさから引き起こされるミスか、全く知らない知識である可能性が高い`です。<br>
　　ですのでエラーが起きた場合には、知らない事を知れるチャンスだと思ってそのエラーが何を示しているのか多少言語化できるレベルまで落とし込むと、次回エラーに直面した際に大いに役に立つので長期的に見てプラスだなという風に感じました。<br><br>

 * 最後に、目的としていた事が実現できた直後は、確かに諸手を挙げる程に嬉しかったですが、少し時間が経つとあれぐらいで喜んでるようじゃダメだという気持ちになるんですよね。
そして何より自身の知識の足りなさを本当に実感させられました。かなり悔いも残っていますので、早速次の学習を始めて行きたいと思います。

以上です！長く拙い文章で大変お見苦しかったかとは思いますが、最後まで読んでくださりありがとうございました！！🙇‍♂️

<br>