はじめてのVue.jsで制作したタイピングゲーム
Fanelabで公開しているタイピングゲームは、「誰でも気軽に遊べること」をコンセプトに制作したブラウザゲームです。パソコンがあればすぐに遊べるシンプルな内容ですが、このゲームには個人的にとても思い入れがあります。
その理由は、この作品が私にとって初めてHTML・CSS・JavaScript以外のフレームワークであるVue.jsを使って制作したアプリだからです。
現在見返すと、デザインやコードには改善できる部分もたくさんあります。
それでも、初めて一つの作品を完成させたという思い出が詰まっているため、あえて大きく作り直さず、そのまま公開しています。技
術的な成長を振り返る意味でも、自分にとって大切な作品です。
シンプルなゲームだから簡単だと思っていた
制作を始める前は、「タイピングゲームなら画面も少ないし、すぐ完成するだろう」と考えていました。
しかし実際に開発を始めると、その考えはすぐに覆されました。
Vue.jsはJavaScriptをベースにしているとはいえ、データの管理方法やイベント処理、画面の更新方法など、考え方そのものが大きく異なります。
JavaScriptだけで作る場合は、自分でDOMを取得して画面を書き換えることが多いですが、Vue.jsではリアクティブな仕組みによって画面が自動で更新されます。この考え方に慣れるまで、かなり時間がかかりました。
Vue2とVue3の違いにも苦戦
開発中はYouTubeで学習しながら進めていましたが、そこで思わぬ壁にぶつかりました。
公開されている動画やブログ記事の中にはVue2を使ったものも多く、自分が利用しているVue3とは書き方が異なるケースが少なくありませんでした。
「動画の通りに書いているのに動かない」
そんな状況が何度もあり、そのたびに原因を調べることになりました。
理解を深めようと書籍も購入しましたが、購入した本がVue2向けだったため、Composition APIを中心としたVue3とは違いが多く、混乱することもありました。
当時は「同じVueなのに、なぜこんなに違うのだろう」と感じ、途中で挫折しそうになったこともあります。
タイピングゲームだからこそ難しい部分
タイピングゲームは見た目こそシンプルですが、実際には細かな処理が数多くあります。
入力したキーが正しいかどうかの判定、文字列の管理、入力済みの文字の表示、ミス入力の処理、ゲーム開始や終了のタイミングなど、一つひとつを丁寧に実装していく必要があります。
また、ゲームとして成立させるためには、ただ動くだけでは不十分です。
実際に何度も自分でプレイしながら細かな調整を繰り返し、「気持ちよく入力できるか」という部分を意識して改善を続けました。
「また遊びたい」と思える体験を目指して
ゲーム制作で最も難しかったのは、技術面よりも「楽しさ」を作ることでした。
タイピングゲームはルール自体が非常にシンプルです。そのため、ほんの少しテンポが悪いだけでも面白さが損なわれます。
逆に、入力がスムーズで、テンポよく進み、結果がすぐ分かるだけでも、「もう一回遊ぼう」という気持ちになります。
ユーザーが何を快適と感じるのかを考えながら細かな調整を行うことで、ゲーム制作はプログラムを書く以上に、ユーザー体験を設計する作業なのだと実感しました。
このゲームから学んだこと
個人開発をしていると、新しい機能を追加したくなることがよくあります。
ランキング機能や演出、アニメーションなど、アイデアは次々に浮かびます。
しかし、このタイピングゲームを作って学んだのは、まず基本的な部分をしっかり作り込むことの大切さでした。
どれだけ多くの機能があっても、基本操作が快適でなければ長く遊んでもらうことはできません。
逆に、シンプルなゲームでも操作感が良く、ストレスなく遊べる作品は、多くの人に楽しんでもらえる可能性があります。
これからも少しずつ成長していきたい
このタイピングゲームは、自分にとってVue.jsを学ぶきっかけとなった大切な作品です。
完成した当時より知識や経験は増えましたが、このゲームを作った経験が、その後のWebアプリ制作や個人開発の土台になっています。
これからも新しい技術を学びながら、気軽に遊べて、「少し上達した」と感じてもらえるようなゲームやWebサービスを制作していきたいと思っています。
もしこのすごく簡単なタイピングゲームを遊んでいただけたら、とてもうれしいです。
この記事のカテゴリー
開発ブログ の記事をもっと見る →