3
2
記事投稿キャンペーン 「2024年!初アウトプットをしよう」

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

Last updated at Posted at 2024-01-24

経緯

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

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

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

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

爆誕

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

どんなとこが便利やねん

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

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

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

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

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

  • ポップアップ表示画面

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

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

他にはなんかない

あります。

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

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

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

Qiita記事関連表示機能

image.png

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

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

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

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

最後に

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

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

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2