どうもプログラミング教室で講師をしているえいとです！
プログラミング教育で何をすればいいのか分からないとお困りの方！
この記事ではパソコン未経験のお子様がプログラミング言語を習得するまでの道のりを10のステップに分けて解説します。
ステップ10までいけばクラウドソーシングなどで仕事を請け負うこともできるようになります！！
全てのステップをクリアするにはどんな子でも1年はかかると思ってください。
むしろ1年でステップ10までいけたら将来が楽しみで仕方ありません。
コツコツ1つずつステップをクリアしてプログラミング学習を迷いなく進めていきましょう！！
- プログラミング教育で何をすればいいかわからない
- プログラミング学習の進め方が知りたい
- 最終的に子どもに言語の学習をしてほしいと思っている
プログラミング言語習得までの10ステップ
ここで紹介するステップはパソコンに慣れておらず、プログラミング学習もはじめての子ども向けの内容です。
お子様がクリアしていると思ったステップは飛ばして次に進んでもらって構いません。
いけそうなら次のステップにどんどん進んでいって、つまづいたら一つ戻って学習し直すなどお子様に合わせて進めていってくださいね！
- ステップ1：ビジュアルプログラミング言語を学ぶ
- ステップ2：タイピングと基本的な英語を練習する
- ステップ3：スクラッチで人の作品を模写する
- ステップ4：わからない部分を自分で検索する
- ステップ5：マイクラプログラミングを学ぶ
- ステップ6：MakeCodeをJavaScriptに変換する
- ステップ7：ProgateでJavaScriptを学ぶ
- ステップ8：テキストエディタでJavaScriptを書く
- ステップ9：自分のサイトを作る
- ステップ10：ポートフォリオを作る
では一つ一つ確認していきましょう！
ステップ1：ビジュアルプログラミング言語を学ぶ
まずはビジュアルプログラミング言語でプログラミングを好きになってもらいましょう！
苦手意識が付くと今後プログラミングをやりたいと思わなくなる可能性が高いです。
なのでまずは「プログラミングは楽しいんだ！」と思ってもらえるようにしたいです。
そこでビジュアルプログラミング言語が大活躍します。
オススメのビジュアルプログラミング言語学習のツールは次の４つです。
ビジュアルプログラミング言語学習ツール
- スクラッチ
- プログラミングゼミ
- Hour of Code
- Springin‘
- スクラッチ：ビジュアルプログラミング言語の代表ソフト。子どもでも簡単にプログラミングを作ることができる。本やYouTubeなど教材が多数ある。スマホではできない。
- プログラミングゼミ：スクラッチのようなビジュアルプログラミングが可能で、プログラミングゼミのソフト内で問題が多数用意されており、他に教材を用意しなくても学習を進めることができる。
- Hour of Code：スクラッチのようなビジュアルプログラミングが可能。用意された問題を解きながら進める形式。オリジナルのプログラミングを作ることはできない。
- Springin’：感覚でゲームや絵本を作ることができる。スクラッチのように命令ブロックを順番に組むのではなく、一つ一つのオブジェクトに命令を組み込む形でプログラミングを行う。iOS専用アプリ。
全てやってみてほしいですが、まずひとつ集中して取り組むならプログラミングゼミがオススメです。
PCでもスマホでも利用でき、スクラッチのようにオリジナルゲームを作ることもでき、かつプログラミング問題も豊富に用意されています。
プログラミングゼミをやりこむだけで、ビジュアルプログラミング言語は十分理解できるようになるでしょう。
スクラッチは教材を自分で用意しなければなりません。
レビューをよく読んで質の良い学習本を選びましょう！
ステップ2：タイピングと基本的な英語を練習する
プログラミング言語は英語や記号や関数だらけです。
タイピングがある程度できるようになっていなければ、プログラミングの学習が思うように進みません。
ホームポジションに指を置いて打てるようになることを目標にタイピング練習を行ってください。
タイピング練習で有名なのは『myTyping』や『e-typing』や『寿司打』です。
myTypingでは会員登録もなしで無料で超基本的なタイピングから練習できてオススメです。
またローマ字はもちろんプログラミングで使う英語も理解していかないとプログラミングの学習ははかどりません。
英語の勉強についてはプログラミングで使うような英語の学習が好ましいですが、なかなかそういった教材はありません。
「for」「while」「if」「else」などよくプログラミングで使われるような英語の元々の意味を学んでいけばひとまずはOKです。
『プログラミング英語検定』のサイトではプログラミングに関する英単語をまとめているので、この中からピックアップしてあげるのもオススメです。
また『D-SCHOOLオンライン』では「英語×プログラミングコース」が用意されており、家庭で月額3,980円で英語とプログラミングを同時に学んでいくことができます。
ステップ3：スクラッチで人の作品を模写する
ビジュアルプログラミング言語の扱いに慣れてきたら、人の作品の模写をしましょう！
プログラミング言語の学習でも人が書いたコードやウェブサイトの模写は必ず行います。
何事もマネするとこからですよね！
スクラッチで模写の練習をしましょう！
他の人がどうやってプログラミングを組み立てているのかを確認したり、高度なテクニックを学ぶことができます。
スクラッチでは公開されている作品が無限にあるので、模写をするのに適しています。
また模写ではなく、人の作品を改造することもできるので、自分のアイデアを取り入れてゲームをさらに面白くビルドアップさせる経験を積むこともできます。
最初は簡単なのから模写しよな！
マネするだけなので簡単そうに思いますが、高度なゲームはかなり複雑で、大人でも模写でさえ難しいものもあります。
レベルに合わせて模写するゲームを探しましょう。
ちなみに高度でヤバいゲームはこちらで紹介しています。
スクラッチのページに飛んで『中を見る』をクリックするとヤバいプログラミングを見ることができます。
ステップ4：わからない部分を自分で検索する
模写をして、どんなことがどんなプログラミングで実現できるのかが分かってきたら、自分の作品作りに活かしましょう！
自分の作品作りのなかで思うように実現できない部分は、自分で検索して答えを探す練習をしましょう。
どうすれば正しい答えが記載されているページにたどり着けるのかを調べる、いわゆる検索力、ググり力を鍛えます。
プログラミング言語を学習する際も、検索は必須です。
それもやりたいことを実現するためのコードは１種類ではないこともあるので、いくつものサイトを探して自分の必要としている情報を見つけ出さなければなりません。
しかも丸々コピペではなく、必要なコードのみを抜き出すことが多いので、理解力も求められます。
自分一人で成長していけるように、早めにググり力を身につけていきましょう！
ステップ5：マイクラプログラミングを学ぶ
ここでは次のステップでプログラミング言語「JavaScript」を扱うための前段階としてマイクラプログラミングを学びます。
「マインクラフト for Windows」に「Code Connection」をインストールすることで『Make Code』が使えるようになります。
『Make Code』はマイクラで使えるビジュアルプログラミング言語です。
これまでのステップで学んだプログラミングの組み立て方をマイクラのプログラミングでも使ってみましょう。
プログラミングゼミやスクラッチで学んだことがここでも活かせることに気付けるはずです。
プログラミングは言語が変わっても構造が似ていることがあるので、ここでの気づきは将来にも繋がります。
マイクラの中には教材が用意されていないので、ここでも本やYouTubeで勉強していくのがオススメです。
マイクラプログラミングはYouTubeが少ないので、順序立てて学んでいくには学習本がいいでしょう。
マイクラプログラミングはオンラインで学べるスクールがいくつかあります。
体系的に効率良く学習させたい方は、オンラインスクールも検討してみてください。
ステップ6：MakeCodeをJavaScriptに変換する
マイクラでビジュアルプログラミング言語が扱えるようになってきたら、次はいよいよプログラミング言語に触れていきます。
MakeCodeは上部にビジュアルプログラミング言語とJavaScriptを切り替えるボタンが付いています。
JavaScriptに切り替えることで今まで日本語で組み立てていたプログラムがどのようなコードで実現できるのかが分かるようになります。
次の2つの画像は「”run”というコマンドでエージェントを前に1ブロック進める」というプログラミングをビジュアルプログラミング言語とJavaScriptで表示したものです。
MakeCodeのビジュアルプログラミング画面
MakeCodeのJavaScript画面
MakeCodeはJavaScriptモードでもビジュアルプログラミング言語と同じように操作してプログラミングを作っていくことができます。
どこが編集可能な部分なのか、どのような英単語を使えばいいのか、どんな書き方をしているのかなど、これまでのビジュアルプログラミング言語と比較しながら、JavaScriptを感覚的に身につけていきましょう。
ステップ5で学んだ学習内容をJavaScriptでもう一度全部やってみよう！
ステップ7：ProgateでJavaScriptを学ぶ
Progateはプログラミング初心者のための学習サイトです。
僕もJavaScriptなどを学んだときはこのサイトから学習をはじめました。
JavaScriptは様々なサイトや学習本などで初心者向けの学習内容が用意されています。
学習本でもいいのですが、環境構築などの手間を省けるので、サイトで学ぶのがオススメです。
「Progate」は無料で学べる講座があり、実際にプログラムを打ち込みながら学習することができます。
途中からは月額980円を支払わなければならなくなるため、そこまで進んだら、そのままProgateで学ぶか「ドットインストール」など他のサイトで学ぶか検討しましょう。
Progateやドットインストールで一通り学習をしたら次のステップに進みましょう！
ステップ8：テキストエディタでJavaScriptを書く
ここからは完全に一からプログラミングを書いていく練習です。
テキストエディタは『Brackets』が有名です。
テキストエディタはコードを打ち込んでいくためのソフトです。
極端な話、メモ帳でもプログラミングはできますが、テキストエディタを使えば非常に効率良く楽にコードを書くことができます。
テキストエディタでコードを打ってJavaScriptを勉強していくためには、最低限のHTML/CSSの知識も必要になってきます。
またフォルダの階層構造や、文字サイズ、色コード、クラス、などプログラミングに欠かせない知識がたくさんあります。
このステップでは覚えることが一気に増えるので、体系的に学べる学習本がオススメです。
アマゾンでベストセラー入りした高評価の本など広く扱われているものを選びましょう。
ステップ9：自分のサイトを作る
学習本でテキストエディタでのプログラミングにも慣れてきたら、自分のサイトを作ってみましょう！
この時、作りたい内容によってはHTML/CSSの知識も必要になるので、実現できる範囲で作るか、HTML/CSSも学んでクオリティを高めるか決めましょう。
Webサイトの運営にはHTML/CSSは欠かせないので学んでいて損はないです。
サイト作りは奥が深く、サイトのコンセプトやデザインなど多くの内容で本が一冊できてしまうほど難易度が高いものです。
ここではプログラミングの練習を行うので、コンセプトやデザインはある程度簡単なものにして、どう記述すればそれが実現できるかに時間をかけましょう！
いきなりプロみたいなサイトは作れないもんな！
ポートフォリオサイトとかいいんじゃないかな！
テキストエディタでプログラミングしていく際には必ず「デバッグ」が必要になります。
「デバッグ」とは間違っているコードを修正することです。
最初はどこが間違えているのか探すだけでも一苦労です。
F12の「検証ツール」を使いこなして、デバッグができるようになっていきましょう！
ステップ10：ポートフォリオを作る
ポートフォリオとは自分の能力を人に見せるための作品集のようなものです。
JavaScriptで自分ができることをステップ9で作ったサイトにまとめてみてはいかがでしょうか？
勉強した成果を確認できるようにもなり、人に自分の能力をアピールするための武器にもなります。
ポートフォリオが充実してくる頃には簡単な仕事が請け負えるレベルのプログラミングスキルが身についています。
JavaScriptはできることが非常に多く、簡単に実行するためのライブラリも存在します。
『jQuery』というライブラリを使えば、プロが作ったサイトのような動きが簡単に実現できます。
ライブラリを使いこなしてサイトをリッチにしていくのも立派なプログラミングスキルです。
Progateやドットインストールでも『jQuery』の講座があるので、学習してみましょう！
まとめ
この記事では『子ども向けのプログラミング言語習得までの10ステップ』をご紹介しました。
- ステップ1：ビジュアルプログラミング言語を学ぶ
- ステップ2：タイピングと基本的な英語を練習する
- ステップ3：スクラッチで人の作品を模写する
- ステップ4：わからない部分を自分で検索する
- ステップ5：マイクラプログラミングを学ぶ
- ステップ6：MakeCodeをJavaScriptに変換する
- ステップ7：ProgateでJavaScriptを学ぶ
- ステップ8：テキストエディタでJavaScriptを書く
- ステップ9：自分のサイトを作る
- ステップ10：ポートフォリオを作る
もちろん簡単な道のりではないですが、ステップをこなしていけば確実にプログラミングの力が身につきます！
高校を卒業するまでに全てのステップをこなすことを目標に、プログラミング学習をはじめてみてはいかがでしょうか。
