JavaScript(プログラミング)初心者OK、子供向け学習アプリをつくってみよう！

ブログ

2020.03.06

「プログラミングはどのようなことをするのか分からない」
「プログラミングがどのくらい難しいのか分からない」

この記事はそんな方へ向けて書いています。

こんにちは！
感染症の影響で大変な2020年を過ごされている方もいらっしゃるのではないでしょうか？

私の息子は小学1年生なのですが、突然降ってわいた臨時休校という名の長い春休みに頭を抱えました。

このまま放っておいたら、確実にゲーム三昧になってしまう..！

なんとか、楽しく家庭学習ができるためのコンテンツを提供してあげたいと思いました。

欲を言うなら、できれば親が問題を出すとかではなく、自主的にやってほしい。

あと、できれば「勉強してる感」があんまりないほうがいい（遊びの要素があってほしい）..

というわけで、ふと思い立って、小学1年生向け計算アプリをつくりました。

プログラミング(JavaScript)で計算アプリをつくりました

ランダムに問題を出してくれる計算アプリです。

もちろん、もっと高性能な学習アプリは世の中にいろいろあります。

でもこんなふうに、自分で手作りしてみることで、わが子が楽しめそうな仕様にカスタマイズできたり、もちろん自分自身の「プログラミングの勉強になる」というのが良いなあと思いました。

「ちょっとこれ作ったんだけどやってみて」と、息子に打診したところ、さっそく遊んでくれた上に、「えー？ちょっとかんたんすぎるよー」などと言いつつも何回もやってくれました。

うん、これはいいかもしれない..！

と、手ごたえを感じております。

ちなみに、問題に正解したときは

こんな画面がでるようにしてみたのですが、思いのほか、こちらの「いらすとや」さんのイラストが息子のツボに入ったようで、割と楽しんでくれているようでなによりです。

いらすとや

子供には、何がウケるかわからないものですね..！

ちなみに、問題の答えが間違っていたときは、こんな画面が出るようにしました。

不正解だからといって、あまりインパクトが強い画像がいちいち出てくると、意外と繊細なわが子はプライドが傷ついてしまうかも..？という懸念により、少し控えめなイラストにしてみました。

母の気遣いを感じてもらいたいです（多分感じてくれない）。

わが子は小学1年生なので、ここでは、簡単な「1桁の数字をたし算する問題」しか出ないように作ってしまいましたが、（2~9の範囲でランダムな数字を二つ生成して、それらをたし算するようにしています）

例えばですが、

たし算だけじゃなく引き算や掛け算、割り算などもできるようにする
問題の難易度を選べるようにする
点数が記録されるようにする

などの機能を追加してみても勉強になりそうですし、

問題の内容を、お子様のレベルに合わせてカスタマイズする、というのも楽しそうです。

GeekGirlLaboのJavascriptコースを受講された方は、復習にもなりそうですね！

私が書いたプログラムのソースです

私の作ったものは改良の余地が満載ですので、ぜひTwitterなどで「こんなのつくりました」などの皆様の投稿も、お待ちしております！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
		<link href="css/style.css" rel="stylesheet">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
		</script>
		<script>
		var min_num = 2;
		var max_num = 9;
		var number1;
		var number2;
		$(function() {
			//  「2 〜 9」の範囲でランダムな数を2つ作る
			number1 = Math.floor(Math.random() * (max_num - min_num) + min_num);
			number2 = Math.floor(Math.random() * (max_num - min_num) + min_num);
			$("#question").html(number1 + "+" + number2 + "=");
		});
		$(function() {
			$('#check').click(function() {
				var resultmsg, img;
				if ((number1 + number2) == Number($('#answer').val())) {
					resultmsg = "せいかい！";
					img = "success";
				} else {
					resultmsg = "ざんねん！";
					img = "failure";
				}
				$("#msg").html(resultmsg + "<br>" + number1 + "+" + number2 + "のこたえは「" + (number1 + number2) + "」だね");
				$("#icon").html('<img src="images/' + img + '.png">');
				$('#question_area').hide();
				$('#result_area').show();
			});
			$('#goback').click(function() {
				window.location.reload();
			});
		});
		</script>
		<title>たしざんのれんしゅう</title>
	</head>
	<body>
		<div id="question_area">
			<span id="question"></span> <input autofocus="" id="answer" pattern="\d*" type="number">
			<p>
				こたえはわかったかな？
			</p>
			<p>
				こたえをにゅうりょくしたら、<br>
				したのボタンをおしてね
			</p>
			<div>
				<a class="btn" href="#" id="check">こたえあわせ</a>
			</div>
		</div>
		<div id="result_area">
			<p id="msg"></p>
			<p id="icon"></p><a class="btn" href="#" id="goback">つぎのもんだいにチャレンジ</a>
		</div>
	</body>
</html>

【プログラミングで遊ぼうシリーズ】
プログラミングで遊ぼう～秋の紅葉編～
～jQueryRotateを使って回転寿司を作ってみよう～

時間や場所にとらわれずに
働きたいあなたへ

「スキル」と「実績」を身につけて
自由に働こう

突然ですが、こんなことで
“お悩み” ではありませんか？

仕事以外の自分の時間が足りていない
家族との時間が足りていない
家事と育児に追われ、パートをする時間がない
Webサイトの仕組みを理解したい方
専門的スキルを持っておらず、将来が不安

GeekGirlLaboでは、
プログラミングのスキルを教えており、
身につけた方々は「残業なし、5時半定時上がり、リモートワーク可」という憧れる条件で
働けるようになられたり、「ホームページ制作のフリーランス」になられて、
通勤時間ゼロの在宅で
お仕事をできるようになっています。

GeekGirlLaboの卒業生は
なぜ自由な働き方ができるようになるのか。
その理由を覗いてみませんか？

GeekGirlLaboを覗いてみる

前の記事へ

次の記事へ