N予備校のプログラミング入門 Webアプリコース（2021年度版）を完走してみて得たもの

半年かけてやってみました。やる気があれば半年もかかりませんよ。

#Node.js

#Express

#スキルアップ

大村保貴

2022.01.25

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Webアプリケーション作りの基礎を学びたかったのでN予備校の「プログラミング入門 Webアプリ」コースをやってみました。所要時間や感想を書き残します。

N予備校とは

N予備校は月額1,100円でプログラミングコース以外にも、Webデザインや、数学、英語といった様々なコースをすべて利用できます。

プログラミングコースは、未経験者向けの「プログラミング入門 Webアプリ」コースや、Scalaを使った「実践大規模Webアプリ」コース、Node.js（Express）を使った「ニコニコ動画再現 Webアプリ」コースなど複数コースが用意されています。

その中から「プログラミング入門 Webアプリ」コースをやってみました。

きっかけ

インフラ中心に仕事してきたこともあり、Webアプリケーションを基礎から学びたいと思いつつ「なにからやればいいのかなー」と漠然と考えているようでいませんでした。興味を惹く良い題材があればと年中同じことを言っている気もするのですが半年前に以下の記事を読みました。

「今の自分は何からはじめれば効率良く学んでいけるのか」を判断できる知識もないことだけはわかっていました。今後、効率良く学習していくための判断材料を得るために、とりあえずやってみることにしました。

このときは3か月で終わらせるつもりではじめました。

Webアプリコース紹介

簡単にWebアプリコースで学べる内容を紹介します。

進め方

オンラインテキストと、テキストと対の授業動画をLiveまたは、オンデマンドで見ることができます。私はテキストベースで学習を進めました。

授業動画は講師がテキストを進めていく内容でした。テキストより詳細な解説を求め数本確認しましたが、求めている情報は手に入らなかったので以降は利用しませんでした。授業時間という枠の中で説明する都合、すべてを解説するのは時間の制約により難しいものかと思われます。

もくもくとテキストを見ながら手を動かし、動作を確認し、不明な点はググって調べて進めました。

孤独な予備校生ですね。Google is your friend.

コース内容

先ほども取り上げましたブログと、公式のまとめがあるのでご参照ください。個人的な感想と登場した技術要素を記載します。

第1章 - 2章

第1 - 2章はIT未経験者向けの内容で以下の基本的な部分を学びます。

HTML, CSS
JavaScript
Linux
vim
Docker
HTTP, DNS
Git, GitHub

ボリュームは3章以降に比べると薄くこの調子ならサクサク進み、すぐに終わるのでは？という気分で進められます。

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

第3章からプログラミング講座らしくなり学ぶ要素が急に増えます。進め方はテキストを見てNode.jsで実装（写経）して、動くものを確認しながら理解を深めていきます。動くものはHubotを使ったSlackボットと、掲示板を作成しました。

掲示板はBasic認証、データーベース（PostgreSQL）への保存、ユーザーをトラッキング用のCookie、Boostrapを使って掲示板のデザインおしゃれ化、脆弱性対応（XSS、パスワード総当り攻撃、セッション固定化攻撃、トラッキングIDの堅牢化）などの要素を盛り込み学べる要素が多いです。

Node.js基礎
Hubot（Slackボット）
Boostrap
Heroku

テキストのボリュームと覚えることが増え「これは時間かかりそうですね...」という気分で進めていきます。

はじめて扱うものが多く触りだけでも実際に動かして学べるのは良かったです。言葉と概念だけしか知らなかった頃に比べると周辺分野を学習するときに差がでるかなと思いました。

第4章実践サーバーサイドプログラミング

「プログラミング入門 Webアプリ」コースの本編です。

3章までは4章を進めるための準備でした。そして、4章からすべてを理解するのが難しくなります。

調整さん的なスケジュール調整アプリを作成します。アプリ名は予定調整くんと言いそのままですね。Node.jsのフレームワークExpressを使用し各種機能、実装（写経）して、動かして確認しながら進めます。

Express（Webフレームワーク）
OAuth2.0を使った外部認証
- Webアプリのログイン認証にはGitHubのユーザ認証情報を利用します
Jest（テストティングフレームワーク）
- テストも書いていきます
webpack
jQuery
AJAX
PostgreSQL
- データモデリングも学びます
Boostrap
Heroku

テキストで事細かに解説されているわけではなく、気になったことは適時調べる必要があります。（3章以前にも同じことは言えます）

テキストを進めるうえでは知らないままでも課題をこなしていけます、基本写経ですから。

ここは未経験者に過剰に情報を与えない意図があるのかと思います。テキストの内容を考慮すると概念だけを知っておき頭にインデックスをはっておくくらいがよい落とし所かなという感想です。

掘り下げて学びたいなら、より適した他の学習教材を探すことが正解だと思いました。なにより、調べるのに時間を取られ4章完走する前に力尽きかねません。

そして、掘り下げて勉強しないと身にならない要素が数々登場しました。最たるものはデータモデリングでした。専門に勉強したうえで、おそらく正解はないので経験積まないと良い設計は難しく、一朝一夕でどうにかできるものではないなという印象です。その他Webアプリの脆弱性対応を含めたセキュリティ対策や、テストの書き方など今後学習しておきたい個人的な課題を見つけることができました。

不足している知識・分野を洗い出すことができたのが全編通しての成果だったように思えます。

その他

並行して読んだ本

Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus) | 山本陽平 |本 | 通販 | Amazon
- Webの歴史から知りたかったのと、Web API本を読むための下準備
Web API: The Good Parts | 水野貴明 |本 | 通販 | Amazon
- Web APIの設計とはなにか確認しておきたかった

参考にして良かったリンク

所要時間

土日休日を中心に3カ月で終わらせる計画だったのですが半年かかりました。3章から「なんもわからん」を調べるのに疲れ、月に3時間しか進められていない時期もありました。費用は半年なので技術書2冊分相当ですね。

項目	時間
第1章	6
第2章	6.5
第3章	20
第4章	22.5
合計	55

半年かけて終わった感想は短期集中でやり切ってしまった方がお財布にもモチベーション面でも良かったように思えます。モチベーションの維持が一番難しかったです。

なにより大切なのは好きな気持ですかね。時の流れで好きだった気持が薄れていきました、悲しいですね。

学習は優先順位がめちゃくちゃ重要。
次の①→②→③→④の優先順位でやると、質の高いスキルを素早く学べる。 pic.twitter.com/VTWK3dTIF6

— ふろむだ (@fromdusktildawn) January 18, 2022

それでも感覚は掴めた気がします。

完走してから思ったこと

Udemyの様な買い切り型の学習コンテンツを利用したことはありましたが、サブスクリプション型ははじめてでした。

あとから見直したいなと思ったときにテキストを読み返したければ課金が発生するのは盲点でした。

この先頻繁に使う技術であれば入門書の内容見直すことは少ないかもしれません。しかし、私の場合は普段使うことない技術要素が多く、必要になとき振り返ろうと思っても気軽にテキストは見れないとなります。ここが技術書を買ったり、買い切り型の学習コンテンツとは異なりますね。

解説のあるテキストはありませんが、実習内容のソースコードはGitHubで公開されているので見直すことはできます。

Programming Education (progedu)

本当に大切だったのは日々のアウトプットだったのではないかと反省しました。

感想

ほぼ0の状態からなにをやってよいかわかりませんでした。Webアプリケーション開発の基礎の基礎に触れ、今後の学習すべき方向を確認できたのが個人的な収穫です。あくまでも入門コースなので深く理解できるような学習コンテンツではありません。実践的な内容を求めているのであれば他のコースまたは、別の学習コンテンツなどをオススメします。

私と同じ様なインフラエンジニアでアプリ開発とは縁がなかった方は、なにかを掴むきっかけは得られるのではないかと思います。

今後は本業の勉強と並行して不足していると感じた分野を個別に勉強したり、テストの重要性がわかったので興味本位で深堀りしていきたいなと思います。きっと本業にも良い影響があると信じて。