つちのこ2.0

つちのこはPythonのような文法の日本語で記述する、ブラウザ上で動作するプログラミング言語です。大学入試共通テストの科目「情報」で使用される可能性があるDNCL2に、Pythonで使用される構文を日本語でアレンジした要素が取り入れられています。

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

はじめる

言語の特徴

つちのこは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 を使用しています。

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