超気軽・手頃な価格の電子工作＋JavaScriptで本格プログラミングはじめの一歩

　子ども向けプログラミング教材は、簡単操作でプログラムを制作できるビジュアル型のものがほとんどです。一方で、本格的にプログラミングを学ぶ場合はプログラムコードはテキストで書くもの。

　前回「kurikit」の「ユカイな生きもの＆ココロキットセット」を、ビジュアル型である「Scratch」でプログラミングする方法をご紹介しました。今回は、同じ「ココロキット」をテキストで記述するプログラミング言語「JavaScript」でプログラミングする方法を紹介します。

「ユカイな生きもの＆ココロキットセット」で作ったロボットをJavaScriptでプログラミングする

　「kurikit」の「ユカイな生きもの＆ココロキットセット」は、電池ボックスとモーター、スイッチをつなぐだけで簡単にかわいいロボットが作れるうえ、Amazon.co.jpで6,600円で販売されており、比較的購入のハードルが低いのがうれしいところです。

JavaScriptのプログラミング環境を開く

　ロボットは、前回の記事で作ったものをそのまま使います。プログラミングは、「kurikit」のWebブサイトで「プログラミング」ページを開き、下の方にスクロールして「上級：テキストプログラミング」を探します。「はじめる」の「ココロキット」を選ぶとプログラム画面が開きます。

「はじめる」の［ココロキット］ボタンをクリックするとプログラム画面が起動する

　使用するのは「CodeSandbox」というオンラインコードエディターです。上の図で示したボタンから入れば、初めから「ココロキット」が使える状態で「CodeSandbox」が開き、「ココロキット」のサンプルプログラムが開きます。

プログラム画面。左側が構成ファイル一覧、真ん中が選択中のファイルを編集するエリア、右側がプレビューエリア

　初めからサンプルプログラムが記述されているので実行してみましょう。画面右上の四角が2個重なった［Opne In New Window］ボタンをクリックすると、ブラウザーの別タブでウィンドウが開いてプログラムが実行されます。次の図の通りの画面が表示されるので、画面上のボタンを操作して機能するか試してみましょう。なお、プレビューエリアではプログラムは動作しません。

［Find］ボタンでペアリングする。［RUN］ボタンと［STOP］ボタンが図の通り動作するように既にプログラムができている

プログラミングに使用するファイル

　この画面は複数のファイルでできています。2個のファイルだけ把握しておきましょう。

コードを記述するJavaScriptのファイル「func.js」

　1個目は「func.js」です。これがプログラムコードを記述するJavaScriptのファイルです。

LEDを点灯する機能と消灯する機能がプログラムされている

画面の見た目を作るファイル「index.html」

　2個目のファイルは「index.html」です。画面の見た目を作るHTMLというファイルです。

画面に配置するボタンなどの情報が記述されている。ボタンの機能を「func.js」から呼び出している

プログラムをアレンジしてコントローラーを作ろう

　それではこのプログラムをアレンジしていきます。前回は「Scratch」で、キー操作できるコントローラーをプログラムしましたが、今回は、画面上のボタンで操作するコントローラーを作ります。

　まず、「func.js」に次のプログラムを追記します。ココロキットを動かすために使う関数は、公式サイトの「＜ココロキット＞テキストプログラミングの関数について」というページに記載されているので、参考にしましょう。

右のモーターを正方向に回転、逆回転、止める、の3種類の機能のプログラムを追記

　次に「index.html」に次のコードを追記します。ボタンを3個追加して、それぞれのボタンがクリックされたときに、先ほど「func.js」に記述したプログラムを呼び出しています。

右のコントローラーになるボタンが3個追加された

　ここまでのプログラムで、右側のコントローラーが完成です。プログラムを実行すると、右側のコントローラーが機能するのがわかります。

　続いて左側のコントローラーも作ります。全く同じ要領で、次の図の通り、「func.js」と「index.html」を編集して追記します。

「func.js」に、左のモーターを正方向に回転、逆回転、止める、の3種類の機能のプログラムを追記

「index.html」に、左のコントローラーになるボタンを3個配置し、それぞれがクリックされたときに「func.js」で作ったプログラムを呼び出す指示を追記

　これで左右のコントロールボタンが完成しました。なお、ファイルを編集した際は上書き保存し、実行ボタンで改めて別タブで画面を表示させてください。［Find］ボタンでペアリングからやり直して、動作確認をしてください。

　作成したコントローラーで操作しているところを動画でご覧ください。

　なお、JavaScriptファイルはそのままで、HTMLファイルだけ少しアレンジすると、例えば次の図の右側のようにボタンの大きさや色、配置などを変更することもできます。ボタンが大きく見やすくなると少し操作しやすくなりますね。

「index.html」をアレンジするだけで機能はそのまま見た目を変更することもできる

　テキストコードに挑戦するには、「Scratch」のビジュアルプログラミング環境に比べると、前提となる知識が少し多めに必要です。例えば今回の場合、JavaScriptファイルとHTMLファイルが必要で、それぞれが何の役割をしているかということがわかっていると、頭の中がすっきりして安心して編集することができるでしょう。

　こうして、前回ビジュアル型でプログラムした内容と似たような機能をテキストコードで書いてみるというやり方は良いスタートになりますから、ぜひ挑戦してみてください！