ひとことでいうと

プログラミング学習中の人は、全部の教材を投げ捨てて、
N予備校の「プログラミング入門 Webアプリ」で学ぶのが良い。と思った。

コレです: https://www.nnn.ed.nico/pages/programming/
しかも現在 無料開放中!
メンターとして教えるときに超参考になりますし、メンティさんにもぜひコレで学んでほしい。

背景

こんにちは。mozyです。
このMENTAでもメンターとしてお教えしています。

プログラミング初学者の方を教える時って体系的に広く学べる教材がまぁないよねと思っていたところ、N予備校の教材が新型コロナウイルスの感染拡大に伴って無料開放されていることに気がつき、
そして、プログラミング入門の教材の中身を眺めてビビりました。

「コレ充実しすぎてるわ、、。なんというか諸々含めてコレで十分じゃん。マジで。」

コレは啓蒙せねばと思ってこの記事を書きました。
この要素を全部解説するのって流石に難しいでしょと思うぐらいに充実しています。
コレとMENTAのメンターさんがいれば入門はバッチリですね。
充実度とか、とにかく見ればわかるんですが、すごくマトモな教材です。(回し者かよって思われるかもしれないですが、ほんといい教材です) (最近よくある、入門者をカモにしてる情報商材の類ではない)

長いですが、学べることは最後にざっくり列挙してあります。

もっと詳しく

前提としては、未経験の高校生が、IT企業にWebエンジニアとして就職できるレベルになることを目指しているようです。
そしてドワンゴのエンジニアさんが解説しているとな。

想定学習時間が180時間とあるように、積み上げ式で学んでいくので時間は必要ですが、コレをきちんと学んだら基礎が身についていますと言えると思います。
IT企業でアルバイトやインターンする程度ならこれプラスアルファの何かで十分な気がします。 ( 僕はこの基礎が身についてる人なら喜んで一緒に仕事したい、、w

メンターさん向けとしてもおすすめ

例えば、環境構築やセキュリティ、Gitの話などは、記事を共有して解説するだけでは分かってもらいづらいと思いますが、この教材はそこも含めて解説してあるので良いです。
他にも、セキュリティや脆弱性、cookie、CSRFなど、パッとは説明しづらい概念も解説があるので教える際にも参考にできると思います。

学べることリスト

ものすごい充実度。
もちろんこのコース以外にも、大規模Webアプリを作って学ぶコースもあるようです。すごい。

「プログラミング入門 Webアプリ」で学べること一覧

  • Web ブラウザとは(Chrome, デベロッパーコンソール, alert)
  • はじめてのHTML(VSCode, HTML, Emmet)
  • さまざまなHTMLタグ(h, p, a, img, ul, tableタグ)
  • HTMLで作る自己紹介ページ(HTMLタグ組み合わせ, コンテンツ埋め込み)
  • はじめてのJavaScript(JS, ES6, エラー)
  • JavaScriptでの計算(値, 算術演算子, 変数, 代入)
  • JavaScriptで論理を扱う(論理値, 論理積, 論理和, 否定, 比較演算子, if)
  • JavaScriptのループ(ループ, for)
  • JavaScriptのコレクション(コレクション, 配列, 添字, undefined)
  • JavaScriptの関数(関数, 関数宣言, 引数, 戻り値, 関数呼び出し, 再帰)
  • JavaScriptのオブジェクト(オブジェクト, モデリング, プロパティ, 要件定義)
  • はじめてのCSS(CSS, セレクタ, background-color, border)
  • CSSを使ったプログラミング(transform, id, class)
  • Webページの企画とデザイン(企画, 要件定義, モックアップ, 16進数カラーコード)
  • 診断機能の開発(const, let, JSDoc, インタフェース, 正規表現, テストコード)
  • 診断機能の組込み(div, 無名関数, アロー関数, ガード句, truthy, falsy)
  • ツイート機能の開発(リバースエンジニアリング, URI, URL, URIエンコード)
  • LinuxというOS(VirtualBox, Vagrant, Ubuntuのインストール, OS, CUIの大切さ)
  • コンピューターの構成要素(ノイマン型コンピューター, プロセス, lshw, man, ps, dfの使い方)
  • ファイル操作(pwd, ls, cd, mkdir, rm, cp, mv, find, ホストマシンとの共有ディレクトリ)
  • 標準出力(標準入力、標準出力、標準エラー出力、パイプ、grep)
  • vi(vimtutor)
  • シェルプログラミング(シバン, echo, read, 変数, if)
  • 通信とネットワーク(パケット, tcpdump, IPアドレス, TCP, ルーター, ping)
  • サーバーとクライアント(tmux, nc, telnet)
  • HTTP通信(http, https, DNS, hostsファイル, ポートフォワーディング)
  • 通信をするボットの開発(cron, ログ収集)
  • GitHubでウェブサイトの公開(GitHub, リポジトリ, fork, commit, 情報モラル)
  • イシュー管理とWikiによるドキュメント作成(Issues, Wiki)
  • GitとGitHubと連携(git, ssh, clone, pull)
  • GitHubへのpush(init, add, status, インデックス, commit, push, tag)
  • Gitのブランチ(branch, checkout, merge, gh-pages)
  • ソーシャルコーディング(コンフリクト、プルリクエスト)
  • Node.js(Node.js, nodebrew, Linux, REPL, コマンドライン引数, プルリク課題)
  • 集計処理を行うプログラム(集計, 人口動態CSV, Stream, for-of, 連想配列Map, map関数)
  • アルゴリズムの改善(アルゴリズム, フィボナッチ数列, 再帰, time, プロファイル, nodegrind, O記法, メモ化)
  • ライブラリ(ライブラリ, パッケージマネージャー, npm)
  • Slackのボット開発(slack, mention, bot)
  • HubotとSlackアダプタ(hubot, yo)
  • モジュール化された処理(CRUD, オブジェクトライフサイクル, filter)
  • ボットインタフェースとの連携(モジュールのつなぎ込み, trim, join)
  • 同期I/Oと非同期I/O(同期I/O, 非同期I/O, ブロッキング)
  • 例外処理(try, catch, finally, throw)
  • HTTPサーバー(Web, TCPとUDP, Webサーバーの仕組み, Node.jsのイベントループ, リスナー)
  • ログ(ログ, ログレベル)
  • HTTPのメソッド(メソッド, GET, POST, PUT, DELETE, CRUDとの対応)
  • HTMLのフォーム(フォームの仕組み, form, input)
  • テンプレートエンジン(テンプレートエンジン, jade)
  • HerokuでWebサービスを公開(Webサービスの公開, heroku, dyno, toolbelt, login, create, logs)
  • 認証で利用者を制限する(認証, Basic認証, Authorizationヘッダ, ステータスコード)
  • Cookie を使った秘密の匿名掲示板(Cookie, Set-Cookie, expire)
  • UI、URI、モジュールの設計(モジュール設計, フォームのメソッド制限, リダイレクト, 302)
  • フォームによる投稿機能の実装(モジュール性, textarea, 303)
  • 認証された投稿の一覧表示機能(パスワードの平文管理の問題, 404, テンプレートのeach-in)
  • データベースへの保存機能の実装(データベース, PostgreSQL, 主キー)
  • トラッキングCookieの実装(トラッキング Cookie, IDの偽装, Cookie の削除)
  • 削除機能の実装(データベースを利用した削除処理, 認可, サーバーサイドでの認可)
  • 管理者機能の実装(Web サービスの管理責任, 管理者機能の重要性)
  • デザインの改善(Bootstrap, レスポンシブデザイン, セキュリティの問題があるサイトを公開しない)
  • 脆弱性(脆弱性, 脆弱性で生まれる損失, 個人情報保護法, OS コマンド・インジェクション)
  • XSS脆弱性の対策(XSS, 適切なエスケープ処理, リグレッション)
  • パスワードの脆弱性の対策(ハッシュ関数, メッセージダイジェスト, 不正アクセス禁止法, パスワードジェネレーター, 辞書攻撃)
  • セッション固定化攻撃脆弱性の対策(セッション, セッション固定化攻撃, ハッシュ値による正当性チェック)
  • より強固なセッション管理(推測しづらいセッション識別子, 秘密鍵)
  • CSRF脆弱性の対策(CSRF, ワンタイムトークン)
  • 安全なHerokuへの公開(脆弱性に対する考え方, HTTPの廃止)
  • Webフレームワーク(Express.js, フレームワーク導入, 簡単なAPI, セキュリティアップデート, Cookie パーサー, ミドルウェア, 外部認証, ロガー)
  • ExpressのAPI(app, Properties, Request, Response, Router)
  • GitHubを使った外部認証(Passport, OAuth)
  • テスティングフレームワーク(Mocha, レッド, グリーン, リファクタリング)
  • 継続的インテグレーション(CircleCI)
  • クライアントのフレームワーク(Webpack, babel, Chrome 以外のブラウザでもES6)
  • DOM操作のフレームワーク(jQuery, jQueryアニメーション, this)
  • AJAX(jQuery.ajax, クロスドメイン, 同一生成元ポリシー, x-requested-by, CORS)
  • WebSocket(WebSocket, WebSocketの状態遷移, Socket.io)
  • RDBとSQL(DDL, DCL, CREATE, DROP, INSERT, DELETE, UPDATE, WHERE)
  • データモデリング(リレーショナルモデル, 正規化)
  • テーブルの結合(外部結合, 内部結合, 片側外部結合, JOIN ON)
  • インデックス(インデックス, 複合インデックス, Bツリー)
  • 集計とソート(SUM, COUNT, ORDER BY, GROUP BY)
  • 「予定調整くん」の設計(要件定義、用語集、データモデル、URL設計、モジュール設計、MVC)
  • 認証とRouterモジュールの実装(Mocha, supertest, passport-stub, モックテスト)
  • 予定とユーザーの保存(セキュリティ要件, UUID, 複合主キー)
  • 予定とユーザーの一覧の表示(非同期処理, Promise, then)
  • 出欠とコメントの表示(入れ子の連想配列, Promise.all, 子どもからデータを消す)
  • 出欠とコメントの更新(Promiseチェイン, リファクタリング)
  • 予定の編集と削除(要件の衝突, 関数の再利用)
  • デザインの改善(this, グローバルオブジェクト)
  • セキュリティ対策と公開(X-Frame-Options, Herokuの環境変数)

まとめ

おうちで勉強するには最適な日々が続きそうですし、学んでみるといいかもしれませんね。