N予備校でのプログラミングの教え方

この記事では[N予備校](https://www.nnn.ed.nico/pages/programming/)の**プログラミング教育事例**を紹介します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177100/64bde59e-1114-ad10-e1fe-00fc2bd0fe3c.png)

# 目的
本記事はドワンゴのアドベントカレンダーの記事ということもあり、**現場で活躍するエンジニアレイヤ**に向けて執筆しています。エンジニア視点で見ても結構本格的な教育をしているんだなと感じてもらえれば幸いです。

本記事の目的は以下の2点になります。

- N予備校の**プログラミング教育に対するスタンスや取り組み**を知ってもらいたい。
- N予備校の教育事例を**別のプログラミング教育の場でも活用**してもらいたい。

# 執筆者
ドワンゴの教育事業部で**プログラミング講師**をしている小枝と申します。
経歴としては情報通信インフラ業界で2年、SIerで開発とコンサルを5年、ドワンゴではWeb開発を4年、エンジニア人事採用を2年を経て、現職のプログラミング講師は3年目になります。

# N予備校のプログラミング教育が目指すもの

N予備校プログラミングコースで一番力を入れている**プログラミング入門コース**では、プログラミング未経験者がWebエンジニアとして働くための**最低限の知識**を身に着け、アルバイトや正社員として**IT企業から内定を獲得できる**ことを具体的なゴールとしています。
入門コースと言えど就職を目標にしているので、一般的な入門レベルより難易度は高く設定されています。

[N予備校受講者のIT企業内定獲得実績および体験記](https://www.nnn.ed.nico/pages/programming/interview/)

またそれだけではなく、就職後にWebエンジニアとして仕事を行うにあたって**本人や現場のメンターが困らない**ような知識やスキルを習得するところまでを目指しており、この**現場で困らない状態**まで持っていくことこそがN予備校のプログラミング教育の果たすべき責務だと考えます。

### 入門コース(全4章)で身に着けてもらうスキル
**実際の開発現場**でWebエンジニアとして働くためには、以下の知識・体験が必要だと考えています。

- HTML/JS/CSS の基本構造を理解し、適切に組み合わせたプログラミングを行える
- VSCodeなどのIDEを使い効率的にプログラムを作成、修正できる
- 配列関数、I/O Stream、Promise（async/await）などの実践的プログラミング手法を知っている
- コンテナ技術（Docker）を使い手元端末に仮想環境を構築できる
- 公開鍵認証の仕組みを理解し、LinuxやGitHubにsshで接続できる
- Linuxの基本的なコマンド、Vimの操作方法、リダイレクトやパイプなどの出力制御が行える
- IPアドレスやDNS、パケット通信に関する基礎的なネットワーク知識がある
- レスポンスコード、HTTPメソッド、HTTPヘッダとボディなどのHTTP通信の仕組みを理解している
- ライブラリやフレームワークなどの概念や使い方がわかる
- ORMを利用してアプリサーバからデータベースの更新およびデータ取得を行える
- データベースにログインし、SQLを使ったデータ調査ができる
- AjaxやWebSocketを利用したサーバークライアント間の非同期通信を記述できる
- コードのパフォーマンスを測定できる、計算量の概念が理解できる
- セッションや認証、OAuth認可を利用したログイン処理の概念が理解できる
- 例外処理やロギング、リファクタリング、管理者機能等の保守運用系の概念や必要性を知っている
- Webアプリケーション開発で発生する代表的な脆弱性と対策方法を知っている
- テスティングフレームワークを使ったテストを記述できる、CI(GitHub Actions)の概念を知っている
- フローチャートや状態遷移図、ER図などの設計ドキュメントの読み方がわかる
- RESTやCRUD、RDBにおけるデータモデリング（DOA）などの一般的な設計手法を知っている
- Gitでのバージョン管理、GitHubでイシューを立てたりプルリクエストを送ることができる
- PaaS（Heroku）を利用したアプリケーションのリリース、デプロイを行える

とても多いですし、何なら現場のエンジニアでも意外とわかっていないものがあるかと思います。
ですが実際にWebエンジニアとして現場で働くためには、これらは**全て必要な知識**だとN予備校のプログラミング講師陣は考えています。

プログラミング入門コースではこの多岐にわたる学習項目を全4章に分けて、週2日*1年間の授業を通して教えています。上記のほか、オブジェクト指向やデザインパターン、並列処理等も教えたいところなのですが、現状は上級コースに入っています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177100/ea565d1e-a028-403c-be6e-953d90203823.png)
画像：入門コースで教えているツール・技術

# テキストは実践ベースのカリキュラムにした
N予備校の教材は**フルスクラッチのWebアプリ制作**を最終課題とした実践的なカリキュラムで構成されています。

1章ではHTML/CSS/JSを利用した**静的なWebページを作り、GitHub Pagesにて公開**します。
2章では3~4章に備えて**Web通信の仕組みやLinux・GitHubの使い方**を学び、3章ではNode.jsを使って、フレームワークを使わず**ライブラリのみを使ったWebサービス**を作ります。フレームワークを使わないため、ルーティングやセッション処理、セキュリティ対策、テストは泥臭い実装をすることになります。
4章でWebフレームワーク（Express.js）やWebPackなどのバンドラーを利用し、**効率的な開発手法を体験**します。その他Passport.jsによるユーザー認証、Ajaxやソケットによる非同期通信、SQL、CIなど**実践的な開発手法**を学びます。4章の最後では学習の集大成として、**複数人で予定調整を行えるWebアプリケーション**を作成し、Herokuを使ってデプロイまで行います。

### テキストの構成
テキストは**アプリ制作を主軸に置いたカリキュラム**になっているので、プログラミングの文法や各種技術は**ストーリーベース**で学んでいきます。体系的にまとまっている形ではないため網羅性や検索性などは落ちますが、**なぜ学ぶ必要性があるのか、それによって何が実現できどう嬉しいのか**などが直感的に理解できる構成になっています。また過去に学んだ技術や用語についてはリンクを設置しているので、忘れていたり理解が曖昧な場合は辿ることができます。

プログラミング入門コース以外の上級コースには「大規模Web開発コース」「スマホアプリコース」「Unityコース」「機械学習コース」「コンピュータサイエンスコース」などがあります。全てのコースについて、**社内該当職種の現場エンジニア**もしくは**業界の有識者に監修**を受けています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177100/2187677e-ab57-9952-2a1e-72628973226a.png)
画像：N予備校で学習可能なプログラミング系コース

# 生授業でうまくいっている教え方
N予備校プログラミングコースは週2回、**生放送によるリアルタイム授業**を行っています。
N予備校はもともとN/S高等学校生徒用の課外学習アプリとして開発されたサービスなので、学年制に合わせて**4月から1年を通してプログラミング入門コースの1~4章を走り切るようにスケジュール**されています。現在はN/S高生だけでなく会員登録をすれば誰でも利用できるようになっていますが、上記の周期で運用しているため4月から学習を始めるのが一番入りやすいです。
週2回の授業という強制力のある仕組みを使って**学習のモチベーションを保てる**ので、テキストだけではなかなか学習の週間を付けるのは難しい方はぜひ授業に参加していただくことをお勧めします。

### 授業の進行
N予備校の授業にはコメントシステムがあり、授業では講師がテキストの重要な点を解説しつつ**受講者の質問に答えます**。テキストの不明点を質問できるだけでなく、ドワンゴでニコニコ系サービスの開発を実際に担当していたエンジニアが講師となっているので、実際の現場ではどう使われているのかなどの**発展的な質問にも答えています**。
また受講者が付いていけているかどうかをアンケート機能で都度確認しながら進行するため、コピペミスや入力ミスでエラーが発生して**授業に置いていかれるなどの状況**が極力無いように配慮しています。スクリーンショットを添えて質問したい場合は、受講者用のSlack（後述）に貼り付けて質問することもできます。

GitHubの使い方を学んだあとの授業では、授業の最後に練習課題にチャレンジしてN予備校の練習課題用リポジトリに**プルリクエストを出す**コーナーがあり、授業中に出されたプルリクエストは講師が**授業内でレビュー**を行います。課題にチャレンジするだけでプルリクエストを出す習慣が付き、慣れてきた受講者の中には自分のアレンジ作品をレビューしてもらうことを楽しみにしている方もいます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177100/f0f738fd-22a9-8091-b16c-2eb8b7c7a0d3.png)
画像：授業の最後に受講者からのプルリクエストをレビュー

# プログラミング授業以外に取り組んでいること
N予備校では、プログラミング授業以外にも各種施策を行い、受講者が**自発的かつ継続的に**プログラミング学習ができる環境づくりに取り組んでいます。

### プログラミングコースSlack
N予備校のプログラミングコースでは受講者用のSlackを用意しており、**第1章の1節から**受講者用Slackへの参加を促しています。受講者用Slackへの参加用のテキストではチャンネルの作り方やMentionなどの基本的なSlackの使い方や、リマインダなどの便利なTIPSも教えます。

受講者用Slackには現在**5,013名**のユーザーがおり、累計**19.5万件**のメッセージが投稿されています。チャンネルは雑談や質問チャンネルのほか、授業に関するチャンネルやエンジニア就職に関する相談チャンネル、IPA資格等の試験対策チャンネルなどがあります。

授業中はN予備校のコメントシステムのほか、授業進行用のSlackチャンネルでスクリーンショットを添えた質問をすることができます。放送コメントより自由度が高く他の受講者のアイコンやIDも表示されるため、一緒に授業を受けている感が出て**授業参加のモチベーション**にも繋がっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177100/e4096ec5-145e-3404-65af-e037d14cef48.png)
画像：授業開始時のSlackの風景

### Webアプリケーションコンテスト

N予備校プログラミングコースでは夏と冬の年2回、プログラミングコンテストを実施しています。テキストの進行に合わせ、夏は**静的なWebページ**、冬は**動的なサーバーサイドアプリケーション**がテーマとなります。

**自発的にアプリケーション開発を行ってもらう**ことを第一義にしており、テキストのサンプルアプリケーションのアレンジや、授業で習った技術以外も利用可能、アイデア点などの技術力以外の評点も用意しています。

応募および審査はN/S高等学校部門、N中等部部門、N予備校部門に分かれており、**表彰状や豪華な賞品**（HHKB シリーズや REALFORCE シリーズなど）が出ます。冬のコンテストでは、入門コースの内容を十分に履修できている作品に**『修了認定証』**を発行しており、技術力の目安としていくつかの**IT企業のエンジニア採用**でも使ってもらっています。

[2021年夏のコンテスト結果ページ](https://progedu.github.io/webappcontest/2021/summer/result/index.html)
[2020年冬のコンテスト結果ページ](https://progedu.github.io/webappcontest/2020/winter/result/index.html)

### プログラミングコース座談会
毎週の授業のほかに、毎月1回の頻度で[プログラミングコース座談会](https://www.youtube.com/watch?v=eEbnzy4vQu0)という番組を行っています。

この番組では**授業中での回答が難しい質問や悩み、エンジニア就職に関する話**など、授業ではメインで扱うことが難しい話題を取り扱っています。
座談会でピックアップした質問を軽く紹介すると以下のようなものがあります。

- Webサービスを作っても、使われずに閑古鳥が鳴いています。どうすれば使われるwebサービスに育ちますか?
- 公式ドキュメントが読めるようになるヒントを教えていただきたいです。
- プログラミングを使う系の仕事・アルバイトにどのような種類があるのか知りたいです!
- リアルタイムランキングのようなものはどうやったら作れますか?どんなことを考える必要がありますか?
- 教材制作のアルバイトはどんなことをしていますか？
- ドワンゴで働く方法を教えてください

去年から始めた施策ですが満足度は**継続的に高評価**を維持しており、座談会の後の授業は**コメントが活発になっている**ため、今後も継続して行っていきたい取り組みとしています。

またプログラミング座談会とは別に、以下のようなプログラミング系の特別番組を不定期で行っています。

###### 【夏の特別授業】 Google Chrome のあのゲームを作ろう！
Chromeでネットワークエラー時に遊べる例のゲームを題材に、Canvasを使った画像処理やゲームプログラミングの学習を行う番組です。

###### 【レベルアッププログラミング】GitHubでチーム開発 基礎編
入門コースでは教えきれないもうワンステップ上のスキルアップを目指した授業です。初回ではGitHubとSourceTreeを使ったコンフリクト解消の演習を行いました。

###### 【冬の特別番組】野田ゲーで学ぶゲーム制作の極意！
自作ゲームを使ったコントで注目を集めるお笑い芸人の野田クリスタル氏にお越し頂き、ゲーム制作やアイデア出しのコツを学んだり、N予備校受講生の作品を遊んでもらいアドバイスやコメントを頂きます。

# おわりに
プログラミング教育はまだまだ教育市場自体が新しく、教える側も教わる側も試行錯誤しながらいろいろな教育手法にチャレンジしています。
流れの早いWeb業界のエンジニアを育てるのは大変ですが、エンジニアを15年続けてきて変わりやすい技術とあまり変わっていない技術の違いはある程度分かってきているので、流行りの技術も教えつつ、今後10年を生き残るのに必要な普遍的な知識や考え方を中心に教えられるように工夫をしていければと思います。

日本のIT教育の最先端を走るN/S高等学校で利用される学習アプリに恥じないような教育やカリキュラムを提供できるようこれからも頑張ります。
ここまで読んでいただきありがとうございました。

[N予備校プログラミングコース](https://www.nnn.ed.nico/pages/programming/)