子供でもプログラミング！Blocklyで作るビジュアル電卓アプリ
はじめに
プログラミング教育が小学校で必修化された今、「子供にプログラミングを教えたいけど、いきなりコードは難しそう…」と悩んでいる保護者の方も多いのではないでしょうか。
そこで今回、Blockly（ブロックリー）というビジュアルプログラミング言語を使った「電卓アプリ」を開発しました。ブロックを組み合わせるだけでプログラミングができるので、小学生でも直感的に扱えます。
Blocklyとは？
Blocklyは、Googleが開発したビジュアルプログラミング言語です。ScratchやMinecraft教育版のベースにもなっており、以下の特徴があります：
開発した電卓アプリの特徴
1. ビジュアルプログラミングで計算式を作成
従来の電卓アプリは「ボタンを押して計算」するだけですが、このアプリは自分でブロックを組み立てて計算式を作ることができます。
例えば：
2. マグネット機能で計算結果を再利用
計算結果は「マグネット」として電卓画面に表示され、ドラッグ＆ドロップで再利用できます。これにより：
3. 教育的価値が高い
このアプリを通じて、子供たちは以下のスキルを身につけられます：
プログラミング的思考
数学的思考
技術的な実装ポイント
使用技術スタック
- React + TypeScript
- Blockly（Google製）
- Vite（開発環境）コアロジックの実装
Blocklyで組み立てたブロックは、以下のように実際のJavaScriptコードに変換されます：
// ブロックをJavaScriptに変換
const code = javascriptGenerator.workspaceToCode(workspaceRef.current);
// eval()で実行して結果を取得
try {
const result = eval(code);
if (typeof result === 'number') {
// 結果を電卓のマグネットとして追加
onCreateBlock(result.toString());
}
} catch (error) {
console.error('実行エラー:', error);
}ブロックのカテゴリー設計
現在は3つのカテゴリーを実装：
1. すうじ（数字）
{
kind: 'category',
name: 'すうじ',
colour: '#5C81A6', // ブルー
contents: [
{ kind: 'block', type: 'math_number' }
]
}2. けいさん（計算）
{
kind: 'category',
name: 'けいさん',
colour: '#5CA65C', // グリーン
contents: [
{ kind: 'block', type: 'math_arithmetic' } // +, -, ×, ÷
]
}3. へんすう（変数）
{
kind: 'category',
name: 'へんすう',
colour: '#A55C9C', // パープル
contents: [
{ kind: 'block', type: 'variables_set' }, // 変数に代入
{ kind: 'block', type: 'variables_get' } // 変数から取得
]
}今後の拡張計画
追加予定のブロック
数学関数（すうがく）
条件分岐（じょうけん）
繰り返し（くりかえし）
これらを追加することで、より高度なプログラミング学習が可能になります。
実際の使用例
例1：消費税込みの金額を計算
1. 「すうじ」ブロックで 1000 を入力
2. 「けいさん」ブロックで × を選択
3. 「すうじ」ブロックで 1.1 を入力
4. 「じっこう」ボタンをクリック
→ 結果: 1100例2：複数の計算結果を組み合わせる
1. 100 + 200 = 300 を計算（マグネット1）
2. 50 × 2 = 100 を計算（マグネット2）
3. マグネット1とマグネット2を足し算
→ 結果: 400学んだこと・工夫した点
1. 子供向けUIの設計
2. エラーハンドリング
ブロックが組み立てられていない場合、わかりやすいメッセージを表示：
if (!code.trim()) {
alert('ブロックを組み立ててから「じっこう」ボタンを押してね！');
return;
}3. セキュリティ
`eval()`を使用していますが、教育用途でユーザーが自分で作成したコードのみを実行するため、問題ありません。本番環境では、より安全な方法（サンドボックス化など）を検討する必要があります。
まとめ
Blocklyを使った電卓アプリを通じて、以下のことがわかりました：
→ 小学生でもすぐに理解できる
→ 単なる勉強ではなく「使える」アプリに
→ 簡単なブロックから始めて、徐々に高度な機能を追加
プログラミング教育において、「楽しみながら学ぶ」ことは非常に重要です。このアプリが、子供たちがプログラミングに興味を持つきっかけになれば嬉しいです。
参考リンク
—
技術スタック: React, TypeScript, Blockly, Vite
開発期間: 約2週間
対象年齢: 小学3年生〜中学生