つちのこ2.0

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

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

はじめる

言語の特徴

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

統合開発環境

実行回数の可視化

設定画面から実行回数の可視化を有効にすると、構文の実行回数を可視化することができます。実行回数は相対的に多い場合は濃い色で、少ない場合は薄い色で可視化されます。棒グラフをクリックすると、プログラム中の該当箇所がハイライトされます。

入力支援システム

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

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. プログラムを1ステップ戻します。ステップ実行時に利用できます。
  5. プログラムを一時停止します。ステップ実行時に利用できます。
  6. プログラムを1ステップ進めます。ステップ実行時に利用できます。
  7. プログラムを早送りします。ステップ実行時に利用できます。
  8. 指定したステップに移動します。ステップ実行時に利用できます。
  9. プログラム例を開きます。
  10. ファイルを指定してプログラムを開きます。
  11. プログラムをテキストファイルとしてダウンロードします。
  12. プログラムのリンクと2次元コードを生成します。
  13. IDEの設定画面を開きます。
  14. IDEのレイアウト(縦並び/横並び)を変更します。
  15. プログラムを記述するエディタ。
  16. 入力支援システムを開きます。
  17. 出力結果、変数の値、描画領域、制御構文の実行回数を表示するビューワー。

メニューの説明

  1. エディタとコンソールのフォントサイズを設定します。
  2. エディタのテーマ(ライトモード/ダークモード)を切り替えます。
  3. 入力支援システムのON/OFFを切り替えます。
  4. 実行回数の可視化のON/OFFを切り替えます。

入力支援システムの説明

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

動作環境

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

IDEの技術的側面

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

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

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

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