動機
フロントエンドの勉強のために何かSPAを作りたいと考えていました。
とはいえ、「何を作ればいいのか」思いつかない・・・
そんなことを考えながら、最近好きになったQuizKnockの動画を見ていたときに、ふと思いました。
クイズゲーム、基本的なところを網羅できて、勉強で作るものとして最適なのでは？
- 正誤判定など、条件に応じた表示内容の変更が必要である
- 問題ページ、結果ページなど、複数のページが必要である（→vue-router）
- ユーザーが選択した答えを保持する必要がある（→vuex）
- クイズの問題をサーバーから取得するようなAPIを作る（→axios）
作ったもの
https://github.com/shima-218/quiz-app
構成
- S3の静的ホスティング機能を利用し、Vueアプリをデプロイ
- APIを叩いてDynamoDBに格納されたクイズの情報を取得
- APIGatewayとDynamoDBの間にlambdaを介す構成が多いようですが、今回は特に複雑なデータ取得を行わないので、余計なサービスは挟まないシンプルな構成にしました。
所感など
初心者に公式ドキュメントは難易度が高い？
「Vue.jsは公式ドキュメントが分かりやすいため、公式ドキュメントで勉強すれば良い」
述べている記事をよく見かけますが、私の場合、最初は公式ドキュメントを読んでも全く理解できませんでした・・・
そんな中、救世主となったのが、大阪コード学園さんのYoutube講座。
基本的な内容から分かりやすく解説されており、こちらの動画で一通り基礎を理解した後だと、公式ドキュメントの記載も理解できるようになりました。
CDN版から始めなくても良い？
「CDN版で勉強してから、Vue CLIに移行するという」というVue.jsの学習ステップがよく紹介されていますが、私の場合、「言語自体を勉強したい」というよりは「Webアプリを作りたい」という目的が強かったので、CDN版は使わず、最初からWebアプリ向きのVue CLIを用いました。
CDN版を経なかったことによる学習への支障は全く無かったため、必ずしもCDN版から始めなくても良いのではないかと感じました。
Vue3は(2021年3月時点では)まだまだ情報が少ない
Web上の情報はほとんどがVue2のものです。おおよそVue3でも当てはまることが多いのですが、細かなところでVue3とVue2で書き方が違う点があり、Webで解決策をなかなか見つけられませんでした。
また、BuefyのようなUIコンポーネントも、まだVue3に対応していないものが多く、注意が必要です。