nodejs | HTMLをパースするライブラリとバックエンドでパースする理由

前提

NodeJSでバックエンドを担当しています。

知りたいこと(1)

DBに格納されるHTML文字列を取得し、バックエンドでHTMLのパースをすることになったのですが、
npmでHTMLパースライブラリを探しています、ポピュラーなライブラリはありますでしょうか。

知りたいこと(2)

パース【 parse 】

パースとは、文法に従って分析する、品詞を記述する、構文解析する、などの意味を持つ英単語。
e-words

という認識でいるのですが、サーバーサイドでHTML文字列をパースする理由が分かりません。
例えば、構文解析で間違っていたらエラーを出すこと、が主な理由になるのでしょうか。
もしご存知であればご教授頂けると幸いです。

( パースはブラウザ側でするものだと思っていた為、なおさら疑問に思っています）

maisumakun

2019/03/08 02:14

「DBに格納されるHTML文字列を取得し」とありますが、どこから取得するのでしょうか。

退会済みユーザー

2019/03/08 02:57

説明不足で申し訳ないです、私が実装しているのは、とあるAPIで、 MySQLのテーブルのhtmlフィールドに文字列が格納されているので、 APIリクエストのレスポンスとして、その文字列を返します。文字列中身が、以下のような文字列で、これはHTMLとしてパースできるものになります。 "<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><title>HTMLの書き方</title></head><body>INSERT_FORM <h1>HTMLの書き方</h1><p>はじめてのHTMLを作りました</p>INSERT_FORM </body></html>" お答えになっているでしょうか。

miyabi-sun

2019/03/08 03:32

MySQLには妥当と思われるデータが入っているべきなので、取り出したデータのエラーチェック等は一切不要です。 MySQLに不正なデータが混入されているのは相当まずい状況です。綺麗なデータに差し替えるバッチなどを使って綺麗に整えつつ、不正なデータが混入しないようにチェック処理をもっと厳密にしましょう。

退会済みユーザー

2019/03/08 03:39

> MySQLには妥当と思われるデータが入っているべきなので、取り出したデータのエラーチェック等は一切不要です。ありがとうございます、とても為になります！確かにその前提があるべきだと思いました。となると格納するときにそもそも厳格なチェックが必要なのですね！そもそもDBに入ってるデータが信用できるものであるべきですね！

行動規範の内容に同意します

回答2件

今回は「パースをすることになった」の下りが相当まずく大問題です。
「なった」というのは決定であり合意です。会議かなんかで決まったのですよね？

なんでやる内容も意味も知らないのにパースしましょうで合意しちゃったの？
なんで提案した奴に理由や何をするか聞かないの？

言った奴の気持ちを考えてくださいってそんなの国語の授業じゃないし、
問題として出すなら議事録全部出せって話で、出したら出したで守秘義務どうすんのって話になるし、
それをteratailで教えて下さいって教えられる訳ないでしょ！

まぁ、無知のまま丸め込まれて、後でパースを調べて「ん？？？」となってるんだと思います。
一旦「パースする意味もなさそうなのですが、どうして必要なのでしょうか？」と提案した人にボールを投げ返しましょう。

パースする必要がない？

MySQLには妥当なデータのみが格納されているべきだから
WebサーバはHTTPリクエストに見合った結果(文字列)を返すのが仕事だから

まず、MySQLというのは直で集計等を行うデータベースです。
全て妥当なデータのみが格納されているべきで、不正なデータは格納せず弾きましょう。
「不正なデータが多くて集計できないよ！」とかアホ丸出しです。

そしてWebサーバというものはHTTPリクエストを解析し、
GETメソッドならばパスとクエリを確認して適切な文字列を返すのが主な業務です。
MySQLに文字列が埋まっているならば、そのまま返せばよろしい。そういうものです。

私はエスパーなのでもう少し質問文の行間を読んでいきましょうか。

実はやっぱりパースする必要あったんじゃね？

じゃあなんで、先輩なり上司なり…誰が言ったかはどうでもいいですが、「パースしましょう」なんて言い出したんでしょうね？
先日の質問にXXXを埋め込むみたいな質問が多くありましたが、
それがダイレクトに関係しているんじゃないですか？

例えばMySQLに格納されているHTML文字列を取り出して、
hogeクラスの文字列に現在時刻を格納して欲しい…みたいな。

だったらcheerioを覚えましょう。
Node.jsのHTMLパーサ「cheerio」
このライブラリを使えばjQueryのような使用感でHTML的なStringを解析して、
特定クラスやID内の文字列を抽出したり、文字を埋め込んでHTMLを固め直すということが楽に行えます。

流石にこれ以上は質問文から逸れすぎなので控えますので、
合ってたらとりあえず目を通しつつ、cheerioの公式サイトやドキュメントにも目を通してみましょう。

サーバーサイドでHTML文字列をパースする理由が分かりません。

考えるとすれば検索エンジンの都合です。
JavaScriptの実行部分がSEOで評価されるかされないか分からないから、
最初から完成されたHTMLファイルが必要なんですよ。

例えJSの実行部分が評価される作りだったとしても、
何時、どこで、何が実行されたか分からないですよね。
DOMを作りかけのレイアウト崩れしまくった所でパシャっとスクショを取るように持っていって、検索エンジンのインデックスに組み込まれる可能性だってあります。
要するに怖い。

なのでReact.jsなんのJSフレームワークで、
シングルページアプリケーションを作るのがトレンドになっていますが、
なんでもかんでもSPAで作るとSEOのランク的に不安だしレンダリングに時間がかかるので、
予め初回表示用のHTMLを作っておく「サーバーサイドレンダリング」という技術が新しく生まれた程ですからね。

投稿2019/03/08 03:55

編集2019/03/08 04:11

miyabi-sun

総合スコア21158

退会済みユーザー

2019/03/08 04:45 編集

改めて休日に熟読とお礼のコメントさせていただきます。また、おっしゃる通り以前からの質問も関連しています。様々なことを踏まえ、今回の要件は、ユーザがHTML文字列をmySQLにPOSTするときに例えば<AIUEO></AIUEO>のような独自タグが「トップレベル」にあるか確認したいという要件になります。 (この質問入稿時はその確認をGET時に行おうとしていたが、 DBに期待しない文字列を格納すること自体誤りという気づきを miyabiさんからいただいてPOST時の方が望ましいと今は考えています) POSTされる文字列としてNGな例 ------　 <section id='hoge1'><AIUEO>ここがダメ</AIUEO></section> <AIUEO></AIUEO> <section id='hoge2'>...</section> <section id='hoge3'>...</section> というHTMLがあれば、トップレベルに POSTされる文字列としてOKな例　------ <section id='hoge1'>...</section> <AIUEO></AIUEO> <section id='hoge2'>...</section> <section id='hoge3'>...</section> <AIUEO></AIUEO> <section id='hoge3'>...</section> このようなことがしたいというのが具体的な質問にはなりました。その上でHTMLパースが1度必要そうですよね、今現在はHTMLの入れ子の階層を調べられるライブラリを探してます。

miyabi-sun

2019/03/08 04:46

そこ(MySQL)が刺さりましたか、ちょっと意表を突かれた形ですが先に進めたようでよかったです。こういうのは本番でやらかすとあまりよろしく無いんですが、わりとよくやらかしますね。こういうのはNode.jsで使い捨ての「駄目なデータを綺麗に整える」スクリプトファイルを作って修正するのがわかりやすいですかね。上司と相談して、バックアップを取った上でやりましょう。それと同時並行でバリデートを強化すれば良いシステムになるでしょうね。

行動規範の内容に同意します