バカは書かねば覚えない

webデザイナやってる。くそったれメモ。

フロントエンドの学習を頑張る3

前回(フロントエンドの学習を頑張る2)に引き続き頑張る。

Heroku にデプロイまでやったできたもののエラーで動かないので調べつつ解決した。

2019-10-21T21:58:32.061088+00:00 app[web.1]: TypeError: /app/views/index.ejs:9
2019-10-21T21:58:32.061112+00:00 app[web.1]: 7| </form>
2019-10-21T21:58:32.061115+00:00 app[web.1]: 8|
2019-10-21T21:58:32.061117+00:00 app[web.1]: >> 9| <% if (boardList.length) { %>
2019-10-21T21:58:32.061119+00:00 app[web.1]: 10|   <ul class="main-list">
2019-10-21T21:58:32.061122+00:00 app[web.1]: 11|     <% boardList.forEach(function(boardItem) { %>
2019-10-21T21:58:32.061124+00:00 app[web.1]: 12|       <li class="main-list__item">
2019-10-21T21:58:32.061126+00:00 app[web.1]: 
2019-10-21T21:58:32.061128+00:00 app[web.1]: Cannot read property 'length' of undefined
2019-10-21T21:58:32.061131+00:00 app[web.1]: at eval (eval at compile (/app/node_modules/ejs/lib/ejs.js:633:12), <anonymous>:12:22)
2019-10-21T21:58:32.061133+00:00 app[web.1]: at returnedFn (/app/node_modules/ejs/lib/ejs.js:668:17)
2019-10-21T21:58:32.061135+00:00 app[web.1]: at tryHandleCache (/app/node_modules/ejs/lib/ejs.js:254:36)
2019-10-21T21:58:32.061138+00:00 app[web.1]: at Object.exports.renderFile (/app/node_modules/ejs/lib/ejs.js:485:10)
2019-10-21T21:58:32.06114+00:00 app[web.1]: at View.renderFile [as engine] (/app/node_modules/ejs-mate/lib/index.js:227:7)
2019-10-21T21:58:32.061142+00:00 app[web.1]: at View.render (/app/node_modules/express/lib/view.js:135:8)
2019-10-21T21:58:32.061144+00:00 app[web.1]: at tryRender (/app/node_modules/express/lib/application.js:640:10)
2019-10-21T21:58:32.061147+00:00 app[web.1]: at Function.render (/app/node_modules/express/lib/application.js:592:3)
2019-10-21T21:58:32.061149+00:00 app[web.1]: at ServerResponse.render (/app/node_modules/express/lib/response.js:1008:7)
2019-10-21T21:58:32.061151+00:00 app[web.1]: at Query.connection.query (/app/routes/index.js:12:9)
2019-10-21T21:58:32.06145+00:00 app[web.1]: GET / 500 5.577 ms - 148

トップページにアクセスした時に500エラーになる。エラー内容見ると ejs が動いてない疑惑。 こちらの記事で Express4系では ejs-locals が動かないとあるので記事にある通り、ejs-mate に差し替えてみるも解決せず。 qiita.com ひたすら heroku express ejs でググって勘で試すが一向に解決の糸口が見つからない。
どうやらカスリもしていないようなので ejs が動いてない疑惑は一旦忘れる事にした。
他の原因を探るべく heroku logs --tail でエラーログをよく見る。次に気になったのはこれ。

2019-10-14T22:03:12.741708+00:00 app[web.1]: Warning: connect.session() MemoryStore is not
2019-10-14T22:03:12.741728+00:00 app[web.1]: designed for a production environment, as it will leak
2019-10-14T22:03:12.741731+00:00 app[web.1]: memory, and will not scale past a single process.
2019-10-14T22:03:14.756736+00:00 app[web.1]: /app/node_modules/mysql/lib/protocol/Parser.js:437
2019-10-14T22:03:14.756778+00:00 app[web.1]: throw err; // Rethrow non-MySQL errors

うん、not designed for a production environment。NOT! DESIGNED!
そうそう、だよね、思えばそうだよね。チュートリアルの中でDB作ってたよねローカル環境に。TablePlus で。うんうんそれ heroku のDBではやんなくていいんすかね?やんないとダメに決まってますよね。テーブルないから router.get() したところで呼び出せないですよね。
いや、最初から少しよぎってはいたんですけども。

で、TablePlus で Heroku に作ったDBに接続、ローカル環境で作ったのと全く同じようにテーブル構築したらふっつーに動いて嬉しかった。もうあほだと思った。
なんかエラーメッセージに leak memory とか単語だけ斜め読みしてるせいなんだけど、えっ?ただのサンプルアプリでそんなメモリー使う処理?なんてないはずだけどえっえっとか思って斜め上をググったりしてて、もーわかんないからやめだわこれー詰んだわーとか投げ出しそうになったけど、heroku のDBにテーブル作ってないって事に思い当たるまでだいぶかかった。

ま、そっすよねっていう… ログちゃんと読めってやつでした。

そして eslint でも少しつまずく。
eslint-config-airbnbチュートリアルに書いてあるモジュールの他にも必要なモジュールがあった。

$ npm install -g eslint eslint-config-airbnb eslint-plugin-react
npm WARN eslint-config-airbnb@18.0.1 requires a peer of eslint-plugin-import@^2.18.2 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-config-airbnb@18.0.1 requires a peer of eslint-plugin-jsx-a11y@^6.2.3 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-config-airbnb@18.0.1 requires a peer of eslint-plugin-react-hooks@^1.7.0 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-config-airbnb-base@14.0.0 requires a peer of eslint-plugin-import@^2.18.2 but none is installed. You must install peer dependencies yourself.

上記をインストールせよってことで。

$ npm install -g eslint eslint-config-airbnb eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-import eslint-plugin-jsx-a11y --save-dev

lintはローカルだけでいいのではと思ったので --save-dev つける。
あとどのモジュールだったか忘れたけど(eslint-plugin-react-hooks だったかな)バージョンを指定しないとダメなモジュールがあった。
eslint は動くようになったがルールが少し違うのかチュートリアルみたいに改行云々はエラーが出なかった。
チュートリアルみたいに手で直すのめんどくさって思ったら eslint --fix で自動的に修正してくれて便利。