質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
スクレイピング

スクレイピングとは、公開されているWebサイトからページ内の情報を抽出する技術です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

3回答

751閲覧

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

bananaman44

総合スコア0

スクレイピング

スクレイピングとは、公開されているWebサイトからページ内の情報を抽出する技術です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1グッド

1クリップ

投稿2023/03/19 16:02

ボールドテキスト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という変数であるという理解ですが、その後に関数がなぜ来るのかがわかりません。

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

natsume2233👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoshi-takanori

2023/03/19 19:46

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

回答3

0

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

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

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

html

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

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

js

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

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

投稿2023/03/19 19:57

natsume2233

総合スコア225

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

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

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

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

js

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

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

投稿2023/03/20 00:27

shinoharat

総合スコア1685

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

投稿2023/03/19 21:35

MOUSHINDEYARU

総合スコア9

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shinoharat

2023/03/20 00:30

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問