aya nakahara

生活について考えるブログ

デベロッパーツールの Consoleを使ってCSVを生成する

やりたいこと

  • FAQの調査を行っており、FAQの質問の一覧を取得しCSVとして取得したい
  • CSVクリップボード にコピーしたら、Airtableに格納したい

例として使用するページ

goope.jp

取得する

質問はa要素でコーディングされており、faq__article__caption というクラスが振られていました。

デベロッパーツールの Consoleを使ってCSVを生成する | ayanakahara

試しにNodeListとして取得してみます。

document.querySelectorAll(".faq__article__caption")

NodeList(157)と返ってきました。 プロパティを覗いてみると、innerText に質問が入っていました。

これら157個の質問をCSV形式に整形したいです。

質問1
質問2
質問3
...
質問157

上記のフォーマットで出力し、Airtableにインポートした際は以下のような感じにしたいです。

質問1
質問2
質問3
...
質問157

コマンドライン APIを使用する

先ほども書いた通り、querySelectorAll はNodeListを返却するので反復処理の際は配列に変換する必要がありました。

そこで、コマンドライン APIを使用して、配列を返却するようにします。

$$(".faq__article__caption")

すると、配列を返却してくれます。

developers.google.com

以下のコマンドを実行してみます。

$$('.faq__article__caption')
  .map(e => e.innerText)
  .join('\n')

謎の改行が入ってしまっているので、取得した innnerTextから空白を除きます。

$$('.faq__article__caption')
  .map(e => e.innerText.replace(/\s+/g, ""))
  .join('\n')

綺麗に整形して取得できました。

これらをクリップボード にコピーします。

copy(
$$('.faq__article__caption')
  .map(e => e.innerText.replace(/\s+/g, ""))
  .join('\n')
)

Airtableにインポート

もしくは、始点となるセルを選択してペーストでも綺麗に挿入されます。

このように綺麗に挿入することができました✨