個人開発で使った技術 ~フロント編~

2021/03/27

DEV

個人開発、グルメ質問サービスPiTARIを作るのに使った技術を紹介する。

フロントエンド

Nuxt.js (Vue2)
Vuetify

バックエンド

AWS Amplify (Cognito, Dynamo DB, AppSync, Lambda, S3, Elastic Search)
Stripe
SendGrid
microCMS

functionの言語はNode.jsと、一部Python

全体としては、サーバーレスSPAの構造だ。
サーバーレスで作った大きな理由はコスト。
数人にしか使われないというリスクも想定すると、時間課金のサーバーは使いたくない。

それぞれの技術を使ってみてどうだったか的な観点で書きたいが、
ボリュームがあるのでフロントとバックエンドで記事を分ける。

今回はフロントエンド。

Nuxt.js

今どきのWebアプリは基本VueかReactを使うのが一般的なようだが、自分はたまたまVueから学んでいたので扱いやすいVueを用いた。

最近はISRなどのパフォーマンス周りの技術でNext.jsの注目度が高く憧れたが、自分はあまり知らなかったのでVueを採用した。
（ちなみにこのブログはNext.jsで作っている）

また、PiTARIはクライアントサイドでレンダリング(CSR)しており、サーバーサイドレンダリング(SSR)は行っていない。
サービスの特性上、Publicに公開するコンテンツが無くSEOをそこまで気にしていないのと、そこまで重い処理がフロントで走るわけでもないので、できるだけシンプルな作りにしたくCSRのみで作った。
（あとは個人的に、すべてレンダリングされた後に全体が表示されるよりも、先にぱっと画面が出てローディングアイコンが出てくれたほうが安心感がある）

CSRならNuxt使う意味ある？と思うかもしれないが、ファイルシステムルーティングを使えるメリットは大きい。
一度Vue CLIでアプリを構築したことがあるが、フォルダのディレクトリ構造とVue Routerの構造をそれぞれ設計するのはとても面倒。
その他にも、Nuxt専用のプラグインはnuxt.configに書くだけで使えるものもあったり、お手軽感がすばらしい。
一度Nuxtを体験すると戻れない。。

Vuetify

アプリ内のUIは基本Vuetifyに頼っている。
Vuetifyばかりでは建て売り感が出てしまうので、LPはHTML+CSSでコーディング、その他は基本VuetifyでUIを作った。
（個人的には、VuetifyでもスタイルのAPIをフル活用＋ ::v-deepで強引にスタイルを調整していけば、そこそこオリジナル感は出ると思っている。）

Vuetifyで特に便利だったのが、フォームバリデーション。
メインの機能が質問回答をテキストで行う箇所故、フォームを入力→バリデーションの実装が多い。
Vuetifyのv-formコンポーネントを用いれば１行でバリデーション実施の処理を書ける、
v-text-field、v-textarea、v-selectにはエラーメッセージのAPIも用意されていて、少労力で実装できた。

自分の中では、PiTARIのようなツール寄りのサービスにはVuetify、メディア系の見た目の作り込みが重要なものはTailwind CSSなどが良いのでは、と思った。
このブログはTailwind CSSを用いたが、デザインは自由にできてレイアウトやレスポンシブは爆速で出来る感じはとても良いなと。

課題

今回の開発で、自分自身の技術的課題として感じたのがTypeScriptだ。
自分はまだTypeScriptの開発経験が無い。
この開発を始めるまでは「型？そんなに大切か？」くらいに思っていたが、この開発を持ってその重要性を肌で感じた。
JSは臨機応変に型推論してくれて記述量を抑えられる便利な言語だが、サイトの規模が大きなるとそれが仇となってしまう印象。
”can not read XXX of undefined”のエラーには相当苦しんだ。
想定していない型の値が入った時点ではエラーにならず、特定の条件で利用した場合にのみ型エラーが"ブラウザ上"で発生。これが問題だ。
VueとTypeScriptは相性が悪いようだが、Vue3のComposition APIでは"this"を使わずに実装できそうだし、JSXも使えるということでTypeScriptもどんどん導入していけそうだ。
というか、Reactに移っても良いかもしれない。

次回はバックエンドについて書く。

記事一覧へ