プレイグラムでのプログラミング学習を支える技術

こんにちは。「Playgram（プレイグラム）」開発チームの三上（みかみ）です。

Preferred Networks (PFN) が開発しているプログラミング教材 Playgram は、最初は初心者に適したビジュアルプログラミングでプログラミングの基礎を学び、子どもの理解度と意欲に応じて段階的に学習を進め、最終的に実際のアプリ開発にも使われる「Python」を使ったテキストコーディングを習得できるように設計されています。

私たちは、以前の記事でも書いたように、Scratch のようなビジュアルプログラミング言語やノーコード開発ツールが登場した現在でも、本格的なアプリ開発やサービス開発にはテキストプログラミング言語の習得が必須だと考えています。

その一方で、習得の容易なビジュアル言語でプログラミングを学んでも、そこからテキスト言語へ移行する際につまずく人が多いという現状があります。

この記事では、ビジュアル言語からテキスト言語への移行という課題を解決するために、私たちが Playgram にどのようなソフトウェア技術を盛り込んでいるかご紹介します。

記事の前半では、一般の方に向けて、私たちが使っている技術のポイントを簡単に説明します。そして後半では、より専門的な内容に興味がある方を対象に、Playgram がテキスト言語をビジュアル言語に変換する過程を解説します。

ビジュアル言語とテキスト言語を同時に体験するための仕組み

Playgram には、プログラマが本格的なアプリ開発で使う専門的なツールと同じ仕組みが備わっています。この仕組みのおかげで、Playgram という一つの教材の中でビジュアルプログラミングとテキストコーディングを同時に体験でき、テキストコーディングをより簡単に習得できるようになっています。また、Playgram にはテキストコーディングの学習過程のつまずきを減らすための補助機能があり、その基礎にもなっています。

具体的には、Playgram では、ビジュアルプログラミング言語とテキストプログラミング言語は「見た目が違うだけで同一のもの」として扱われています。Playgram でテキスト言語のソースコードを書き実行すると、ソースコードは一度ビジュアル言語のプログラムに変換されます。そして、変換されたプログラムはビジュアル言語で直接書いた場合と同じように実行されます。

直接実行せずに一度ビジュアル言語に変換する仕組みは、一見無駄に見えるかもしれません。しかし、この仕組みがあるおかげで、Playgram の大きな特徴である「ビジュアルプログラミングを学びながら、テキストコーディングへ段階的に移行する」というカリキュラムが実現できるのです。

この仕組みを採用するメリットは他にもあります。例えば、現在の Playgram はテキスト言語として Python のみをサポートしていますが、この仕組みの上でビジュアル言語への新たな変換処理を追加するだけで、Python 以外の言語も比較的容易にサポートできます。また、どのプログラムも一度ビジュアル言語に変換されるので、「同じコードのはずなのにテキストとブロックで実行結果が変わる」といった不具合をなくすことができます。

このようなテキスト言語からビジュアル言語への変換処理は、「コンパイラ」や「トランスパイラ」と呼ばれる、プログラマが実務で使っているツールと同じ仕組みに則って実現しています。Playgram では、実際のテキスト言語で使われるツールと同じ仕組みを使うことで、複雑な文法・ソースコードも正しく扱うことができます。

「テキスト言語からビジュアル言語へ変換する」仕組みは、プログラムを実行する以外の用途でも使われています。学習者は、この仕組みを介することで、テキストコーディングの最中にワンボタンで表示をビジュアル言語に切り替えたり、また元に戻したりできます。他にも、Playgram 内でのテキストコーディングを支援する機能の多くで、テキスト言語からビジュアル言語に変換する機能が基礎として使われています。

テキスト言語をビジュアル言語に変換する

この節では、Playgram がテキスト言語をビジュアル言語にどのように変換するか、より専門的な詳細を説明します。興味のない方は次の節まで読み飛ばしても構いません。

コンピュータがテキスト言語をどのように実行しているか、これをきちんと説明しているプログラミング教材は世の中を見渡しても数少ないと思います。しかし、それは重要でないからではありません。

プログラミングの初学者は、プログラミング学習とは文法を暗記することだと思いがちです。ですが実際には、習熟したプログラマは文法を丸暗記してプログラミングしているわけではありません。それは学習の結果として、あるいは経験的に、コンピュータがテキスト言語を解釈する仕組みを理解しているからです。

すでに説明したように、Playgram は世の中の開発ツールと同じ仕組みを持っています。Playgram がテキスト言語をどのように実行しているか理解すると、本格的なアプリ開発に取り組む際にもテキストコーディングの習得がより容易になると思います。

テキスト言語の変換の流れ

Playgram では、3つの工程で文字列をビジュアル言語のブロックに変換します。

1. 字句解析：文字列を単語の列に区切る
2. 構文解析：単語の列から不完全なブロックを作る
3. 意味解析：変数や関数のブロックを正しいものに置き換える。

ここでは、Playgram の Python モードで書いた以下のソースコード（「もし距離 (distance) が 1 なら、前に 10 だけ進む」）を例に、それぞれの工程を説明していきます。

字句解析

最初に、文字列を単語ごとに区切っていきます。文字ごとではなく単語ごとに区切るのは、後の工程の処理を単純にするためです。例えば、同じ ”i” という文字でも ”distance” の2文字目は変数の一部分ですし、”if” の最初の文字は分岐処理の始まりを意味します。最初の工程で単語ごとに区切ることで、このような曖昧さを考えずに済むようになります。

構文解析

次の工程では、字句解析で得られた単語列からビジュアル言語のブロックを組み立てていきます。

Playgram は内部でテキスト言語のルール (文法) を持っています。例えば、Python モードでは以下のようなルールを持っています。このルールを単語列に適用していくと、ブロックを組み立てることができます。

このように、テキスト言語のソースコードがビジュアルプログラミングで見慣れた形に変換されました。

しかし、こうして組み上がった変数と関数のブロックはまだ不完全です。なぜなら、distance 変数ブロックの型が不明だからです。Playgram のビジュアル言語において、変数の型はプログラマがブロックを配置した時に決まります。一方で、構文解析の結果から得られたこのブロックには型がありません。元の Python プログラムに型が書かれていないからです。^[1]ここでは _?distance?_ という表記で distance の型が不明であることを表しています。

意味解析

ここまでの工程で、文字列のソースコードからほぼビジュアル言語と同じブロックが得られました。最後に、意味解析という工程でブロックの不完全な部分を直していきます。

先ほどの構文解析で得られたブロックには型がついておらず、不完全です。完全なブロックを作るためには、それぞれの変数が何の型なのかを調べる必要があります。意味解析では、構文解析の結果に対して以下のような処理を行います。大まかには、互いに組み合わさっている他のブロックとの関係から、不明な部分に何を当てめるのが正しいか推理していると考えればよいでしょう。

ここまでの工程を経て、無事、テキスト言語で書かれたソースコードをビジュアル言語に変換することができました。あとは、このプログラムを実行するだけです！

今後のテキストコーディング機能について

Playgram では、子どもたちがプログラミング学習に使うテキストコーディング機能を、既存のプログラミング教材の流用ではなく一から作り込みました。専用の仕組みを一から作るのは高いハードルがありましたが、本格的・実践的なプログラムの実現と、プログラミングの学習に即した分かりやすさを両立できる高いポテンシャルを持った機能になったと考えます。

この機能はまだまだ発展途上ですが、開発チームでは、より分かりやすく使いやすいテキストコーディング学習環境の実現に向けて改善に取り組んでいきます。