TL;DR
ソースコードは、以下のリポジトリで公開しています。
本拡張機能ClipLexを使うことで、文字列選択をするだけで単語を保存し、後で復習することができます。また、保存した単語には優先度やメモを追加でき、学習効率を向上させることができます。
背景
英語を日々の仕事や学習で使うエンジニアにとって、語彙力の向上は重要です。しかし、公式ドキュメントやブログ記事で出会う新しい単語をいちいちメモして復習するのは、時間がかかり面倒な作業です。
その課題を楽しく解決するために開発したのが、今回紹介するChrome拡張機能 "ClipLex" です。このツールを使えば、ウェブページ上で選択した単語を簡単に保存し、後で復習することができます。
解決したい課題
-
公式ドキュメントで出会う単語の整理:
市販の単語帳にある単語も多いですが、それよりレベルの高いような語彙がたくさん出てくるため、それらを効率的に管理したいです。 -
記録・復習の手間を軽減:
手書きのメモやスプレッドシートで管理する代わりに、手軽に保存・管理したいです。
"ClipLex" の機能
"ClipLex" は以下のような特徴を備えています:
-
ワンクリックで単語を保存:
ウェブページ上で単語を選択すると、ボタンが表示され、それをクリックするだけで保存可能です。 -
辞書リンク付き:
保存した単語には主要な辞書サイト（Oxford、Weblioなど）へのリンクがついており、発音や使われ方、意味を確認できます。 -
優先度とメモの管理:
保存した単語に優先度を設定し、メモを追加して学習効率を向上させることができます。 -
絞り込みとソート:
追加日や優先度で保存した単語をフィルタリングし、ソートすることができます。
開発の詳細
技術スタック
- 言語: TypeScript
- 拡張機能: Chrome Extension (Manifest v3)
- ビルドツール: Webpack
UI の工夫
設定ページでは、ユーザーが保存した単語を簡単に管理できるようにしました。
このテーブルには、保存された単語や優先度を動的にレンダリングされるため、英単語学習の効率を上げてくれます。
また、発音や例文、意味の確認を行いやすいような便利リンクが配置されているため、すぐに使われ方などを確認することができます。
今後の展望
- 保存した単語をクラウドで同期する機能の追加
- モバイルブラウザ向けのサポート
- 学習進捗を可視化するダッシュボード機能
おわりに
"ClipLex" は、英語学習の課題を解決することを目指して開発されました。このツールが、読者の皆さんの学習に役立ち、少しでも楽しい英語学習のお手伝いができれば幸いです。
ぜひ、「いいね」やストックで応援していただけると励みになります！