言語・フレームワーク・
ライブラリを整理しよう

1. 言語・ライブラリ・フレームワークの違い

3つの言葉を、料理にたとえて整理してみましょう。

ライブラリとフレームワーク、何が違うの？

どちらも「誰かが作ってくれた便利なコード」ですが、主導権がどちらにあるかが違います。

言語にも、いくつか種類がある

HTML と CSS は「処理の手順」を書くものではないので、厳密には「プログラミング言語」とは呼ばれません。でも、Web 開発に欠かせない大切な言語です。

2. IT の言葉の地図

言語ごとに、その上で使われる主なフレームワーク・ライブラリをまとめると、次のようになります。

3. 画面（フロントエンド）のフレームワーク

画面を作る分野では、次の4つの名前をよく耳にします。jQuery だけは「ライブラリ」で、少し前の時代の主役です。

さらに、React の上に乗る Next.js、Vue.js の上に乗る Nuxt のように、「フレームワークの上に乗るフレームワーク」もあります。 ページの切り替えやサーバー側の処理など、Web サイト全体を作るための機能を足したものです。

4. 同じものを4通りで書いてみると

「ボタンを押すと、押した回数が増える」という同じ部品を、それぞれで書いてみるとこうなります。 細かい文法は読めなくて大丈夫。雰囲気の違いを感じてみてください。

<button id="btn">押した回数：<span id="count">0</span></button>

<script>
  let count = 0;
  $("#btn").on("click", function () {
    count = count + 1;
    $("#count").text(count);  // 探して、書き換える
  });
</script>

<script setup lang="ts">
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">押した回数：{{ count }}</button>
</template>

import { useState } from 'react'

export function Counter() {
  const [count, setCount] = useState(0)
  return (
    <button onClick={() => setCount(count + 1)}>
      押した回数：{count}
    </button>
  )
}

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `<button (click)="increment()">押した回数：{{ count() }}</button>`,
})
export class Counter {
  count = signal(0);
  increment() {
    this.count.update((c) => c + 1);
  }
}

Vue.js・React・Angular は、書き方こそ違いますが、「データを変えれば画面が変わる」「画面を部品に分ける」という根っこの考え方は同じです。 1つを身につければ、ほかのものも覚えやすくなります。次の Lesson 12 では、その中から Vue.js を使って、ポートフォリオを作り直します。

5. 裏側（バックエンド）のフレームワーク

Lesson 2 で学んだ「AP サーバー」で動くプログラムにも、言語ごとにフレームワークがあります。 ログイン、データベースとのやりとり、セキュリティ対策など、どのシステムでも必要になる処理を引き受けてくれます。

Spring Boot をちょっとだけのぞいてみる

Spring Boot では、たとえば「/hello にアクセスされたら Hello World! と返す」という処理が、これだけで書けます。

@RestController
public class HelloController {

    @GetMapping("/hello")
    public String hello() {
        return "Hello World!";
    }
}

• @RestController：「このクラスは、ブラウザなどからのリクエストを受け付ける窓口です」という目印
• @GetMapping("/hello")：「/hello というアドレスにアクセスされたら、下の処理を動かして」という目印
• return "Hello World!";：レスポンスとして「Hello World!」を返す

@ で始まる目印（アノテーション）を付けるだけで、通信の受け付けやレスポンスの作成といった面倒な部分は Spring Boot が引き受けてくれます。 Lesson 2 の「HTTP リクエスト → サーバーが処理 → HTTP レスポンス」の、「サーバーが処理」の部分を書いているわけです。 Lesson 5 の Hello World! が、今度はサーバー側から返ってくる、と思うとちょっと感慨深いですね。

6. どうやって選ぶの？

「結局どれがいちばんいいの？」という質問の答えは、残念ながら「作るもの次第」です。現場では、次のような点を考えて選びます。

このシリーズの地図

ここまでのレッスンと、次のレッスンで使うものを地図に当てはめると、こうなります。

確認クイズ

選択肢をクリックしてください。

まとめ

• 言語はコンピュータへの指示の「言葉」、ライブラリは呼び出して使う「道具箱」、フレームワークは「作り方の型」。
• ライブラリとフレームワークの違いは主導権。ライブラリは自分が呼び出し、フレームワークは決まった流れの中で自分のコードが呼ばれる。
• JavaScript（TypeScript）の上には、Vue.js・React・Angular（フレームワーク）や jQuery（ライブラリ）がある。
• Java の上には Spring Boot、PHP には Laravel、Python には Django など、言語ごとにフレームワークがある。
• Java と JavaScript は別物。Node.js は実行環境。
• どれを選ぶかは、作るもの・チームの経験・長く使えるか・会社の方針で決める。