こんにちは、転職活動中にけんぞうです。
GWの約10日間を利用して、Railsでポートフォリオを実装しました。
工夫したこととか、振り返りなどを書こうと思います。多分ちょっと長くなります。
経緯
そもそも「なぜこれを作ろうと思ったのか」について３つ理由があります。
- 理由①：Twitterやブログで「プログラミングがアウトプットが大事！」みたいな話をよくするので、それを体現しようと考えたから
- 理由②：転職用のポートフォリオが寂しい気がしたので、もう少しちゃんとしたものを１つ作っておこうと考えたから
- 理由③：@ryoutaku さんの「１０日間でポートフォリオ作成チャレンジ」に影響を受けたから
何ができるのか？（機能の話）
僕が作ったRailsのWebアプリケーションDOYAは以下のことができます。
- SNS連携で登録(Twitter/facebook/Google)
- 記事の投稿/編集/削除
- 記事にコメント（💬）する
- 記事にいいね（👏）する
- 記事をストック（📂）する
- フォロー/アンフォロー機能
⬆︎記事はマークダウンで書くことができて、プレビューもみれます。
何ができないのか？
現時点では以下の機能は実装していません。
- コメント削除機能
- 投稿に画像をつける
どうやってできているのか？（技術的な話）
以下の技術を用いて実装を行いました。
- Rails
- Heroku
- fastly
- S3（プロフィール画像の保存場所）
- CloudFront（assetsの置き場）
マークダウンを実現するため部分的にVue.jsも使っています。
フロントはBootstrapにお任せして形を整えつつ、twemojiというライブラリで顔文字をアイコンやfaviconとして利用しています。
工夫したところ
以下の3つの点を工夫しました。
①レスポンス速度改善
Herokuを利用すると、どうしてもレスポンスが遅くなってしまうことが、前回のポートフォリオを実装したときにネックに感じているところでした。
今回のDOYAでは以下のことを行い、レスポンスの速度改善を行いました。
- ①CloudFrontを利用してAssets on Cloudにする
- ②共通のCSSは
head内に直書きする - ③FontAwesomeの利用をやめ、twemojiでアイコンはカバーする
- ④jQuery/BootstrapはCDN読み込みをやめて、assets下にファイルを配置して呼ぶ
- ⑤その他使用しないCSSの削除
これらを行なった結果、PageSpeed Insightsによる計測で１５⇒５０くらいまで改善することができました。
②ユーザーが参加する障壁を最小にする
わざわざログインページに飛んで、、ID/PASSを入れて、、とする必要なく、ルートパスからSNS連携を使ってすぐに利用を開始できるようにしました。
また記事をマークダウンで記事を書けるようにしたことをも、ユーザーのストレスを少なくすることが目的です。
③twemojiでポップに仕上げる
twemojiというライブラリを利用して、愛くるしいアイコンたちでフロントをポップに仕上げました。
グッジョブ＆反省点
振り返ってみて良かった点、悪かった点を書いてみます。
グッジョブ
- 過去の実装経験を動員しながら、スピード感を持って実装できた点：AWSS3の使い方や、SNS認証などは以前のアプリを作った際に自分が書いたコードやQiita記事を参考にしながら詰まることなく実装ができたのが良かったと思います
- WBSを利用し順序立てて実装できた点：10日間という限られた時間を有効利用するために、WBSを事前に作成して計画的な実装ができたのは良かったと思います
- 客観的数値で検証しながらパフォーマンスチューニングできた点：PageSpeedInsightの数値をみながら、パフォーマンスの改善をすることができた点は良かったかなと思います
反省点
- テストを書いていない：テストの実装を先延ばし、先延ばしにした結果、最後まで書かずじまいになってしまいました、、
- フォロー関連の機能実装について、ロジックをほぼ理解せずに実装してしまった点：Qiitaの記事を参考にして、そのままコピペ実装してしまいました、、ほぼロジックを理解できていないので、復習に時間を使います
- CircleCIを用いた自動デプロイなども勉強したかった：この辺りも触れたかったけれど、時間の関係で今回は見送りました。
以上振り返りでした。良かったら遊んでみてください。