プログラミング

ビジュアルプログラミング言語とは?初心者におすすめの学習サービスを紹介!

この記事は、

  • 「ビジュアルプログラミング言語ってなに?」
  • 「ビジュアル系のプログラミングなの?」
  • 「プログラミング学習ってどうやって始めればいいの?」

そんな人に向けた記事です。

読んだ後は、

  • 「ビジュアルプログラミングなら私でもできそう!」
  • 「ビジュアルプログラミングって無料で学べるんだ!」
  • 「コードを書くだけがプログラミングじゃないんだ!」

と感じてもらえると思います。

サクッと読みたい人は、「もくじ」を活用してくださいね。

初心者でも学習しやすいビジュアルプログラミング言語とは?

ビジュアルプログラミング言語についてWikipediaで調べると、以下のように書いてあります。

ビジュアルプログラミング言語(英: visual programming language)とは、プログラムをテキストで記述するのではなく、視覚的なオブジェクトでプログラミングするプログラミング言語である。

引用:Wikipedia

しかしこれだけを読んでも「???」となる人は多いはず。

そこで今回は、私がおすすめしたいビジュアルプログラミング学習サービス「Hour Of Cord」の実際のステージと共に、

ビジジュアルプログラミング言語について解説していきます。

ビジュアルプログラミング学習におすすめのHour Of Cord

出典:Hour Of Code

「Hour Of Cord?またいきなりよく分からないものが出てきたぞ」

という人は、まずは公式サイトに実際にアクセスしてみてください↓

Hour Of Code

Hour Of Cordは世界中で活用されている無料のプログラミング学習サービスで、

アメリカのオバマ元大統領もプログラミング学習普及のため、ここの活動を支持していました。

様々なプログラミングの学習ステージが設けられていて、対象年齢は4歳ごろから。

私の娘も幼稚園年長のころから、このサービスを使ってプログラミングを学び始めました。

ひらがなが読めれば、誰でも楽しく学習できるサービスですよ!

では次の項目からは、実際にHour Of Codeの学習ステージを見ながら、

「ビジュアルプログラミング言語とはなんぞや?」を解説していきます。

ビジュアルプログラミング言語は命令をブロックでつなぎ合わせていくもの

Hour Of Codeでは多数の学習ステージでビジュアルプログラミング言語を学べます。

出典:Hour Of Code

中でも私が一番最初のステージとしておすすめしたいのが、

迷路のステージ「初めてのコンピュータープログラムを書く」です。

このレッスンでは、アングリーバードやアイスエイジに出てくるキャラクターを、

ビジュアルプログラミングで動かしてゴールに導きます。

では実際の画面を見てみましょう↓

出典:Hour Of Code

一番初めのステージでは、アングリーバードをミニオンピッグがいるところまで到達させます。

ブロックがいくつかあるのが分かりますね↓

出典:Hour Of Code

これらの「前に進む」「右に回転」などと書かれたものが、いわゆるビジュアルプログラミング言語なのです。

これらのブロックを、アングリーバードが進ませたい方向に行くように、右側のワークスペースにドラッグ&ドロップで移動させます↓

出典:Hour Of Code

今回はこのようにつなぎ合わせました↓

出典:Hour Of Code

終わったら「実行(じっこう)」をクリックして、アングリーバードを動かしてみましょう。

無事アングリーバードが豚まで辿り着きました!これで最初のステージがクリアできましたね。

出典:Hour Of Code

ビジュアルプログラミング言語なら誰もが気軽に学習を始められる

先ほどのステージを実際にクリアした人なら、

「あれ?プログラミングって意外と簡単?」と思われるでしょう。

それもそのはず。このようなビジュアルプログラミング言語は、

プログラミング初心者のために開発されたようなものなんです。

ですのでこれから初めてプログラミングに触れるお子さんやパパママも、

このような学習サービスであれば気軽に学習を始められると思います。

初めは簡単でもだんだんと複雑になってくるよ

「こんなに簡単でプログラミング学習になるのかな?」と思われる人もいるかもしれません。

しかし初めは「前に進む」ブロックしか使わなかったステージも、先に進むうちに複雑になってきます。

例えば以下のステージを見てみましょう↓

出典:Hour Of Code

このステージでは「右に回転」や「左に回転」といったブロックを使う必要が
あります。

まゆみ
まゆみ
うちの娘は右と左の判断をなかなかつけられず、苦労していました(笑)

このように迷路で使う命令ブロックの種類も豊富になっていき、

だんだんと「プログラムを組むのって楽しい!」と思えてくるはずです。

出典:Hour Of Code
まゆみ
まゆみ
すごく簡単なものよりもちょっと難しいものをクリアしていくほうが、ワクワクしますよね!

ビジュアルプログラミング言語でも繰り返しや条件分岐を学べる!

迷路のステージをさらに進めていくと、繰り返しや条件分岐を使うシーンが出てきます。

例えば下のようなステージ↓

出典:Hour Of Code

このステージは「前に進む」のブロックのみでもクリアできます。

しかしここで使って欲しいのが「繰り返し」ブロック。

「前に進む」のブロックを繰り返しブロックで挟み込むんです。

そして「ミニオンピッグまで繰り返す」とすると、「前に進む」を5つ並べるよりもシンプルに、コードを組むことができます。

まゆみ
まゆみ
なんか効率よくなった気がしません?

また条件分岐を使うシーンは、以下のようなステージです↓

出典:Hour Of Code

このステージでは左に道があったら左に曲がって、そうでなければまっすぐ進んで欲しいところ。

こうした時に使えるのが条件分岐のブロックなんです。

以下のようにプログラムを組みます↓

出典:Hour Of Code

そうするとキャラクターは左に道があれば曲がり、そうでなければまっすぐ進んでくれて、無事にゴールにたどり着いてくれます。

まゆみ
まゆみ
なんどもブロックを組み合わせなくても、繰り返しや条件分岐のブロックを使うことで、コードを簡潔にできるんですね!

Hour Of Codeのビジュアルプログラミング言語ではJavaScriptのコードも見られる

どうでしょうか?この記事を読みながら実際にステージを進めていけば、

すでにステージ後半までたどり着いている人もいるのでは?

でも中には「こんなに簡単で学習になるのかなあ」と思う人もいるかもしれません。

そこでおすすめなのが、実際のテキストコードを表示させて見ること。

各ステージをクリアすると、以下のような画面が出てくると思います↓

出典:Hour Of Code

上の画面の真ん中あたりに、「コードを表示します。」とありますよね。ここをクリックすると↓

出典:Hour Of Code

ビジュアルプログラミングで組んだプログラムの、テキストコードを見られるようになっているんです。

まゆみ
まゆみ
初めて見たとき、「私、コード書いてる!」と思えて感動しました!

ちなみにこれはJavaScriptというプログラミング言語です。

この記事を読む人の中には、聞いたことのある人もいるのでは?

JavaScriptは汎用性の高いプログラミング言語で、様々なWebサービスでも使われているものです。

プログラミング学習の導入としておすすめされることの多い言語なんです。

なのでHour Of Codeでビジュアルプログラミング言語に触れる際、

このようなJavaScriptのコードを確認しながら進めていく

今後本格的な言語学習に進むことになったとき、スムーズに学習を始められるかもしれませんね。

Hour Of Codeは子供一人でもビジュアルプログラミング学習を進められる

私がビジュアルプログラミング学習にHour Of Codeをおすすめする理由は、

子供一人でも学習を進められ、しかもモチベーションも保ちやすい点です。

その理由は、Hour Of Codeの各ステージで流れるムービーにあります。

ここまでで実際にステージを進めた人はわかると思いますが、

各ステージの冒頭や何ステージがクリアしたあたりには、動画が流れるようになっています。

動画では命令ブロックの組み立て方や、繰り返しや条件分岐ブロックの使い方が説明されます。

この動画を見るだけでも、十分プログラミングの勉強になる内容です。

しかもこのムービーに出てくる人物がすごいんです。

Facebookの創業者であるマーク・ザッカーバーグや、GoogleやNASAのエンジニア、NBAのバスケットボール選手など!

あらゆる著名人が登場し、プログラミングでできることを教えてくれます。

 

出典:Hour Of Code

これはプログラミング学習のモチベーションをあげるきっかけになるはずです!

Hour Of Codeではステージをクリアすると修了証明書がもらえる!

そうなんです。Hour Of Codeでステージをクリアすると、こういう修了証がもらえるんです。

ツイッターで自慢することもできますよ(笑)

ちなみに印刷もできるので、お子さんに渡して部屋に飾ってあげると、

学習モチベーションアップに繋がるかもしれませんね!

Hour Of Codeには今回紹介した迷路のレッスンだけでなく、

お子さんに人気のゲーム・マインクラフトのステージや、

女の子に人気のディズニーキャラクター・アナとエルサのステージもあります。

出典:Hour Of Code

きっとお子さんが興味を示すものがあると思うので、ぜひ親子でのぞいてみてくださいね!

ビジュアルプログラミング学習なら「scratch」もおすすめ

出典:scratch

ここまではHour Of Codeを紹介しましたが、

同様におすすめしたいのが「scratch(スクラッチ)」です。

スクラッチはマサチューセッツ工科大学(MIT)メディアラボによって開発されたビジュアルプログラミング言語。

世界中のプログラミング教育現場でも活用されています。

おそらく日本の小学校で2020年から始まるプログラミング教育でも、

このスクラッチが使われるのではないでしょうか。

スクラッチもHour Of Code同様、Web上で命令ブロックを組み合わせてプログラムを組み立てられます。

以下の記事ではスクラッチの登録方法から解説していますので、ぜひ参考にしてくださいね!

【小学生のプログラミング】スクラッチの使い方を徹底解説小学生や初心者のプログラミングにおすすめの、スクラッチの使い方を解説します。 スクラッチは、小学生でも直感的に動かせる楽しさがあります...

またスクラッチをより分かりやすくしたスクラッチジュニアもおすすめです!

【初めてのプログラミング】スクラッチジュニアの特徴と使い方初めてのプログラミングにおすすめのスクラッチジュニアについて解説していきます。 スクラッチジュニアは、幼稚園のお子さんでも理解できる、...

より本格的なプログラミング学習をしたいならProgate!

出典:Progate

より本格的なプログラミング言語学習をしたい人におすすめなのが、Progate(プロゲート)という学習サービスです。

こちらのサービスもWeb上で気軽にプログラミングを学べるようになっています。

しかもアプリもリリースされており、アプリ版はよりサクサク学習を進められるようになっているんです↓

出典:Progate

私も実際にプロゲートを使ってプログラミング学習を続けていますが、

全くの初心者でも分かりやすい解説があるので、安心して学習を進められます↓

出典:Progate

もちろん学習が進むうちにつまづく部分も出てきます。

しかし「プログラミングってどんなもの?」をまず知るための場として、おすすめしたい学習サービスです。

まゆみ
まゆみ
ビジュアルプログラミング言語から、より本格的な学習にステップアップしたい、と考える人にもおすすめしたいサービスですね。
Progate -楽しく学べるプログラミング学習アプリ
Progate -楽しく学べるプログラミング学習アプリ
開発元:Progate
無料
posted withアプリーチ

コードってなにそれ美味しいの?という人にこそおすすめしたいビジュアルプログラミング言語

いかがでしたが?

今回はビジュアルプログラミング言語について、

おすすめの学習サービス「Hour Of Code」の実際のステージと合わせて解説していきました。

ステージで学習を進めてみた人ならきっと、

「プログラミングって意外と面白い!」と思っていただけたのではないでしょうか?

今回はHour Of Codeのビジュアルプログラミングをメインに紹介しました。

しかしこの他にも、スクラッチやViscuit

JavaScriptだけでなくPythonにも変換できるgoogleのblockly文部科学省のプログラミンなど、

ビジュアルプログラミングには様々なものがあります。

この記事をきっかけに、

ぜひあなたにぴったりなビジュアルプログラミング言語を見つけてくださいね!

また今回紹介したビジュアルプログラミングは、スマホやタブレットのアプリでも学習できます。

以下の記事を参考に、プログラミングアプリにも触れてみてくださいね!

【無料】プログラミングアプリ6選!子供や初心者におすすめ サクッとまとめだけ読む! この記事はこんな人におすすめ ✔こどものプログラミング教育を何から始...
ABOUT ME
まゆみ
クラウドソーシングでWEBライターに励む元転妻(転勤族の妻)。引っ越しを繰り返した経験を持ち、転居のたびに娘の習いごとの場所を変えるのが大変でした。そんなときにオンライン学習の存在を知り、場所が変わっても続けられるのに感動!同じように悩む転妻さんやママにこの情報を伝えるべく、「おやこでレッスン!」を立ち上げました。