N予備校のプログラミング授業で『実践的開発力』を身につけてもらうためにやっていること

*-=-=-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-=-*
当記事は [N予備校関係者アドベントカレンダー](https://adventar.org/calendars/5170) 用に書かれました。
*-=-=-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-=-*

こんにちは、[N予備校プログラミングコース](https://www.nnn.ed.nico/pages/programming/) でプログラミング授業の講師をしている小枝と申します。プログラミング講師をする前はドワンゴにてニコニコ動画の開発や、エンジニアの教育、採用などを行っておりました。

この記事では、私がN予備校のプログラミング講師として授業放送や教材編集をする上で気付いたこと、気をつけている点を紹介していきます。

# N予備校プログラミング授業について
『N予備校プログラミング入門コース』 を1年かけて走りきるオンライン授業放送（週2回）を行っています。
N予備校プログラミング入門コースは以下の全４章からなり、 **Webプログラマーとしてインターンやアルバイトができるレベル** を目指した超実践的な教材となっています。

### 各章の概要
- 第１章では基本的な HTML/JS/CSS を学び、GitHub Pages で静的サイトとして Web に公開。
- 第２章は仮想環境の構築と Linux（Ubuntu） 導入から始まり、Linux のコマンドやシェルプログラミングを学びます。
- 第３章では Node.js を使って簡単な Web サービスや SlackBot などを作り、Heroku にてデプロイを行います。
- 第４章では 各種フレームワークやデータベースの使い方を学び、本格的な Web サービスを １ から作ります。

予備校と名が付いていますが、プログラミングコース受講者の半数は社会人です。
入門コース以外にも、ネットワークコースやUnityによるゲーム開発、Webデザインコースなどもあります。

# プログラミングは技能教科
入門コース第１章のはじめに、プログラミングは座学だけでは絶対に身につかないことの説明と、できる限り自分で手を動かして学んでいくことを強く奨励しています。
また課題中に出てくるコードも、なるべくコピペではなく写経をするよう案内しています。写経することで、構文の覚え間違いや英単語の綴りの誤解などに気付き、タイピング能力も鍛えられます。


### プログラミングコンテスト
テキストに沿って進めるだけだと考える力や応用力が身に付けられないため、N予備校では年2回プログラミングコンテストを実施しています。

https://progedu.github.io/webappcontest/2020/winter/entry/index.html

このプログラミングコンテストは、ドワンゴのエンジニアが作品の審査を行い、メールにて作品に対してフィードバックのコメントを送ります。

応募自体に GitHub リポジトリの URL を要求したり、アプリケーションのホスティングが必要になっていたりするため、応募するだけでもある程度の技術力は身につきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177100/17a1d80a-ca02-fa7a-360b-88d2bbe02775.png)N予備校Webアプリコンテスト2020冬

# 練習課題は GitHub のプルリクエストとして提出
授業放送では、テキストに用意されている練習課題を毎回必ず実施し、Gitの学習が終わった後はほぼ毎回GitHubにて受講生にPRを投げてもらっています。また授業の中で提出されたPRをレビューすることで、初歩的な間違いや問題点の指摘など、簡易的なコードレビューも体験してもらっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177100/b3e7d513-c119-f2f2-ed17-16a75d61750b.png)練習問題リポジトリへのプルリクエスト

# ドキュメント、リファレンスを読むように誘導する
教材中で新しく出てきたパッケージや、コマンドのオプションについての質問があった場合は、できる限り公式のリファレンス（やhelpコマンドなど）を読みにいきます。公式が英語の場合はGoogle翻訳を使って日本語化しながら説明します。
また手元で確認すれば済むような質問であれば、「実際に自分で試してみた方が早い」と案内しつつ授業でも実演してみせます。

できるだけ講師が直接回答を見せるのではなく、**どうやったら自力で回答に辿り着けるか**という手段を説明するようにしています。

# エラーメッセージを読む、デバッグ過程を見せる
授業中に講師がスペルミスや手順を間違えてエラーを出すことはよくあります。
これは逆に考えるとデバッグ工程を教えるチャンスであり、その場でエラーメッセージを読み、エラーメッセージから原因を推測、問題の切り分け、コード修正から確認までの一連の操作を受講者に見せることで、問題解決の実演をすることができます。

エラーメッセージからの原因究明、問題の切り分け、デバッグ方法などは教材として取り入れることが難しいため、このような授業中のアクシデントはむしろ定期的に起こって欲しいぐらいです。

# エラーに関する質問はフォーラムへ誘導する
授業中に手順やコードを間違えて詰まってしまった受講生には、積極的にN予備校のフォーラム（質問掲示板）を活用するよう案内しています。
フォーラムを案内しているのは授業の進行や時間的な都合だけではなく、質問の仕方を覚えて欲しいという意図があります。フォーラムを活用できることで、状況説明能力やデバッグに必要な情報（スクショなど）、掲示板のログから解決策を見つける等、たくさんの実践的な問題解決能力を身に付けることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177100/e693f7f6-7704-1ad2-bc7b-db02f661b77e.png)N予備校フォーラム（プログラミング系）

# 予習/復習を促して質問できる余裕を持ってもらう
N予備校のプログラミング授業は **ドワンゴで開発をしていたエンジニア** が講師をするため、テキストにない質問に答えたりITエンジニアの就活に関することや技術トレンドの説明、実務における実践的なアドバイスも行えます。
そのため受講生にはなるべく予習をしてもらい、授業とは関係のない質問ができる程度の余裕を持ってもらいたいと考えています。

また最近では月に１回の頻度で 『プログラミングコース座談会』 という、受講生がプログラミング講師に好きに質問できるコーナーも始めています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177100/524fe863-e23b-96ad-c7fc-68fdd5fe2fa6.png)プログラミングコース座談会 at 2020-12

# 終わりに
私はN予備校のプログラミング講師としては2年目ですが、1年かけてプログラミング授業の講師を務め、だいぶ授業の進行にも余裕が持てるようになってきました。
まだまだ手探りな部分も多いですが、コメントができる放送サービスのため受講者の反応が見やすく、工夫に対しての手応えは徐々に感じ流ことができております。
コメントをくださる受講者の方々には大変感謝をしています。

これからも超実践的なプログラミング学習サービスとして運営していきたいと考えていますので、今後ともN予備校プログラミングコースをよろしくお願いいたします。