🧩 はじめに
React(TypeScript)でChrome拡張機能を開発したので制作記録として解説を掲載したいと思います．また筆者は開発初心者であるため，至らぬ点があるかと思われますがご了承ください．
🧩 自己紹介
初めまして．趣味でweb開発を勉強している273*(ﾂﾅｻﾝﾄﾞ) / Kei.と申します．関西の大学生です．最近はフルスタック開発やツール制作を行なっています．まだまだ初心者です．
🧩 完成品
以下のChromeウェブストアからインストールすることができます．
開発期間は3週間です．
審査中なので公開されたら添付します．
MathJaxの内部にcdnが含まれているため，ストアに公開することができませんでした．READMEにてローカルで使用する方法を記載しています．(解決できそうな方法を知っている方がおられましたら教えてください！！)
ソースコード
🧩 制作に至った経緯
卒業論文の執筆がそろそろということで，最近はLatexを勉強しています．数式を書くことが多いのですが，複雑な数式になるほど数式を作るのに時間がかかるという課題を抱えていました．以前，そのような課題を解決するツールとして，webツールを制作し公開しましたが，いざ執筆をするのにサイトを行き来するのは面倒だと指摘を受けました．従来のツールに便利な機能を追加し，Chrome拡張機能として実装することで，さらに使いやすくなると考えて開発をしました．
🧩 サービス
こちら(FormulaGenerator)が以前制作した数式生成ツールのweb版になります．webサイト開発の勉強をし始めて3ヶ月くらいの時期に制作したものですので非常に使い勝手が悪いです．
今回は，以前のツールから機能をそのままに，デザインや使用技術を大幅に変更して使いやすくなりました．ぜひ導入して使っていただけると幸いです．
🧩 仕様
1. 数式生成機能
テキストエリアにTexを入力すると数式が表示されます．また，あらかじめ用意されたテンプレートを使用することも可能です．
2. 数式コピー機能
生成した数式をクリップボードにコピーすることができます． Texをそのままテキスト形式でコピーするか，Wordなどに対応したMathML形式でコピーするか選択することができます．
3. お気に入り/編集機能
残しておきたい数式があればお気に入りに追加して保存しておくことができます．
お気に入りに登録した数式は再度編集したり削除したりすることが可能です．
これらはchromeにログインしているアカウント間で同期ができます．
4. テーマ/言語切り替え機能
テーマは，ダークテーマ，ライトテーマ，システム設定から選択することができます．
言語は英語と日本語に対応しています．
デフォルトではダークテーマ，英語になっています．一度設定すると保存されますので都度切り替える必要はありません．
🧩 開発
環境
今回はRedux Toolkitを用いたテンプレートを用いて開発を行いました．Chrome拡張機能はwebの技術で開発することができるので非常に楽でした．Reduxでタブとお気に入り保持，Storage APIで数式入力とお気に入り情報の管理を行なっています．
フロント
最近話題のUIライブラリであるshadcn/uiを用いています．Radix UIベースでTailwindCSSを採用されているので非常に扱いやすいです．iconはいつものlucideを使用し，テーマ切り替えはshadcn/uiのテンプレートを，言語切り替えはi18nextを採用しました．
🧩 デザイン
ロゴ
ロゴに関しては以前のツールと同様のものを使用しています．3DCG制作ツールのBlenderを使用しました．手前にすりガラス風のマテリアルのオブジェクトを，背面に放射マテリアルのオブジェクトを配置することでリッチなデザインに仕上げています．他制作物のロゴも全てこのツールを用いています．統一感が出て良きです(繰り返し)．
アプリデザイン / UI
スマホアプリに寄せたUIを設計しました．アイコンや色を最小限に抑えて，シンプルで使いやすいUIを目指しました．タブバーはすりガラス風になっており全体的にiOSっぽくなっています(意識しました)．Figmaのテンプレートを添付しておきますので興味があればどうぞ!
🧩 心残り
稀に数式の表示がうまくできなかったりします．再起動すると治るようですが原因が不明です．．．
🧩 最後に
以前の投稿から半年以上が経過していますが，チームスマホアプリ開発プロジェクトが終了したり，就職先が決まったり，ハッカソンで優秀賞をいただいたり．．．色々ありました．時間がなかなか取れず記事にはできていませんが😭．これからも気まぐれに開発していきたいと思います！最後まで読んでいただきありがとうございました．それでは！