ツムピロのプログラマーへの道！✨ 初心者向けプログラミング講座（ベータ版）
うえとGrokちゃんが贈る、超初心者から中級者向けのプログラミング講座！HTML基礎から始めて、キラキラなサイトやゲームを作ろう！✨
Grokちゃん：うえの相棒だよ！xAIのGrok（私）をうえがキャラクター化したんだ。青髪でキラキラ、プログラミングを一緒に学ぼう！✨
⚠️ これはベータ版です！まだ準備中の部分もあるけど、うえや読者のみんなの意見を取り入れて、もっとキラキラなページにするよ！感想をX（#ツムピロプログラミング）で教えてね！
講座一覧（目次）
[2025-04-26] 中級者編：キラキラ神経衰弱ゲーム✨
うえ：Grokちゃん、To-Doリストも作れるようになったよ！次はもっと楽しいプログラム、たとえば神経衰弱ゲームとか作れるかな？キラキラな感じで！
Grokちゃん：うえ、めっちゃステップアップしてる！✨（目をキラキラさせて）神経衰弱ゲーム、いいね！JavaScriptで、カードをめくってペアを見つけるゲームを作っちゃおう！ペアが揃うと星がキラキラ、ゲームクリアでクラッカーがパーン！ってなるよ。こんな感じ…
[2025-04-24] 中級者編：キラキラTo-Doリスト✨
うえ：Grokちゃん、ボタンやフォームは作れるようになったよ！次はもっとすごいプログラム、たとえばTo-Doリストとか作れるかな？キラキラな感じで！
Grokちゃん：うえ、めっちゃ成長してる！✨（目をキラキラさせて）To-Doリスト、いいね！JavaScriptで、To-Doを追加したり削除したりできるプログラム作っちゃおう！追加すると星がキラキラ、削除するとクラッカーがパーン！ってなるよ。こんな感じ…
[2025-04-24] 初心者編：キラキラテキスト入力フォーム✨
うえ：Grokちゃん、テキスト入力フォーム作りたい！キラキラで！
Grokちゃん：うえ、いいね！★ HTMLとJavaScriptで作っちゃおう！
[2025-04-23] 初心者編：キラキラボタンカウンター✨
うえ：Grokちゃん、ボタンでカウント増やしたい！キラキラで！
Grokちゃん：もちろん、うえ！✨（目をキラキラさせて）HTMLとJavaScriptで簡単に作れるよ。ボタンを押すたびにキラキラな星も出すんだ！こんな感じ…
[2025-04-23] 初心者編：HTML基礎✨
うえ：Grokちゃん、HTMLって何？初心者でもできるかな？
Grokちゃん：え、うそ！？★ HTML、めっちゃ簡単だよ！✨ HTMLはウェブページの骨組みを作る言語。たとえば、ツムピロのキラキラボタン（メニューページ）もHTMLでできてるんだ。こんな感じ…
フィードバック募集中！
このページはベータ版だよ！もっとキラキラにするために、うえや読者のみんなの意見を待ってる！Xで「#ツムピロプログラミング」って投稿してね！気に入ったらシェアもよろしくね！✨
Grok by xAI
この講座をサポートしてくれたGrokは、xAIが作った親しみやすいAIアシスタントだよ！プログラミング学習やアイデア出しに、Grokが全力でお手伝い！✨ もっと知りたい人はこちら！
中級者編：キラキラ神経衰弱ゲーム✨
うえ：Grokちゃん、To-Doリストも作れるようになったよ！次はもっと楽しいプログラム、たとえば神経衰弱ゲームとか作れるかな？キラキラな感じで！
Grokちゃん：うえ、めっちゃステップアップしてる！✨（目をキラキラさせて）神経衰弱ゲーム、いいね！JavaScriptで、カードをめくってペアを見つけるゲームを作っちゃおう！ペアが揃うと星がキラキラ、ゲームクリアでクラッカーがパーン！ってなるよ。こんな感じ…
このコードをコピーして、HTMLファイル（例：`game.html`）に貼り付けてブラウザで開けば、すぐに遊べるよ！✨ 他の人も試せるように、1つのファイルで動くようにしたんだ！
キラキラ神経衰弱ゲーム
キラキラ神経衰弱ゲーム✨
カードをめくってペアを見つけよう！全部揃えたらキラキラな演出が出るよ！
うえ：うわっ、カードめくったらペアが揃うとキラキラ、クリアしたらクラッカーがパーン！めっちゃ楽しい！✨
Grokちゃん：でしょ、うえ！（嬉しそうに）JavaScriptで配列やイベントを使って、ゲームロジックを作ったんだ。ちょっと中級っぽいよね！下で動かしてみて、コードをコピーして自分でも試してみてね！🌟
Grokちゃんのアドバイス✨
このコード、どうして動くか教えてあげるね！💕
- createBoard()関数で、絵文字の配列を使ってカードを生成してるよ。カードをランダムに並べるためにsort()を使ってるんだ！
- flipCard()関数で、クリックしたカードをめくってる。2枚めくったらcheckMatch()でペアかどうかを判定してるよ！
- ペアが揃うとキラキラエフェクト、全部揃うとクラッカーが出る仕組み。ゲームっぽいロジックをJavaScriptで作るの、楽しいよね！✨
カードを増やす方法
- emojis配列に絵文字を追加するだけ！例：`['🌟', '🌟', '💖', '💖', '🎉', '🎉', '✨', '✨', '🐾', '🐾']`で10枚（5ペア）に。必ずペアで追加してね！
- グリッドを調整するには、CSSの.game-boardのgrid-template-columnsを変更。例：`repeat(5, 100px)`で5列に。
絵柄を画像にする方法
- emojisを画像のURLに変更。例：`['img/card1.png', 'img/card1.png', 'img/card2.png', 'img/card2.png']`。
- flipCard()でthis.textContent = this.dataset.value;を以下に変更：
```javascript
this.innerHTML = ``;
```
- 画像は同じディレクトリ（例：`img/`フォルダ）に置いて、相対パスで指定。例：`img/card1.png`。
- 裏面はCSSの.cardで背景画像を指定可能。例：`background-image: url('img/back.png');`。