Webフレームワークまとめ

## はじめに

:::note info
この記事は 2023/5/31 に開催した社内勉強会用資料を Qiita 用に編集したものです
:::

世はまさに大 Web 開発時代

あまりにも Web フレームワークが多すぎるので、まとめました

## Web フレームワークとは

### Web フロントエンドを構成する要素

|要素|役割|
|:---|:---|
|HTML|Web ページの構造を記述する|
|CSS|Web ページの見た目を記述する|
|JavaScript|Web ページの動きを記述する|

### フレームワーク

よく使う機能をまとめた枠組み

- 通常の JavaScript だと
  ```javascript
  document.getElementById('id')
  ```

- jQuery だと
  ```javascript
  $('#id')
  ```

**より書きやすく** 、 **よりバグが発生しにくく** なるように作られている

### フレームワークのメリット

- 誰でも同じような実装ができる
- 書き方が統一されやすい
- 便利な機能が使える

### フレームワークのデメリット

- フレームワーク毎に学習が必要
- フレームワークでしか書けないようになる危険性がある
- パフォーマンスが最適とは限らない

### なぜ新しいフレームワークが必要か

- 環境の変化、要求の変化
  - 性能、可読性、保守性
  - 新しい仕組み = SPA、 Web Assembly
- 技術的負債（古いフレームワークの問題）
  - バージョンアップ、マイグレーション
- 技能の幅（生き残る確率を上げる）

### フレームワークの選び方

フレームワークの売り文句に **どういうキーワードが含まれているか** に着目する

- 開発体制
  - 人数が多い、オフショア: **「大規模向け」**
  - 少数精鋭: **「生産性が高い」**
- パフォーマンス: **「軽量、高速」**
- モチベーション: **「最新、最先端」**

## JavaScript

### Vanilla JS

何のフレームワークも使っていない状態
= 素の JavaScript

http://vanilla-js.com/

- フレームワークが多すぎる現状を揶揄した呼び方
- JavaScript 自体も進化しているため、昔よりはかなり書きやすくなっている
- 余計なことはしないため、パフォーマンスが最適

実装例

<p class="codepen" data-height="800" data-default-tab="js,result" data-slug-hash="RweJRPJ" data-user="ryowakabayashi" style="height: 800px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/RweJRPJ">
  Vanilla</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### ECMA Script

JavaScript の標準規格

https://ja.wikipedia.org/wiki/ECMAScript

JavaScript 自体はブラウザ毎に実装が異なる

### AltJS

JavaScript の代替言語

トランスパイル（言語間の変換）することで JavaScript に変換する

#### TypeScript

JavaScript に型を導入した言語

https://www.typescriptlang.org/

- 型によってビルド時にエラーを検知できる
- 厳密、堅牢なコードを書きやすい
- チーム開発に向いている
- コード量は増える

実装例

<p class="codepen" data-height="800" data-default-tab="js,result" data-slug-hash="wvYOzwd" data-user="ryowakabayashi" style="height: 800px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/wvYOzwd">
  TypeScript</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### CoffeeScript

JavaScript を書きやすくした言語

https://coffeescript.org/

- Ruby や Python のようにシンプルな構文で書ける
- コード量が減る
- 現在はほぼ使われていない
  - 構文が独特で受け入れられなかった
  - TypeScript と比べるとバグが発生しやすい

実装例

<p class="codepen" data-height="700" data-default-tab="js,result" data-slug-hash="bGmZwdr" data-user="ryowakabayashi" style="height: 700px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/bGmZwdr">
  CoffeeScript</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## JavaScript フレームワーク

### jQuery

DOM 操作を簡単にするフレームワーク

https://jquery.com/

- `$()` で要素を参照できる
- ブラウザ間の差異を吸収してくれる
- 現在はほぼ使われていない
  - 動作が遅い
  - 主なプラグインが開発終了している

実装例

<p class="codepen" data-height="600" data-default-tab="js,result" data-slug-hash="ExdeaRL" data-user="ryowakabayashi" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/ExdeaRL">
  jQuery</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### Angular

https://angular.jp/

Google が開発したフレームワーク

- TypeScript で書く
- データバインディングが強力
- 現在はほぼ使われていない
  - メジャーバージョンアップが頻繁すぎた
  - 構文が独特で冗長すぎた

実装例

<p class="codepen" data-height="1300" data-default-tab="js,result" data-slug-hash="WNaYrPb" data-user="ryowakabayashi" style="height: 1300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/WNaYrPb">
  Angular</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### React

Facebook が開発したフレームワーク

https://ja.legacy.reactjs.org/

- JSX という独自の構文で書く
- データバインディングが強力
- 状態管理が強力
- 現在の主流の一つ

実装例

<p class="codepen" data-height="800" data-default-tab="js,result" data-slug-hash="qBJKbNL" data-user="ryowakabayashi" style="height: 800px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/qBJKbNL">
  React</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### Vue.js

Evan You （Angular の開発者）が開発したフレームワーク

https://ja.vuejs.org/

- HTML と JavaScript をセットで書く
- 双方向データバインディングが強力
- 状態管理が強力
- 現在の主流の一つ
- 2 と 3 で大きく仕様が変わる

実装例

<p class="codepen" data-height="1400" data-default-tab="vue,result" data-slug-hash="BaqVjXd" data-user="ryowakabayashi" style="height: 1400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/BaqVjXd">
  Vue3</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### Preact

React の軽量版

https://preactjs.com/

- React とほぼ同じ機能
- サイズが小さい

[実装例](https://plnkr.co/edit/8lGJmDKURragoUWu?preview)

:::note warn
CodePen で実装できなかったため Plunker を使用した[実装例をリンク](https://plnkr.co/edit/8lGJmDKURragoUWu?preview)しています

コードのみ以下に示す
:::

```javascript
import { h, render } from 'preact';
import { useState } from 'preact/hooks';
import { html } from "htm/preact";
import './style.css';

const App = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  return html`
    <div class="main-container">
      <div class="counter-container">
        <button onClick=${() => setCount(count + 1)}>Click</button>
        <div>${count}</div>
      </div>
      <div class="form-container">
        <input
          type="text"
          value=${text}
          onInput=${(event) => setText(event.target.value)}
        />
        ${ text !== "" &&
          html`<p class="form-display">${text}</p>`
        }
      </div>
    </div>
  `
}

render(html`<${App} />`, document.body)
```

### [Svelte](https://svelte.jp/)

今注目のフレームワーク

- 仮想 DOM を使わないことで高速化
- 構文がよりシンプルに洗練されている

[実装例](https://svelte.dev/repl/84603634b3844f3cadfa26f8385a4f2e)

:::note warn
CodePen で実装できなかったため、公式のプレイグラウンドを使用した[実装例をリンク](https://svelte.dev/repl/84603634b3844f3cadfa26f8385a4f2e)しています

逆に公式のプレイグラウンドで好きなだけ試せる

コードのみ以下に示す
:::

```javascript
<script>
  let count = 0;
  let text = '';

  const handleClick = () => {
    count += 1;
  }
</script>

<div class="content">
  <div class="main-container">
    <div class="counter-container">
      <button on:click={handleClick}>Click</button>
      <div>{count}</div>
    </div>
    <div class="form-container">
      <input type="text" bind:value={text} />
      {#if text}
        <p class="form-display">{text}</p>
      {/if}
    </div>
  </div>
</div>

<style>
...省略...
</style>
```

### Alpine.js

今注目のフレームワーク

https://alpinejs.dev/

- 超シンプル
- 覚えるべきことが少ない

Tailwind CSS と組み合わせると、 HTML ファイルだけで UI を完結できる

https://qiita.com/RyoWakabayashi/items/c2d5db339e3bc4811deb

実装例

<p class="codepen" data-height="400" data-default-tab="html,result" data-slug-hash="gOBKrqK" data-user="ryowakabayashi" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/gOBKrqK">
  Alpine</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## CSS

### 通常の CSS

- セレクタとプロパティを使ってWebページのスタイル（外観）を指定する
- 最近は CSS だけでアニメーションなどを実装することもできる
- メディアクエリによってレスポンシブ対応をする

実装例

<p class="codepen" data-height="900" data-default-tab="css,result" data-slug-hash="RweJRPJ" data-user="ryowakabayashi" style="height: 900px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/RweJRPJ">
  Vanilla</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

https://qiita.com/RyoWakabayashi/items/fd0d6813e4b0f3763d99

### SASS

Sass = CSS を拡張した言語
SASS = Sass の記法

https://sass-lang.com/

- 変数や関数、ネストを使える
- 格好ではなくインデントでブロックを表現する
- あまり使われることはない
  - 記法が独特
  - 通常の CSS との互換性がない

実装例

<p class="codepen" data-height="850" data-default-tab="css,result" data-slug-hash="MWPzyQO" data-user="ryowakabayashi" style="height: 850px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/MWPzyQO">
  SASS</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### SCSS

CSS と同じ記法で書く Sass

- Sass の機能を使える
- 通常の CSS との互換性がある
- 現在よく使われているが、通常の CSS にも便利な機能が増えてきているため、必要性は下がった

実装例

<p class="codepen" data-height="1000" data-default-tab="css,result" data-slug-hash="eYPQZGy" data-user="ryowakabayashi" style="height: 1000px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/eYPQZGy">
  SCSS</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

https://qiita.com/RyoWakabayashi/items/e15a0da7105320127213

### BEM

CSS のクラス名を決めるルール

- Block（ブロック）と Element（要素）と Modifier（修飾子）の頭文字
- クラス名は `block__element--modifier` のように書く
- 名前が衝突するのを防ぐ

実装例

<p class="codepen" data-height="900" data-default-tab="css,result" data-slug-hash="abRroqN" data-user="ryowakabayashi" style="height: 900px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/abRroqN">
  BEM</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

SCSS 実装例

<p class="codepen" data-height="950" data-default-tab="css,result" data-slug-hash="NWOVKYE" data-user="ryowakabayashi" style="height: 950px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/NWOVKYE">
  BEM SCSS</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## CSS フレームワーク

### Bootstrap

JavaScript と CSS のフレームワーク

https://getbootstrap.jp/

- シンプルなデザインをクラスだけで実現できる
- レスポンシブ対応など、便利な機能が多数
- 一時期大流行したため、現在は古臭いデザインになりつつある
- jQuery に依存しているため、重い

実装例

<p class="codepen" data-height="400" data-default-tab="html,result" data-slug-hash="OJBaNZN" data-user="ryowakabayashi" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/OJBaNZN">
  Bootstrap</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### Bulma

CSS のみで構成されたフレームワーク

https://bulma.io/

- シンプルでレスポンシブなデザインをクラスだけで実現できる
- CSS だけで作られているので軽量

実装例

<p class="codepen" data-height="420" data-default-tab="html,result" data-slug-hash="ExdGNpL" data-user="ryowakabayashi" style="height: 420px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/ExdGNpL">
  Bulma</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### Materialize

Google のマテリアルデザインを実現するフレームワーク

https://materializecss.com/

- Android や Google 製アプリの UI に使われているマテリアルデザインを実現できる
- カードやコレクションなどのコンポーネントが豊富

実装例

<p class="codepen" data-height="400" data-default-tab="html,result" data-slug-hash="VwEqmRO" data-user="ryowakabayashi" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/VwEqmRO">
  Materialize</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### Skeleton

シンプルなデザインを実現するフレームワーク

http://getskeleton.com/

- 必要最低限の機能だけを提供するため軽量
- グリッドシステムに対応している

実装例

<p class="codepen" data-height="400" data-default-tab="html,result" data-slug-hash="XWxoNoE" data-user="ryowakabayashi" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/XWxoNoE">
  Skeleton</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### [Tailwind CSS](https://tailwindcss.com/)

クラスだけでデザインを実現するフレームワーク

- シンプルでレスポンシブなデザインをクラスだけで実現できる
- 必要なクラスだけをビルド時に出力するので軽量
- クラス指定が長くなる

Alpine.js と組み合わせると HTML ファイルだけで UI を完結できる

https://qiita.com/RyoWakabayashi/items/c2d5db339e3bc4811deb

実装例

<p class="codepen" data-height="400" data-default-tab="html,result" data-slug-hash="mdzQPPY" data-user="ryowakabayashi" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/mdzQPPY">
  TailwindCSS</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## JS, CSS 以外のフレームワーク

各言語のフレームワークを名前と公式サイトだけ列挙します

### Spring Boot

Java の Web フレームワーク

https://spring.io/projects/spring-boot

### ASP.NET Core

C# の Web フレームワーク

https://docs.microsoft.com/ja-jp/aspnet/core/?view=aspnetcore-5.0

### Ruby on Rails

Ruby の Web フレームワーク

https://rubyonrails.org/

### Django

Python の Web フレームワーク

https://www.djangoproject.com/

### Laravel

PHP の Web フレームワーク

https://laravel.com/

### Express

Node.js の Web フレームワーク

https://expressjs.com/

### Flutter

Dart のフレームワーク

https://flutter.dev/

### Phoenix

Elixir の Web フレームワーク

https://www.phoenixframework.org/

### Yew

Rust の Web フレームワーク

https://yew.rs/ja/

## 多重フレームワーク

フレームワークの外側を更にラッピングして使いやすくしたもの

### Nuxt.js

Vue.js のフレームワーク

https://ja.nuxtjs.org/

### Next.js

React のフレームワーク

https://nextjs.org/

### Gatsby

React のフレームワーク

https://www.gatsbyjs.com/

### Astro

React や Vue のコードを元に HTML や CSS だけのサイトを生成する

https://astro.build/

### Petal

Phoenix のフレームワーク

https://petal.build/

https://qiita.com/RyoWakabayashi/items/64caebfba579a7114e9c

## フレームワークの人気

### Stack Overflow Developer Survey

Stack Overflow が毎年調査している開発者へのアンケート調査です

使用している、というアンケートでは実質 React の圧勝
（Node.js は基盤的なものとして）

いまだに jQuery も多く使われています

https://survey.stackoverflow.co/2023/#section-most-popular-technologies-web-frameworks-and-technologies

![スクリーンショット 2023-11-12 23.41.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/677576d9-1319-8142-e20f-ac0a18bbbdf1.png)

使ってよかった、今後も使いたい、というアンケートでは Phoenix が最も称賛されています

https://survey.stackoverflow.co/2023/#section-admired-and-desired-web-frameworks-and-technologies

![スクリーンショット 2023-11-13 18.53.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/6756e797-058f-14d7-a4ae-918acd84813a.png)

### State of JS

こちらは 2022 年ですが、 JS に限った調査

https://2022.stateofjs.com/ja-JP/libraries/front-end-frameworks/

React 、　Svelte 、 Vue の評価が高いです

![スクリーンショット 2023-11-13 8.54.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/511e760a-b81e-266c-6d09-5785a538b6d8.png)

### 時代による変遷

Angular　と決別したという記事です

https://www.wantedly.com/companies/loglass/post_articles/331280

## フレームワークの学び方

簡単に動かせる場所が用意されているので、どんどん使いましょう

- [CodePen](https://codepen.io/)
- [W3 schools](https://www.w3schools.com/)
- [Svelte REPL](https://svelte.dev/repl/)

## まとめ

各フレームワークに特色があるので、「これだけが唯一の正解」というものはありません

環境、目的に合わせたフレームワークを選択しましょう

また、新しいフレームワークの動向に注目し、小さな規模から実践し試していきましょう

私（私の所属しているグループ）は、おおよそこんな感じで使い分けています

- 小規模案件、社内ツール: Svelte （シンプルで生産性が高い）
- 中規模から大規模: Nuxt.js （プラグインが充実しており、開発もしやすい）
- リアルタイム、多人数接続: Phoenix (堅牢、 LiveView でソケット通信を要する処理も書きやすい)