ちえラジChat、火曜日の配信です。 今回はプログラミングにまつわるお話として、「拡張しやすいサイトとしにくいサイト」について考えてみました。
Notionの見出しレベルが分かりづらい問題
自分は普段からNotionを愛用していて、いろいろな情報を保存しています。 ただ、Notionを使っていて「テキスト情報の階層がパッと見で分かりづらいな」と感じることはありませんか？
Notionでは見出しレベルが1から4まで使えますが、ウィンドウサイズなどの影響なのか、見出し2と見出し3がほぼ同じサイズに見えてしまうことがあるんですよね。
AIの出力をNotionに書き写して整理しているときなど、「あれ、ここは見出し2だったかな？ 3だったかな？」と混乱してしまうことが結構あって・・・。 ちゃんと階層構造を整えて文章を書きたい自分としては、少し不便に感じていたところでした。
ブラウザ拡張機能を作ってみたものの・・・
「それならブラウザ拡張機能を作って、見出しレベルを分かりやすく表示させればいいじゃないか」と思い立ちました。 Notionはウェブブラウザでも動きますから、特定の動作をさせる拡張機能があれば解決するはずです。
そこで、AI（Microsoft Copilot）にお願いしてコードを書いてもらい、とりあえず動くところまでは確認できました。 デバッグ画面で見ても、ちゃんと動作しているように見えるんです。
ところが、実際の画面には全く反映されません。 「なぜだろう？」と思って調べてみたところ、どうやらReactというJavaScriptフレームワークの挙動が関係しているようでした。
Reactという壁と、ウェブアプリの在り方
Copilotの解説によると、こちらがウェブページの要素（DOM）を書き換えても、React側がすぐに元の状態に戻してしまうというのです。 セキュリティや整合性の面では正しい挙動なのかもしれませんが、拡張機能で自分好みにカスタマイズしたい側からすると、なかなか手強い相手だなと感じました。
最近のウェブアプリにおいて、Reactのようなリッチなフレームワークを使うのは、もはや「基本中の基本」と言えるでしょう。 Notionのような高機能なアプリを作るには、欠かせない技術なのだとは思います。
ただ、ブラウザで閲覧するものである以上、ローカルの範囲でユーザーが使いやすく調整できる余地も、もう少しあってもいいのかな・・・なんて思ったりもします。
今回の学びとしては、「モダンなフレームワークが使われているサイトを拡張するときは、細心の注意が必要だ」というところでしょうか。
リッチなウェブアプリと、ユーザーによるカスタマイズの自由度。 このあたりのバランスがうまく取れるようになると嬉しいですね。
明日は水曜日、「まちのえんがわキャスト」についてお話しできればと思います。 それでは、また。
