ネット記事を大量に読む人のためのRAC（アールエーシー）

## はじめに

<ruby>RAC<rp>（</rp><rt>アールエーシー</rt><rp>）</rp></ruby>の実践としてネット記事を読みやすくするブックマークレットを作りました。

最初に、<ruby>RAC<rp>（</rp><rt>アールエーシー</rt><rp>）</rp></ruby>とは何かについて説明します。次に、作ったブックマークレットについて説明します。

## 本記事の対象者

- <ruby>RAC<rp>（</rp><rt>アールエーシー</rt><rp>）</rp></ruby>とは何かを知りたい人。
- 大量のネット記事を効率的に読みたい人。

## <ruby>RAC<rp>（</rp><rt>アールエーシー</rt><rp>）</rp></ruby>とは何か

<ruby>RAC<rp>（</rp><rt>アールエーシー</rt><rp>）</rp></ruby>とは、コンピュータープログラムであるJavaScriptがウェブページの記述であるHTML構造やCSS構造を書き換えることによって、人がネット記事を読む行為を補助する機械であり、正式名称は読式補助演算機（Reading Assistant Computer）です。

ネット記事を読む行為自体に<ruby>RAC<rp>（</rp><rt>アールエーシー</rt><rp>）</rp></ruby>は不要だが、<ruby>RAC<rp>（</rp><rt>アールエーシー</rt><rp>）</rp></ruby>抜きでは読むスピードが低下してしまうため、実質的にはネット記事を大量に読む人にとって必要不可欠なツールです。

ブラウザの標準機能であるブックマークレットやブラウザ拡張機能であるTampermonkeyやStylus、およびそれらを用いて利用者が作ったコンピュータープログラムが当てはまります。

## ブックマークレット

次のブックマークレットは<ruby>RAC<rp>（</rp><rt>アールエーシー</rt><rp>）</rp></ruby>の実践として私が作ったものです。JavaScriptプログラムがネット記事を書き換え、ネット記事を読みやすくします。

https://github.com/querykuma/KugiReader

[このJavaScriptのプログラム](https://raw.githubusercontent.com/querykuma/KugiReader/main/dist/kugi_reader_bookmarklet_min.js) をブックマークのURL欄に貼り付けてブックマークレットを作成してください。


## なぜ読みやすくなるのか？

なぜこのブックマークレットでネット記事を読みやすくなるのでしょうか？

第1の理由は、<ruby>読点<rp>（</rp><rt>テン</rt><rp>）</rp></ruby>を<ruby>強調表示<rp>（</rp><rt>ハイライト</rt><rp>）</rp></ruby>するからです。『日本語の作文技術』で本多勝一氏が示されたように、<ruby>読点<rp>（</rp><rt>テン</rt><rp>）</rp></ruby>は文章の論理構造を示すものです。

<ruby>句点<rp>（</rp><rt>マル</rt><rp>）</rp></ruby>が文章を文に論理的に分けることは言うまでもありません。注目すべきことは、<ruby>句点<rp>（</rp><rt>マル</rt><rp>）</rp></ruby>が文章を文に論理的に分けることと同じように、<ruby>読点<rp>（</rp><rt>テン</rt><rp>）</rp></ruby>が文を部分文に論理的に分けるということです。

<ruby>句点<rp>（</rp><rt>マル</rt><rp>）</rp></ruby>や<ruby>読点<rp>（</rp><rt>テン</rt><rp>）</rp></ruby>を<ruby>強調表示<rp>（</rp><rt>ハイライト</rt><rp>）</rp></ruby>することによって文章の論理構造を強調させて記事を読みやすくなります。<ruby>強調表示<rp>（</rp><rt>ハイライト</rt><rp>）</rp></ruby>することは、人が<ruby>句点<rp>（</rp><rt>マル</rt><rp>）</rp></ruby>や<ruby>読点<rp>（</rp><rt>テン</rt><rp>）</rp></ruby>の場所を探すことにかかる負荷を減らします。

第2の理由は、<ruby>句点<rp>（</rp><rt>マル</rt><rp>）</rp></ruby>ごとに改行するからです。1つの文につき１つの改行を入れることによって記事を読みやすくなります。１つの文を探すことにかかる負荷を減らします。さらに1文ごとに字下げして読みやすくします。

第3の理由は、括弧の段数ごとに字下げを深くするからです。<ruby>句点<rp>（</rp><rt>マル</rt><rp>）</rp></ruby>ごとに改行したら、括弧内外の字下げを見分けられない点が読みやすくありません。

そのため括弧の段数ごとに字下げを深くすることによって、括弧の内外の字下げと括弧の段数を見分けられるようにして読みやすくします。さらに括弧を<ruby>強調表示<rp>（</rp><rt>ハイライト</rt><rp>）</rp></ruby>して、句点直後の改行`<br>`に記号を表示して、読みやすくします。

## ブックマークレット適用前後の画像

ブックマークレットを実行する前後の画像を見ることが分かりやすいでしょう。

![ブックマークレット実行前](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311399/b59f93fe-5974-1035-06f5-d39b548327b4.png)

この文章にたいしてブックマークレットを実行すると、次の文章に変わって読みやすくなります。

![ブックマークレット実行後](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311399/6b799838-c53f-2305-da93-6f44bb2c9002.png)

## パフォーマンス・チューニング

少し脱線しますが、このブックマークレットを作るにあたり2つのパフォーマンス・チューニングを行うことによって、約160倍速くなりました。

１つめは`childNodes`に配列のスプレッド構文を使わないことです。`childNodes`が約2万個もあるページで遅くなった原因は、スプレッド構文`[...childNodes]`の計算に時間がかかることで、それを何万回も呼び出すことでした。スプレッド構文を使わないようにすることによって、ページの大きさにもよるとは思いますが約20倍速くなりました。

２つめは`getComputedStyle`を前もって計算しておくことです。要素の新規挿入と`getComputedStyle`を交互に行い、それを数千回も行っていたためにDevToolsで「Forced reflow is likely performance bottleneck」の警告が数千回も出ていました。Layout Thrashingを起こして画面の描画に使わないレイアウト計算を数千回も行ってしまっていました。必要な`getComputedStyle`を前もって行うことによって、約8倍速くなりました。

## さいごに

『[ブックマークレットとQiita APIを使って記事一覧を取得する](https://qiita.com/querykuma/items/5401d937c99f70ca72e2)』や『[HTMLタグを超えてキーワードをハイライトするアルゴリズム](https://qiita.com/querykuma/items/4768f85f97f2d89fd47a)』も<ruby>RAC<rp>（</rp><rt>アールエーシー</rt><rp>）</rp></ruby>関連です:hatching_chick:。

<ruby>RAC<rp>（</rp><rt>アールエーシー</rt><rp>）</rp></ruby>の読み方を疑問に思われた方がいらっしゃるかもしれませんが、元ネタがあって<ruby>CAD<rp>（</rp><rt>シーエーディー</rt><rp>）</rp></ruby>の読み方をする小説があります:books:。

<ruby>RAC<rp>（</rp><rt>アールエーシー</rt><rp>）</rp></ruby>とは何かを説明するとともに<ruby>RAC<rp>（</rp><rt>アールエーシー</rt><rp>）</rp></ruby>の実践としてネット記事を読みやすくするブックマークレットを作りました:muscle_tone3:。

このブックマークレットで大量のネット記事を効率的に読んでいただければ幸いです:confetti_ball:。