# JS 実習

- クラスとモジュール
- class 宣言とそれ以外のクラス定義
- prototype チェインは過去のものとして使うな
- ミックスイン (多重継承はナシ)
- EJS とそれ以外のモジュール
- EJS 以外は過去のものとして使うな
- モジュールと require
- 非同期処理
- all 含めて並列処理、フロー整理
- github/vercel/microCMS アカウントの作成は 10 日に指示

# Node/Express 実習

## Node.js/NPM 基礎

- Node.js とは何か
- バージョンと LTS リリースについて
- 毎年春に偶数バージョンが更新され 3 年サポート
- Current, Active LTS, Maintenance の違い
- 最新または一つ前の偶数バージョンが基本, Active LTS 以降の方が安定
- https://github.com/nodejs/Release
- package.json, node_modules
- README がないとかいうな。package.lock 読め
- npm
- Node とセットで入る npm 使え。初心者は迷うな。
- 代替選択肢としては yarn や pnpm など
- yarn は yarn.lock バージョン依存問題に注意
- pnpm は非対応ライブラリもあるし少し上級者向け
- yarn がいいのは歴史的な話で取りあえず npm
- npm レイオフ問題はその後 Github が買収で決着
- 参考: https://zenn.dev/hibikine/articles/27621a7f95e761
- dependencies の追加
- バージョン指定方法とバージョン依存問題
- バージョン指定は万能では無いことに注意
- 固定バージョンでもその依存先が非固定だったり
- package-lock.json, dependency の固定
- 俺の手元では動かない問題 1
- package-lock があればそれをインストール
- package.json と矛盾があれば package.json 優先した上で package-lock.json が上書きされる
- npm ci では node_modules 削除の上で package-lock.json でインストール、package.json との矛盾をエラー出力
- npm script
- 簡単にいくつか使ってみる
-
- node バージョン管理
- 俺の手元では動かない問題その2
- 生の node は削除していずれかのバージョン管理ツールでインストールした node だけにするのが実践的
- 古典的には nvm 一時期 nodeenv とかも
- 最近増えているのは n (ネーミングセンス嫌いだが)
- https://github.com/tj/n
- .node-version で指定する
- nvm 系は .nvmrc だが古典なので無視
- n 固有は .n-node-version もあるが無視
- Windows だと nodist か
- https://github.com/nullivex/nodist

### bin と npx

package.json への bin 項目の追加、npx での利用などは TIPS ではあるがあまり重要では無いと思うので割愛

## Express 基礎

- Express とは何か
- 比較対象: Fastify なども参考に
- get, listen でシンプルなサーバ
- ルーティング
- get/post メソッドの基本的なルーティング
- static 指定
- レスポンスヘッダの付与とブラウザでの確認
- CORS 対応
- express で複数オリジンサポート (ポート)
- fetch をシンプルに使ってみる (失敗)
- Access-Control-Allow-Origin 付与
- fetch からシンプルに使ってみる (成功)
- fetch を Content-Type ヘッダ付きで使ってみる (失敗)
- pre-flight とは何か
- OPTION メソッドにも Access-Control-Allow-Origin 付与
- fetch を Content-Type ヘッダ付きで使ってみる (成功)
- cors モジュールの利用
- 全API,個別API単位でのCORS対応
- express generator
- テンプレートエンジン pug
- pug の基礎と演習
- esj の方が良いかな？
-

## Express のミドルウェア

- Express のミドルウェアとは
- 基本、使い方
- http://expressjs.com/ja/resources/middleware.html
- 例: express での gzip 対応
- https://www.npmjs.com/package/compression

var compression = require('compression')
var express = require('express')
 
var app = express()
 
// compress responses
app.use(compression())

- brotli 対応や事前圧縮済み対応は割愛...
- compression では放置 https://github.com/expressjs/compression/issues/71
- 実際には CDN サーバに任せることが多い
- shrink-ray モジュール古すぎマイナーになりすぎ

- 参考: 事前圧縮済みstatic https://www.npmjs.com/package/express-static-gzip

## microCMS 10:00-12:00

1. 自己紹介（2分）
2. microCMSの紹介（10分）
3. microCMSでお知らせ一覧データを作成してみる（要アカウント登録）（20分）
4. Vue（またはSvelte）の紹介（20分）
- create-nuxt-app でつくる
6. 3で作成したデータをフロントに表示してみる（20分）
7. 自由にスキーマを変更し、それに合わせてフロントに表示してみる（20分）

## create-nuxt-app の中身

- ざっくり出来ているものの構成
- SSR, CSR, SSG
- SSG は定期更新ニュースくらいで済む場合には良いけど...
- API サーバ読みつつリアルタイムなら SSR でしょ
- SSR で microCSM API call
-

## デプロイ 13:00-14:00

- Vercel にデプロイする
- Netlify は SSR できないので今回は Vercel
- SSG なら Netlify でもよい
- next step: Lamda 的なことも出来るのよ

## microCSM x 自前サーバ

microCMS 向けの通信を別ポートで起動する前日作った express サーバを呼ぶ

## 〆

TBD

## 資料

Keynote (概要説明、座学) + Notion (code, ワークショップ)