フロントエンド未経験から1週間程度で作るポートフォリオ(Vue.js AWS)

動機・やったこと

インフラ&バックエンドは少しだけ経験がありつつもフロントエンドについてはhtmlとcssの基礎の基礎を少し知っている程度で何もできることが無く、これまで機能最低限の質素な見た目のWEBアプリしか作成経験がありませんでした。
そんなわけで何か勉強しようと思い立ち、フロントエンドの基礎学習 兼 自分のアウトプットをまとめる場所をつくるため、Vue.jsでポートフォリオサイトの作成を行いました。

作ったもの

以下が作成したページです。
https://hamabe.info

意識した点・技術メモなど

大雑把な振り返りのため、具体的な技術の解説は今回は割愛させていただきます。

パッと見で「イイ感じ」であること

100％主観ですが、フロントエンドで最も重要な要素は「イイ感じ」であることだと思っています。なのでまずは「最低限自分が『イイ感じ』だと思えるサイト」であることを目標にしました。
「イイ感じ」をもう少し具体的に言うと 「人やお店や会社の公式サイトにアクセスした時に『なんかショボいな』と感じない程度のクオリティ」 です。これが今回の目標でした。
客観的に見てこれが達成できているのかは微妙なところですね…。コメントいただけると嬉しいです。

様々なジャンルのアウトプットを統括できるサイト構成

今回エンジニアとしてのみではなく、自分がやってきたこと（電子工作、楽器演奏、ブログ、絵 など）を全て統括できる、いわば自分の公式サイトのようなものを作ろうと考えました。そのために汎用的使い回せるコンポーネントを作成し、それを並べる形でYouTubeやQiitaやnoteなど異なるプラットフォームでのアウトプットをまとめて表示できるようにしています。よくあるパターンですね。
これを通して「コンポートを使い回す」というVue.jsの基本的な考え方を感覚的に理解することができました。

外部APIの利用

axiosを用いた外部APIとの連携も試してみようと思い、上記のコンポーネントにnote APIで取得した情報を渡すことで自分のnoteの最新記事を自動取得・表示を行っています。その際CROS（クロスオリジンリソースシェアリング）という壁にぶつかり少しハマってしまいましたが、なかなかいい勉強になりました。

AWS S3+CloudFrontの構成

AWSの学習も兼ねて、作成したページはS3の静的ホスティング機能を使って公開し、 お名前.comで取得したドメインをRout53で紐付け、ACMで無料SSL証明書を発行しCloudFront経由でSSL化、という構成で公開してみました。
この構成での注意点として、CloudFrontを経由した場合S3のファイルを更新した際にCloudFront側のキャッシュをクリアしないと更新が直ちにホームページ上に反映されない点があります。よって今回はLambdaを使ってS3バケットの更新をトリガーに自動でCloudFrontのキャッシュクリアを行う設定も行いました。
今後 API Gateway + Lambda で作成したAPIを連携させたWEBアプリの作成なんかもやってみたいと思います。

所感・要改善点など

フロントエンド所感

今回ロゴの作成やカラーリングなど、デザイン面もイチかバチか全て自分でやってみたのですがどうしても素人の限界を感じてしまいました。（素人の付け焼き刃でどうすることもできない領域だからこそデザイナーという職業が必要なのですね。）
また、フロントエンドのコーディングは普段のプログラミングで使う脳とは全く違う部分を使っている感覚で新鮮でした。今の時点では慣れの問題もあって、正直フロントはあまり向いていないのでは…？という所感ではあるのですが、コードがダイレクトに見た目に反映される楽しさはバックエンドにはないもので、とても良い経験になりました。

デザインに終わりは無い

勉強を初めて3日程度でおおまかなページ全体は完成できたのですが、その後のcssやコンポーネントの微調整にまじで終わりがないなと思いました。結局ある程度の及第点というか、「一旦この辺でやめておこう」となるまでに1週間ほどかかったのですが、デザインの恐ろしさというとフロントエンドの恐ろしさというか、その断片を味わったような気がします。
もちろん納期がある場合は話が別ですが…。

とにかくコードが汚い

僕のいい点でもあり悪い点でもある（と思っている）のですが、新しい言語やフレームワークを学ぶ時どうしても体系的に学ぶ前に勢いで書き始めてしまう癖があります。そのせいで「こうやれば動くかな」という試行錯誤の跡がそこらじゅうに残っていたり、「こういう書き方のほうがいいんだな」みたいな気づきが断片的にしか反映されていなかったりして汚いコードが爆誕してしまいます。
特に今回はフロントの予備知識があまりにも少なく、cssの散らかり具合などかなり見るに耐えない状況です。少しずつリファクタリングをやっていこうと思います…。
仕事でコーディングする場合などはもう少しちゃんとやるのですが、どうしても個人開発・学習の範疇だとその点が大雑把になりすぎてしまうので困ったものですね。

機能面の要改善点

その他機能面で気になっている点として、非同期通信のレンスポンスによってコンポーネントの表示にラグが産まれてしまうという点があります。これについては近いうちに読み込み待ちの表示を実装できればと思っています。また、今後Outputsの件数が増えることを想定すると、ページ全体がどんどん縦に長くなってしまうため、全件表示用のページを別途作成しVueRouterで遷移するようにするなど、メインページのコンテンツ量が増えすぎないようなつくりに改善したいと思っています。

最後に

お読みいただきありがとうございました。最後にもう一度URLを載せておきます。せっかくなので、興味があれば各コンテンツも覗いていただけると嬉しいです。
https://hamabe.info
現状少しコンテンツが寂しいので、今後も積極的にアウトプットを行い本ページを充実させて行きたい次第であります…！

参考サイト

https://alliance7.blogspot.com/2019/01/google-formaxioscros.html
https://blog.s0014.com/posts/2018-12-03-s3-https/#hl8
https://qiita.com/kurararara/items/d76776a7dc2d763a068b
https://qiita.com/shuheq/items/5d905e1c0f9916496485
https://qiita.com/p1ass/items/a01578b782f17f573510
https://qiita.com/kskinaba/items/dcf9693dd034517e114a