1.はじめに
この記事のターゲットは「HTML、CSS、JavaScriptを一通り学んだけど何をしたらいいかわからない人」向けです。
この記事を見ることで以下の項目の悩みを解決できると思います。
- プログラミング一通り経験したけど何をしたらいいのか
- JavaScriptでできることは？
- 簡単なゲームを作りたい
2.作者紹介
プログラミングを初めて２ヶ月の「大学３年生」です。
スキルセットとしては以下のような感じです。
- HTML&CSSがだいたい分かる
- JavaScriptは少しわかる（機能を見てある程度推測できる）
- ちょっとしたデータサイエンスに関する知識
最近は模写を中心に独学しています。
3.アプリ概要
#駆け出しエンジニアと繋がりたい
— キタシン@✊フロントエンドを目指す体育会系✊ (@kitashinbloger) January 2, 2021
【おかしなりんごゲーム】
新しくwebアプリを開発しました！
「飲み会などで罰ゲームを受ける人を決める時に使えます」 pic.twitter.com/TC5QLnLPsF
使い方
- 1.HOW TOボタンを押して説明を読む
- 2.８個のりんごの中から好きなりんごをクリック
- 3.「おかしな」りんごが出るまで2を繰り返す
4.作成理由
結論からいうと「居酒屋などのお会計を奢る人を楽しく決めたい」と考えたからです。このアプリの作成者である私は友人とご飯に行く際にたまにご飯のお会計をかけてじゃんけんをしていました。しかし、ある時を堺に友人が「他の決め方はないかな」と違う手段で奢る人を決めたいという意向を示しました。そのときに私はその要望に答えるべくこのアプリを開発しました。
作成期間
2日間
5.設計
TODOアプリ（フォルダ）
├── index.html
├── style.css
├── script.js
6.使用技術
フロント：HTML、CSS、JavaScript
データベース：PostgreSQL
バージョン管理：Git hub
エディタ：VSCode
【ソースコード】
https://github.com/ShinKitayama/apple-game
7.機能
1.モーダルの表示
2.addEventListenerを使った表示の切り替え
3.cssでの回転アニメーション
8.苦労した点
- 0からの創造
- 今までの学習してきたこと以外の要素の追加
- 予期せぬエラーへの対処
予期せぬエラー：addEventListenerが一個飛ばしの要素（りんご）にしか反応しない
→対応：document.createElementでdocumentにdivタグを追加し、そのタグにcssのクラスを設けて背景画像をcssで指定し、全て対応するようにした
9.反省点
- 一つのエラーに対処するのにすごく時間がかかった 【解決策】1つの手段にこだわるのではなく、ニーズ（奢る人を楽しみながら決めたい）を満たす最適な手段を見つける
- デザインに関しては全く気にしていなかった 【解決策】機能面だけでなく事前にUI/UXを意識する
10.まとめ
改めて、本記事の冒頭で述べた以下3つの悩みに答えていきます。
- プログラミング一通り経験したけど何をしたらいいのか
- JavaScriptでできることは？
- 簡単なゲームを作りたい
→何かしらのアプリを作りましょう
→今回のようにweb上で動きをつけることです
→addEventListenerを使用して今回のような「宝探し的なゲーム」を作りましょう
今回紹介した「おかしな」りんごゲームですが、実際に「アルバイト先」や「友人との食事」の際に使用しましたが、非常に満足してくれました。そして1人の友人からまた違った面白いアプリを開発をしてほしいと言われたのでいつかその要望に応えようと思います。
最後まで目を通していただきありがとうございました。