---
layout: "@/layouts/MarkdownLayout.astro"
---

import Toc from "../../components/Toc.astro";
import ExampleWrapper from "@/components/ExampleWrapper.astro";
import TailwindExample from "@/components/example/TailwindExample";
import ReactExample from "@/components/example/ReactExample";
import DayjsExample from "@/components/example/DayjsExample";
import CombinedExample from "@/components/example/CombinedExample";

export const title = "Node.jsってなに？";

# {title}

## TOC

## JavaScriptでパソコンを動かす

JavaScriptはもともと、ウェブブラウザの中でだけ動くプログラミング言語として生まれました。  
HTMLのボタンをクリックしたときに何かを動かしたり、入力内容を検証したりするために使われてきました。

**Node.js**は、この「JavaScriptを実行する仕組み」をブラウザの外に取り出したものです。  
2009年にRyan Dahlによって作られ、これによってJavaScriptはパソコン上で直接動かせるようになりました。

パソコン上で動くということは、ファイルの読み書き、ネットワーク通信、他のプログラムの起動など、  
**パソコンに対するあらゆる操作をJavaScriptで書ける**ということを意味します。

## Node.jsの主な用途

Node.jsがパソコンを自由に操作できる力を持つことで、さまざまな用途に使われています。

### ① Webサーバーとして動かす

Node.jsはWebサーバーとして動作させることができます。  
PHPと同様に、ブラウザからのリクエストを受け取り、処理を行ってレスポンスを返す役割を担えます。

実際の現場では、ApacheやNginxといった既存のWebサーバーと組み合わせて、  
Node.jsが特定の処理を担う形で使われることが多いです。

### ② ブラウザを自動操作してテストする

Node.jsはChromeなどのブラウザをプログラムから操作することができます。  
実際にブラウザを動かしながら「このボタンをクリックしたら正しく動くか」といったテストを自動で行えます。

`Playwright`や`Puppeteer`といったツールがこの用途に使われており、  
人の手では追いきれない大量のテストを効率よく実行できます。

### ③ 別の言語をJavaScriptに変換する

Node.jsは、開発者が書いたコードをブラウザが読める形に変換する「ツール」としても広く使われています。

- **TypeScriptのコンパイル** — 人間が書きやすいTypeScriptを、ブラウザが理解できるJavaScriptに変換する
- **ファイルのバンドル** — 開発のために分割した複数のファイルを1つにまとめる
- **コードの最適化** — 空白やコメントを取り除き、ブラウザが素早く読み込めるように圧縮する

実はこのドキュメントサイト自体もその一例です。  
このサイトは`Astro`という独自の書き方で作られており、JavaScriptとは異なる文法を使っています。  
それを`Vite`というNode.js上で動くツールが処理し、ブラウザが読めるHTMLやJavaScriptに変換しています。  
あなたが今見ているページも、そうして生成されたものです。

## npmとエコシステム

Node.jsには**npm**（Node Package Manager）というパッケージ管理ツールが付属しています。  
世界中の開発者が作ったツールやライブラリを、コマンド一つでインストールして使えるようになる仕組みです。

```bash
npm install パッケージ名
```

先ほど例に挙げたPlaywright、TypeScriptのコンパイラ、ViteやAstroも、  
すべてnpmを通じてインストールして使います。

Node.jsを学ぶことは、こうした開発ツールの使い方を理解することにもつながります。

## 有名なライブラリ

npmには世界中の開発者が作ったライブラリが公開されており、その数は100万を超えています。  
ここでは特によく使われる代表的なライブラリを紹介します。

### UIを作る

#### React

**React**はMeta（旧Facebook）が開発したUIライブラリです。  
ウェブページの画面を「コンポーネント」という部品に分けて管理できるようにしたもので、  
現在最もよく使われているフロントエンドライブラリのひとつです。

ボタンやフォームなどのUI部品を再利用しやすい形で作れるため、大規模なウェブアプリケーションの開発に特に力を発揮します。  
また、`useState`のような仕組みを使うことで、クリックや入力といった操作に応じて画面を自動で更新できます。

Reactのコードをよく見ると、JavaScriptの中にHTMLのような記述が混ざっていることに気づくと思います。  
これは**JSX**と呼ばれる、Reactのための独自の書き方です。

```tsx
// これはJavaScriptではなく、JSXという書き方
return (
  <div>
    <p>クリック数: {count}</p>
  </div>
);
```

JSXはブラウザがそのまま解釈することはできません。  
Node.jsのツール（ViteやTypeScriptなど）が、ブラウザが読めるJavaScriptに変換して初めて動きます。  
つまり、Reactは前のページで紹介した「別の書き方をJavaScriptに変換する」用途のひとつでもあります。

```tsx
import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>クリック数: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={() => setCount(0)}>リセット</button>
    </div>
  );
}
```

<ExampleWrapper><ReactExample client:load /></ExampleWrapper>

#### Tailwind CSS

**Tailwind CSS**はCSSを効率よく書くためのライブラリです。  
通常のCSSはクラス名を自分で決めてスタイルを記述しますが、Tailwind CSSでは`text-lg`や`bg-blue-500`のような  
あらかじめ用意されたクラスを組み合わせることで、CSSファイルをほとんど書かずにスタイルを整えられます。

Tailwind CSSを土台にして、ボタンやカードなどよく使うUIパーツをあらかじめ用意したライブラリもあります。  
このドキュメントサイトでは **daisyUI** というライブラリを使っており、`btn`や`card`といったクラスを使うだけで整ったUIが作れます。

```html
<button class="btn btn-primary">プライマリ</button>
<button class="btn btn-secondary">セカンダリ</button>

<div class="card bg-base-200 shadow-sm">
  <div class="card-body">
    <h3 class="card-title">カードコンポーネント</h3>
    <p>Tailwind CSSのクラスを組み合わせるだけで作れます。</p>
  </div>
</div>
```

<ExampleWrapper><TailwindExample /></ExampleWrapper>

### サーバーを作る

#### Express

**Express**はNode.jsでWebサーバーを作るためのフレームワークです。  
Node.js単体でもWebサーバーは作れますが、Expressを使うことでURLごとの処理を簡潔に書けるようになります。

Node.jsでサーバーを作る場合、現在でも最もよく使われている定番のライブラリです。

```js
import express from "express";

const app = express();

// /hello にアクセスされたときの処理
app.get("/hello", (req, res) => {
  res.send("Hello, World!");
});

app.listen(3000);
```

### 便利ツール

#### Day.js

**Day.js**は日付や時刻を扱うためのライブラリです。  
JavaScriptには標準で日付を扱う機能がありますが、「3日後の日付を求める」「日付を〇年〇月〇日の形式で表示する」  
といった処理を書くのが複雑です。Day.jsを使うとこういった処理をシンプルに書けます。

```js
import dayjs from "dayjs";
import "dayjs/locale/ja";

dayjs.locale("ja");

const now = dayjs();

now.format("YYYY年MM月DD日（ddd）HH時mm分"); // 今日の日時
now.add(7, "day").format("YYYY年MM月DD日");   // 7日後
now.subtract(1, "month").startOf("month");    // 先月の初日
```

<ExampleWrapper><DayjsExample /></ExampleWrapper>

---

これらはほんの一例です。npmには他にも無数のライブラリがあり、  
「やりたいことがあればまず探してみる」というのがNode.js開発の基本的なスタイルです。

いまモダンと言われるWeb開発の多くは、こういったライブラリを組み合わせて作られています。

### 組み合わせる

これらのライブラリは、それぞれ単独で使うだけでなく組み合わせることで力を発揮します。

以下は **React**・**Tailwind CSS**・**Day.js** を組み合わせた例です。  
今日の日付（Day.js）を表示しながら、チェックボックスで状態が変わる（React）、見た目の整ったタスクリスト（Tailwind CSS）を作っています。

```tsx
import dayjs from "dayjs";
import "dayjs/locale/ja";
import { useState } from "react";

dayjs.locale("ja");

const initialTasks = [
  { id: 1, text: "朝のミーティング", done: false },
  { id: 2, text: "仕様書を読む",     done: false },
  { id: 3, text: "コードレビュー",   done: false },
];

export default function TaskList() {
  const [tasks, setTasks] = useState(initialTasks);

  const toggle = (id) => {
    setTasks(tasks.map((t) => (t.id === id ? { ...t, done: !t.done } : t)));
  };

  const done = tasks.filter((t) => t.done).length;

  return (
    <div className="card border border-base-300 max-w-sm">
      <div className="card-body gap-4">
        <div>
          <p className="text-xs text-base-content/50">
            {dayjs().format("YYYY年MM月DD日（ddd）")}
          </p>
          <h3 className="card-title">今日のタスク</h3>
          <p className="text-sm text-base-content/60">{done} / {tasks.length} 完了</p>
        </div>
        <ul className="space-y-2">
          {tasks.map((task) => (
            <li key={task.id}>
              <label className="flex items-center gap-3 cursor-pointer">
                <input
                  type="checkbox"
                  className="checkbox checkbox-primary"
                  checked={task.done}
                  onChange={() => toggle(task.id)}
                />
                <span className={task.done ? "line-through text-base-content/40" : ""}>
                  {task.text}
                </span>
              </label>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}
```

<ExampleWrapper><CombinedExample client:load /></ExampleWrapper>