Vue.js と Pixi.js を用いた個人アプリ制作 - エンジニアリングとお絵描き

はじめに

今後、以前に作成した以下の間違え探しゲームを元に、もっとちゃんと遊べる間違え探しゲームを作っていこうと思います。

今回は、Vue.jsを用いた環境で、元とする上記の間違え探しゲームが動くようになるまでに詰まった個所と、その際参考にした記事を備忘録としてまとめました。

技術選び

はじめ、Nuxt.jsとTypeScript、Pixi.jsを用いて開発しようと考えていました。 Nuxt.jsとTypeScriptを選んだ理由は、「Vue.js、JavaScriptよりもNuxt.js、TypeScriptの方が流行りらしいから...!」という安直なものです。

私は、「とにかく学ぶなら流行りの技術！」という思いから上記の考えに至ったのですが、実際開発フェーズに移ると...

当然何も分からず全然コードが書けませんでした...

理由は明白で、「JavaScriptとVueの知識、経験が全く足りていないから」です。 Nuxt.js、TypeScript共に、Vue.jsとJavaScriptが理解できている前提の技術であるため、学習の順番が異なっていることに気づかされました。手を動かす前に、ちゃんと使う技術について調べ、今の自分やプロダクトに相応しいが吟味することがどれほど重要かを再確認しました....。

参考：Nuxt.jsに飛びつく前に~Nuxt.jsを習得するための前提技術と、その勉強方法の紹介~ - Qiita

ということで、多少経験のあるVue.js、ゲーム制作に便利と思われるPixi.jsを用いて開発することにしました。