この記事ではN予備校のプログラミング教育事例を紹介します。
目的
本記事はドワンゴのアドベントカレンダーの記事ということもあり、現場で活躍するエンジニアレイヤに向けて執筆しています。エンジニア視点で見ても結構本格的な教育をしているんだなと感じてもらえれば幸いです。
本記事の目的は以下の2点になります。
- N予備校のプログラミング教育に対するスタンスや取り組みを知ってもらいたい。
- N予備校の教育事例を別のプログラミング教育の場でも活用してもらいたい。
執筆者
ドワンゴの教育事業部でプログラミング講師をしている小枝と申します。
経歴としては情報通信インフラ業界で2年、SIerで開発とコンサルを5年、ドワンゴではWeb開発を4年、エンジニア人事採用を2年を経て、現職のプログラミング講師は3年目になります。
N予備校のプログラミング教育が目指すもの
N予備校プログラミングコースで一番力を入れているプログラミング入門コースでは、プログラミング未経験者がWebエンジニアとして働くための最低限の知識を身に着け、アルバイトや正社員としてIT企業から内定を獲得できることを具体的なゴールとしています。
入門コースと言えど就職を目標にしているので、一般的な入門レベルより難易度は高く設定されています。
またそれだけではなく、就職後に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年間の授業を通して教えています。上記のほか、オブジェクト指向やデザインパターン、並列処理等も教えたいところなのですが、現状は上級コースに入っています。
画像：入門コースで教えているツール・技術
テキストは実践ベースのカリキュラムにした
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コース」「機械学習コース」「コンピュータサイエンスコース」などがあります。全てのコースについて、社内該当職種の現場エンジニアもしくは業界の有識者に監修を受けています。
画像：N予備校で学習可能なプログラミング系コース
生授業でうまくいっている教え方
N予備校プログラミングコースは週2回、生放送によるリアルタイム授業を行っています。
N予備校はもともとN/S高等学校生徒用の課外学習アプリとして開発されたサービスなので、学年制に合わせて4月から1年を通してプログラミング入門コースの1~4章を走り切るようにスケジュールされています。現在はN/S高生だけでなく会員登録をすれば誰でも利用できるようになっていますが、上記の周期で運用しているため4月から学習を始めるのが一番入りやすいです。
週2回の授業という強制力のある仕組みを使って学習のモチベーションを保てるので、テキストだけではなかなか学習の週間を付けるのは難しい方はぜひ授業に参加していただくことをお勧めします。
授業の進行
N予備校の授業にはコメントシステムがあり、授業では講師がテキストの重要な点を解説しつつ受講者の質問に答えます。テキストの不明点を質問できるだけでなく、ドワンゴでニコニコ系サービスの開発を実際に担当していたエンジニアが講師となっているので、実際の現場ではどう使われているのかなどの発展的な質問にも答えています。
また受講者が付いていけているかどうかをアンケート機能で都度確認しながら進行するため、コピペミスや入力ミスでエラーが発生して授業に置いていかれるなどの状況が極力無いように配慮しています。スクリーンショットを添えて質問したい場合は、受講者用のSlack（後述）に貼り付けて質問することもできます。
GitHubの使い方を学んだあとの授業では、授業の最後に練習課題にチャレンジしてN予備校の練習課題用リポジトリにプルリクエストを出すコーナーがあり、授業中に出されたプルリクエストは講師が授業内でレビューを行います。課題にチャレンジするだけでプルリクエストを出す習慣が付き、慣れてきた受講者の中には自分のアレンジ作品をレビューしてもらうことを楽しみにしている方もいます。
画像：授業の最後に受講者からのプルリクエストをレビュー
プログラミング授業以外に取り組んでいること
N予備校では、プログラミング授業以外にも各種施策を行い、受講者が自発的かつ継続的にプログラミング学習ができる環境づくりに取り組んでいます。
プログラミングコースSlack
N予備校のプログラミングコースでは受講者用のSlackを用意しており、第1章の1節から受講者用Slackへの参加を促しています。受講者用Slackへの参加用のテキストではチャンネルの作り方やMentionなどの基本的なSlackの使い方や、リマインダなどの便利なTIPSも教えます。
受講者用Slackには現在5,013名のユーザーがおり、累計19.5万件のメッセージが投稿されています。チャンネルは雑談や質問チャンネルのほか、授業に関するチャンネルやエンジニア就職に関する相談チャンネル、IPA資格等の試験対策チャンネルなどがあります。
授業中はN予備校のコメントシステムのほか、授業進行用のSlackチャンネルでスクリーンショットを添えた質問をすることができます。放送コメントより自由度が高く他の受講者のアイコンやIDも表示されるため、一緒に授業を受けている感が出て授業参加のモチベーションにも繋がっています。
画像：授業開始時のSlackの風景
Webアプリケーションコンテスト
N予備校プログラミングコースでは夏と冬の年2回、プログラミングコンテストを実施しています。テキストの進行に合わせ、夏は静的なWebページ、冬は動的なサーバーサイドアプリケーションがテーマとなります。
自発的にアプリケーション開発を行ってもらうことを第一義にしており、テキストのサンプルアプリケーションのアレンジや、授業で習った技術以外も利用可能、アイデア点などの技術力以外の評点も用意しています。
応募および審査はN/S高等学校部門、N中等部部門、N予備校部門に分かれており、表彰状や豪華な賞品（HHKB シリーズや REALFORCE シリーズなど）が出ます。冬のコンテストでは、入門コースの内容を十分に履修できている作品に『修了認定証』を発行しており、技術力の目安としていくつかのIT企業のエンジニア採用でも使ってもらっています。
2021年夏のコンテスト結果ページ
2020年冬のコンテスト結果ページ
プログラミングコース座談会
毎週の授業のほかに、毎月1回の頻度でプログラミングコース座談会という番組を行っています。
この番組では授業中での回答が難しい質問や悩み、エンジニア就職に関する話など、授業ではメインで扱うことが難しい話題を取り扱っています。
座談会でピックアップした質問を軽く紹介すると以下のようなものがあります。
- Webサービスを作っても、使われずに閑古鳥が鳴いています。どうすれば使われるwebサービスに育ちますか?
- 公式ドキュメントが読めるようになるヒントを教えていただきたいです。
- プログラミングを使う系の仕事・アルバイトにどのような種類があるのか知りたいです!
- リアルタイムランキングのようなものはどうやったら作れますか?どんなことを考える必要がありますか?
- 教材制作のアルバイトはどんなことをしていますか？
- ドワンゴで働く方法を教えてください
去年から始めた施策ですが満足度は継続的に高評価を維持しており、座談会の後の授業はコメントが活発になっているため、今後も継続して行っていきたい取り組みとしています。
またプログラミング座談会とは別に、以下のようなプログラミング系の特別番組を不定期で行っています。
【夏の特別授業】 Google Chrome のあのゲームを作ろう！
Chromeでネットワークエラー時に遊べる例のゲームを題材に、Canvasを使った画像処理やゲームプログラミングの学習を行う番組です。
【レベルアッププログラミング】GitHubでチーム開発 基礎編
入門コースでは教えきれないもうワンステップ上のスキルアップを目指した授業です。初回ではGitHubとSourceTreeを使ったコンフリクト解消の演習を行いました。
【冬の特別番組】野田ゲーで学ぶゲーム制作の極意！
自作ゲームを使ったコントで注目を集めるお笑い芸人の野田クリスタル氏にお越し頂き、ゲーム制作やアイデア出しのコツを学んだり、N予備校受講生の作品を遊んでもらいアドバイスやコメントを頂きます。
おわりに
プログラミング教育はまだまだ教育市場自体が新しく、教える側も教わる側も試行錯誤しながらいろいろな教育手法にチャレンジしています。
流れの早いWeb業界のエンジニアを育てるのは大変ですが、エンジニアを15年続けてきて変わりやすい技術とあまり変わっていない技術の違いはある程度分かってきているので、流行りの技術も教えつつ、今後10年を生き残るのに必要な普遍的な知識や考え方を中心に教えられるように工夫をしていければと思います。
日本のIT教育の最先端を走るN/S高等学校で利用される学習アプリに恥じないような教育やカリキュラムを提供できるようこれからも頑張ります。
ここまで読んでいただきありがとうございました。