「おうちDojo」しよう！ 無料で試せるオンラインプログラミング教材17選＋α

はじめに

※CoderDojo Advent Calendar22日めです。あくまで私個人の考えに基づいたおすすめになりますので、ぜひチャンピオンとも相談してくださいね。

約1年間、メンターをやらせていただいて、感じたこと。
それは、やっぱり1ヶ月に1回、2時間では全然足りないよねということです。

そこで、ご提案したいのが、「おうちDojo」になります。
ご自宅で、週数回、ちょこっと触ってもらうだけでも、次にDojoに来たときにできることが、全然違うんじゃないかなと思います。
たとえば、家でまったく準備せずDojoに参加した場合、2時間プログラミングしたけど、メンターに質問することが出てこなかったりとか……。（もちろん、そこをうまいこと引き出すのもメンターの腕の見せどころですが）

事前に質問を用意してから臨んだ方が、メンターを有効活用できますよ！

え、Dojoっていうけど、、家だとメンターがいないじゃないかって？

それは……保護者の方にぜひお願いできればな～なんて……

というわけで、ご自宅で親子でおうちDojoを楽しめる、かつ無償で始められるオンライン教材をご紹介します。（17選とか、ちっとも「選」ちゃうやん、とひとりツッコミしつつ）
また、メンターにちょっと興味があるけど、プログラミングに自信がない、という方のとっかかりとしてもおすすめです。

私（プログラミング初心者レベル）が実際にある程度やりこんで、
・難しすぎない
・継続できた
ものだけをピックアップしています。
ジャンル別にしているので、複数のジャンルをカバーする、同じ教材が何度か登場することもあります。

もちろん、既に書籍をお持ちならそれを一冊こなす、というのが良いとは思います。
ただ、プログラミング関係の本はけっこう割高です。
まずはこれからご紹介するオンライン教材を試して、興味のある分野をある程度見極めてから買うのも１つの手です。

あ、もし一冊購入するなら、本日（12/22)発売のCoderDojo Japan 公式ブックをぜひ！
CoderDojo Japan公式ブック Scratch(スクラッチ)でつくる! たのしむ! プログラミング道場

#1. プログラミングの考え方を学ぶ
例えばScratchで、やりたいことがうまく表現できない、そんなときにやってみると、作品づくりのヒントが得られるかもしれません。

Code.org

https://code.org/
米国発、子どもたちが無償でプログラミングを学ぶ機会をつくろう、とう目的のもと作成されたWebサービスです。
ブロックを並べてプログラミングするので、Scratchに近い感じですすめていくことができます。
ブロックをこう組み合わせれば、こんな動きもできるんだなと体感できます。
最初は言われたとおりにつくっていきますが、最後は学んだことを生かして、自分なりの作品を作ることができます。
さらに、URLが発行されるので、それをシェアすることが可能です。

私が試したのは以下の6つです。（日本語対応）
Flappy Code
スター・ウォーズ　コードを書いて銀河を作ろう
アナとエルサとコードを書く
アーティスト
Minecraftプログラミング入門
Minecraft Hour of Code デザイナー

全てのコースが日本語化しているわけではないですし、量も膨大です。
面白そうなものをちょこちょこっとつまんでみてもらえればいいんじゃないかと思います。

CodeMonkey

https://codemonkey.jp/
無料で30ステージお試しできます。
可愛いおさるさんや亀を動かしてバナナをゲットします。
20～30ステージでは「くりかえし」を学べます。
文字入力が必要ですが、CoffeeScriptというシンプルな言語を採用しており、順を追って丁寧に進むので安心です。

例えば、右に曲がって12歩歩くのを3回繰り返し、繰り返しが終わったら20歩進む場合は、このような書き方になります。

3.times ->
    turn right
    step 12

step 20

VISCUIT

http://www.viscuit.com/
「直感的にプログラミングに触れてほしい」という考えのもと作られたツールです。
うちのDojoは7歳～8歳のお子さんの参加が多いのですが、もしかしたらとっかかりはVISCUITの方がいいのかも？　と思うこともあります。
うちの子（4歳）もたまにVISCUITで遊びます。絵が動くだけで楽しいようです。

使い方については、VISCUITのサイトで動画などで詳しく説明されています。

こちらの記事も参考になります。ロケットがうごくアニメーションを作れます。
開始10秒でアニメーションが作れる新感覚プログラミング「Viscuit-ビスケット」にハマる！

2.Scratchをやり込む

Scratchのサイトで検索して上位にあがってくるのは、凝った複雑なものが多く、また数も多いので、自分に合うレベルのものを見つけるのは至難の業。
また、Scratch自体にもチュートリアルは用意されていますが、英語なのでちょっとハードルが高いです。
そこで、Scratchをやり込む助けとなるオンライン教材をご紹介します。

Why!? プログラミング

http://www.nhk.or.jp/gijutsu/programming/
シューティングゲームやジャンプのやり方など、みんながScratchで作りたい事例をうまくすくい上げています。

実際に放送された動画の視聴はもちろん、その動画で取り上げたゲームの作り方も、丁寧に図解して説明してくれます。
実際のScratchもちゃんとあるので、同じことを試したり、リミックスできるという至れり尽くせりの充実ぶり。

また、ワイワイプログラミングもおすすめです。
動画によるコマンドリファレンス的なコンテンツや、Why!?大喜利という投稿型のコンテンツがあります。こちらに掲載されるのをひとつの目標にしてもいいかもしれません。

KoKaプログラミング入門

http://www.kodomonokagaku.com/magazine/programming/
雑誌「子供の科学」の提供するコンテンツです。
順番にすすめていくことで、ひととおりゲームを作ることができるようになります。
個人的に役立ったのは、本格ゲームをつくろう Vol.5です。
これでブロックの使い方を知ることができ、作れるゲームの幅が広がりました。

ドットインストール（Scratch 2.0入門）

http://dotinstall.com/lessons/basic_scratch_v3
メンター見習い御用達のドットインストールScratch入門。
動画は無料、かつ会員登録せずとも観られますが、学習状況の管理ができるので、無料会員にはなっておくのをおすすめします。

プレミアム会員だとソースコードを入手できるメリットがありますが、Scratchはソースコードがないので、無料の範囲で十分でしょう。
速度変更や、文字起こしの表示はプレミアム会員限定です。

私はドットインストールの動画のおかげで、「クローン」を理解することができました。クローンがよくわからないという場合はぜひ。

ロジックラボ for Kids

まだ「why!? プログラミング」がなかった頃に、「Scratch ジャンプ」で検索してたどり着いたサイトです。
難易度別にまとめてくれていてありがたいです。
途中からプライベートモードに設定されている記事も多いですが、公開されている途中までの部分だけでも、十分作品づくりの参考になります。

おすすめはバックパックの使い方です。
これでスプライトやスクリプトの使い回し方法を知りました。便利です。
ビデオをつかったゲームやマイクをつかったゲームも楽しいです。作品づくりの幅が広がります。

メンターの作品

自分のDojoのメンターに、自作のScratchの作品を見せてもらうのも勉強になります。
難しかったところや、工夫したところなど、直接本人にきくことができるのは大きなメリットです。
Dojoでは、忍者やメンターが投稿するScratchスタジオを持っているところも多いです。
もしあるかどうかわからなければチャンピオンに聞いてみましょう。
なければ作ってもらいましょう。

3.Scratch以外に挑戦する（HTML/CSS編）

私個人的には、今すぐプログラミングを仕事にするわけじゃないなら、どんどんScratchでいろんな作品をつくっていくのがいいんじゃないかなーとは思ってはいますが、Scratch以外もやってみたいな、と思ったときに、おすすめの教材を紹介します。

MOZER

https://mozer.io/
会員登録は必要ですが、体験版でも「パン屋さん」「サッカーチーム」の2つのWebサイトを完成させることができます。
体験版にありがちな、いいところまで進んで、あとは有料、というものではないので、親切です。
スマホを意識した、今風の縦長デザインのサイトの作り方を学べます。

Progate（HTML & CSS初級編）

https://prog-8.com/
東大生が、「自分ならこう教える」と学生時代に起業して作ったWebサービス。
ユーザー登録必須です。初級編は無料で学べます。
スライドの図解を見ながら学べるので、書いている内容が難しくても、頭に入りやすいと思います。
マスコットキャラのにんじゃわんこがとっても可愛いです。キャラ可愛いの大事
「にんじゃ」ということでCoderDojoとも共通点が……！
大事な箇所だけを書き換えるだけので、キーボード操作の敷居が低いです。結果がプレビューされるのも嬉しい！

ドットインストール（HTML入門 / CSS入門）

HTML入門　http://dotinstall.com/lessons/basic_html_v3
CSS入門　http://dotinstall.com/lessons/basic_css_v3
いずれもサンプルで文字起こし・ソースコードを公開しています。

最初の環境準備の部分が少しむずかしいかもしれないので、
そこは保護者の方に対応いただくか、メンターに相談するのがいいと思います。

なお、ドットインストールの推奨エディタはAtomですが、私は以前CoderDojo梅田のブログで紹介されていたBracketsを使って学習しています。
Atomならドットインストールのプラグインが使えるメリットはあるので、お好みで。

Brackets

子供向けプログラミング道場（CoderDojo西宮）で利用するエディタはこれにしよう！

CSS Diner

https://flukeout.github.io/
CSSに興味を持ったなら、ぜひこちらにもチャレンジしてほしいです。
全て英語なのですが、英語がわからなくても、とHTMLとCSSのソースを見比べれば先に進めます。
たとえば最初の問題は、「全部のお皿を選択せよ」ということです。
なので、1行目に「*」を入れればOKです。
マニアックなセレクタもありますが、そんな場合はセレクタ名で検索してみましょう。

4.Scratch以外に挑戦する（JavaScript編）

Dojoで、Scratchの次のステップとして挙げられることの多い「enchant.js」や、その元となるJavaScriptについてチャレンジできるツールをご紹介します。

hackforplay

https://hackforplay.xyz
小中学生を対象とした、無料で楽しめるプログラミング教材です。
金沢に住む未踏ITクリエータの男性が、プログラミングの楽しさを伝えるべく起業して作ったサービス。熱いです。

スライムがあらわれた！
↓
強くて倒せない！
↓
よし、ソースコードを開いてスライムのHPを減らそう！
そんな教材です。

チュートリアルを終えると、自分でゲームを作れるようになります。

opacityを0にすると消える岩、踏むとワープできる床、からっぽの宝箱など、想像力をくすぐる仕掛けが多数用意されています。
予め用意されたプログラムの値を変えるところから始められるので、キーボード操作が苦手でも、チャレンジしやすいと思います。

CodeCombat

https://codecombat.com/
ゲーム感覚でプログラミングが学べる教材です。
アイテムを全て集めて、敵を倒して、ゴールに辿りつくにはどうすればいいか？　を考えながらプログラミングします。

私はJavaScriptでプレイしましたが、PythonやLua等も選択できます。
無料の範囲でもかなりボリュームがあります。
現在は日本語に訳されていますが、ときどき英語のままのステージやメッセージが出てきたりするので、そこはすこし戸惑うかもしれません。

JavaScriptの場合はうえぶはっくというサイトで攻略方法を紹介しています。
答えに行き詰まった場合は見てみるといいかもしれません。

Progate（JavaScript入門）

https://prog-8.com/
変数、条件分岐、繰り返し処理、配列と連想配列、関数と、無料の範囲でもひととおり学べます。スライドも充実。
実際にいちからJavaScriptで何か作ってみよう！　と思ったときに先にやっておくと理解が早そうです。
他にもiOSアプリが作れるSwift入門があったり、コースも充実しています。（私はGit入門のリリース待ちです～）

ドットインストール（JavaScript入門、enchant.js入門）

JavaScript入門は、プレミアム会員でなくても、ソースコードや文字起こしを公開してくれています。
http://dotinstall.com/lessons/basic_javascript_v2

enchant.jsに関する動画は2つあります
（こちらはソースコード・文字起こしはプレミアム会員のみです）
enchant.js入門
クマを捕まえろ！　ミニゲーム（全4回ですのでさくっと作れます）

※ enchant.jsはゲームを作ることのできるJavaScriptのフレームワークです。

また、JavaScriptに関しては、おみくじやストップウォッチなどの作成動画も無償公開されているので、そちらにチャレンジしてみるのもおすすめです。

【小中学生のための】JavaScriptによるシューティングゲームの作り方1～10【ブラウザだけでOK】

9leapという投稿型ゲームサイト上でenchant.jsを使ったゲームを作成します。
enchant.jsの作者がシューティングゲームの作り方を解説しています。
もし既にenchant.jsを導入していれば、9leap上でなくても作れます。
惜しむらくは目次としてまとまっているページがなく、ちょっと見づらいです(;_;)
（「次の記事」でたどると、いきなり全く別の記事にジャンプしたりします）

JavaScriptのタグ検索から辿っていただくのが多分いちばん辿りやすいです。
真ん中あたりに固まっています。

おまけ

実は私はScratchに用意されているイラストが好みではありません……(>_<)
じゃあ自分で描けばって話ですが、私は絵を描くのは苦手なのです。
どれくらい苦手かっていうと、図工の時間に、遠足に行ったときの絵を描いて提出したら、図工の教師に「これは原爆を浴びた人の群れか」とコメントをもらったくらいです……（2x年経った今でもよく覚えている一言です）
ですので、以下のイラストを使わせていただいています。自分の好みのイラストを使うのも、作成の原動力になると思っています。

いらすとや

http://www.irasutoya.com/
いらすとやはすごいです。今年の流行語でいうと「神ってる」。
国旗クイズつくりたいな　→　揃ってる

恐竜のゲームをつくりたいな　→　揃ってる

もしかして、いらすとやに無い素材はないのでは？？
背景も透過してくれているので、非常に使い勝手が良いです。
ゲームづくりに困ったときは、いらすとやを眺めるとアイディアが浮かぶかもしれません。
背景画像も充実しているので、紙芝居的な作品づくりとも相性がよいです。
ただし、サイズがScratchと異なるので手直しが必要です。
私は、背景画像をビットマップモードに変換し、拡大したり、下にずらして上の余白に同じ空の色を塗ったりして対応しています。

TopeconHeroes

いらすとや以外では、TopeconHeroesダーヤマさんのイラストもよくScratchに使わせていただいています。

ヒューマンピクトグラム2.0

http://pictogram2.com/
特におすすめ。これだけで面白いゲームが作れそうです。占いゲームをこれで作りました。
ただ結構ブラックなネタもあるので、あまり子供さん向きではないかも(^_^;)

FLAT ICON DESIGN

http://flat-icon-design.com/
色々な大きさが選べて便利です。特に「交通・地図」系が充実しており、マップづくりに使えます。
箱庭ゲームを作ったときに使いました。

ICOON MONO

http://icooon-mono.com/
迷路ゲームを作ったときに使いました。色は黒だけではなく、ダウンロード時に自由に変更できます。
Scratchにスプライトとして取り込んでから色を塗るのもありです。

EVENTs Design

http://event-pre.com/
カレンダーとかメッセージカードに良さそうです。大きいので、Scratchに読み込んでから調整するのがいいかと思います。

#いろいろ書いてみましたが……。
やっぱり、忍者（子どもさん）って、あんまり「これをやってみよう」って強制されるのが好きではないんですよね。

なので、楽しく作っているうちは、のびのび楽しんでもらい、でもふっと立ち止まったときに、「こんなのやってみる？」ってドラえもんみたいにスッと出せるのが理想です。（修行中です）