JavaScript

2026.03.05 (更新: 2026.03.06)

子供でもプログラミング！Blocklyで作るビジュアル電卓アプリ

はじめに

プログラミング教育が小学校で必修化された今、「子供にプログラミングを教えたいけど、いきなりコードは難しそう…」と悩んでいる保護者の方も多いのではないでしょうか。

そこで今回、Blockly（ブロックリー）というビジュアルプログラミング言語を使った「電卓アプリ」を開発しました。ブロックを組み合わせるだけでプログラミングができるので、小学生でも直感的に扱えます。

Blocklyとは？

Blocklyは、Googleが開発したビジュアルプログラミング言語です。ScratchやMinecraft教育版のベースにもなっており、以下の特徴があります：

ブロックを組み合わせるだけでプログラミング
テキストコードを書かなくてOK
内部では本物のJavaScriptコードが生成される
教育現場で広く使われている実績

開発した電卓アプリの特徴

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' }   // 変数から取得
  ]
}

今後の拡張計画

追加予定のブロック

数学関数（すうがく）
– 平方根（√）
– 三角関数（sin、cos、tan）
– 円周率π、自然対数e

条件分岐（じょうけん）
– if-else文
– 比較演算子（=、≠、<、>）

繰り返し（くりかえし）
– n回繰り返し
– whileループ

これらを追加することで、より高度なプログラミング学習が可能になります。

実際の使用例

例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を使った電卓アプリを通じて、以下のことがわかりました：

✅ ビジュアルプログラミングは本当に直感的
→ 小学生でもすぐに理解できる

✅ 実用的なツールと組み合わせることで学習効果UP
→ 単なる勉強ではなく「使える」アプリに

✅ 段階的な拡張が可能
→ 簡単なブロックから始めて、徐々に高度な機能を追加

プログラミング教育において、「楽しみながら学ぶ」ことは非常に重要です。このアプリが、子供たちがプログラミングに興味を持つきっかけになれば嬉しいです。

参考リンク

技術スタック: React, TypeScript, Blockly, Vite
開発期間: 約2週間
対象年齢: 小学3年生〜中学生