バックエンドエンジニアのためのフロントエンド技術
はじめまして。ふだんは機械学習プラットフォームを開発している鈴木です。今日はあまり得意じゃないフロントエンド開発の話です。
本職のフロントエンドエンジニアではなく、筆者のようにバックエンドやプラットフォームを主に開発するエンジニアがWEBアプリを開発する場合、どんな技術を使うのが良いでしょうか。
僕らが開発するWEBアプリは社外の一般の人向けではなく、開発している社内用のAPIやプラットフォームに関連したデータやグラフを表示したり登録・編集をサポートするツールというのが多いです。キャッチーで素敵なデザインや魅惑的なUIは不要ですが、一貫性もなくみすぼらしい外観は困るし、インタラクティブに入力をサポートをするぐらいの機能は欲しいというようなレベル感のものです。シングルページアプリケーション的なものを求めているわけではありません。
たまにしかフロントの開発はしないし、ここ数年のフロントエンド技術の激しい移り変わりをフォローするのは困難で、一般的に解説されるようなフロントエンドの技術選定とは観点がまた違うかなと思い、バックエンドエンジニア的観点からフロントエンド関連の技術をまとめてみました。
バックエンドエンジニアにとって必要なフロントエンド技術の条件（あるいは個人的な希望）
学習が簡単
毎日のようにフロントエンドの開発をしているならともかく、たまにしか開発しないフロントエンドのために学習に時間がかかるフレームワークはできれば避けたいです。
コードがシンプル
同じことがシンプルにかけるならそのほうがうれしいですよね。見通しもよく、バグの発生も少なくなりそうです。
依存パッケージのEOLや脆弱性対応の負荷が低い
巨大なライブラリが必要な場合など、依存するJavaScriptのコードベースが大きい場合、EOLとなったり脆弱性が見つかる可能性が高くなり、運用コストも増大します。更新されることが少ないWEBアプリを開発する場合、特にここが課題になります。
フロントエンド技術全般のトレンド
エンジニアへのアンケートをもとに各種技術のトレンドがまとまっているサイトがありますので、まずはざっくりとこちらをご確認ください。
どのライブラリがよく使われているか、どのぐらい満足しているかなどが確認できると思います。注目したいのは、JavaScriptエコシステムの変化が速すぎるという人の割合が2019年ごろから急速に減少していることです。そろそろ落ち着いてきたということかもしれません。
JavaScriptフレームワーク
React/Next.js
数あるフレームワークの中で一番安心して選択できるのは Next.js でしょう。巨大で圧倒的なエコシステムとユーザコミュニティが開発をサポートしてくれます。
Reactでは状態の管理について語られることが多く、以前は react-redux を使うことが主流だったように思いますが、だいぶ変わって来ているようです。
とくにサーバの状態についてはSWRやReact Queryやapollo clientなどを使うことで状態管理は以前よりずっとシンプルになっているようです。自分は redux のコードが煩雑になるかんじが嫌だったのですが、ここが解消されてきたのは個人的に非常に大きなポイントです。
いろいろ文句はありますが、React/Next.jsの優位は当面安泰かと思います。Next.js V3 が正式にリリースされたばかりというのもポイント高いです。ビルドツールのTurboPackはめちゃくちゃ高速だと評判ですよね。
Vue/Nuxt
世界的にはReact/Next.jsの利用者が圧倒的という話ではありますが、なぜか日本ではVueが人気です。そういう意味では日本語話者としてはこちらを選ぶほうが情報を取得しやすいのかもしれません。Reactと比べて学習曲線がなだらかでとっつきやすいという評判です。Reactのいいところをうまく取り込んできているフレームワークという印象です。Vue3に対応したNuxt 3 も先日正式にリリースされました。
気になるのはVue2とVue3で大きなギャップがあるらしく、UIライブラリなどもまだVue3に対応していないものもあるようです。自分のチームでひとつVueで開発されたものがあるのですが、そのUIライブラリはまだVue3に対応していないようでちょっと微妙な気分です。
Nuxt では vite というビルドツールを利用できますが、これが高速でとても快適です。
Svelte/SvelteKit
ReactやVueとは違い、仮想DOMを採用せず、コンパイル方式でsvelteファイルをプレーンなJavaScriptとcssに変換します。ランタイムライブラリがほとんど不要なためファイルサイズが小さく、高速で動作するようです。記述が直感的でシンプルに書けることも個人的には気に入っています。日本語のチュートリアルも整備されていて学習は容易です。
SvelteKitは2022年11月現在リリース候補のステータスです。また、新参のフレームワークなのでエコシステムやコミュニティはまだ小さいです。SvelteKitのルーティングはファイル名やディレクトリ名の命名規約がちょっと変わっているので、好き嫌いが別れそうです。面倒くさい問題もあります。そういう意味ではリスクがありますし、使うのに少し覚悟が必要そうです。
Lit
Web標準に採用されている技術で実現でいきるWeb Componentを簡単に開発できるようにする軽量のフレームワークがLitです。国内ではメルカリで採用されたりしているようです。
残念ながらあまり普及していないようで、使うには勇気と気合が必要そうです。
Vanilla JavaScript
Vanilla JavaScript という名前の何かがあるわけではなく、フレームワークを使わないWEB開発というアプローチを指します。jQueryも不要になっています。
テンプレート言語ぐらいはあったほうがいいと思いますが、依存するパッケージはそのぐらい。複雑なツールには向かないかもしれませんが、数ページ程度の単純なツールであれば検討する価値はあるでしょう。
コードサイズは極小。隅から隅まで自分が理解できるコードだけで動く。依存パッケージは最小限。学習も容易（WEB開発の基本のみ）。
CSS
会社でWEB開発の場合、開発エンジニアとは別にデザイナの方がUIまわりやCSSまわりの設計をしてくれる場合が多いかもしれません。デザインまわりの専門の方のサポートなしに開発する場合は自分で解決するしかありません。
React とCSS
こちらに記載されているように、reactでCSS技術として何を使うかけっこう面倒くさいようです。
素のCSSでは名前のコンフリクトが問題になることがあります。単純なツールでは問題にならないかもしれませんが、比較的ポピュラーなのはSASSを使う方法です。
CSS Modulesでは素のCSSとほとんど変わらずにスコープを閉じることができます。ただ、現在はメンテナンスモードとなっており、将来非推奨になる可能性があるというのは気になります。
CSS in JSが最近はポピュラーかもしれません。もちろんディスる人もいます。
CSSフレームワークとして非常にポピュラーになっているのが Tailwind CSS です。なにごとにもメリット・デメリットありますが、一定のデザインシステムに沿ってスタイルにある程度の一貫性をもたせることができるというのは大きいです。
SvelteとCSS
svelteではcssはデフォルトでscopedになっているようです。すこし考えるべきことが減りますね。
UIライブラリ・コンポーネント
ReactやVueやSvelteを使うとコンポーネントベースでHTMLを組み上げていくことになるのでUIライブラリやUIコンポーネントを利用するのは自然です。会社で共通のUIライブラリやコンポーネントが整備されていることも多いのではないでしょうか。
UIライブラリの弊害
ここにあるように巨大で複雑なUIライブラリを使用すると、どこかでカスタマイズが困難になり、メンテナンスが困難になることがあるようです。記事ではMUI（旧称Material UI）で挫折した筆者がHeadless UIを推しています。
CSSオンリーコンポーネント
UIライブラリにロックインされてしまうのはあまりうれしくありません。できるだけシンプルなものがないかと思っていたらこんな記事を見かけました。CSSだけで提供されたコンポーネントライブラリです。CSSの項で紹介したTailwind CSSを採用しています。Tailwind CSS と組み合わせるならこんなコンポーネントを使うのもいいかなと思います。
とりあえずの結論
Vanilla JavaScriptで十分そうなら余計なフレームワークは使わない
フレームワークを使うなら
安心のNext.js
学習も容易なNuxt
シンプルに記述できる SvelteKit
スタイリングを自分でするなら Tailwind CSS
UIコンポーネントを使うなら daisyUIなどシンプルなものを
番外編
つい最近になって、上記とはちょっと毛色が違うライブラリが目に止まったので調べてみました。
Streamlit
Streamlitはデータサイエンス系エンジニア向けのローコードWEBサイト開発ライブラリです。恐ろしく少ないPythonコードを記述するだけでインタラクティブなWEBアプリを開発できます。1行もHTMLもJavaScriptもcssも記述する必要がありません。たとえば表を表示するためにはpandasのデータフレームをそのまま出力するだけです。Jupyter Notebookという有名なPythonの開発環境があるのですが、あの感覚でWEBアプリが作れます。
大量のPythonライブラリを利用するので最初にあげた希望に当てはまらない面はあるのですが、これだけ簡単に記述できると他のすべての欠点を補って余りあるんじゃないかと思えます。基本的にはデータ系の仕事に振り切って設計されている印象ですが、普通のウェブアプリの開発にも十分に使えるんじゃないでしょうか。
ボタンやスライダのコンポーネントを作って、カラムレイアウトやグリッドレイアウトで配置してみることもできますし、ファイルアップロードはドラッグアンドドロップも対応しています。
ただ本質的にフロントの細かい制御が難しく、たとえばエレメントにidやclassを設定できないためスタイルを設定するのが難しです。APIでサポートしていないイベントを取得することもできない。そういう必要があればカスタムコンポーネントを作る必要があって、そうすると難易度は若干あがります。でも、ま、提供されている機能で実現できそうであれば、これを使うのが一番楽じゃないかと思います。
もうひとつの結論
もうStreamlitで十分じゃなかろうか