【個人開発(ミニ)】AtCoderで時間計算量を即確認できるUserScriptを作った

# はじめに

こんにちは！　今月、AtCoderで緑Coderになったばかりの、中学2年生のAwashAmityOakです！

みなさんは、競プロをするとき、時間計算量は暗記できていますか？　私は、今でこそ時間計算量の感覚は掴めていますが、競プロを始めたばかりのころは、時間計算量をいちいちGoogle検索で調べていた記憶があります。

今回は、時間計算量を調べるときの時間のロスをなくすために、AtCoderのコンテストページ上で、時間計算量が即確認できるUserScriptを作ったので、良ければ最後まで見ていってください！

https://github.com/AwashAmityOak/AtCoderNotesForBeginners

# UserScriptとは？

UserScriptとは、<font color="red">**ブラウザの機能を拡張するためのスクリプト**</font>のことです。ほとんどがJavaScriptで書かれています。

AtCoderをやってる方なら、一回は触れたことがあるであろう[Tampermonkey](https://www.tampermonkey.net)と関係があります。(知らない人がいたらごめんなさい。)

[Tampermonkey](https://www.tampermonkey.net)をブラウザの拡張機能としてインストールした後、以下のページなどで紹介されているUserScriptを入れれば、**とても快適に**AtCoderに取り組むことができます。

https://scrapbox.io/magurofly/AtCoder%E3%82%92%E3%81%99%E3%82%8B%E3%81%A8%E3%81%8D%E3%80%81%E5%85%A5%E3%82%8C%E3%81%A6%E3%81%8A%E3%81%8F%E3%81%A8%E3%81%84%E3%81%84%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD%E3%81%AA%E3%81%A9

UserScriptを使えば、**AtCoderの提出結果を通知**したり、**ブラウザ上でテストを実行**したりできます。

もちろん、UserScriptは、AtCoder以外の用途にも活用できます。また、TampermonkeyがUserScriptの実行環境として有名ですが、似たようなものは他にもあります。

# 動機

私は、AtCoderを始めたときに、UserScriptというものを知りました。先ほどにも話したように、始めたばかりのころは時間計算量をその都度検索して確認していたのですが、面倒臭いし<font color="red">**時間のロス**</font>にも繋がっていると感じていました。

そこで、AtCoderで**時間計算量の目安**をすぐに確認できるようにするため、このUserScriptを作成しました。(おまけに、**型のサイズ**も確認できるようになっています。)

# 成果物

|　|
|:-:|
|![result_of_userscript.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3742876/c72a1b95-c1bd-0af1-b45b-1439c981a8c5.png "成果物の全体像")|
|<font color="gray">「制約」セクションの下に追加されます。([ABC345 E問題](https://atcoder.jp/contests/abc345/tasks/abc345_e))</font>|


|　|
|:-:|
|![type_size_table.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3742876/3f5bf938-e661-f75f-f3a9-2a62f1bda377.png "型のサイズ")|
|<font color="gray">型のサイズの表示</font>|

|　|
|:-:|
|![time_complexity_table.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3742876/138fa5bd-2d11-1229-2b0d-169c5a96c3a5.png "時間計算量")|
|<font color="gray">時間計算量の表示</font>|

# 製作時間

- 3時間程度(実際にコード書いていた時間は30分にも満たない)

# 苦労したこと

時間計算量を表示するために、コンピューター上で数式を表示する方法を学ぶ必要がありました。

最初は、HTMLに標準で入っている`<math>`タグを使って、MathXMLで書こうとしました。しかし、AtCoderの制約の部分と、数式のフォントがなんとなく異なってしまいました。

|AtCoderの数式|失敗した自作の数式|
|:-:|:-:|
|![original.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3742876/e0a286cc-3b18-27b1-07c9-bdd4ed8c1708.png)|![bad.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3742876/902c3133-7bd1-19bf-d722-e5fc71680bab.png)|

そこで、デザインを揃えるために、デベロッパーツールなどで、ページのコードを読み漁りました。すると、AtCoderでは、KaTeXというJavaScriptライブラリが使われていることがわかったので、数式表示の部分を書き換えました。

|AtCoderの数式|成功した自作の数式|
|:-:|:-:|
|![original.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3742876/e0a286cc-3b18-27b1-07c9-bdd4ed8c1708.png)|![good.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3742876/852ef523-f130-42fc-e024-5580bbf59f83.png)|

その結果、AtCoderにもともとある数式と、自作の時間計算量の数式の見た目を揃えることができました！

# インストール方法

そこまでコードも長くはない拙作ですが、良かったら使ってください…。

~~1. [Tampermonkey](https://www.tampermonkey.net)をインストール
2. [ソースコード](https://github.com/AwashAmityOak/AtCoderNotesForBeginners/blob/master/src/AtCoderNotesForBeginners.user.js)をダウンロード
3. Tampermonkeyのダッシュボードを開く
4. ダウンロードしたソースコードを、ドラッグ＆ドロップでインストール~~

(2024/03/09追記)
今更ですがGreasy Forkに公開したので、インストールしやすくなっていると思います

1. [Tampermonkey](https://www.tampermonkey.net)をインストール
2. [Greasy Forkのスクリプトページ](https://greasyfork.org/ja/scripts/529251-atcodernotesforbeginners)の、「スクリプトをインストール」ボタンを押す
3. Tampermonkeyのダッシュボードが開かれるので、「Install」ボタンを押す

AtCoderの問題ページを開くと、「制約」セクションの下に、型のサイズと時間計算量が折り畳み形式で表示されていると思います。

# おわりに

今回作成したUserScriptは、たった130行程度なので、とても「個人開発」と銘打つことができるほどのものではありませんが、誰かの役に立てれば幸いです。

(AtCoderに限らず、)ブラウザを使っていて、不便に感じることがあれば、ぜひUserScriptを作ってみてください！　(作ったら、それをQiitaに投稿しましょう！)

---

最後まで読んでくださり、ありがとうございました！　いいねとフォローをしてくれると励みになります！　[Xアカウント](https://twitter.com/awashamityoak)の方もよろしくお願いします！