普段はWEBのフロントエンドエンジニアをしていますが、半年ほどUnity開発がメインでフロントエンド界隈から離れていました。
すでにご存じの話も多いかもしれませんが、これ今どんな感じなの？というトピックを自分のキャッチアップも兼ねて、まとめてみました。
フレームワーク：Svelteがアツいらしい
相変わらずReactは利用率トップで、これは揺るぎないです。
とはいえ「React最強！」みたいな空気は少し弱まっているように感じました。
シンプルで軽量の志向が強い影響か、Svelteがここ1〜2年ですごく人気が出てますね。
小規模サイトに向いているイメージでしたが、Svelte5のリリースで大規模開発にも対応可能になったことも、注目を集めているようです。
簡単なコード例で比較してみる
React
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Count: {count}
</button>
);
}
Svelte
<script>
let count = 0;
</script>
<button on:click={() => count += 1}>
Count: {count}
</button>
letで変数を宣言するだけで、反応型になります。
書き方を見ても、かなりシンプルですね。
ちなみにSvelte5ではRuneという機能が導入され、$:構文を使用することでファイルを超えた参照ができるそうです。
Reactでいうところの、storeの代わりになるものですね。
- let count = 0;
+ let count = $state(0);
Runeには賛否がありますが、まずはどんな感じか使ってみたいなと思っています。
メタフレームワーク：Astroの満足度が高いらしい
やっぱりNext.jsが強いですが、Astroが人気を伸ばしてました。
利用者の満足度も高いようで、2024年の調査1では満足度1位だったみたいです。
私自身は使用経験がないですが、知り合いのエンジニアから勧められたこともあり、評判の高さを感じます。
今後、静的サイトを爆速で作るならAstroが第一選択になりそうです。
ビルドツール：Viteが覇権とりそう
Vite人気ですね。+30%（前年比）2も利用が増えているようです。
SvelteKit、AstroがViteを標準で採用したことで勢いが加速してるのでしょうか。
Webpackとの比較
比較表（引用元：Kinsta3）
| 項目 | Vite（v4.4.11） | Webpack（v5.89.0） |
|---|---|---|
| 開発初回ビルド | 約0.4秒 | 約6秒 |
| ホットリロード | ほぼ一瞬 | 約1.5秒 |
| 本番ビルド | 約2秒 | 約11秒 |
| バンドルサイズ | 866KB | 934KB |
ビルドやホットリロードに関しては完全にViteが上回っていました。
バンドルサイズも若干ですがViteが小さいです。
特定のプラグインの動作が必要だったり、チームの習熟度や規模によっては無理にViteを使用する必要はないかもしれませんが、やはり速いのは魅力的ですよね。
UIコンポーネント：shadcn/uiが良さそう
正直ぜんぜん知りませんでした。
去年からじわじわと人気が出ているみたいです。
ざっくり調べると、こんな感じ
- Radix UI + Tailwind CSSのいい感じなデザインをCLIでコピペ生成できるツール
- プロジェクトごとにコードをコピーする仕組みなので、メンテがちょっと煩雑
- ミニマムなプロジェクトやプロトタイプを爆速で作りたいなら相当良い
Figmaとの連携
コンポーネントをFigmaで再現できるようにデザインシステムやキットが用意されてました。
shadcn/ui for Figma（有料）
@shadcn/ui - Design System（無料）
保守性に問題ありそうですが、スピード重視の場面では活躍しそうなので試してみたいツールです。
AIツール：みんな割と使ってるけど、あんまり信用してないっぽい
Stack Overflowの調査を見ていると、61.8%がAIを利用しているにも関わらず、AIの正確性についての質問に満足していると答えたのは40.3%と、信頼度はそこそこのようです。
開発プロセスにおけるAIツールの利用状況
AIツールの正確性
冒頭で触れたように、ここ半年はUnity開発をやっていたのですが、C#はあまり触り馴染みがないので「このエラーは何？」とかChatGPTを使うことで、学習時間がかなり短縮されて効率が良かったです。
調査を見ていても、AIを使う目的は作業効率向上の目的で利用している人が多そうですね。
最終的には自分で検索して、フォーラムや公式ドキュメントを読むことになるケースが多かったので、やっぱり検索力や調査スキルはまだまだ必要だなぁと思います。
styled-componentsがメンテナンスモードに移行したらしい
実質的な終了を示唆していて、RIP styled-components — Now What? という記事が話題になっていたようです。
CSS Modulesの再評価や、tailwindへの移行などが提案されており、CSS-in-JS界隈は再編の時期が来てしまったのかもしれません。
読んでみると良さそうな記事3選
2024年末〜2025年前半に公開された記事で、読んで良かったものをピックアップしました。
1. Reactをやめた理由と、次に選んだ技術を教えてくれる
コメント欄での議論も活発で、読み応えあります。
2. 複雑なJavaScriptはもうやめてシンプルに戻ろう、という話
複雑化したJavaScriptフレームワークから、Astroなどシンプルなツールへの回帰を提案する内容。
3. ViteとWebpackを比較してくれてる
モジュールバンドラーとは？から始まり、ViteとWebpackの類似点と相違点が詳しくまとまった記事。
今のビルド環境を見直す際に参考になります。
おわりに
しばらく触れていない間にトレンドが動いているのを感じました。
置いてかれないように引き続きゆるく追っていこうと思います。