変換しスタイルを当て、さらに目次を自動生成して表示する機能を実装します。ようなページ右側に表示されるやつのイメージです。目次をクリックすると該当見出しへページ移動する機能も実装します。変換するライブラリの候補は以下の通りです。スタイリングを自由に書き換え可能で、使い勝手は悪くない印象です。組み合わせるとコード表示のシンタックスハイライトも実現できました。記事のような見た目が実現できました。このライブラリの存在知らず、もっと早く気付ければよかったなぁ。メソッドなどが利用できるでしょう。オブジェクトに変換します。関数の中で次のようにコードを実装しました。...ところが次のようなエラーに遭遇しました。なってしまうのでしょうか。ファイルでは、次の関数をよく使用していると思います。ブラウザ側ではなくサーバー側で実行されるということです。存在しないクラスでした。クラスが見つからずエラーになるということでした。DOMParserこのエラーに対する解決方法は2つ考えられます。パーサーライブラリを利用する。メリットが失われてしまいます。今回は後者で実装を進めます。次のコマンドでライブラリ本体と型定義ファイルをインストールします。@types/jsdom基本的な使い方は次の通りです。メソッドが利用できるようになりました。タイトル名をパーセントエンコーディングした文字列が設定されていますね。属性に指定することでページ内リンクが実現できそうです。して関数コンポーネントへ渡すことができました。スタイリングを当てれば完成です。完成形はこのようになりました。タグでページ内リンクを埋め込んでおり、クリックすると該当のタグまでスクロールします。scroll-behavior要素で実現しています。要素で実現しています。一応コードも貼っておきます。jshttps://stackoverflow.com/questions/11398419/trying-to-use-the-domparser-with-node-jsあさくらーめん@フルスタックエンジニア仕事でも休日でも手を動かして何か作るのが好きな人です。フロントエンドを主軸に、バックエンド、HWものづくり系まで。本業はSIer、副業でWEBアプリケーションのFE/BE開発に参画しています。使うものはNextjs,React,Typescript,Nestjs,postgreSQL,typeormバッジを贈って著者を応援しようバッジを受け取った著者にはZennから現金やAmazonギフトカードが還元されます。バッジを贈るDiscussionあさくらーめん@フルスタックエンジニア仕事でも休日でも手を動かして何か作るのが好きな人です。フロントエンドを主軸に、バックエンド、HWものづくり系まで。本業はSIer、副業でWEBアプリケーションのFE/BE開発に参画しています。Proよくある質問LinksX(Twitter)GitHubメディアキットLegal利用規約プライバシーポリシ。