【個人開発/Vue.js/Laravel/AWS】新卒1年目の集大成としてWebサイトを46日で爆速自作してみた。

[1]:https://koyolympus.gallery/
[2]:https://www.smugmug.com/
[3]:https://digitalidentity.co.jp/blog/creative/about-single-page-application.html
[4]:https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fkoyolympus.gallery&tab=mobile
[5]:https://github.com/wadakatu/Koyolympus
[6]:https://koyolympus.gallery/bizinq
## :iphone: Webサイト概要

https://koyolympus.gallery

私が撮影した写真を紹介する[SPA][3]サイトです。
写真一覧のページ以外には、自己紹介ページ、お問い合わせページがあります。

## :sparkling_heart: 動機

大学３年生の時から、友人の影響で写真撮影を始めました。
当時は、[Smugmug][2]というサイトの年間プランを契約し、撮影した写真を上げていました。
しかし、運よく？様々な理由が重なり、自分で写真のWebサイトを作成しようと思ったのがきっかけです。

| 理由 |
|:------------:|
| Smugmug年間プラン期間が2021年2月で終了した。|
| 普段の業務で、触れない技術を学びたい。|
| エンジニア新卒１年目の集大成を残したい。|

## :computer: 使用技術

・PHP  7.3.27
・Laravel 6.20.14
・Vue.js 2.6.12
　・vue-router 3.5.1
　・vuex 3.6.2
　・vuex-persistedstate 4.0.0-beta.3
・AWS (EC2,RDS,ALB)
・Circle CI
***
サーバーサイドは、**PHP/Laravel**を用いて構築しました。
PHP/Laravelを選んだ理由としては、現在の業務で主に使用していて、一番長く触れているプログラミング言語・フレームワークだったからです。
(長いといっても、８ヶ月くらいですが。。)

***

フロントエンドは、**Vue.js**を用いました。
業務では、フロントエンドのプログラミングをすることは全くと言っていいほどないので、
最初はLaravelのBladeテンプレートを使おうとしていました。
しかし、どうせならまだ触った事のないプログラミング言語を学習しながら、
サイトの作成を進めようと思い、React/Vue.js/Angularの中から、一番初心者に優しそうなVue.jsに決めました。
~~全然優しくなかった気がするのはきっと私だけ。~~
***

インフラは、**Amazon Web Service(AWS)**を使用しました。
入社してすぐの技術研修でAWS用いて、Webサイトをデプロイした経験があり、
他の有名インフラ(GCP、Azure)と比べて事前知識があったので、AWSを選択しました。
クラウドコンピューティングは、お手軽で便利ですね。
毎月かかるサーバー代が意外と痛いですが。。
お金と時間に余裕があれば、オンプレミスにもチャレンジしてみたいです。
***
継続的インテグレーションは、**Circle CI**を利用しました。
理由としては、Youtubeの広告でよく流れていて、漠然と「これ使えたら、エンジニアっぽくてカッコ良いなぁ〜」と思ったからです。
今思うと、不純な動機だなと思います。
事前知識も一切なかったので、ちゃんとPHPUnitのテストが通るまでとても苦労しました。
***

## :calendar: 作成期間

![スクリーンショット 2021-03-18 0.43.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838340/60981a6f-3bab-a64a-e379-9fee9bb93bce.png)

webサイト作成開始が、**2021年1月15日**からでした。
そして、Webサイト最初のリリースが**2021年3月2日**でした。
**１ヶ月と２週間(46日)**で大体の機能を実装して、Googleに公開することができました。
「[Koyolympus][1]」とGoogle検索するとサイトが表示されるはずです。

## :muscle_tone4: : 力を入れた点

新卒１年目の集大成ということで、まずは自分が納得するWebサイトにするため
色んなことに力を入れました。
今回は、その中から３つ紹介します。

| 力を入れた点  |
|:-|
| 1. レスポンシブデザイン  |
| 2. ５ヵ国語対応の自己紹介ページ |
| 3. サイトの表示高速化  |

**1. レスポンシブデザイン**については、
全ての端末において見やすいページを心掛け、それぞれの画面サイズに応じて
最適なフォント・カードサイズ、配置の最適化を行いました。

普段は全くCSSもいじらないので、各プロパティの正確な役割を理解するのに時間がかかりました。
しかし、Youtubeやブログ記事などで、国内外問わず多くの方が参考になるコードを上げてくれていたので、
まずは見様見真似で、そして自分が納得いくまで調整を繰り返しました。

このデザイン作成に一番時間をかけた気がします。

***
**2.　5ヶ国語対応の自己紹介ページ**については、
大学時代カナダに留学していたので、その時の友人に協力してもらい、
日本語・英語・フランス語・韓国語・中国語の5カ国語対応にしました。
最初は、日本語だけで良いかなと思っていましたが、気付いたら５カ国語に増えてました。。
もし、他の言語に堪能な方いらっしゃいましたら、ぜひ協力お願いいたします！
***
**3. サイトの表示高速化**
最初のリリース時に、[Google PageSpeed Insight][4]でトップページの速度を確認したところ以下のようになりました。
>パソコン
![top desktop.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838340/8bb1c01c-7fe2-3198-ca4c-1c2c9d3cdbc4.png)
>モバイル
![top mobile.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838340/6fff4ab2-e79f-3c07-604f-d13f315b612c.png)

中々ひどいスコアですよね。。
最初はこのまま世に出してしまおうかと、考えていました。
しかし、集大成として世に出すなら、最後まで手抜きは出来ないと思い、できる限りの高速化を施すことにしました。
・gzipでのJSファイル圧縮
・CSSで無駄なプロパティの削除
・画像サイズの圧縮
以上のようなことを行いました。
その結果、微々たるものですが、若干の高速化に成功しました。

最新のリリースでは、以下のような数字になっています。
>パソコン
![スクリーンショット 2021-03-18 2.17.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838340/064fdfa1-58da-8b09-51b0-859f249da25f.png)
>モバイル
![スクリーンショット 2021-03-18 2.17.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838340/953cfa16-13fa-c993-2df8-9135eb47a48c.png)

将来的には、パソコン・モバイル共に**９０点**の大台を超えるようにしたいと思います。

## :gear: 追加機能予定

| 機能 |
|:-|
| 1. 写真の無限スクロール機能 |
| 2. いいね機能  |
| 3. いいね数の多い写真を優先表示機能 |
| 4. 写真購入機能 |

今思いつくのは、上記4つの機能です。
これから時間を見つけて、ゆっくりと実装して行けたら良いなと考えています。

他にもこういう機能が欲しいなどありましたら、[GitHub][5]・[お問い合わせページ][6]にてご意見お待ちしております。

https://github.com/wadakatu/Koyolympus

## :fire: 2年目にむけて

２年目に入ると、少し大きな仕事を任せられるようになったり、何かと忙しくなりがちだと聞きます。
>現在、来年入社の後輩のメンターになることが内定・・・

従って、個人開発で何かを新しく１から作成するということは今よりも難しくなるかもしれません。
しかし、忙しいを言い訳にはできないので、できる限りの工夫をして、これからも個人開発は続けていきます🔥

[Koyolympus][1]についても、今後更にアップデートを重ねていく予定です。

長くなりましたが、最後まで読んでいただきありがとうございました。
ぜひ、私が撮った写真の数々も楽しんでいただけますと幸いです。

https://koyolympus.gallery/