ep.161『大規模ドキュメント特有の課題を OSSコントリビューションで解消！nuxt/content のパフォーマンス改善』 | UIT INSIDE

2024/08/14 に公開1175 views

このエピソードについて

@potato4d が @coffeephile に、Nuxt.jsの周辺ライブラリーに対するOSSコントリビューションについて話を聞きました。

ゲスト

@coffeephile
- LINEデベロッパーサイトの開発担当

Nuxt Contentについて

Nuxt Contentは、Nuxt.jsのモジュールであり、マークダウンコンテンツをウェブサイトのページとしてレンダリングするために使用される。
ローカルホストでの開発時にパフォーマンス問題が発生し、特にページ数が多い場合に顕著であった。

パフォーマンス改善の経緯

ローカルホストで開発した際、ページ間の移動が遅くなる問題が発生。
問題はキャッシュが効かないために発生しており、ホットリロードのためにキャッシュが無効化されていた。
nuxt/content 側のキャッシュを有効化し、ファイル変更時にキャッシュを削除することで、パフォーマンスとホットリロードの両方を実現。

https://github.com/nuxt/content/pull/2675

コントリビューションの詳細

@coffeephileは同僚の喜多さんと協力して問題を特定し、解決策を考案。
プルリクエストを出してから4日でマージされ、迅速に対応された。
月1回のリリースサイクルにより、実際のリリースまでには少し時間がかかった。

今後の展望

LINEデベロッパーサイトの技術スタックをNuxt 3に移行するプロジェクトが進行中。
新しい技術スタックに移行することで、パフォーマンスの改善も期待されている。
内部では新しい技術スタックを使用しているが、外部リリースはまだこれから。

結論

Nuxt Contentへのコントリビューションを通じて、LINEデベロッパーサイトのパフォーマンス問題を解決。
今後のリリースで、利用者とメンテナンス担当者にとって良い環境を提供することを目指す。
LINE Yahooのフロントエンド開発者コミュニティでは、今後もフロントエンドに関する情報を公開していく。

採用について

使用素材・クレジット

BGM&SE

音声書き起こし

1. オープニング 00:00

@potato4d 00:08
皆さんこんにちは。uitのpotato4dです。ユーザーインターフェイスとテクノロジーを愛する開発者のためのポッドキャスト UIT INSIDE、今回もやっていきたいと思います。今回はですね、OSSのコントリビューションをテーマにですね、実際にNuxt.jsの周辺ライブラリーにオフィシャルなライブラリーにコントリビューションをしたロマンさんを招待して、その流れを追っていきたいと思います。ロマンさん、本日はよろしくお願いいたします。

@coffeephile 00:34
はい、よろしくお願いします。

@potato4d 00:36
では早速。ロマンさん、自己紹介をお願いしてもいいですか。はい

2. ゲスト自己紹介 00:37

@coffeephile 00:40
い。わかりました。では、ロマンと申します。私はLINEデベロッパーサイトという、私たちLINEが持っている開発者向けのプロダクトのドキュメンテーションが載っているサイト、そのサイトの開発を担当しております。よろしくお願いしま

@potato4d 00:55
はい、よろしくお願いいたします。結構デベロッパー向けなんで、色々あれですね、情報とかドキュメントとかの開発多めなプロダクトとは一味違った部署っていう風な感じですね。

@coffeephile 01:06
そうですね。周りのチームは結構そのプロダクト自体の開発していますが、私のチームはそのプロダクトについてドキュメンテーションを変えてるチームで、ライターさんが多いですが、私みたいなフロントエンドエンジニアが行って、そのサイトの開発自体もやっているわけですね。な、

@potato4d 01:23
なるほど。ちょっと今回の内容にも噛んできそうなんで、ぜひぜひ後ほどお聞きできればと思います。はい。では、今回はですね、事前にNuxt Contentのリポジトリにプルリクエストを出したっていう形でお伺いしていますけど、今回どんな内容を行ったんですかね。

3. nuxt/contentへのコントリビューション 01:29

@coffeephile 01:38
そうですね。まず何をやったかを説明したいと思います。で、その、それがLINEデベロッパーサイトとどういう風に関連してるかっていうのは、また後ほど説明させしてくださいと。まず、何をやったかっていうと、Nuxt Contentっていうモジュールのパフォーマンス改善プルリクエストを出しました。Nuxtっていうのは、ご存じの方多いかと思うんですが、Vue.jsのもとに、主に作ったウェブサイトを作るようなフレームワークですね。ウェブサイトだったり、アプリだったり、こういったフレームワークとなります。

@coffeephile 02:12
で、また、Nuxt Contentは、まあ、Nuxtのモジュールであり、例えば、僕みたいにマークダウンコンテンツを使って、それをウェブサイトのページとして出したい場合は、Nuxt Contentを使ってマークダウンページのレンダリングができるわけですね。で、そのマークダウンを使った時にパフォーマンス問題とぶつかってて、それを解決できるようなプルリクエストを出した話となります。お、お

@potato4d 02:37
おお。なるほど。パフォーマンスの改善のプルリクエストって、具体的にはどういうこう回収を行ったんですか。

@coffeephile 02:43
はい、ちょっとややこしい話ですが、ちょっと説明うまくできるように頑張ります。お願いします。問題が発生したのはローカルホストの開発の時ですね。どういう問題が起きたかと言いますと、ローカルホストで開発した場合、パフォーマンスが遅くなったわけですね。で、具体的に、さっき話したように、

@coffeephile 03:05
たくさんのマークダウンページを使って開発した時、その開発環境が遅くなっていました。具体的に、ローカルホスト、ローカルマシーンで、ローカル開発サーバーを立ち上げて、その開発用のウェブサイトを立ち上げて、で、そのローカルホストのウェブサイトで、ページの間移動した場合、その移動が遅くなったんですよ。で、どこらへん、どれくらい遅くなったかって言うと、ほんとに

@coffeephile 03:33
ページAからページBまで行くまで、2秒3秒かかったりしていました。で、その問題が起きたのはちょっと特殊なケースで、マークダウンのページ数がそんなに多くない場合は気づかない問題ですよ。ページ数が少ないと割とサクサク動くんですけど、そのページ数が増えれば増えるほど重くなるわけですね。で、どんぐらいのページ数から遅くなるかっていうと、もうほんとに

@coffeephile 04:03
数千ページ単位ですね。2000、3000とか、こんぐらいの規模のページ数があれば重くなります。なので、数百ページがあっても、 1000ページ行かないレベルだとそんなに気づかないんですね。割とサクサク動きます。そしてまた1万ページぐらいのレベルまでいくと、もうかなり感じます。もうほんとにページ移動する

@coffeephile 04:27
時間は数秒かかって、で、なんか2秒とかって聞いても、そんなに重く感じないかもしれないんですね。1秒だったらいいんじゃない。って思う方もいらっしゃるかもしれないんですが、やはり開発とかコンテンツをライティングするときは、そういう時間が結構重なってきて、結構仕事に影響影響が出て辛い話

@coffeephile 04:49
ですね。で、その重くなる話は、ほんとにローカルホストでマークダウンページを使った場合、かつページ数が多い場合に出る問題ですね。通常のVueで作ったページだと重くなりません。もしNuxt使って1000ページとか全部Vue.jsで作ったとしても、その問題にぶつからないんですけど、ほんとにこういう特殊なケースで、マークダウンであるページ数千以上があれば重くなるっていうような特殊な問題でした。うん、

@potato4d 05:22
はい。じゃ、あれですね、今回のそのLINEデベロッパーズみたいな、そのドキュメントの数がすごい多いプロダクトがNuxt Contentを使う場合に限定で起こる、結構パフォーマンスのボトルネックっていう風な感じですね。

@coffeephile 05:35
おっしゃる通り。そうですね。なので多分世の中この問題と合う人が少ないと思うんですね。この数千ページ扱ってるプロジェクトまでやらないとはい、出てこない問題ですね。

@potato4d 05:49
なんでこう、これまで見つかってこなかったが、我々の開発で見つかったっていう風な

@coffeephile 05:53
ところですね。そうだと思いますね。はい。ちなみに

@potato4d 05:55
これは原因は実際もう修正されたかなと思うんですけど、原因はどういうところにあったんですか。

@coffeephile 06:00
はい、そうですね。これも同僚の喜多さんに協力していただいて分かったけかですが、以前も多分このキャストに登壇した喜多さんとなりますが、と調べた結果、簡単に言いますと、ローカルホストの開発環境ではキャッシュが効かないですね。キャッシュが効かないことによって、そのページが開くたびにレンダリングされてて、で、それで

@coffeephile 06:24
ページ数が多い場合遅くなるっていうような問題です。じゃあキャッシュ聞かない。って聞くと、じゃあなんでキャッシュが使われてないかっていうと、ローカルホスト開発の場合はホットリロードが大事じゃないですか。要は、ページを編集したら、その編集がブラウザに反映されてほしいでしょう。で、そのホットリロードが効くようにキャッシュを無効にしてたと思うんですね。

@coffeephile 06:50
逆に言うと、単純にローカルホストでキャッシュオンにしただけでパフォーマンスが早くなるんですが、ホットリロードが効かなくなるので、またその開発に影響がでているので、そのキャッシュオンにするだけでは解決にならないような問題です。要は、そのキャッシュ使われてないのがちゃんと理由があったように見えますね。なるほどなるほど。

@potato4d 07:14
はい。それを今回は限定的に有効化したみたいな。

@coffeephile 07:17
そうで、今回どういうふうに対応したかっていうと、まずローカルホストではまたキャッシュをオンにしたっていうのが根本的な解決策となりますが、でもキャッシュオンにして、ホットリロードが効かないっていうてたので、じゃあキャッシュ使ってもホットリロードも同時

@coffeephile 07:38
使えるままにするかっていうと、そこは、あ、その、内部で使ってるnextフックをいじって、要はそのマークダウンファイル、ファイルの変更があった場合、それは検知されるんですね。で、ファイルの変更があった場合、キャッシュを削除するっていうような対応を入れてるんですね。というわけで、そのキャッシュを使うメリットも使えるようになってて、要はそのキャッシュを使うことによって、パフォーマンスが速くなってて、

@coffeephile 08:08
そして、ファイル変更の時キャッシュを削除するという対応によって、ホットリロードも効くままで対応できたわけですね。なるほ

@potato4d 08:18
なるほど。じゃあ最終的にこう、元々ホットリロードができていたところを失うことなく、キャッシュの恩恵だけをバッチリ受けられるようになったっていう風な。

@coffeephile 08:26
そうですね。で、そのま、まずこれどういう風に見つかったらできたかっていうと、どうやってここまでその対策解決、対策まで来れたかっていうと、最初開発した時点で僕はぼちぼちNuxtいじって、で、それでページ数が多かったので、その問題とぶつかったんですけど、その問題解決はなかなか自らできなくて。色々設定とかいじってみたんですけど、結局わかんなくて。周りに聞いてみたところ、さっきほど話したように喜多さんに協力していただいて、喜多さんがもうささっとNuxt Contentのコードの中身を見て、

@coffeephile 09:05
じゃあここらへんキャッシュ効いてないよねっていうところを発見していただいて。で、そこからお互い一緒にどういう風に対策できるかを考えた結果、コード書いてくださって。で、私はまたそのコード少し改善してプルリクエストに出したっていう流れだったんですね。

@potato4d 09:22
じゃあなんか同僚と一緒に最後までマージまでこぎつけていったっていう風な形なんですね。

@coffeephile 09:28
結構協力していただいて、心強かったです

@potato4d 09:31
ですね。で、最終的にこう、バッチリパフォーマンスの課題も改善されたし、マージもされたっていう風な。

@coffeephile 09:37
はい、そうですね。そこも結構良かったかなと思ってて。僕はこれまであんまりOSSの貢献の経験がなくてですね、今回は初めてって言っていいぐらい、初めてこの大きな、割と大きな OSS貢献したんですね。で、プルリクエスト出した時、そのあとは割と、多分数時間後、担当者さんに見ていただいて、で、そっから割と早く進んだんですね。で、マージまで早かったです。

@potato4d 10:06
確かに今ショーノートにもリンク貼っておきますが、プルリクエストを出したのが21日で、マージされたのがもう25日なんで、4日ぐらいで。マジでそう

@coffeephile 10:16
で、しかもその4日後っていうのも、僕は金曜日プルリクエスト出して、で、その、おそらく時差もあると思うんですけど、その、私も体験したとコメントが来たんで、それはまた翌週月曜日からまた対応したので、多分その時間かかった主な原因は、ただ週末が挟まれているっていう話ですね。じゃあ、

@potato4d 10:37
つ、2日でマージされたみたいな。

@coffeephile 10:38
そうですね。で、Nuxt Contentは、多分月1回ぐらいのペースでリリースがあるので、実際にリリースされるまでもう少し時間かかったんですけど、そのプルリクエスト出した時点の反応は早かったですね。

@potato4d 10:53
いや、いいですね。なんか、いい業務からの、このコントリビューションの機会になったっていうようなとこですね。はい。じゃ、今回は、そのLINEデベロッパーズの仕事で、そのライターさんとかが困るっていうところから、Nuxt Content側の改善に乗り出したって感じかなと思うんですけど、なんか実際これって、最終的にはこう、プロダクトの、いわゆる仕事の業務の改善みたいなところ、ゴールにあったかなと思うんですが、その1か月に1回のくらいの

4. コントリビューション結果のプロダクトへの反映 10:59

@potato4d 11:18
リリースが行われた後、もう今これはLINEデベロッパーズのサイトは新しいバージョンに上げ終わってるんですかね。

@coffeephile 11:25
そこも実は話がもう少し複雑でして。今のプロだ、プロダクション環境に出てる、外部に出てるLINEデベロッパーサイトはテクスタックが古くなっているわけですね。まだVuePress 1、要はそのVue 2、Vue 2を使ったちょっと古い技術度のものとなっています。じゃあNuxtはどこにあるかっていうと、技術スタックが古くなっているからこそ、今新しい技術スタックに移行しようっていうプロジェクトを進めていて、

@coffeephile 11:55
で、そこは、まさに、LINEデベロッパーサイトの中に、その技術スタックをNuxt 3に移行しようとしてるところですね。要は、今の改善は、まだ外部にリリースされてるものではなく、内部の技術スタック刷新に使われているところですね。で、そのプロジェクトは今、進行中で、

@coffeephile 12:16
近いうちにリリースできればなっていうところなんですけれども、そのNuxt移行のプロジェクトを進めた際、どんどんローカルホストが重くなってて、で、やっぱ、こんな重くなると、今使ってる古いVuePressより早くなるわけないっていう問題に気づいてしまって。で、そこで改善必要だなっていうところ気づきまして、今のプルリクエストのOSS貢献まで至りましたね。

@potato4d 12:42
うん、なるほどなるほど。もうあれですか、外部にはリリースまだかなとは思うんですけど、内部の部分で言うと、もうライターさんとかはこの新しい早くなったやつを使える状態にはなってるんですかね。

@coffeephile 12:53
はい、そうですね。で、特にまだVuePressのものを外部リリースしているので、今そのライターさんのメインの仕事はまだVuePressのままなんですけけども、やっぱりNuxtに移行した際、いや、VuePressより全然重いじゃん。ってなったとしたら、ちょっとライターさんが喜ばないので、そこは大きな課題としてありました。なるほどなるほど。

@coffeephile 13:17
逆に、その技術スタックを新しくすることによって、技術スタックが新しくなるだけじゃなくて、パフォーマンスの改善も期待しているので、そこは逆にいや、技術スタックは新しいけど、パフォーマンスは全然重くなってんじゃん。ってなった場合、改善にならないので、そこは改善する必要がありました。なるほ

@potato4d 13:37
なるほど。じゃあ今後、来たるそのリリースが行われた時に、その利用者にとってもそうですし、メンテナンスする人たちにとっても悪いものにならないようにっていうのを事前に防ぐことができたっていう風な感じですね。

@coffeephile 13:50
そうですね。で、今回の改善のためには、完全にNuxtに移行した場合、移行した時早くなります。ローカルホストも早くなるし、あと、ビルド時間はまた別の話なんですけれども、そこも早くなるし。なので、その技術スタックを新しくすることによって、パフォーマンスも改善されるていう希望という夢が今回の改善で叶うというような話になりますね。

@potato4d 14:16
じゃあ、あれですね、これからのリリース後、楽しみって感じですね。

@coffeephile 14:19
はい、私も楽しみです。

5. クロージング 14:23

@potato4d 14:23
そんなわけで今回はですね、LINEデベロッパーズの開発者向けウェブサイトにおいて、パフォーマンスの課題が発生したところを、実際OSSのコントリビューションによって解決するるっていうところを話していきました。LINE Yahooのフロントエンド開発者コミュニティでは、このようにフロントエンドに関する議論や意見交換を日々行っております。社内の勉強会から生まれた企画なども、これまで UIT INSIDEで出してる

@potato4d 14:46
コンテンツの中ではたくさんありますので、今後も出せる範囲のフロントエンドの情報はどんどん公開していこうと考えております。また、このポッドキャストに関するご意見、ご感想については、ハッシュタグにて受け付けております。ハッシュタグ#UIT_Insideでつぶやいていただきますと、スタッフの方で拾わせていただきますので、ぜひぜひつぶやいていただければと思います。というわけで、今回はロマンさんをお呼びして、LINEデベロッパーズウェブサイトの改善に伴うNuxt Contentへのコントリビューションについて話していきました。ありがとうございました。

@coffeephile 15:17
ありがとうございました。