😎

React×TypeScriptの勉強がてらにサイトを評価する拡張機能を作ってみた。

2024/07/10に公開

経緯


高卒でエンジニアになり、早くも3年目となり
お仕事以外では下記のようなソフトや

https://qiita.com/benja0000/items/94b9f4c386f837c252f4

kintoneのプラグインの開発をやったりしているのですが
開発中に行き詰まった際に数多くの技術系の記事を参考にして
壁を乗り越えてきたのですがその際に、何回もあったことが...

「あれ、この記事前にもみたんじゃね...?」

ということです。
それをなくすために勉強がてらに下記のような拡張機能を作ってみました。

爆誕

image.png
その名も 「サイト評価するおくん」 です。
その名の通り、サイトの評価をします。
それ以外のことはしません!(おまけ機能的なものは一様ありますが...)

どんなとこが便利やねん

実際に経緯で説明したようなことが開発中に遭遇しなくなりました。
理由としては拡張機能の下記の機能のおかげになります。

評価したサイトのリンクに自動的に評価が表示される

image.png
上記によってサイトに訪れなくとも評価を確認することができ、
過去の自分の評価を参考にしてサイトに訪れるかを判断することができます。

「自分が調べている内容とマッチしていなかったな」 ということが
評価を積み重ねていくことにより自然と減っていったのが
実際の開発でも大変助かりました。

評価自体は拡張機能の下記のポップアップ画面から評価ができるようにしました。

  • ポップアップ表示画面
    image.png

その他にも評価を検索するための機能や
image.png

何かあっても安心のようにCSVインポート・エクスポート機能を携えています。
image.png

他にはなんかない

あります。

個人的に欲しかった機能としてQiita以外の技術系ブログ(Zennとか)を読んでいる時に

「Qiitaにもなんか同様の記事ないかな」

と思い、実際にQiitaに記事探しの旅に出かけることがありました。
これらを効率的にするためにこんな機能をつけました。

Qiita記事関連表示機能

image.png

Ajaxで現在のタイトルと関連するようなQiita記事の情報を取得し
ページの下部に表示する機能をつけてみました。

実際に、この機能が何気に便利で効率的に開発ができるようになったのはもちろん
ネットサーフィンがとても楽しくなりました。

かといって押し売りするのも嫌なので
上記の機能が邪魔な人もいると思うのでポップアップ画面から非表示にする機能も設けています。

スクリーンショット 2024-01-25 0.04.11.png

最後に

ここまで読んでくださりありがとうございます。
ここまで読んでみて拡張を機能を入れてみようかなと思われた方、
下記のGithubからインストールできます!
(インストール手順も記載しております、泣いて喜びます...)

https://github.com/benjaaamin0518/site-rating-kun-react

今後の展望としては評価と一緒にメモも記録できるようにしていきたいなと細々と考えております...!

Discussion