プログラミング素人のはてなブログ

プログラミングも電気回路も専門外の技術屋の末端が勉強したことや作品をアウトプットするブログ。コードに間違いなど見つけられたら、気軽にコメントください。 C#、Python3、ラズパイなど。

N予備校の3章 「サーバーサイドプログラミング入門」を終了

Ubuntu サーバーレス

N予備校の3章 「サーバーサイドプログラミング入門」を終了しました。
まだ4章「実践サーバーサイドプログラミング」は残っていますが、いったんここで主に3章までを終わっての感想などを記しておこうと思います。

コースの詳細については↓の参考記事を参照ください。
s51517765.hatenadiary.jp

3章までの感想

・難易度
Javascriptまたはプログラミングが初めてであるとすると、3章はかなり難しいと思います。
写経で進めていくことはできますが、細かいJavascriptの文法についてはその意味を省略されている場合が多くあります。
自分で調べながら進める必要があります。
・工数
3章までで5～6時間/週ぐらいで３か月弱かかりました。なので60時間ぐらいでしょうか？
ただし、1章の簡単なところ（HTMLやJavascriptの基礎）は飛ばしています。
・扱われている内容
VirtualBox上のUbuntuで構築します。
体系的にJavascriptによるサーバーサイドを学べるのはとても良いと思います。
しかも、N予備校以外のツールは無料で使えるもの（Slack BotやHeroku、Githubなど）しか使いません。
3章では最終的にLogin認証付きの掲示板をHerokuでデプロイします。
「一般的なWeb企業においてアルバイトやインターンできるだけの実力が身につく」とされていますが、たしかにこの内容をすべて理解できればそれぐらいになると思います。
ただし、繰り返しになりますが、詳細を省略されている部分は自分で補うことが必要です。
・ここまででつかったディスク容量
14GBぐらいでした。

詰まったところ

私がここまで（3章まで）進めてみて何度となく調べなおしたところや、外部サイトで調べたところをここで紹介しておきます。
今後、同じところで躓いた人がぐぐってたどり着いてくれれば幸いです。
Windows特有の問題も含みます。

・$yarn installで失敗する(Windows でのvagrant固有らしい)。
→--no-bin-linksオプションを付加します。

$yarn install --no-bin-links
$yarn add **** --no-bin-links

初出には書いてあるけど、忘れがちです。

・Errorメッセージ : Cannot find module 'http-auth'

vagrant@ubuntu-bionic:~/workspace/secret-board-3028$ node index.js
internal/modules/cjs/loader.js:583
    throw err;
    ^

Error: Cannot find module 'http-auth'

→yarn installがされていない

・Cloneしたコードがテキストと異なる。.pugが.jadeになっている。
→ 作業ブランチが間違ってる。master-2020をチェックアウトします。

・webの内容とcloneした内容が違う。
→同上

・テキストを見ながら写経しているけど、バグっている。どこが間違っているかわからない。
→単元の最後に課題用のリポジトリがあって、その課題の完成形になっているので、これをCloneしてdiffしてみよう。
VS CodeでのJavascriptは文法のTypoも必ず拾ってくれるわけではないみたい。
なんかadd-inで対応できるかな？

・Errorメッセージ Server Error { Error: listen EADDRINUSE: address already in use :::8000

vagrant@ubuntu-bionic:~/workspace/secret-board-3028$ node index.js
Server Error { Error: listen EADDRINUSE: address already in use :::8000

→nodeのプロセスが残ってしまっているところにnodeを起動しようとしている。。
→ps aux | grep node （Linuxにおいて、"node"を含むプロセスを表示する）
→kill -9 xxxx でkillしてから再度。（そのプロセスをプロセスIDを指定して殺す）

・3章29.XSS脆弱性の対策で脆弱性を体験するサンプルコード

こんにちは、クラスの人達だけの匿名掲示板、盛り上がるといいですね?(??????)?
<script>
  window.onload = function() {
    document.getElementsByTagName('h2')[0].innerHTML =
      '新規投稿<small>(本名を入力した箇所は自動的に可愛い絵文字に変換されます??)</small>';
  };
</script>

→ 改行とスペースを削除して入力しないとXSSが実行されない。

こんにちは、クラスの人達だけの匿名掲示板、盛り上がるといいですね?(??????)?
<script>window.onload=function(){document.getElementsByTagName('h2')[0].innerHTML='新規投稿<small>(本名を入力した箇所は自動的に可愛い絵文字に変換されます??)</small>';};</script>

・Errorメッセージ
console.log(`Password is "${line}"`); → `と'の違いを見落としやすい（バッククォートとシングルクォート）

・intro-curriculum-3024のテキストのコードが間違っている
25．削除機能の実装のコード
誤植（他の単元にもあった気がする）

×  Post.findByPk(id).then((post) => {
〇 Post.findById(id).then((post) => {