UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates (エヌズクリエイツ) 株式会社 フロントエンドエンジニアの齋藤 (@31mskz10) です。

技術には流行り廃りがあり、ついつい流行っている技術を取り入れたくなりますが、「流行っているから」という理由だけで実務に取り入れることは難しいものです。

なぜその技術が流行っているのか？深掘って考えてみることで理解が深まりますし、技術選定のヒントにもなります。

今回は技術が生まれた背景を想像する視点について考えてみます。

なぜこの技術が生まれたのか？

いくつか具体例を見ながら、実際に技術が生まれた背景を考えてみましょう。

具体例①：SPA・CSR

ここ数年の流行りにSPAやCSRといった技術があります。

• SPA（シングルページアプリケーション）
  • 1つのページで動作するウェブアプリケーション
• CSR（クライアントサイドレンダリング）
  • サーバー側からはデータのみを渡して、クライアント（ブラウザ）側でページの描画処理を行う方法

流行った理由として特に大きいのが、下記2つだと思います。

• リッチで高速な表示が求められている
• スマホの性能アップ

まず、クライアント側で処理するとページ切り替えが速かったり、必要な部分だけを更新するなどの処理ができるため、ユーザー体験が上がります。

しかし、処理をするのはクライアント（ブラウザ）側のため、クライアント側に負荷がかかります。
昔のスマホでは厳しかったかもしれませんが、最近のスマホは性能もどんどん上がり、問題無くなってきました。

このような背景を考えると、スペックの低い最低限のローエンドスマホを持つユーザーをターゲットにする場合は、SPAにしないほうがいいかもしれません。

具体例②：Tailwind CSS

ここ数年で大きく変わった技術にTailwind CSSなどのユーティリティ系のCSSがあります。

いままではCSSでスタイルを書いていましたが、class名によってスタイルを当てていくという考え方が流行りました。

この背景には、ReactやVueによるコンポーネントの考え方が大きく影響していると思います。

いままではファイルを分割してコンポーネント化することができなかったため、CSS設計をいかに考えるか、class名を考える必要がありました。

しかし、VueやReactが登場したことでclass名を考えずに直接class名でCSSを指定すればいいという考え方になりました。

逆に言えば、VueやReactのコンポーネント機能を使わない場合は、Tailwind CSSを使うメリットはあまりありません。

似たようなパーツが出てくるたびに、長いclass名を全部コピーして持ってくる必要が生まれてしまいます。
また、Tailwind CSSは使っているclass名をまとめてコンパイルするため、WYSIWYGエディタなどユーザーが入力するときに使われていないclass名を入力しても反映されない可能性があります

※CSSファイルのコメント欄にclass名を書いてもコンパイルされるので、コメントにWYSIWYGでよく使うclass名を書いておくという荒技もありますが不格好です

置き換わるのではなく、選択肢を増やしていくイメージを持つ

新しい技術が出るたびに「○○の時代は終わった！次は○○だ」「まだ○○を使っているの？」といった意見を見かけます。

しかし、なぜその技術が生まれたのか背景を想定すると、「この技術が求められやすくなった」というだけで、それ以外のケースでは従来の方法を採用した方が良いかもしれません。

また、チームで動いている場合、新しい技術をすぐに採用してしまうと人による成果にばらつきが出てくる可能性があります。

技術に振り回されないようにするためにも、あくまで新たな選択肢が増えたなと考え、技術の生まれた背景やチームの状況など、俯瞰した視点を持っておきたいものです。

UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates 株式会社は、神戸三宮オフィスまで週１出社（それ以外はリモートワーク）できる「デザイナー」「エンジニア」を募集しています。

興味のある方は、カジュアル面談しますので気軽にお問い合わせください！