私 is 誰

今年の7月にドワンゴの教育事業部に異動し、N予備校でプログラミング講師をやることになりました。
現在は週2回ニコ生やN予備校上にてプログラミング入門コースの授業放送をしています。

ドワンゴ自体は7年目となり、ニコニコ動画の開発を4年、エンジニア教育やエンジニア採用を2年ほどやってきました。

この記事で書きたいこと

現部署に異動後、教材のインプットを兼ねて『N予備校プログラミング入門コース』を履修したのですが、明らかに難易度が僕の想像した "入門コース" から外れたガチ編成になっていて衝撃を受けたことが記事を書こうと思ったきっかけです。
中身としてはとても良い教材になっているので、僕のような勿体無い誤解が少しでも減れば幸いです。

入門コースはいわゆる入門コースではない

『プログラミング入門コース』のゴールは ドワンゴがエンジニアとして採用したいレベル や IT企業のエンジニアインターンに行けるレベル を目指しています。一般的な『入門』でイメージする難易度ではなく、かなり難易度の高い実践的な内容となっています。

ざっくり説明すると、入門コース最後の節では、

• VirtualBox上に構築したUbuntu環境から
• Node.js,Express,Webpack,PostgreSQLにて制作したGitHub認証入りのWebサービスを
• テストコードやCI、脆弱性対策も完備して
• Herokuにgit pushしてデプロイする

までを行います。入門とは一体……。

『プログラミング入門 Webアプリ』コースで学べること

第1章 - はじめよう -

第1章では基礎的なHTML,CSS,JSの書き方を学び、章の終わりにはそれらを繋ぎ合わせて「入力内容で結果の変わる診断アプリ」（診断メーカーのようなもの）を作ります。

第１章は割とどこのサービスでも共通のプログラミング入門的なコンテンツで、初心者が脱落しないようやさしく解説されています。
対話的なプログラミングや手早く動くものが作れることを重点に置いているので、プログラミングの面白さを体感しながら読み進められるかと思います。

VSCodeで開発をする

まず最初にVSCodeをインストールし、開発も基本的にVSCode上で行っていきます。
VSCodeで開発するための環境設定なども併せて案内しているので、IDEのカスタマイズに関する関心もつけられます。

HTML、CSS、JS

基本的なタグやスタイルの当て方、HTMLに直接書く方法から外部ファイルに分割して読み込む方法まで学びます。Tweetボタンや動画の埋め込みなども学びます。手軽にリッチ化できる点が良い体験になるかと思います。

JSはES6(ES2015)を採用しており、以下の基本的な構造化プログラミングの方法について学習します。

• 型（数値、文字列、真偽値）
• 変数
• 算術演算、比較演算、論理演算
• if, for
• コレクション
• コメント
• 関数
• オブジェクト

ChromeのコンソールタブをJavaScriptのインタプリタとして使っており、１行１行の挙動を確認しながら学んでいくスタイルになります。
浮動小数や丸め誤差、正規表現、truthy/falsyな値、無名関数やアロー関数など、細かい部分の言語仕様もTipsとして解説されています。

診断ページを作る

基本的な言語仕様が学べたら診断ページを作ります。
要件定義からモックアップを作り、実装後は簡単なテストも書きます。

作って終わりではなく、開発の基本的なプロセスを体験できる進行となっています。

第2章 - 準備しよう -

第1章とは打って変わっていきなりガチな開発環境を整えていきます。
正直に言って技術的な関心がないと全く楽しくない、難所となる章です。

長くなるので学ぶ要素の列挙だけになりますが、Web開発経験のある人ならカリキュラムのヤバさ解ってもらえるかと思います。

オススメPoint

• 殆どの学習をUbuntu上で行うため、WinとMacの環境差がなくなる
• 能動的に学びにくいLinuxの操作や泥臭い処理を体系的に学べる
• gitでのソーシャルコーディング（チーム開発に必要な操作）を学べる
• ニコ動のランキングRSSを取ってきて集計する演習が楽しい

第2章で学べるもの

• VirtualBox, Vagrantを使いUbuntu環境を作る
• コンソール、ターミナルの使い方
• linux
  • ライセンスについて
  • 基本的なLinux上でのコマンド操作（CUI、オプション、引数など）
  • SSH接続、SSHkeyGen、公開鍵認証
  • コンピュータを構成するデバイスについて
  • lshw を使った仮想デバイスのスペック確認
  • 手元端末との共有フォルダ設定（Vagrantfileによるマウント）
  • 標準入出力、エラー出力、リダイレクトやパイプ
  • シェルプログラミング、ファイル権限
  • tmuxによる複数窓の立ち上げ
• 通信の話
  • tcpdump, nc, telnetを使って通信を確認
  • 各種通信プロトコルやTCPとUDP
  • HTTP通信の基礎
  • DNS
  • hosts設定、ポートフォワード設定
• 実践系
  • niconico動画ランキング情報のRSSを取得してファイルに保存
  • cronによる定期実行
• git
  • バージョン管理とは
  • 分散型バージョン管理とgitの基本的な使い方
  • コンフリクトの解消の実践
  • Githubでのイシュー管理、ドキュメンテーション、Gist
  • ブランチ戦略、フォーク、プルリクエスト

第3章 - サーバーサイドプログラミング入門 -

辛い2章を終えたところで、ようやくWeb開発っぽい部分に着手していきます。
プログラミング的な要素も増えてくるので割と楽しめる内容かと思います。

オススメPoint

• SlackBotが作れるようになる
• 管理者機能の必要性や実装に触れている
• Herokuでお手軽にサーバーを立てる方法を学べる
• 脆弱性に関する解説と攻撃の再現、対策の実装について学習できる

第3章で学べるもの

• Node.js
  • ライブラリ、パッケージマネージャー
  • パッケージの作成
  • REPL
  • fs, Stream
  • 同期IO,非同期IO
• JavaScript応用
  • 連想配列、for-of
  • map functions
• アルゴリズムやパフォーマンス
  • フィボナッチ数列を求めるプログラムを書く
  • 再帰、メモ化、オーダー
  • timeコマンドやnode --profによる実行時間測定
• SlackのBot開発
  • Slackワークスペースの作成
  • yo, Hubot, CoffeeScript
  • CRUD
  • 例外処理
• Webアプリ作成
  • UI, URI, モジュール設計
  • Node.jsによるcreateServer
  • User-Agent
  • アクセスログ、ロギング
  • HTMLのフォーム
  • テンプレートエンジン
  • Basic認証によるログイン、ログアウト
  • Cookieとセッション管理
  • リダイレクト
  • ルーティング
  • データベース（PostgreSQL）
  • スタイル当て（Bootstrap）
  • 管理系機能の実装
  • HerokuでのWebサービス公開
• セキュリティ、脆弱性（実際に再現と対策まで行う）
  • XSS
  • パスワードアタック
  • セッションハイジャック
  • CSRF

第4章

第4章は実践編になります。
各種フレームワークの導入や、実践的な機能の実装をしていきます。

終了時の成果物として、『予定調整サービス』がWeb上に公開された状態でできあがります。
これまで学んできたものを総動員して、『実用的なアプリケーションを作っていくプロセス』を学びます。

オススメPoint

• 古すぎない枯れた（成熟した）フレームワークを学べる
• 今までの学習を裏付けにしながら実用的なWebアプリケーションを作れる
• ある程度作り込まれたサービスを題材にCIやリファクタリングの有用性を学べる

第4章で学べるもの

• 各種フレームワークの導入
  • Webフレームワーク（Express）
  • passportによるGitHubログインの実装
  • テスティングフレームワーク（mocha）
  • webpack
• 実践的なDOM操作（イベントハンドリングやアニメーション）
• AJAX/WebSocket（Socket.IO）
• CI（継続的インテグレーション）
• リファクタリング
• データベース操作
  • データモデリング
  • 基本的なデータ操作
  • JOIN
  • INDEXING
  • グルーピングと集計関数
  • トランザクション
• 予定調整サービスの制作
  • 実践的なサービス設計、データ設計、要件定義
  • 外部認証の実装とユーザーの保存
  • 「予定」の作成と一覧表示
  • 「予定」の更新、削除、ユーザーごとの権限判定
  • Header、Footerの共通化
  • スタイル当て、セキュリティ対策、Herokuでの公開