N予備校の「サーバーサイドプログラミング入門」を終了 - プログラミング素人のはてなブログ

N予備校の ”【2020年度】プログラミング入門 Webアプリ” コースを終了しました。

第3章を終えたところまでは、以下の記事で紹介済みです。
s51517765.hatenadiary.jp

毎週日曜日（忘れていて翌日になったことや跳ばした週もありますが）にTwitterで進捗をTweetするようにしていました。
このようにすることで、土曜日に「あれ、今週なにも進めてない。」というときもちょっと頑張ろう、となります。
アウトプット駆動学習というものですね。

プログラミング入門webアプリコース始めて25週間第4章終了しました❗と思ったら付録が残ってる。進捗93％ #N予備校 pic.twitter.com/RTYOQmpwJf
— とりてん(プログラミング素人) (@s51517765) 2020年9月27日

第3章は素のJavascriptでサーバープログラミングをする、というものでしたが第4章はJavascriotに加えてExpressやAJAXというフレームワークを用いた、より高度なものになります。
このほかに、Bootstrap、JQuery、Github認証の導入などが出てきます。

4章の感想

・難易度
3章よりより複雑です、言うまでもないですね。
3章でJavascriptを丁寧に学習していれば問題はないでしょう。
・工数
3章が終わったのが6/21なのでここから3か月かかっています。
このコース全体では半年かかったことになります。
・最終的にはGitHub認証を用いてHerokuにwebアプリとして「予定調性くん」をデプロイします。

詰まったところ

chromeのデベロッパーツールで確認するときは、キャッシュが残っていることが多いので、強制再読み込みをする。

DEBUG=express-api:* PORT=8000 yarn start
以上のコマンドで起動させ、 Chrome で http://localhost:8000/ にアクセスします。 デベロッパーツールの Network タブを開き、さらに再読み込みをして localhost へのアクセスのリクエストヘッダを確認してみましょう。
レスポンスヘッダの中に、X-Powered-By:Express がなければ対応は成功です。

4章19節「p 作成者」のところが間違っている

extends layout

block content
  h4 #{schedule.scheduleName}
  p(style="white-space:pre;") #{schedule.memo}
-  p 作成者: #{schedule.user.username}               → 間違い
+  p 作成者: #{user.username}
  h3 出欠表
  table
    tr
      th 予定
      each user in users
        th #{user.username}
    each candidate in candidates
      tr
        th #{candidate.candidateName}
        each user in users
          td
            button 欠席

npx webpack でErrorが出る。

もしこのコードを実行してエラーが出たときは、代わりに
node node_modules/webpack/bin/webpack.js 
を実行してみてください。

と書かれているが、基本的にこちらを使えばよさそう。
かなり時間を使ったうえ最後にErrorがでてやり直すことになる。

2/4] Fetching packages...
info fsevents@2.1.3: The platform "linux" is incompatible with this module.
info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "linux" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
error An unexpected error occurred: "EPROTO: protocol error, symlink '../../../../browserslist/cli.js' -> '/home/vagrant/workspace/schedule-arranger-4021/node_modules/@babel/compat-data/node_modules/.bin/browserslist'".
info If you think this is a bug, please open a bug report with the information provided in "/home/vagrant/workspace/schedule-arranger-4021/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
undefin

小技

vagrantの起動はpower shell から以下のコマンドで呼び出しますが、これをPower Shell scriptにしておきます。

cd D:\vagrant\ubuntu64_19
vagrant up

メモ帳などで上記の内容を記述し、ファイル名をubt.ps1とします。
実行はPower Shellを管理者権限で起動して

.\ubt.ps1

とします。

まとめ

（実際には付録が残っていますが）N予備校の”【2020年度】プログラミング入門 Webアプリ” コースを終了しました。
サーバーサイドのプログラミングはなかなか良い教材がなく、アマチュアが書ているネット上の記事が少ないことが原因ではないか？と思いますが、専門的に学んだか仕事として関わっていないとなかなか触れることが難しい分野となっていると思います。
そんなサーバーサイドのプログラミングに体系的に触れられるこの教材はとても優れていると思います。
また、付録についてはサーバーサイドに限らず、GutHub Pagesにより詳しく触れていたり、NodeによるTwiiter Bot、ライセンスの種類（GNU
やMITといった）などにも触れられています。