Zenn
👴

おじさんエンジニアが最近のモダン技術を「何のためか」で整理してみる

に公開
CSS
React
TypeScript
ポエム
frontend
idea

はじめに

長年この業界にいると、次から次へと現れる新しい技術の波に乗り遅れがちになります。「Next.js って何？」「vanilla-extract って美味しいの？」と感じることも少なくありません。

しかし、新しい技術は、何らかの「既存の問題を解決するため」に生まれてきます。そこでこの記事では、最近のフロントエンド界隈でよく目にするモダンな技術が、一体何を解決するために存在するのかという視点で、自分なりに整理してみたいと思います。

整理してみる技術たち

Zenn のトレンド記事などを参考に、いくつかの技術をピックアップしました。

1. React / Next.js

  • これは何か？:

    • React: UI を構築するための JavaScript ライブラリ。コンポーネントという部品の組み合わせで画面を作るのが基本。
    • Next.js: React をベースにしたフレームワーク。React をより簡単に、より高機能に使うための全部入りセット。

  • 何を解決するため？:

    • React: 昔の jQuery のように、DOM を直接操作するコードが複雑になりがちだった問題を解決。状態（state）が変わると、UI が自動的に更新される「宣言的UI」を実現し、UI開発の複雑さを軽減した。
    • Next.js: React 単体では面倒だった、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）、ルーティング、画像最適化などを、簡単な設定で実現できるようにした。これにより、パフォーマンスやSEOに強いWebアプリケーションを効率的に作れるようになった。

おじさん的理解: React がUI部品を作るためのエンジンで、Next.js はそのエンジンを積んだ、快適装備満載の市販車。

2. TypeScript

  • これは何か？: JavaScript に「型」の概念を追加した言語。

  • 何を解決するため？:

    • JavaScript は動的型付け言語なので、"10" - 5 のような意図しない挙動や、undefined なプロパティにアクセスしてしまう実行時エラーが頻発した。
    • TypeScript は、コードを実行する前に「この変数には数値しか入らない」「このオブジェクトには name プロパティがある」といったことをチェックしてくれる。これにより、バグを早期に発見し、コードの堅牢性を高める。エディタの補完が強力になるのも大きなメリット。

おじさん的理解: 型のない自由な JavaScript に、厳しいけど頼りになる秘書（型システム）を付けた感じ。

3. CSS in JS / vanilla-extract / Kuma UI

  • これらは何か？:

    • CSS in JS: JavaScript のコードの中に CSS のスタイルを記述する技術全般（例: styled-components, Emotion）。
    • vanilla-extract, Kuma UI: 「ゼロランタイム」を特徴とする新しい世代の CSS in JS ライブラリ。

  • 何を解決するため？:

    • 従来の CSS は、すべてのスタイルがグローバルに適用されるため、クラス名の衝突や、意図しないスタイルの上書きといった問題が頻発した（特に大規模開発で）。
    • CSS in JS は、スタイルをコンポーネントのスコープに閉じ込めることで、これらの問題を解決。JavaScript の変数を使えるなど、動的なスタイリングも容易にした。
    • しかし、従来の CSS in JS は、ブラウザ上で JavaScript を実行してスタイルを適用するため、パフォーマンスのオーバーヘッドがあった。
    • vanilla-extract や Kuma UI などの「ゼロランタイム」ライブラリは、ビルド時（コードを変換する際）に静的な CSS ファイルを生成する。これにより、実行時のパフォーマンスを損なうことなく、CSS in JS の開発体験（スコープの管理、TypeScriptとの連携など）の恩恵を受けられる。

おじさん的理解: CSS のグローバル汚染問題を、コンポーネントという個室に閉じ込めて解決したのが CSS in JS。その個室の管理を、実行時（ランタイム）ではなく、ビルド時に済ませてパフォーマンスを良くしたのが vanilla-extract たち。

4. Sass / CSS Modules

  • これらは何か？:

    • Sass: CSS をより効率的に書くための拡張言語（プリプロセッサ）。変数やネスト、ミックスインなどの機能を持つ。
    • CSS Modules: CSS ファイルをコンポーネントのローカルスコープにするための仕組み。

  • 何を解決するため？:

    • Sass: 素の CSS にはない変数や繰り返しなどのプログラミング的な機能を提供し、CSS の記述を効率化・保守しやすくした。
    • CSS Modules: CSS in JS と同じく、クラス名の衝突というグローバルスコープ問題を解決する。CSS ファイルはそのままに、ビルド時に .[componentName]_[className]__[hash] のような一意なクラス名に変換してくれる。

おじさん的理解: Sass は CSS を書くのを楽にするマクロ。CSS Modules は、クラス名が他の人と被らないように、自動でユニークな名前に付け替えてくれる便利ツール。

まとめ

新しい技術は、それぞれが過去の技術の「ここが不便だった」という点を解決するために生まれてきています。その「Why」を理解することで、単なるバズワードではなく、自分の道具箱に入れるべき「ツール」として、それぞれの技術を正しく評価できるのではないでしょうか。

これからも、なぜその技術が必要なのか？という視点を持ちながら、新しい技術の波を楽しんでいきたいと思います。

この記事はAIによって修正・追記されました。

Discussion