プログラミング言語

「Scratch」と「Javascript」類似点。

子どものプログラミング学習に付き合ってScratchを触っていたら、自分もプログラミングのおもしろさに目覚めてしまったという親御さんは多いのではないでしょうか。

一方で「Scratchは子ども向けのプログラミング言語だし…」と深く学ぶことにためらいがありませんか?

実はScratchは一般的なプログラミング言語との類似点が多くあります。

メジャーなプログラミング言語JavascriptとScratchの比較を通してScratchの魅力を再確認してみましょう。

ビジュアルプログラミング言語と通常のプログラミングの違い

まずはScratchとエンジニアが通常使うプログラミング言語との違いを確認しておきましょう。

小学校のプログラミング教育必修化に向けていろいろな教育現場で取り入れられているのが、Scratchなどのビジュアルプログラミング言語です。

通常プログラミングにはプログラミングコードをエディタなどに書いていく作業が必要です。

このプログラミングコードはミスを許さないコンピューターが読み取るものです。

ちょっとしたスペルミスや、全角半角の違いだけでもプログラムは動かなくなってしまいます。

またこのプログラミングコードは英語ベースにできていることが多いです。

英単語になじみがない上キーボードの扱いに慣れていない子どもにとって、正しいコードをミスなく書いていくのはかなり難易度が高いといえるでしょう。

そこで、子どものプログラミング教育には絵やブロックを使ってプログラミングができる「ビジュアルプログラミング言語」がよく使われています。

その中でも人気のあるScratchは命令が書いてあるブロックを移動させてプログラミングを作っていくブロックプログラミング言語です。

ブロックにはあらかじめ命令が書いてあるため、スペルミスをすることがありませんし、マウスの操作で簡単にプログラムを組むことができます。

Scratchは子ども向け?

ブロックを移動させるだけでプログラムを組むことができるScratchは、一見とても簡単で大人には物足りないように思われます。

たしかにScratchは主に8才~16才向けに作られていますが、だからといって大人が参加してはいけないものではありません。

実際Scratchに投稿されているプロジェクトの中には、非常にレベルが高く、明らかに大人が作ったとおもわれるものも存在します。

また、Scratchには通常のプログラミング言語で頻出の文法構造が多数存在するため、「これからプログラミングを始めてみたい」「プログラミング言語を触ってみたがよく分からず挫折した」という大人にとっても学ぶ意味があるものです。

ScratchとJavascriptの類似点

では、ここからはJavascriptを例にScratchと一般的なプログラミング言語に共通する文法構造を具体的に見ていきましょう。

※Javascriptはウェブアプリ開発の現場で広く活躍するプログラミング言語です。

イベント処理

イベント処理とは「キーボード操作」や「マウス操作」など特定のきっかけ(イベント)によってプログラミングを動かす一連の流れを言います。

Scratchでは最初からイベント処理の機能を当たり前のように使います。

Scratchのブロックパレットの中身はいくつかのカテゴリーに分類されており、その中に「イベント」カテゴリもあります。「イベント」の内容は「緑の旗(Scratchプログラムの開始ボタン)が押されたとき」「スペースキーが押されたとき」などいくつも用意されています。

この「イベント」をプログラムブロックの頭にくっつけることで、イベント処理を簡単に設定できるというわけです。

例えば「スペースキーが押されたとき」のブロックと「こんにちはと2秒言う」のブロックを組み合わせるとします。

するとスペースキーが押されたことをきっかけ(イベント)に「こんにちはと2秒言う」プログラムを動かすことになります。

Javascriptでもイベント処理は重要な要素です。Javascriptの魅力の1つは、Webページに動的な動きを与えることができる点にあります。

例えばWeb上のボタンをクリックするとポップアップ画面が表示されたり、特定のキーを押したときに画面の色が変わったりするのはJavascriptがバックで働いているからなのです。

この動的な動きはJavascriptが「Web上の要素をクリックしたとき」「特定のキーを押したとき」などのイベントをきっかけにプログラムを実行していることで成り立っています。

Javascriptではクリックイベントの処理を以下のようなコードで実行しています。

(イベント発生元の要素名).addEventListener(‘click’,()=>{イベント発生後に実行したいプログラム});

Scratchの「イベント」ブロックの代わりに
(イベント発生元の要素名).addEventListener(‘click’
のコードが必要だということですね。

例えば、以下はbuttonという要素をクリックすると、アラート画面に「おはよう」と表示されるプログラムです。

button.addEventListener(‘click’,()=>{alert(“おはよう”)});

条件分岐

条件分岐というのは「もし〇〇だったら~する」というように、その時の状態によって実行するプログラミングの中身を分ける処理のことです。

Scratchにおいては「制御」と「調べる」の2つのカテゴリーにあるブロックを組み合わせることで条件分岐を設定できます。

例えばScratchでロールプレイングゲームを作る場合、プレイヤーがモンスターにぶつかったら、ゲームオーバーにする設定をしなければなりません。

このとき、「制御」の「もし~なら」というブロックと、「調べる」の「~に触れた」というブロックを組み合わせて、

「もし「モンスター」に触れたら、ゲームオーバーの音を鳴らして、すべてを止める」

というプログラムを組むことになります。

この条件分岐はプログラムの基本でもあり、プログラミング言語を学ぶ上で必ず出てくる文法構造です。

条件設定を組み合わせることで、複雑な処理が可能になります。

一方Javascriptでは条件分岐を以下のような式で表します。

if(条件){
条件式を満たしたときに行うプログラム
}
ifは英語で「もし~なら」という意味です。

例えば以下はhitという変数の値が10より大きい時に、アラート画面に「やられた!」と表示するプログラムです。

if(hit>10){
alert(“やられた!”);
}

ループ処理

ループ処理というのは、同じ処理を何度も繰り返すためのプログラム文法です。

同じことを100回繰り返す場合、プログラムを100行書くのは非常に手間になります。

そこでループ処理を用いて、1つのプログラムを100回繰り返し実行できるようにするのです。

Scratchでは「制御」カテゴリーの「~回繰り返す」や「ずっと~」ブロックでループ処理を行います。

例えばキャラクターを移動させるためには「ずっと」+「〇歩動かす」というブロックを作って、キャラを連続して動かします。

ループ処理もまた、多くのプログラム言語の基本文法となります。

Javascriptでは

for(繰り返し条件){
繰り返すプログラム
}

という書き方をします。例えば以下は「こんにちは」というアラート画面を5回表示するプログラムです。

for(let i=1;i<=5;i++){

alert(“こんにちは!”);
}

少し詳しく説明しましょう。

まずlet i=1で「iという変数を定義し、中身を1」にします。

i<=5は「iが5以下の時、処理を実行する」という意味です。

最後のi++はプログラムが実行されるたび、iの値を1つずつ増やしていくという文です。

「こんにちは!」が1回表示されるとiの中身は1から2に変化します。

そして5回目の「こんにちは!」が表示された時点でiの中身は6になり、ループ処理はとまります。

scratchとjavascriptの違いと相違点

(アラート画面例)

ScratchからJavascriptへ、発展のススメ

ScratchとJavascriptには関数、乱数、変数、配列など他にも沢山の共通点があります。

スペルミスをする心配がなく、日本語版なら命令の意味も分かりやすいScratchならばプログラミング独特の考え方をストレスなく学ぶことができるでしょう。

ただ、Scratchで作ったプログラムはScratchという枠組みの中でしか動かすことができません。

Web上で動くより本格的なサービスを作りたいなら、やはりテキストを自分で書いていくプログラミング言語を学ぶ必要があります。

JavascriptはScratchの次に学ぶプログラミング言語としておすすめです。

プログラミング言語は学習に入るための準備が面倒なものが多いですが、JavascriptならScratchと同じくパソコン1つでプログラミングができ、需要も豊富です。

一緒にHTMLとCSSというマークアップ言語を学べば、本格的なWebページを作ることもできますよ。