💸

確定申告用に行政サイトのみ検索できるツールをRemixで作ってみた

2024/03/07に公開

背景

確定申告はみなさんお済みでしょうか？
自分は今年から白色申告が必要になったため、慌ててなんとか済ませた次第です。

なんとか済ませた確定申告ですが、普通にGoogleで調べようとした際に、大量のオウンドメディアやまとめブログが引っかかり、白色申告を知りたいのに青色申告に誘導したり、Webサービスへの課金を誘導するサイトだらけでうんざりしませんでしたか？~~僕はしました~~

Google検索に「site: go.jp」を入れると、行政サイトのみに絞って検索ができることは知っていたので、毎回これを打ち込むのを避けるために、下記のようなツールを作ってみました。

オウンドメディアや、まとめブログが弾かれ、国が発信する一次情報のみに絞れたり、検索履歴なども実装してあるので、多少は便利かな？という感じです。

Cloudflare Pages + remix + Mantine UI の構成で開発しています。

Cloudflare Pagesのremixテンプレートを使って、開発環境の構築からデプロイまでを数コマンドで済ませています。
こういった複雑ではないペライチツールをパッと作ってネットに流す場合には、Cloudflare系は手軽でいいですね。

開発環境の構築

$npm create cloudflare@latest my-remix-app -- --framework=remix

開発環境の立ち上げ/デプロイ

$npm run dev
$npm run deploy

UIだけでなくhookなども便利なMantineを入れています。

具体的にはAutoCompleteとuse-formを使っています。

AutoCompleteはdatapropsに配列を入れるだけで、勝手に検索履歴が入力欄の下に出てくるので便利でした。

  <Autocomplete
    data={['検索履歴1','検索履歴2'...]}
    leftSection={<IconSearch size={16} />}
  />