Google製のJavaScript教育ツール「Grasshopper」は基礎から学べて初心者に優しい！

　GoogleのインハウスインキュベーションArea 120で生まれた「Grasshopper」は、初心者向けのプログラミング教育ツールで、JavaScriptをステップバイステップで学べます。ビジュアルプログラミング型ではなく、テキストで記述するプログラミング言語をそのまま扱いますが、操作性やスモールステップの内容など初心者に隅々まで配慮されています。大人の初心者にもぴったりですからぜひ挑戦してみてください。

　英語版で、日本語版はありませんが、プログラムのコードはもともと英語ですし、説明はシンプルな文章ばかりです。中学校程度の英語がわかっていれば困らないでしょう。説明部分だけ翻訳ツールを使う手もあります。

全部で8個のカリキュラムをひとつずつ進めて学べる

　Webブラウザーで「Grasshopper」のページを開くとかわいらしいバッタが迎えてくれます。Googleアカウントでログインするだけですぐに利用できます。Webブラウザーから利用できるほか、Androidのアプリがあります。iOS版アプリもあったのですが、今年の3月以降一時的にApp Storeから消えていて、今年後半には新しいバージョンでリリースの予定だそうです。

［Start coding today］をクリックするとGoogleアカウントでのログインを求められる

　全部で8個のカリキュラムが用意されていますが、最初の「Fundamentals」（基礎）から迷わず順に始められるようにできています。初心者がターゲットですから、先の問題やカリキュラムはロックされていてひとつずつ進むようになっています。

最初のコース選択画面。「Fundamentals」（基礎）から順に始める

テキスト入力をほとんどさせない優しい設計

　ツールの画面はすっきりとして使いやすく、ほとんどコードを手入力しなくて良いように工夫されています。JavaScriptなどテキストコードを学ぶときに初心者がはまりやすいのは単純な記述ミス。その点も安心です。

Webブラウザー版の画面。わかりやすいUI

最初の段階では吹き出しで使い方を説明してくれる

　課題は、例えばこんなふうに、ボックスを一つずつ描画するようなビジュアル的に把握しやすく、シンプルなものからスタートします。

フランスの旗を描こうという課題

　うまくいくと、抑え目な表現ながらも派手に祝ってくれるのでちょっとうれしくなります。意外とこういう演出は重要です。

課題をクリアできると次へ進む

理解度をチェックするミニテストも用意

　「Fundamentals」の内容は、形の描画、変数、配列、条件、演算子、ループ……などと順を追って進みますが、変数のあたりだと、絵で出力するものばかりではなく、文字を出力するだけというのも出てきます。

変数を理解するための課題

　コンセプトがわかっているかどうかをチェックするミニテストも間に入るので安心して進められます。

変数のふるまいを理解しているかどうかのチェックテスト。このコードを実行したら出力されるのはどれ？という問題

　こんな調子で一歩一歩ていねいに進んでいきます。プログラムの基本的な部分を学ぶことができます。

Webブラウザーの翻訳を使うときは要注意！

　英語をハードルに感じると、「Google Chrome」などについている翻訳ツールで日本語表示させたくなるかもしれませんが、使うときは注意が必要です。コードまで日本語に翻訳されてしまうので、入力するときに原文に戻さないとかえって混乱します。

　例えばこの画面が……

If文の使い方の課題をやっているところ

こんな風になってしまいます。

コードの一部が日本語化されたりシングルクオーテーションが鉤括弧になったりしている

　説明テキストだけ選んでGoogle翻訳にかけるという手もあります。ここは英語に目を慣らす練習にもなると考えて、ぜひ原文のまま挑戦してみてください。

　「Grasshopper」は現在、英語版のほかにポルトガル語版、スペイン語版がリリースされています。このように日本語化されていないツールは世の中にけっこうありますので、英語で利用できると選択肢がぐんと広がります。なお、モバイルのアプリもありますから、移動中にゲーム感覚で気楽に進めるのも良さそうです。ぜひ試してみてください!!