Excelを操作する簡単なWebアプリを作った（その技術選定について）

知人から、「Excelファイルに特定の操作をするアプリ」を作ってほしいという依頼を受けました。

こういう機会は珍しいので対応してみました。

詳しい開発内容については公開できませんが、技術選定周りで調べたこと・考えたことを記録しようと思います。

もしかしたらExcelのマクロで対応するのが早いのかもしれませんが、個人的にはOfficeの環境も知識もなかったため、別の手段を検討しました。

結論としてはJSベースのブラウザで動作するようなWebアプリとしました。
下記が選定理由です。

ビルドサイズを気にしていますが、今回はビルド済みのファイルを直接提供することにしました。
セキュリティの観点や、ユーザー環境がよくわからないことから、Webで公開するような仕組みは避けたかったですし、ビルドサイズは小さくすむならそれに越したことはないと判断しました。

初期段階の技術スタックは下記の通りです。

初期段階ではJSフレームワーク・CSS フレームワークは除外していました。
というのもビルドサイズへの影響を気にしたためです。
（後述の通り、最終的には導入しました）

一方開発体験をリッチにするVite・SCSSは迷わず導入しました。
TypeScriptについても、やはり型チェックがあった方が安全で高速になると感じ、早い段階で取り入れました。

最終的には、下記のフレームワークを追加で導入しました。

preactについては今回初めて触りました。

preactはReact likeなJSフレームワークで、細かい際はありつつもReactの基本的な仕組みを大部分再現している一方、軽量でビルドサイズには影響が出ないほどです。
Vanilla.jsは手間が大きく、少しの調査ですぐ導入を決めました。

CSS フレームワークの選定はかなり迷いました。

同程度以上の規模のもの、例えばBootstrapに比べるとBulmaが軽量のようです。 BulmaはComponentや便利なヘルパが揃っていて申し分ないです。デザインもシンプルかつおしゃれで気に入っています。ビルドサイズは大きめなのは難点ですが、これくらいの機能量ならしょうがなさそうです。

より軽量なFWとしては、多くの選択肢があります。

spectre.cssは軽量で見栄えがいいものの、2020年で開発が止まっており、ビルド時にSCSSのsyntaxが古いことによるwarningが出るため、積極採用したいと思えませんでした。

Pico.cssはかなりデザイン性の高いFWで、カスタマイズしづらそうなことや、好みの問題で採用しませんでした。

こちらもシンプルで良いのですが、やはり開発が止まっていることや機能も最低限だったことで除外しました。

Pure.cssはずば抜けてサイズが小さく、相対的にかなり採用実績がありそうです。
CSSに慣れていればこれでもよかったかもしれませんが、最終的にはよりリッチなBulmaとしました。

他にも、選択肢を上げるために上記サイトを利用しました。

利用状況は、npm trendsで確認しました。

最後に、vite-plugin-singlefile を利用してビルドファイルを1つのhtmlにまとめたことも扱いやすくできたかなと考えています。

自分の仕事のことで、仕事以外で人の役に立てるのも嬉しいことだなと思いました。

スマレジエンジニアyushiのブログ