Node.js : Promise の中で配列に対する処理を行ったあとにresolveしたい

Question

Promiseオブジェクトのなかで配列を返したいのですが、その前に配列に対して処理を行ってから返したいです。

const makeAgenda = (cheerio_object) => {
  return new Promise((resolve, reject) => {
    console.log("In makeAgenda");
    const $ = cheerio_object;
    const agenda = [];
    $('div.article-main section').map((i, node) => {
      return $(node).find('h2').map((i, h2) => {
        const array = {
          "h2": $(h2).text(),
          "h3": []
        }
        const count = $(node).find('h3');
        if (count.length >= 1) {
          $(node).find('h3').map((i, h3) => {
            return array.h3.push($(h3).text());
          })
        }
        return agenda.push(array);
      })
    })
    resolve(agenda);
  })
}

cheerio_objectというのは、cheerioというライブラリを用いて、Node.js上でhtmlを扱う際に、jQueryのように扱えるようにしたものです。

agendaという配列を定義して、htmlよりh2,h3要素をここに抜き出し、目次の配列をつくり、それを返すといった処理を行いたいと思っています。

現状のコードでは、agendaが未処理のまま返ってしまいます。
Promiseについて絶賛学習中の身なのですが、どうしてもこれを解決することができず困っています。配列、というかmapを行う際は、Promise.allを使った方が良い的な記事も見かけたのですが、いまいち自分のやりたい処理を実現できず。。

ご指南いただきたいです。
よろしくお願いします。

Answer 1

agendaが未処理に関してはどうやって検証しましたか？
ところどころ怪しいコードと感じる箇所はあるものの、動きはしそうですが……
ただまぁ、問題があったとしてももう少しcheerioのメソッドの使い方を勉強すれば普通に解決することだと思います。

そしてcheerioのmapメソッドは同期的な処理なのでPromise不要というかむしろ邪魔です。
原因はこれの外側の使い方にある可能性が高いと思います。

---

以上を踏まえてmapの解説

mapには地図という意味の他に、
工場で上から雛形を押さえつけて製品を作ってしまうという意味があります。
プログラミングに於けるmapは後者の意味合いであり、配列の各要素全てにA→Bに変換する関数をあてがって、同じ要素数の別配列を作り直すというものを指します。
探せばJavaScript、PHP、Ruby、Python、Haskell、Elixir…etc、と今どきの言語ならば探せば結構見つかります。

この観点で見ていきましょう。
例えば[].push(123)の戻り値は[123]ではなく、新しい配列の要素数である1ですが、mapの動きとしてふさわしいものですか？

もしこの処理を軸に書き直すのであればeachを使いましょう。
こちらは日本語訳すると「各々」を表すもので、戻り値を使わないので捨てるという思想になっています。
下記はeachを軸に書き直したものになります。未検証ですがそこそこいい感じのコードになったんじゃないかと思います。

※Promise？同期的な関数なので即刻削除

// もし文字列を引数にする関数が作りたかったらstringという名前にするの？違うよね?なら最初から$でおｋ
// かっこつけてHaskell風の表記で書いてみる
// makeAgenda :: CheerioObject -> Object
const makeAgenda = $ => {
  // PromiseでなくA to Bの関数になったんだからconsole.logとかいらないよね
  const agenda = [];
  // 慣習として使わない引数は`_`で受ける
  $('div.article-main section').each((_, node) =>
    agenda.push({
      'h2': $(node).find('h2').text(),
      // こことかまさにmapの使い所さんじゃない？
      'h3': $(node).find('h3').map((_, h3) => $(h3).text()).get()
    })
  );
  return agenda;
}

Comments

[dwayne_johnson]

すみません、エラーに関しては別の箇所に問題がありました。
お騒がせしました。

同期的、非同期的の区別が甘かったです。
お手直しいただけたことが、大きく勉強になりました。
コード中のコメントも、引数の文字の考え方や慣習など、初歩的な箇所ではありますが至らないところがあったものをご指摘いただけたため、学びになりました。

ありがとうございました。

Answer 2

コード上はあっているように見えます。makeAgendaをそのまま試しに実行しましたがちゃんと取れるようです。

const cheerio = require('cheerio')
makeAgenda(cheerio.load(`
<div class='article-main'>
<section>
<h2 class="title">Hello world1</h2>
<h3 class="title">Hello world2</h3>
<h3 class="title">Hello world3</h3>
</section>
</div>
<div class='article-main'>
<section>
<h2 class="title">Hello world4</h2>
<h3 class="title">Hello world5</h3>
<h3 class="title">Hello world6</h3>
</section>
</div>
`)).then(r => {console.log(r)})

結果

> [ { h2: 'Hello world1', h3: [ 'Hello world2', 'Hello world3' ] },
  { h2: 'Hello world4', h3: [ 'Hello world5', 'Hello world6' ] } ]

おそらく処理対象のHTMLに期待する要素がないのではないでしょうか？(class='article-main'など)

Comments

[dwayne_johnson]

すみません、別の箇所に問題がありました。。。

わざわざ試していただき、ありがとうございました。
お蔭様で、別の箇所のエラーを疑うことができ、無事解決しました。
おさわがせしました。