「プログラミングを学びたいけれど、何から作ればいいかわからない」
そんな方におすすめなのが、シンプルなゲームアプリの制作です。
本記事では、100日間アプリ開発チャレンジ（#100DaysOfCode / #100日チャレンジ）の Day02 として、JavaScriptで作る「Matching Game（神経衰弱）」をご紹介します。
このアプリは 初心者でも挑戦しやすく、遊びながら学べる のがポイントです。完成アプリはGitHub Pagesで公開しているので、記事を読みながら実際にプレイすることもできます。
完成アプリの紹介
Day02で制作した「Matching Game」は、以下のような機能を持つシンプルなカードゲームです。
- 4×4 / 5×4 の2モード対応（レベル選択が可能）
- 自己ベスト記録を保存（LocalStorageを利用）
- リスタートボタンや スペースキー操作で手軽に再挑戦
- 視覚効果（カードのめくりアニメーション、クリア時の演出）
👉 実際に遊んでみる
Day02 — Matching Game 公開ページ
画面は下記のようなイメージです。
- 裏返しのカードが並び、クリックすると表面の絵文字が表示される
- ペアが揃えば「Good!」、外れれば「Miss」と表示される
- 全て揃えると「クリア！」と表示され、自己ベストが更新される
開発の流れ
今回のアプリは、次の3ステップで完成します。
1. HTMLでカード枠組みを作る
カードを配置するための「ボード領域」、操作ボタン、ステータス表示（手数や時間）を用意します。
サンプルコード：
<section id="board" class="grid size-4"></section>
<button id="restart">リスタート</button>
2. CSSでカードをデザイン
裏面と表面を表現し、カードがめくれるようにアニメーションを追加します。
「aspect-ratio」を使えば、比率を固定したカードが簡単に作れます。
3. JavaScriptでゲームロジックを実装
- 絵文字をランダムにシャッフルしてカードを生成
- クリックでカードをめくる処理を追加
- 1枚目と2枚目を比較 → 一致なら「正解」、不一致なら元に戻す
- 全て揃ったらゲーム終了
この3つを組み合わせるだけで、神経衰弱ゲームが完成します。
学習ポイント
このプロジェクトを通して、初心者が学べるポイントは多岐にわたります。
- 配列操作（shuffle）
JavaScriptで配列をランダムに並び替える方法を実践できます。 - イベント処理
addEventListenerを使って「クリック」や「キーボード操作」に反応させる実装。 - 状態管理
1枚目・2枚目のカードを比較する際に、変数で状態を保持するロジックが理解できます。 - LocalStorageの活用
ブラウザに自己ベストを保存する仕組みを学ぶことで、ちょっとした「進捗データ保存」ができるようになります。
公開方法（GitHub Pages）
完成したアプリは、GitHub Pages を利用すれば無料で公開可能です。
手順は以下の通り：
- GitHubで新しいリポジトリを作成
index.htmlをアップロード- 「Settings → Pages」で公開を有効化
- 表示されたURLにアクセスして確認
これだけで、自作アプリを誰でも遊べる形で公開できます。ポートフォリオや学習記録にも最適です。
まとめ
- JavaScript初心者でも、1日でシンプルなゲームアプリを作れる
- 配列・イベント処理・状態管理など、基礎が自然に身につく
- GitHub Pagesを使えば、学んだ成果をすぐに世界に公開できる
プログラミング学習は「小さな成功体験を積むこと」が継続のカギです。
神経衰弱ゲームはその第一歩として最適な題材といえるでしょう。
次回予告
Day03では、ランダムで名言を表示する「Quote Maker（名言メーカー）」を作成します。
APIを使わずに、JavaScriptの配列とランダム関数だけで実装可能です。
プログラミングの基礎を一歩ずつ積み上げていきましょう！
