Minecraftやアナ雪でプログラミングを学ぶCode.orgとは?

子どもとプログラミングをはじめてみたいけど教室に通うのは大変だし、お金もかかるし…とためらってしまう方は多いのではないでしょうか?

プログラミングの初歩を学ぶだけであれば無料で使えるすばらしい教材やコンテンツがあります。

Code.org(Hour of Code)もその1つです。

この記事ではCode.orgとは何か?ということから入門的な使い方までをプログラミング経験が全くなくてもわかるように解説しています。

Code.orgとは何か?

まずCode.orgとは何か?そして、Hour of Codeとは何か?ということを簡単にまとめておきます。

早く使い方が知りたいという方はこの章を飛ばして「Code.orgの見方、使い方」まで進んでください。

Code.orgとは?何ができる?

Code.orgは学生がプログラミングを学ぶための教材やツールを無料で提供しているWebサイトです。

先生が使うためのレッスンプランやカリキュラム、授業で使える動画やドキュメントなども多数用意されています。

子ども自身がサイトを利用して学習をすすめることもできますし、先生がサイトやサイトで配布されている資料を使って子どもたちに授業を行うこともできます。

運営会社は?

サイトと同名のCode.orgという組織が運営団体。

Code.orgは教育機関におけるコンピューターサイエンスを身近にすることを目的としたNPO(非営利団体)です。

世界の全ての学校の全ての生徒がコンピュータサイエンスを学ぶ機会を持つことをビジョンとして掲げています。

Code.orgが提供しているカリキュラムは世界の小・中学校のコンピュータサイエンス教育で最も広く使われています。

Facebook、Amazon、Google、Microsoftなど多くの企業がCode.orgの活動を支援しています。

全て無料ですが、信頼性の高いサイトですので安心して利用することができます。

Hour of Codeとは?

Code.orgが中心となって進めている、コンピューターサイエンス教育を普及させるための取り組みです。

コンピュータサイエンス教育週間に1時間のプログラミング活動をしようというキャンペーンが名前の由来になっています。

その活動をサポートするためのカリキュラムやツールがCode.orgのサイト上にたくさん用意されています。

Code.orgのビジョンやプログラミングの重要性がわかりやすくまとまっている動画を紹介しておきます。

IT分野の著名人であるFacebookのマーク・ザッカーバーグやマイクロソフト創始者のビル・ゲイツだけでなくNBAのクリス・ボッシュ、アーティストのウィル・アイ・アム、ファッションモデルなど幅広い人たちがプログラミングの楽しさや重要性について語っています。

「良いプログラマーは現代のロックスターなんだ。それだけのこと。」
– ウィル・アイ・アム

全て英語ですが日本語の字幕がついています。

非常にいい動画なのでぜひ一度見てみてください。子どもにプログラミングを教えるモチベーションがさらに高まります。

Code.orgの見方、使い方

前置きが長くなりましたが、Code.orgの使い方を説明していきます。

まずは下記URLからサイトにアクセスします。
https://code.org/

はじめてアクセスした時には使用する言語を選ぶ画面が表示されるので、「日本語」を選んで送信ボタンを押します。

トップページの左上に3つメニューが並んでいます。ここから各コンテンツにアクセスできます。

  • 概要
  • プロジェクト
  • コースカタログ

それぞれの内容を説明します。

概要

Code.orgの組織やサイトについての説明が書かれています。

プロジェクト

プロジェクトのページでは他の人が作った作品を見ることができます。ゲームや実用的なアプリ、アートなどいろいろなものがあります。

これを見るだけでも楽しいですし、見せたときの反応で子どもが興味を持つかどうかを確認することもできます。

コースカタログ

サイトのメインコンテンツであるプログラミング教材が置かれているページです。まずはここにアクセスしてみましょう。

コース(プログラミング教材)について

いろいろなコンテンツがあるのですが、家庭で使えるレッスンコースは大きく分けて2つです。

  • コンピューターサイエンス入門(20時間のコース)
  • Hour of Code(1時間のコース)

コースカタログのページの下記の位置にそれぞれリンクがあります。

それぞれのコースについて説明します。

Hour of Codeについて

Hour of Codeは1時間でプログラミングを体験できるように作られた教材です。

日本語に対応しているものだけでも40種類以上のレッスンが用意されています。

「マインクラフト」や「スターウォーズ」、「アナと雪の女王」などの人気キャラクターを使っているものもあり、子どもが興味を持ちやすい内容になっています。

この部分に並んでいるのがHour of Codeです。左3つのリンクをクリックするとレッスンをはじめられます。

他のレッスンを探したい場合は「もっと見る」をクリックします。

コンピューターサイエンス入門について

コンピューターサイエンス入門は時間をかけて基本から丁寧に学べるように作られている教材です。

対象年齢別に4つのコースが用意されています。1コースを終えるのに約20時間かかります。

コース 1 4~6才
コース 2 6才以上(読み書きができる)
コース 3 8~18才
コース 4 9~18才

まずはコース1をやってみて、あまりにも簡単すぎるということであればコース2に進んでもOKです。

目安としてはコースの最終問題が簡単に解けるかどうかです。解ければそのコースは飛ばしても大丈夫です。

教材にはこの部分からアクセスできます。

各コースのリンクをクリックすると下図のように、コース内容を一覧できるページが表示されます。

黄色の「いますぐためす」というボタンをクリックするとレッスンがはじまります。

Code.orgはもともと英語で作られているサイトです。コンテンツの全てが翻訳されているわけでないので、日本語に対応しているものとそうでないものがあります。

コンピュータサイエンス入門のコース1~3はほぼ日本語化されていますが、コース4については英語が残っています。Hour of Codeも英語のみしか用意されていないものがあります。

かなりたくさんコースがあってどれを選ぶのが良いか悩むと思うので次の章でおすすめのものを紹介します。

Code.orgのおすすめコース

結論から言うと、コンピューターサイエンス入門をコース1から順番に進めていくのがベストです。

コース1は4-6歳対象と書いてありますが、「PCに触るのがはじめて」、「プログラミングがはじめて」という場合は7歳以上でもコース1からはじめたほうがスムーズです。

コンピュータサイエンスは20時間、Hour of Codeは1時間と聞くとHour of Codeのほうが短時間で簡単に終わるのでいいのでは?と思うかもしれません。

確かに短時間でできるのですが、そのぶんレッスン内容がコンパクトになっているのでPCの基本操作や初歩的な内容が省略されています。

その省略が子どものつまづきにつながることがあります。

子どもは「わからない」「できない」という状態が続くとモチベーションを失ってしまします。

逆に少しずつでもいいので「わかる」という体験が積み上がっていくと、興味を失わずに継続できます。

コンピュータサイエンス入門は超基礎的なところからワンステップずつ確実に習得するようにできているので、そういったつまづきを少なくすることができます。

例えば、単純なドラッグアンドドロップの練習などもレッスンに含まれており、PCに初めて触る子どもでも学習を進めやすい作りになっています。

とはいえ、やはり20時間はかなり大変というのも事実です。

「そこまで時間をかけたくない 」、「短時間でさくっとプログラミングを体験したい」ということであればHour of Codeも悪い選択肢ではありません。

まずHour of Codeをやってみて興味を持ちそうであればコンピュータサイエンス入門に進むという順番でもOKです。

次章でHour of Codeのおすすめ教材も紹介します。

おすすめのHour of Codeプログラム

はじめてプログラミングにふれるのであればスターウォーズのプログラムがおすすめです。

理由は3つ。

  • Hour of Codeの中では難易度が低い
  • ゲーム性があるので子どもが興味を持ちやすい
  • ごく初歩的ではあるがプログラミングの要素がしっかり盛り込まれている

ある程度学習が進んだら以下の2つもおすすめです。

ダンスパーティーについて

ダンスパーティという教材はサイトの目立つところに置かれていて他のサイトでも紹介されていることが多いのですが、3つの理由からあまりおすすめしません。

  • 楽しげだが、抽象的な内容なのでかえって理解しにくい
  • プログラミングの目的がはっきりしていないので達成感がない
  • プログラミングのエッセンスがあまり盛り込まれていない

アナと雪の女王について

人気のキャラクターなので手始めに選びがちなのですが、学習内容がやや難しめです。

特に女の子はこれを選びたいかもしれないですが、「ピクセル」「角度」といった概念が出てくるので、それらの概念を学ぶ前であれば避けたほうが無難です。
既に理解しているということであれば選んでも大丈夫です。

プログラム選択の参考になるようにそれぞれのコースで学べるプログラミングの概念を簡単にまとめておきます。

ダンスパーティ 絵を動かす、操作する
音を鳴らす
インフィニティプレイラボ キャラクターの操作
画像を変える、音を鳴らす
繰り返し
ピクセルという概念
マインクラフト キャラクターの移動
繰り返し
条件分岐
スターウォーズ キャラクターの移動
キャラクターの操作
条件分岐
音を鳴らす、画像を変える
ゲームを作る
アングリーバー ド(古典的な迷路) キャラクター移動
繰り返し
条件分岐
アナと雪の女王 キャラクターの移動
繰り返し
画面を変える
角度、ピクセルの概念
図形(円、正方形など)の概念

Code.orgのレッスンの進め方、操作方法

操作方法というほど難しいものではないのですが、スターウォーズを例にレッスンの一連の流れを説明します。

コースカタログのページにあるHour of Codeの部分の「もっと見る 」というリンクをクリックします。

スターウォーズのリンクをクリック。少し下のほうにあります。

「ブロック」のほうの「今すぐ試す」ボタンをクリックします。

最初に動画が表示されます。見ても見なくてもOKです。飛ばす場合は動画の右上にある×ボタンをクリックします。

「やり方」のところに指令が表示されているので、読んだら「OK」ボタンをクリックします。

さらに、「実行(じっこう)」ボタンの上に具体的な作業内容が表示されているので、読んだら吹き出しの右上にある×ボタンをクリックして閉じます。

ここで画面の見方を説明しておきます。

画面は4つの部分に分かれています。

  • ヘッダー
  • 実行画面
  • ブロック置き場
  • ワークスペース

「ヘッダー」に並んでいる○の数が問題数です。全部で15問あるということです。

最初は1番目の○のところに1という数字が出ています。

○をクリックすればその問題にジャンプすることができます。

「ブロック置き場」にはプログラムの材料となる様々なブロックが置かれています。それらのブロックを「ワークスペース」にドラッグアンドドロップして、プログラムを作っていきます。

プログラムを実行するとその結果が「実行画面」に反映されます。

それでは操作の説明に戻ります。

指令通りにプログラムを作ったら実行ボタンを押します。

間違えるともう一度やってほしいという指令が出ます。「実行」ボタンが「リセット」ボタンに変わっているので、それをクリックすると最初からやり直せます。

ブロックを消したい場合はワークスペースにあるブロックをドラッグアンドドロップでブロック置き場に持っていくと、ゴミ箱のアイコンが表示されて削除されます。

基本的にブロックはつながっていないと動きません。つながっていない無効なブロックはこのように薄い色で表示されます。

せっかく選んだブロックが合っていても、つながっていないと正しく動かないので気をつけましょう。

成功するとこのような画面が出てきます。

もう一度同じ問題で遊びたければ「ゲームを続ける」ボタンをクリック、次の問題に進みたい場合は「次へ」ボタンをクリックします。

この繰り返しで最終問題まで解いていきます。

まとめ

無料でプログラミング学習ができるサイト「Code.org」の使い方を紹介しました。

サイトを使いこなせば、コストをかけなくてもプログラミング入門からやや発展的な内容までを学ぶことができます。

有料のコンテンツを試すかどうか迷っている場合は一度試して見てください。