【無料で学べるプログラミング】Progateを授業に導入する方法

こんにちは。福田泰裕です。

新しい学習指導要領が公示され、高校の情報の授業でのプログラミングの授業があと少しで始まります。
しかし現場にはプログラミングの経験がなく、「何を教えたらよいのか分からない」と悩まれている方も多いでしょう。

私も大学時代にプログラミングを少しだけ習いましたが、他人に教えられるレベルまでの知識があるかと聞かれると、自信がありません。

そこで活用していきたいのが、オンラインで無料でプログラミングの学習ができるProgateというWebサイトです。

今回は、このProgateを授業に導入する方法をご紹介します。

最後まで読んでいただけると嬉しいです。

目次

広告

無料でプログラミングが学べる『Progate』とは?

まず、Progateとは一体何なのかご紹介します。

Progateは、オンラインでプログラミングの学習ができるサービスです👇

Progate(プロゲート) | Learn to code, learn to be creative.
Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。

ログインすると、このような多くの言語を学ぶことができます👇
(これは、Progateのコースの一部です。)

コースを選択すると、学習が始まります。
このようなスライドを見て学習し…👇

実際にコードを入力していきます👇

正しく入力が終わると、クリアです。
経験値を貯めることができ、レベルが上がっていきます👇

スマホ版のアプリもあり、自宅でも簡単に学習を進めることができます。

Progateを授業に導入するメリット

Progateを授業に導入するメリットをご紹介します。

メリット①:生徒一人ひとりのペースで進められる

プログラミングを学ぶことは、生徒にとってとてもハードルが高いです。
理解の早い生徒もいれば、なかなか理解できない生徒もいます。

一斉授業を行うと、基本的には一番進度の遅い生徒に合わせて授業をしなければなりません。
そのため、早く理解してしまった生徒はずっと待つ必要があります。

早く理解してしまった生徒は退屈で、遅い生徒にはプレッシャーをかけてしまうのです。

しかしこのProgateを利用すれば、それぞれの生徒が自分のペースで学習を進めることができるようになります。
教師は質問を受け付けるために巡回するだけで、授業がどんどん進んでいくのです。

メリット②:インプットとアウトプットが同時に行える

スライドを見てインプットした知識を、すぐにアウトプットできる点も魅力的です。

通常の授業ではどうしてもインプットがメインになりがちですが、Progateを利用すれば即座にコーディングでアウトプットの練習ができます。

やはりプログラミングは、実際にコードを入力してみないと分からない事がたくさんあります。
Progateはすぐにコーディングの練習ができる点において優れています。

メリット③:簡単に復習できる

Progateでの学習内容は、すべてスライドにまとめられています。

そのため、学習中に分からない点があったときは、前のスライドに戻ることで簡単に復習できます。
プリントを探す必要はありません。
また、教師に聞くのではなく、自分で調べることを習慣づけることもできます。

実際にコーディングしていく中で、分からないことを自分で調べる力を養うことができる点が素晴らしいです。

メリット④:自宅で学習できる

プログラミングは、上手くハマると楽しい分野です。

もし授業で少し興味を持ち、「自分で勉強してみたい!」と思ったとき、Progateのスマホ版アプリを使えば自宅で簡単に学習することができます。

アプリ版は、Web版とは仕様が少し異なりますが、内容はほとんど同じです。

Web版とアプリ版の両方をプレイすることで、2回分の勉強ができます。

Progateを授業に導入する方法:アカデミックプラン(無料)に申し込む

では、実際にProgateを授業に導入する方法をご紹介します。

ズバリ、アカデミックプランに申し込むのです。

Progate(プロゲート) | Learn to code, learn to be creative.
Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。

Progateのアカデミックプランとは?

アカデミックプランとは、Progateが提供してくれている学校向けのプランです。
通常、Progateで学習するには月額980円の利用料が必要です。

しかし、このアカデミックプラン申し込めば無料で受講できます!

なんと太っ腹なんでしょう!

ただし、選択できるコースは2種類までとなっています。
しかし実際に授業をすると、2種類あれば十分すぎるほどの量があります。

アカデミックプランの申し込み方法

申し込み方法はとても簡単です。

まず、管理者はアカウントを作る必要があります。
ProgateのWebページ( https://prog-8.com/ )にアクセスし、アカウントを作成しましょう。(※無料です。)

アカウントができたら、アカデミックプランに申し込みます。

ProgateのWebページ( https://prog-8.com/ )にアクセスし、画面右下のご意見箱をクリックします。

すると、下のようなウィンドウが開きます。
メールアドレスを入力し、「法人・学校向けサービスについて」を選択します👇

メッセージには、

  • 学校名
  • あなたの名前
  • 授業でアカデミックプランを導入したいこと

を入力し、送信を押します。

するとProgateの担当の方からメールで返信があります。
(私の場合は、その日のうちに返信がありました!)

あとは担当の方とメールでやり取りをしながら話を進めていきます。
最終的に話がまとまると、次のようなメールが送られてくると思います。

①個人アカウントの登録
Progateのアカデミックプランのご利用にあたり、
まずは管理者の方の個人アカウントを作成する必要がございます。
作成がまだの場合は、https://prog-8.com より無料登録をお願いいたします。

②言語の決定
アカデミックプランでは中学校と高校を対象に2言語までを無償提供いたします。
お申込みにあたり、2言語を決定する必要がありますので、決定の上ご登録を
お願いします。
特にご希望がない場合は、HTML&CSSとJavaScript ES6をおすすめしております。

③生徒さま用アカウントの発行について
弊社にて一括作成・発行させていただきます。
アカウント名、メールアドレス、パスワード(小文字英数字6文字以上)を、
CSVもしくはExcelファイルにて情報のおまとめをお願いします。
※アカウント名は本名でなくクラス出席番号で問題ございません
※生徒さまのメールアドレスがない場合はダミーアドレスでも可能です
——————————————————————————————
Excel入力例)
★Progate学園、2018年度の3年2組の生徒の場合

アカウント名 アドレス パスワード
18030201 18030201@progate-gakuen.jp 18030211
18030202 18030202@progate-gakuen.jp 18030202
・ ・ ・
・ ・ ・
・ ・ ・
——————————————————————————————

④登録フォーム
①~③が完了しましたら、情報とExcelファイルを下記フォームより
送信をお願いいたします。
https://docs.google.com/forms/d/e/‥‥‥(入力フォームのURL)‥‥‥///

⑤利用開始
弊社にて手続き完了後に、フォームに頂いた連絡用アドレスへ
ご連絡させていただきます。管理機能使い方に関しては添付の、
使い方ガイドをご活用くださいませ。

メールの下の方にあるURLにアクセスし、

  • 学校名
  • 担当者名
  • 電話番号
  • メールアドレス
  • 使用言語(2つまで)
  • 生徒用アカウントの情報

を送信します。

生徒用アカウントの情報は、CSVファイルを送信します。

このように、

  • 生徒用のアカウントは名前は数字だけでもOK
  • メールアドレスは実在しないものでOK
  • パスワードは6文字以上ならこちらで決められる

ということなので、個人情報が漏れる心配もありません。

送信すれば、申し込みは完了です!
数日待てば、生徒用のアカウントが登録されています!

Progateの授業での運用方法は?

実際に授業に使うとどのようなことができるのかご紹介します。

ログインした後、画面左上から「所属チーム」をクリックすると、学校名が表示されます👇

学校名をクリックすると、下のように生徒の一覧が表示されます!
これで、生徒がどこまで取り組んだのか一目で分かります。

右下の「CSV出力」をクリックすると…👇

生徒一人ひとりの進捗状況を見ることができます👇

例えば宿題で、「来週の授業までに【JavaScriptの学習コースⅠ】を予習してくること!」のようにすることも可能です。

また、一度クリアした問題はいつでもスライドで復習することが可能です。
授業で何か作品をつくる際に、すぐ教師に質問するのではなく自分で探すようにすると良いでしょう。

まとめ:Progateの導入はメリットしかない

いかがでしたでしょうか。

今回の記事にある、Progateの導入方法をまとめると次のにようになります。

Progate導入までの流れ

① 教員用のアカウントをつくる。
② ProgateのWebページ( https://prog-8.com/ )にアクセス し、「ご意見箱」から「アカデミックプランに申し込みたい」というメッセージを送信する。
③ Progateの担当の方とメールでやり取りする。
④ 入力フォームから、学校情報と生徒用アカウント情報を送信する。(言語を2つ選ぶ。)
⑤授業や課題に利用する。

私は高校1年生の社会と情報の授業で利用しています。
言語は「HTML&CSS」と「JavaScript」を選択し、授業で扱う前の課題として事前に取り組ませています。

導入する前と比べて、生徒たちの理解度がとても高まった気がします。
授業で説明した際にも、かなりスムーズに進むようになりました。

ハッキリ言って、これからのプログラミング教育でProgateを導入することはメリットしかないでしょう。
無料ですし、絶対に導入するべきだと思います。

今回の記事が、1人でも多くの情報科の教員の方のお役に立てば嬉しいです。

最後まで読んでいただき、ありがとうございました。

質問やご意見、ご感想などがあればコメント欄にお願いします👇

福田 泰裕

33歳、2児の父。 山口県の高校教師で、担当は数学と情報。 毎日定時ダッシュするために、働き方改革を実施中。 数学教育・情報教育・教師の働き方・教師のEXCEL講座などを記事にしています!