プログラミング初心者です。第二引数に関数

Question

ボールドテキストjavascriptでスクレイピングをしようと思い、あるサイトからとってきた構文です。

下記その構文:
const puppeteer = require('puppeteer');

const scrapeing_proengineer = async () => {
const browser = await puppeteer.launch();

// プロエンジニアのエンジニア転職ガイドを開く
const page = await browser.newPage();
const url = 'https://proengineer.internous.co.jp/content/career/';
await page.goto(url,{ waitUntil: 'domcontentloaded' });

// 各記事のタイトルを取得
const target = '#CONT_AREA > ul > li > div > div > h3';
const links = await page.$$eval(target, links => {
return links.map(link => link.textContent);
});

// 各記事のタイトルを一覧で出力しブラウザを閉じる
links.forEach( function( item ) {
console.log( item );
});
browser.close();
}
scrapeing_proengineer();

質問:
const links = await page.$$eval(target, links =>
のコードで$$eval(targetの後に,function(links)の部分が理解できません。

わからない部分がメソッド？($$eval)のあとの引数がtargetという変数であるという理解ですが、その後に関数がなぜ来るのかがわかりません。

全くの初心者なので質問がわからないかと思いますが自分でできる質問の説明がこれが限界です🙏
よろしくお願いいたします。

Comments

[hoshi-takanori]

ブラウザ側で、第一引数で querySelectorAll した結果を配列にして、第二引数の関数 (をシリアライズしてブラウザ側で復元したもの) に渡して、その結果を返すようですね。
https://pptr.dev/api/puppeteer.page.__eval

Answer 1

簡単に言うと、targetで指定されたhtml要素に対して行う加工処理を第2引数に記載します。

$$eval()はPuppeteerのメソッドで、引数に指定したセレクターでDOM要素を取得し、コールバック関数を呼び出してそのDOM要素に対して処理を行います。
第2引数のコールバック関数は、取得したDOM要素の配列を引数に取り、何かしらの処理を行います。

例えば、あるWebサイトで以下のようなHTMLがあった場合、

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

次のように$$eval()を使用することができます。

const target = 'ul > li';
const processedLinks = await page.$$eval(target, links => {
  console.log(links) // ★配列でliのdomが出力される
  // => [
  //         <li>Item 1</li>,
  //         <li>Item 2</li>,
  //         <li>Item 3</li>
  //       ]
  return links.map(link => link.textContent);
});
console.log(processedLinks);
//=> ["Item 1", "Item 2", "Item 3"]

上記のコードにおける$$eval()に渡された第2引数の関数は、linksという配列を引数として受け取り、その配列の各要素に対してtextContentプロパティを使用してを「Item 1」など文字箇所を取得して新しい配列を返します。その新しい配列がprocessedLinksに格納され、最後にconsole.log()で出力されます。

Answer 2

javascript では関数を引数として他の関数に渡すことができます。引数として渡す関数のことを「コールバック関数」と呼んだりします。

$$eval(targetの後に,function(links)の部分が理解できません。

第一引数が文字列(target)、第二引数が関数になっています。

質問文のコード内では、 forEach でも「引数に関数を渡す」という行為が行われていますが、こっちは理解できますか？

links.forEach( function( item ) {
  console.log( item );
});

「引数として関数を渡す」という点では、これも同じです。

Answer 3

偶然コンパイルエラーになっていないだけです。

Comments

[shinoharat]

なぜそう思われたのでしょうか？
APIドキュメントを見る限り、 Puppeteer の $$eval 関数は、第二引数にコールバック関数を受け取ることができます。
https://pptr.dev/api/puppeteer.page.__eval