つちのこ1.0

つちのこはPythonライクな文法の日本語で記述できる、ブラウザ上で動作するプログラミング言語です。今後の大学入試共通テストで使用される可能性があるDNCL2の処理系です。

つちのこはインストール不要です。ウェブブラウザ上で実行することができます。言語仕様を説明するドキュメントプログラム例も公開しています。

はじめる

言語の特徴

つちのこはPythonライクな文法の日本語で記述する、ウェブブラウザ上で動作するインタプリタ形式のプログラミング言語です。2022年度より、高等学校では情報Ⅰ、情報Ⅱが新設されます。情報Ⅰは「共通必履修科目」であり、授業ではプログラミングを扱うことになります。Pythonは豊富なライブラリや高い可読性から、教育用の言語として導入しやすい言語です。Pythonを授業で使用する学校は多くなると予想されます。つちのこは、Pythonの導入をスムーズに進めるためのツールとして開発しました。そのため、文法やサポートする機能はPythonに近づけて設計されています。また、つちのこは疑似言語としての側面も備えており、アルゴリズムを説明するためのツールとしても活用できます。

統合開発環境

入力支援システム

構文のプロパティを設定し、OKボタンを押すだけで構文が自動的に生成されます。プログラムを少量のタイピングで簡単に作成することができます。

実行回数の可視化

off をクリックして on の状態に切り替えてプログラムを実行すると、構文の実行回数を可視化することができます。棒グラフをクリックすると、プログラム中の該当箇所がハイライトされます。

Pythonへの変換

Python変換をクリックすると、疑似言語をPythonに変換することができます。この機能は疑似言語をPythonに書き換える上でのヒントを提供するものであり、一部の関数名や変数名は変換後もそのまま引き継がれます。Pythonの処理系で必ずしも正常に動作するとは限りません。変換したプログラムはPythonファイルとしてダウンロードすることができます。セキュリティの関係上、ブラウザによっては警告メッセージが表示されることがあります。

ステップ実行(進む/戻る、任意のステップに移動)

プログラムをステップ実行します。1ステップ進める、1ステップ戻す、任意のステップに移動することができます。最大で1000ステップ進む/戻ることができます。

通常実行

プログラムを通常実行します。プログラムが無限ループを含む場合も停止することができます。

コンソールからの標準入力

コンソールから標準入力を受け取ることができます。標準入力は、文字列、数値、論理値のいずれかの型に変換できます。

描画関数

描画関数を用いてキャンバスに図形や文字列を描画することができます。

描画関数のサンプルプログラム

モンテカルロ法

コッホ曲線

色相環

データ構造の可視化

プログラム中の変数の値はリアルタイムでビューワーに表示されます。データ構造の中身や型名が把握しやすくなっています。

リンクの生成

作成したプログラムのリンクとQRコードを生成することができます。プログラムはBase64文字列に変換後に圧縮し、クエリパラメータとしてURLに付与しています。プログラムの書式によりますが、最大で8KB前後のプログラムまで対応しています。教材としてプログラムを配布する場合や、プログラムを迅速に参照したい場合に便利です。

以下のリンクはコンソールに「Hello World」を表示するプログラムです。

https://t-daimon.jp/tsuchinoko/ide/?code=U3W1UHU0VHW0UHU1V3U0UXVyVHU1VrUwVLW0BDOMVC2cNFSNjDxSc3LyVY0MwvOLclKAfE0A

IDEの説明

  1. 入力支援ダイアログを開きます。画面サイズが小さい端末では入力支援が表示されます。
  2. 実行:プログラムを通常実行します。
  3. ステップ:プログラムをステップ実行します。
  4. 停止:プログラムを停止します。
  5. :プログラムを巻き戻します。ステップ実行時に利用できます。
  6. :プログラムを1ステップ戻します。ステップ実行時に利用できます。
  7. :プログラムを一時停止します。ステップ実行時に利用できます。
  8. :プログラムを1ステップ進めます。ステップ実行時に利用できます。
  9. :プログラムを早送りします。ステップ実行時に利用できます。
  10. :指定したステップに移動します。ステップ実行時に利用できます。
  11. off:実行回数の可視化モードを切り替えます。
  12. Python変換:疑似言語のプログラムをPythonに変換します。
  13. :ファイルへの保存、プログラム例、リンクの生成等を行うメニューを開きます。
  14. プログラムを記述するエディタ。
  15. 入力、出力のためのコンソール。
  16. 変数の値、描画領域、制御構文の実行回数を表示するビューワー。

メニューの説明

  1. プログラムをテキストファイルとして端末に保存します。
  2. 端末に保存されたテキストファイルのプログラムを開きます。
  3. エディタのテーマ(ライトモード/ダークモード)を切り替えます。
  4. エディタとコンソールのフォントサイズを設定します。
  5. 言語仕様のプログラム例を開きます。
  6. 「生成」をクリックすると、プログラムのリンクとQRコードが生成されます。プログラムの書式によりますが、最大で8KB前後のプログラムまで対応しています。
  7. トップページ、ドキュメント、プログラム例へのリンク。

入力支援システムの説明

  1. 構文を選択します。すべての構文に対応しています。
  2. 定義された変数名、関数名、クラス名などを参照できます。
  3. 色のついた部分をクリックすると現れます。数値、変数名などのプロパティを入力します。
  4. 入力確定ボタンです。クリックすると、エディタのカーソル位置に構文が挿入されます。入力をキャンセルする場合は、右上の×をクリックします。

動作環境

Internet Explorerを除くモダンなウェブブラウザで動作します。PCだけでなく、スマートフォンやタブレットなどのモバイル端末からも利用することができます。バグ修正によりIDEのページのデザイン等は修正されることがあります。

IDEの技術的側面

エディタは Ace を使用しています。

ユーザーインターフェースの制御は jQuery, Bootstrap を使用しています。

グラフ描画は Chart.js を使用しています。

プログラムはサーバーに送信されることなく、すべてブラウザ上で処理されます。