フロントエンドから少し離れてた人が最近のトレンドをざっくりキャッチアップしてみた

普段はWEBのフロントエンドエンジニアをしていますが、半年ほどUnity開発がメインでフロントエンド界隈から離れていました。
すでにご存じの話も多いかもしれませんが、これ今どんな感じなの？というトピックを自分のキャッチアップも兼ねて、まとめてみました。

---

## フレームワーク：Svelteがアツいらしい

相変わらずReactは利用率トップで、これは揺るぎないです。
とはいえ「React最強！」みたいな空気は少し弱まっているように感じました。

シンプルで軽量の志向が強い影響か、Svelteがここ1〜2年ですごく人気が出てますね。
小規模サイトに向いているイメージでしたが、Svelte5のリリースで大規模開発にも対応可能になったことも、注目を集めているようです。

https://svelte.jp/

### 簡単なコード例で比較してみる

#### React
```tsx
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}
```

#### Svelte
```svelte
<script>
  let count = 0;
</script>

<button on:click={() => count += 1}>
  Count: {count}
</button>
```

`let`で変数を宣言するだけで、反応型になります。
書き方を見ても、かなりシンプルですね。

ちなみにSvelte5ではRuneという機能が導入され、`$:`構文を使用することでファイルを超えた参照ができるそうです。
Reactでいうところの、storeの代わりになるものですね。

```diff_typescript
- let count = 0;
+ let count = $state(0);
```

Runeには賛否がありますが、まずはどんな感じか使ってみたいなと思っています。

---

## メタフレームワーク：Astroの満足度が高いらしい

やっぱりNext.jsが強いですが、Astroが人気を伸ばしてました。

https://astro.build/

利用者の満足度も高いようで、2024年の調査[^1]では満足度1位だったみたいです。

![スクリーンショット 2025-06-03 21.26.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3944976/963a5c28-ec54-4cb3-bd7c-d12ea4b4feb7.png)


私自身は使用経験がないですが、知り合いのエンジニアから勧められたこともあり、評判の高さを感じます。

今後、静的サイトを爆速で作るならAstroが第一選択になりそうです。

---

## ビルドツール：Viteが覇権とりそう
https://ja.vite.dev/

Vite人気ですね。+30%（前年比）[^2]も利用が増えているようです。
SvelteKit、AstroがViteを標準で採用したことで勢いが加速してるのでしょうか。

### Webpackとの比較

**比較表**（引用元：Kinsta[^3]）
| 項目         | Vite（v4.4.11） | Webpack（v5.89.0） |
| ---------- | ------------- | ---------------- |
| 開発初回ビルド | 約0.4秒         | 約6秒              |
| ホットリロード | ほぼ一瞬          | 約1.5秒            |
| 本番ビルド   | 約2秒           | 約11秒             |
| バンドルサイズ | 866KB         | 934KB            |


ビルドやホットリロードに関しては完全にViteが上回っていました。
バンドルサイズも若干ですがViteが小さいです。

特定のプラグインの動作が必要だったり、チームの習熟度や規模によっては無理にViteを使用する必要はないかもしれませんが、やはり速いのは魅力的ですよね。

---

## UIコンポーネント：shadcn/uiが良さそう
https://ui.shadcn.com/

正直ぜんぜん知りませんでした。
去年からじわじわと人気が出ているみたいです。

ざっくり調べると、こんな感じ
- Radix UI + Tailwind CSSのいい感じなデザインをCLIでコピペ生成できるツール
- プロジェクトごとにコードをコピーする仕組みなので、メンテがちょっと煩雑
- ミニマムなプロジェクトやプロトタイプを爆速で作りたいなら相当良い

### Figmaとの連携

コンポーネントをFigmaで再現できるようにデザインシステムやキットが用意されてました。

**shadcn/ui for Figma（有料）**

https://www.shadcndesign.com/


**@shadcn/ui - Design System（無料）**

https://www.figma.com/community/file/1203061493325953101

保守性に問題ありそうですが、スピード重視の場面では活躍しそうなので試してみたいツールです。

---

## AIツール：みんな割と使ってるけど、あんまり信用してないっぽい

Stack Overflowの調査を見ていると、61.8%がAIを利用しているにも関わらず、AIの正確性についての質問に満足していると答えたのは40.3%と、信頼度はそこそこのようです。

### 開発プロセスにおけるAIツールの利用状況
![stackoverflow-dev-survey-2024-ai-sentiment-and-usage-ai-select-social.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3944976/916db93c-22e4-40eb-898b-4f8ba1ffae89.png)

### AIツールの正確性
![stackoverflow-dev-survey-2024-ai-developer-tools-ai-acc-social.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3944976/06626609-1474-4d39-b0fc-62d2a07243f9.png)

冒頭で触れたように、ここ半年はUnity開発をやっていたのですが、C#はあまり触り馴染みがないので「このエラーは何？」とかChatGPTを使うことで、学習時間がかなり短縮されて効率が良かったです。
調査を見ていても、AIを使う目的は作業効率向上の目的で利用している人が多そうですね。

最終的には自分で検索して、フォーラムや公式ドキュメントを読むことになるケースが多かったので、やっぱり検索力や調査スキルはまだまだ必要だなぁと思います。

---

## styled-componentsがメンテナンスモードに移行したらしい

https://opencollective.com/styled-components/updates/thank-you

実質的な終了を示唆していて、[RIP styled-components — Now What?](https://fadamakis.com/rip-styled-components-now-what-a8717df86e86) という記事が話題になっていたようです。

CSS Modulesの再評価や、tailwindへの移行などが提案されており、CSS-in-JS界隈は再編の時期が来てしまったのかもしれません。


---

## 読んでみると良さそうな記事3選
2024年末〜2025年前半に公開された記事で、読んで良かったものをピックアップしました。

### 1. Reactをやめた理由と、次に選んだ技術を教えてくれる

https://dev.to/holasoymalva/why-i-decided-to-stop-working-with-reactjs-in-2025-4d1l

コメント欄での議論も活発で、読み応えあります。


### 2. 複雑なJavaScriptはもうやめてシンプルに戻ろう、という話


https://thenewstack.io/web-development-trends-in-2024-a-shift-back-to-simplicity/

複雑化したJavaScriptフレームワークから、Astroなどシンプルなツールへの回帰を提案する内容。

### 3. ViteとWebpackを比較してくれてる

https://kinsta.com/blog/vite-vs-webpack/

モジュールバンドラーとは？から始まり、ViteとWebpackの類似点と相違点が詳しくまとまった記事。
今のビルド環境を見直す際に参考になります。

---

## おわりに

しばらく触れていない間にトレンドが動いているのを感じました。
置いてかれないように引き続きゆるく追っていこうと思います。

---

## 参考
- [State of JavaScript 2024](https://2024.stateofjs.com/en-US)
- [Stack Overflow Developer Survey 2024](https://survey.stackoverflow.co/2024/)

[^1]: https://2024.stateofjs.com/en-US/libraries/front-end-frameworks/
[^2]: https://2024.stateofjs.com/so-SO/awards/
[^3]: https://kinsta.com/blog/vite-vs-webpack/