2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

DNCL表記のブロックをPython,JavaScriptに変換するサイトをGoogle Blocklyで作ってみた

Last updated at Posted at 2023-06-12

「DNCL表記のブロックでプログラミングしてPython,JavaScriptに変換」を省略して「どんブロック」です。
https://kaihatuiinkai.jp/DNblock/

DNCLとは

 高等学校におけるアルゴリズムやプログラムに関する教育では、採用されるプログラミング言語は多様です。 プログラミングの実習時間も異なります。そこで、このような事情を考慮して「情報関係基礎」の出題では、 共通テスト用の手順記述言語 (DNCL) が使用されます。
 DNCLは「Daigaku Nyushi Center Language」の略ではないかといわれています。 DNCLは試験用の言語で、プログラムの開発には通常使われていません。
 大学入試センターでは、「令和7年度試験の問題作成の方向性,試作問題等」を公開しています。情報の試作問題でDNCLが使われています。
参照:https://www.dnc.ac.jp/albums/abm.php?d=395&f=abm00003277.pdf&n=6-2-1_%E8%A9%A6%E4%BD%9C%E5%95%8F%E9%A1%8C%E3%80%8E%E6%83%85%E5%A0%B1%E2%85%A0%E3%80%8F%E2%80%BB%E4%BB%A4%E5%92%8C4%E5%B9%B412%E6%9C%8823%E6%97%A5%E4%B8%80%E9%83%A8%E4%BF%AE%E6%AD%A3.pdf#page=22

Python変換はBlocklyデモにもあるけど・・・

 Google Blocklyのサンプル「Blockly‏>Demos‏>コード」では、ブロックプログラムをJavaScript,Pythonに変換表示します。
https://blockly-demo.appspot.com/static/demos/code/index.html?lang=ja
でも、このサンプルでDNCLの問題を解くことはできません。

  • 文字列を結合するブロックがない
  • 剰余,商を計算するブロックがない
  • for命令の初期値,最終値に変数を使用できない
  • 配列ブロックが複雑で使いにくい
  • 二次元配列を扱えない
  • 表記がDNCLと異なる

だから作ってみた

 理由ができたので、作ってみました。「DNCL表記のブロックでプログラミングしてPython,JavaScriptに変換」を省略して「どんブロック」です。いつも通り冴えない名前です。
https://kaihatuiinkai.jp/DNblock/
image.png

高等学校 情報科の学習で、DNCL表記のブロックを使ってプログラムを作り、実行結果を確認できる教材です。2022/11/9に大学入試センターが発表した、試作問題の資料をもとに新しい表記(新DNCL)にしています。

  1. DNCL表記のブロックで簡単にプログラム作成
  2. プログラムを実行して、正しく作動するか確認できる
  3. 作成したプログラムをPythonとJavaScriptで表示
  4. 作成したプログラムの保存、読み込み可能
  5. ブラウザ上で作動、インストール不要
  6. 無限ループの場合にはエラー表示
  7. 表示エリアの広さを変えることが可能(タッチパネル非対応)
     Pythonは作成したJavaScriptを変換処理して表示しています。Pythonには誤りが含まれる場合があります。

問題演習で学習しましょう

 問題演習で基礎からプログラミングの学習ができるようにしています。解答はページの下部にあります。これも「どんブロック」で表示して、作動確認ができるようにしています。

1は数値、"1"は文字

 Blocklyは数値ブロック、文字ブロックの区別があります。足し算などの演算ブロックの中に文字ブロックを入れようとしてもはじかれます。初心者に「値には文字と数値の区別があります」と教えるときに役立ちます。
 文字列の結合と、数値の加算の違いをブロックを使って説明することもできます。
image.png
実行すると「123123」と表示します
image.png
実行すると「246」と表示します

 また「表示する」ブロックのように、文字ブロック、数値ブロックのどちらも受け入れるものもあります。これも、実際にプログラムを作ってみて体験することができます。

高校生用のプログラミング教材

 高等学校の情報Ⅰの教科書ではブロック型、Python、JavaScript、VBAなど各種言語でプログラミングの説明が記載されています。Scratch世代の生徒たちにはブロック型で理解を深めてコードを記入できるようになってほしいと思います。
 情報科の目指すものは「プログラマーの育成ではない」と言われています。でも、プログラミング的思考は小学校から学習しており、中学校ではライントレースカーなど制御プログラミングを経験してきています。高校生になったら基礎的なプログラムを読むことができるようになってほしいです。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?