【Webアプリ】モグラ先生とハムスターくんのクイズゲーム【自主制作】

2021年は「1か月1サイト自主制作チャレンジ」に取り組んでいます！

その第二弾として、2月は「モグラ先生とハムスターくんのクイズゲーム」という、人生初のWebアプリケーションを制作しました。

作品やGithubリポジトリへのURL、今回の作品のアピールポイントや改善点などを書いていきます。

使用技術や素材サイトについて

制作にあたり使用した言語・素材サイトなどをご紹介します。

使用した言語

• HTML
• CSS
• JavaScript(vanilla JS)

画像・アイコン・フォント素材

• いらすとや

JavaScript使用箇所

といった、クイズゲームとして必要な一連の動きをJavaScriptで制作しています。

また、クイズの正解・不正解や、結果画面で表示される正解数に応じてキャラクターの表情やセリフを変更するという動きにもJavaScriptを使用しています。

制作概要

YouTubeで発信をされていて、制作講座の動画なども出されている堀口セイトさんという方の
「JavaScript超入門講座】基礎文法だけでクイズゲームのアプリを開発！」
という動画を見て、JavaScriptの使い方を学んだことが今回の制作のきっかけとなりました。

こちらの動画で学習をしたのが1月の中頃だったかと思います。
それまでにも書籍やProgate、UdemyなどでJavaScriptについては学習をしていましたが、まだまだアウトプットが足りていないと感じていたため、最初はJavaScriptのアウトプットの仕方を学ぼうと思い動画を閲覧し、ハンズオンのような形で学習をしていました。

そこで、ちょうど今は自分で1か月に1つ制作物を作る企画をやっているタイミングだったので、2月の作品として公開しようと思いつきました。

ただ、動画でやったことをそのまま出してしまうのはオリジナリティもなくて面白みに欠けてしまうかな、と思ったので自分でデザイン部分を作り、思いついたオリジナル機能を追加した状態で公開しよう、ということになりました。

そしてクイズの問題も、自分が取得を目指しているHTML5プロフェッショナル認定試験の出題範囲から出すようにすれば、自分の勉強用にもなるかなと思い、出題ジャンルもWebの問題にしました。

作ってみて良かったこと

今回、この作品を作ってみて良かったと思ったことが主に2つあります。

自分で考えた動きを、自分の力でJavaScriptを使って実装できた

まずは何よりも、自分自身で考えた挙動を自分の力で、JavaScriptで実装できたことです。
「自分の力で」と言っても、もちろんどういったプロパティを使えばよいかや、構文の書き方などのわからない点は調べながら取り組んだのですが、それでも「自分で考えたことをJavaScriptで実装できた」ということはとても大きな自信になりました。

「自分自身で考えた」部分はどこかというと、作品タイトルにも出てくる「モグラ先生とハムスターくん」の存在です。
セイトさんの動画で学んだ段階ではクイズゲームとしての動きの部分だけで、キャラクターなどの要素はありませんでした。

せっかくクイズゲームなので「正解したらキャラクターが喜んで、不正解だった時はキャラクターが悲しむ」みたいな動きがあると面白いなと思いました。

しかもそうした動きはif文など条件分岐の構文で実装ができそうだ、と自分の中でイメージも湧きました。

これまではただ教材に書かれていたことをそのまま打ち込んでいただけだったので、私自身の中では初めて「自分で考えた挙動を自分で実装した」経験となりました。
先ほどと重複しますが、うまく動かすことができてとても自信になりましたし、作っていて本当に楽しかったです。

制作する元となった動画投稿者・セイトさんご本人がすごく褒めてくださった

セイトさんの動画で学習させていただいたからこそ今回の制作ができたわけなので「セイトさんの動画を見て作った」ということを添えておきたいと思い、セイトさんのアカウント名を添えて公開ツイートをさせていただいたところ、セイトさんご本人から直接リアクションをいただきました（！）。

「動画からの大幅アレンジで、コンセプトも良い」と、とても褒めていただきました。

普段から、セイトさんの動画をいろいろ拝見して勉強させていただいていたので、心の底から嬉しかったです！
ついでに、フォローバックやリツイートまでしてくださいました。

こういうことが起こると、

もっと勉強頑張りたい！！

発信ももっとしたい！！

と思えます。

セイトさん、本当にありがとうございました！

大変だったところ

次に、制作するにあたって大変だったところをご紹介します。

キャラクターの表情・セリフを変えるJavaScriptの実装

今回一番推したいポイントでもあり、一番大変だったところですね(笑)。

クイズゲームそのものの挙動は、ほぼセイトさんの動画通りに実装をしています。

しかし、キャラクター部分の挙動（表情やセリフ）についてはすべて私自身で考えて実装しました。

setAttributeを使用してimgのsrcを入れ替えたり、innerHTMLを使ってpタグ内のテキストを変更するといった動きを、「正解したら」「不正解だったら」など条件に応じて適用させています。

次の問題に移行した際に、キャラクターの表情やセリフをノーマルに戻すための記述を足す前段階で、ハムスターくんがにっこにこで悩んだりしていたので、それに自分で笑いつつ、原因究明して修正を施すことができました。

トップページのh1、キャラクターの位置調整

トップページのh1部分にはテキストの両端にキャラクター、そして上部には吹き出しがあります。
吹き出しはspanタグにスタイリングを施して表現しています。

キャラクターについては、あくまでも装飾という観点で、今回はimgタグでHTMLに埋め込むのではなく、h1のbackground-imageとして実装しました。
h1の::beforeと::afterにそれぞれ背景画像としてキャラクター画像を設定し、positionで位置調整を行なっています。

positionでの調整なので、SP版とPC版で崩れが起こらないように調整するのが大変でした。
TAB版では左右0pxの位置に置かれてはしまうものの、不自然にならない範囲での調整ができたかなと思います。

工夫を施したところ

これまでご紹介してきたほかにも、自分なりに工夫を施した箇所があります。

結果画面の工夫

結果画面にただ「何問正解」と出すだけでは面白くないので、ここでも正解数に応じてキャラクターの表情とセリフを変えるという工夫を施しました。

最初、if文の条件指定を間違えて、０問正解なのにハムスターくんがにっこにこで「よくできました！」と言っていましたが、最終的にはしっかり修正することができました(笑)。

フッターの画面下固定

今回はクイズゲームが主体ということで、ページ内のコンテンツ量が非常に少ないので、最初に作った段階ではfooterが画面下に行かず浮いたような状態になってしまっていました。

そのため、min-heightとpositionを使用して常に画面の最下部に固定されるように指定する方法を学び、実装しています。

まとめ（感想など）

2月の制作は、フロント部分のみとはいえ人生初のWebアプリ制作ということで、とても楽しくできました。

私は元々デザインがあまり得意ではないので、デザインを考える段階で少し手が止まってしまったりもしました。
しかし最終的にはキャラクターの実装も無事にできて、公開時には動画を見て学ばせていただいたセイトさんご本人からお褒めの言葉を頂戴するという嬉しい出来事も起こりつつ、総合的に本当に楽しい制作でした。

ここまで読んでいただき、ありがとうございました。