開発環境
Docker Composeによる開発環境の構築(TypeScript,Node.js,Redis,Elasticsearch) - なになれ
https://hi1280.hatenablog.com/entry/2018/12/16/105201
ひとまず、こちらをベースに試した
インフラ
Puppeteerの使い方(スクレイピング, フロントテストで活用) - わくわくBank
https://www.wakuwakubank.com/posts/620-javascript-puppeteer/
lambdaならwebsocketを使う
chroniumを使うなど切り替えできるっぽい
waitForNavigationが有効なパターンなど理解しないずれる
PuppeteerによるヘッドレスChromeの使い方 evaluate | iwb.jp
https://iwb.jp/puppeteer-headless-chrome-evaluate/
特殊文字があるID名の指定が若干ややこしい
page.typeではそのままで使えたが、page.$ではエスケープ（二重にエスケープ）する必要があるっぽい
querySelectorというのを使っていたり、内部的な事情を把握すれば整理できるっぽい
Puppeteerの使い方(スクレイピング, フロントテストで活用) - わくわくBank
https://www.wakuwakubank.com/posts/620-javascript-puppeteer/
puppeteerに限らないが型の指定で迷って妥協した
puppeteer.Pageやelasticsearch.Clientをインスタンス変数にしてみたが、
インスタンスの保持するプロパティに対してコードをうまく追いかけられなかった
一部、importでうまく書けなかった
// const launchChrome = require('@serverless-chrome/lambda');
// const CDP = require('chrome-remote-interface');
コンストラクタにasyncを設定しようとして困った
あまりいい解決をしなかった気がする
decoratorとか試してみたけど違った
いろんな指定方法
puppeteerでの要素の取得方法 - Qiita
https://qiita.com/go_sagawa/items/85f97deab7ccfdce53ea#%E4%B8%80%E3%81%A4%E3%82%BB%E3%83%AC%E3%82%AF%E3%82%BF%E3%83%BC%E3%81%AE%E4%B8%80%E3%81%A4%E3%81%AE%E8%A6%81%E7%B4%A0%E3%82%92%E3%81%A8%E3%82%8B
取得した後でさらに絞り込み
Puppeteerで page.$(selector) で絞り込んだ要素から更に子要素指定を行う - PhpStormと僕
http://vexus2.hatenablog.jp/entry/puppeteer_selector
HowTo
puppeteerでスクレイピング - Qiita
https://qiita.com/tomi_shinwatec/items/a68cf7840c3da002c6e0
puppeteerでよく使うであろう処理の書き方 - Qiita
https://qiita.com/rh_taro/items/32bb6851303cbc613124#value%E3%81%AE%E5%8F%96%E5%BE%97
Puppeteerメモ ：： Chrome | Refills
https://syon.github.io/refills/rid/1516155/
ワンステップ高い使い方
MutationObserverを呼ぶ
Monitor for text change in an element · Issue #2945 · GoogleChrome/puppeteer
https://github.com/GoogleChrome/puppeteer/issues/2945
ベースにした
JavaScriptのMutationObserverでDOMの変化を監視する方法 - Qiita
https://qiita.com/munieru_jp/items/a6f1433652124a2165e4
アロー関数でシンプルに。
十七章第一回 MutationObserver — JavaScript初級者から中級者になろう — uhyohyo.net
https://uhyohyo.net/javascript/17_1.html
MutationObserver自体の説明がよかった
【DOM基礎】要素内容の取得・設定／ノードの作成・挿入・削除 - Qiita
https://qiita.com/KDE_SPACE/items/3c4b52d077b8eabbe670
domの再学習
JSHandleってなんだろう
未解決
puppeteer/api.md at master · GoogleChrome/puppeteer
https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#jshandleaselement