
## TL;DR

このページでは、Rest パラメータの実装方法について解説しますね。一言でいうと Rest パラメータとは、JavaScript や TypeScript で関数に可変長の引数を渡すための特別な構文です。では、実際に使ってみましょう。

| 開発環境   | バージョン |
| :--------- | :--------- |
| Next.js    | 13.4.4     |
| TypeScript | 5.0.4      |
| Emotion    | 11.11.0    |
| React      | 18.2.0     |

### Rest パラメータ（残余引数）とは？

Rest パラメータは、JavaScript と TypeScript の関数で、引数の数が不確定な場合に使用します。Rest パラメータを使うと、複数の引数を配列としてまとめることができます。

Rest パラメータとは、関数に任意の数の引数を渡すことを可能にする JavaScript と TypeScript の特性を指します。

この特性は "残余引数" とも呼ばれ、3 つのドット（...）を引数名の前に付けることで利用できます。これにより、関数は可変数の引数を配列として受け取ることができます。

```tsx
const sampleFunction = (...args: number[]) => {
  /* ... */
}
```

この `sampleFunction` は、引数の数がいくつであっても処理できます。ここで、`args` は配列として扱われ、関数内部で配列のメソッドを利用することができます。

また、Rest パラメータ（残余引数）は引数リストの最後にしか置くことができず、一つの関数内では一度しか使うことができません。これらは、Rest パラメータを使用する際の重要なルールです。

以下は、基本的な Rest パラメータの使用方法です。

```tsx
const sum = (...numbers: number[]): number => {
  return numbers.reduce((prev, current) => prev + current, 0)
}

console.log(sum(1, 2, 3, 4)) // 10
```

上記の `sum` 関数は、`...numbers: number[]`という形で Rest パラメータを定義しています。この `...numbers`は、関数 `sum`に渡された任意の数の引数を`numbers`という配列にまとめてくれます。この関数は、`1`, `2`, `3`, `4`といった任意の数の引数を受け取り、それらをすべて足し合わせた結果を返します。

### Rest パラメータは関数の引数リストの最後に書く

Rest パラメータは関数の引数リストの最後にある必要があります。

Rest パラメータは、その位置から関数の最後までのすべての引数を配列にまとめる役割を持っています。そのため、Rest パラメータの後に他の引数を置くことはできません。以下のようなコードは無効です。

```tsx
// これは無効です。
const invalidFunction = (...args: number[], anotherArg: string) => {
  // do something
}
```

これを TypeScript で実行しようとすると、コンパイラは次のようなエラーメッセージを出力します：

```
A rest parameter must be last in a parameter list.
```

これは、「Rest パラメータはパラメータリストの最後でなければならない」という意味です。

### Rest パラメータについて理解する際に注意すべき点

Rest パラメータについて理解する際に注意すべき点としては以下の 2 つがあります。

1. Rest パラメータは引数リストの最後にしか配置できません。
2. Rest パラメータは一つの関数内で一度だけしか使用できません。

分かりやすい例を一つ挙げましょう。以下は、与えられた全ての数字を合計する関数を Rest パラメータを使って実装したものです。

```tsx
type NumericArray = number[]

const sum = (...numbers: NumericArray) => {
  let total = 0
  for (const num of numbers) {
    total += num
  }
  return total
}

console.log(sum(1, 2, 3, 4)) // 10を出力します。
```

この例では、`sum` 関数は任意の数の引数を取ることができます。これらの引数はすべて `numbers` 配列に格納され、それを用いて総和を求めています。

なお、Rest パラメータは TypeScript の特性であり、JavaScript や他の多くのプログラミング言語でも使われている特性です。これにより関数が可変長の引数を柔軟に扱うことができ、コードの再利用性と可読性を向上させることができます。

### Next.js で、Rest パラメータを実装

それでは Next.js と TypeScript を使って、Rest パラメータの実装例を見てみましょう。今回は、複数の CSS スタイルを結合する `mergeStyles`関数を作成します。

`components/mergeStyles.tsx`:

```tsx
import { css, SerializedStyles } from '@emotion/react'

type Styles = SerializedStyles | SerializedStyles[]

const mergeStyles = (...styles: Styles[]): SerializedStyles => {
  return css(styles.flat())
}

export default mergeStyles
```

この `mergeStyles`関数では、`...styles: Styles[]`という形で Rest パラメータを受け取ります。これにより、引数として複数のスタイルオブジェクトを受け取ることができます。そして、`styles.flat()`により、ネストされた配列もフラットにすることができます。

### Emotion での利用例

それでは、作成した `mergeStyles`関数を Emotion で利用してみましょう。Next.js のコンポーネントで、複数のスタイルを結合して適用する例を示します。

`components/MyComponent.tsx`:

```tsx
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react'
import mergeStyles from './mergeStyles'

type Props = {
  isActive: boolean
}

const MyComponent = ({ isActive }: Props) => {
  const activeStyle = css`
    color: blue;
  `

  const baseStyle = css`
    font-size: 16px;
  `

  return <div css={mergeStyles(baseStyle, isActive && activeStyle)}>Hello, World!</div>
}

export default MyComponent
```

このコンポーネントでは、`mergeStyles(baseStyle, isActive && activeStyle)`という形で、`mergeStyles`関数を利用しています。`isActive`が`true`の場合、`activeStyle`が適用され、`false`の場合は適用されません。これにより、動的にスタイルを結合することができます。

### API ルートの動的パラメータ

Next.js では、API ルートでも Rest パラメータを活用することができます。これにより、動的な URL パラメータを扱うことが可能になります。以下に、その例を示します。

`pages/api/user/[...username].ts`:

```tsx
import type { NextApiRequest, NextApiResponse } from 'next'

type Params = {
  username: string[]
}

type Data = {
  username: string
}

const handler = (req: NextApiRequest, res: NextApiResponse<Data>) => {
  const { username } = req.query as Params

  res.status(200).json({ username: username.join('/') })
}

export default handler
```

この API ルートでは、`[...username]`という形で Rest パラメータを定義しています。この形式を使うことで、`/api/user/john/doe`のような URL が全てこの API ルートにマッチします。そして、`username`パラメータは`['john', 'doe']`という配列として取得できます。


Next.js と TypeScript を使って、Rest パラメータを活用する方法を初学者にも理解できるよう解説します。

Next.js と TypeScript で、Rest パラメータ（残余引数）...を使う


## TL;DR

このページでは、「タイマーアプリを作る」方法について解説します。一言で言うと「タイマーアプリ」とは、特定の時間を設定し、その時間が経過したら通知するアプリのことです。

| 開発環境   | バージョン |
| :--------- | :--------- |
| Next.js    | 13.4.4     |
| TypeScript | 5.0.4      |
| Emotion    | 11.11.0    |
| React      | 18.2.0     |

### 「タイマーアプリ」コンポーネント

「タイマーアプリ」は、指定した時間が経過したら通知を出すというシンプルなアプリケーションです。ただし、そのシンプルさがユーザーにとって使いやすさを生むため、実装面では細部まで注意を払う必要があります。最も基本的な要素としては「時間の設定」「時間のカウントダウン」「時間経過の通知」の 3 つが挙げられます。

以下に、一番基本的なタイマーアプリの機能をもつコンポーネントを見ていきましょう。

```tsx
// ファイル名: components/BasicTimer.tsx
// ReactとReactのHooksであるuseStateをインポートしています
import React, { useState } from 'react'

// プロパティの型定義を行います。ここでは、初期カウントをnumber型で受け取るようにしています
type Props = {
  initialCount: number
}

// Functional Componentを定義します。Props型の初期カウントを受け取ります
const BasicTimer = ({ initialCount }: Props) => {
  // カウントの状態とその更新関数を定義します。初期値はPropsから受け取った初期カウントです
  const [count, setCount] = useState(initialCount)

  // tick関数を定義します。カウントが0より大きいとき、カウントを1減らします
  const tick = () => {
    if (count > 0) setCount((prevCount) => prevCount - 1)
  }

  // useEffect Hookを使って、コンポーネントのレンダリング後に実行する処理を設定します
  React.useEffect(() => {
    // 1秒ごとにtick関数を実行するタイマーを設定します
    const timerId = setInterval(() => {
      tick()
    }, 1000)

    // クリーンアップ関数を定義します。この関数はコンポーネントがアンマウントされたとき、
    // または依存配列が更新されたときに呼ばれます。
    // ここではタイマーをクリアします
    return () => clearInterval(timerId)
  }, [count]) // 依存配列にカウントを指定します。
  // これにより、カウントが変更されるたびにエフェクトが実行されます

  // カウントを表示するdiv要素をレンダリングします
  return <div>{count}</div>
}

// BasicTimerコンポーネントをエクスポートします。
// 他のファイルからimportして使うことができます
export default BasicTimer
```

このコンポーネントでは、React の`useState`と`useEffect`を使って、カウントダウンの機能を実装しています。`useState`は状態管理のためのもので、ここではタイマーのカウントを管理しています。`useEffect`は副作用を扱うためのもので、ここでは時間が経過するたびにカウントを減らしています。

このコードをより詳しく見ていきましょう。

まず、`useState`を使ってカウントの初期値を設定します。次に`tick`という関数を定義し、カウントが 0 より大きい場合はカウントを 1 減らすようにします。そして、`useEffect`を使って 1 秒ごとに`tick`関数を実行します。これにより、カウントダウンの機能が実現できます。また、`useEffect`のクリーンアップ関数でタイマーをクリアして、メモリリークを防ぎます。

以上が、タイマーアプリの基本的な仕組みとなります。しかし、現実のタイマーアプリではさらに多くの機能が必要となるでしょう。例えば、時間の設定、カウントダウンの一時停止、再開、リセットなどの機能が求められます。次のセクションでは、これらの機能を含むより実用的なタイマーアプリを Next.js と TypeScript で作成していきます。

### Next.js で、タイマーアプリを実装

さて、次にタイマーアプリの実装に移ります。ここでは、基本的なタイマー機能に加えて、「時間の設定」「カウントダウンの一時停止」「再開」「リセット」の各機能を実装していきます。

まずは、タイマーコンポーネントの全体のコードから見ていきましょう。

```tsx
// ファイル名: components/TimerApp.tsx
// ReactとReactのHooksであるuseStateをインポートします
import React, { useState } from 'react'

// プロパティの型定義を行います。初期カウントをnumber型で受け取ることができます
type Props = {
  initialCount: number
}

// TimerAppというFunctional Componentを定義します。Props型のinitialCountを受け取ります
const TimerApp = ({ initialCount }: Props) => {
  // カウントとその更新関数をuseState Hookで定義します。
  // 初期値はPropsから受け取った初期カウントです
  const [count, setCount] = useState(initialCount)
  // タイマーが動いているかどうかの状態とその更新関数をuseState Hookで定義します。
  // 初期値はfalseです
  const [isRunning, setIsRunning] = useState(false)

  // タイマーを開始する関数を定義します。isRunningの状態をtrueに更新します
  const start = () => setIsRunning(true)
  // タイマーを一時停止する関数を定義します。isRunningの状態をfalseに更新します
  const pause = () => setIsRunning(false)
  // タイマーをリセットする関数を定義します。カウントを初期カウントに戻し、
  // isRunningの状態をfalseに更新します
  const reset = () => {
    setCount(initialCount)
    setIsRunning(false)
  }

  // カウントダウンを実行する関数を定義します。
  // カウントが0より大きいとき、カウントを1減らします
  const tick = () => {
    if (count > 0) setCount((prevCount) => prevCount - 1)
  }

  // useEffect Hookを使って、コンポーネントのレンダリング後に実行する処理を設定します
  React.useEffect(() => {
    let timerId: NodeJS.Timeout | null = null

    // タイマーが動いていて、カウントが0より大きい場合、
    // 1秒ごとにtick関数を実行するタイマーを設定します
    if (isRunning && count > 0) {
      timerId = setInterval(() => {
        tick()
      }, 1000)
    }

    // クリーンアップ関数を定義します。
    // この関数はコンポーネントがアンマウントされたとき、
    // または依存配列が更新されたときに呼ばれます。ここではタイマーをクリアします
    return () => {
      if (timerId) clearInterval(timerId)
    }
  }, [isRunning, count])
  // 依存配列にisRunningとカウントを指定します。
  // これにより、いずれかが変更されるたびにエフェクトが実行されます

  // カウントと操作ボタンを表示するdiv要素をレンダリングします
  return (
    <div>
      <div>{count}</div> {/* 現在のカウントを表示します */}
      <button onClick={start}>Start</button> {/* Startボタン。クリックするとstart関数が実行されます */}
      <button onClick={pause}>Pause</button> {/* Pauseボタン。クリックするとpause関数が実行されます */}
      <button onClick={reset}>Reset</button> {/* Resetボタン。クリックするとreset関数が実行されます */}
    </div>
  )
}

// TimerAppコンポーネントをエクスポートします。他のファイルからimportして使うことができます
export default TimerApp
```

#### タイマーの制御

このコードでは、まず`useState`を使って`count`と`isRunning`の 2 つの状態を管理しています。

次に、タイマーの一時停止、再開、リセットを行うための`start`、`pause`、`reset`関数を定義しています。`start`関数はタイマーを開始するために、`isRunning`を`true`に設定します。`pause`関数はタイマーを一時停止するために、`isRunning`を`false`に設定します。そして、`reset`関数はカウントを初期値に戻し、タイマーを停止するために、`isRunning`を`false`に設定します。

#### カウントダウン処理

カウントダウンの処理は、`tick`関数と`useEffect`フックを使って行います。`tick`関数はカウントが 0 より大きい場合にカウントを 1 減らします。そして、`useEffect`フックを使って、タイマーが動作していてカウントが 0 より大きい場合に、1 秒ごとに`tick`関数を実行します。

#### コンポーネントのレンダリング

最後に、タイマーの値と、タイマーの開始、一時停止、リセットを行うボタンをレンダリングします。ボタンはそれぞれ`onClick`プロパティを使って、対応する関数を呼び出します。

以上がタイマーアプリの実装となります。ここまでで、タイマーアプリの基本的な機能を持つコンポーネントが完成しました。次にこのコンポーネントを呼び出す方法を見ていきましょう。

### タイマーアプリの呼び出し方法

次に、作成した`TimerApp`コンポーネントを呼び出す方法を見ていきます。`TimerApp`コンポーネントは`initialCount`というプロパティを受け取ります。このプロパティはタイマーの初期値として使われます。

```tsx
// ファイル名: pages/index.tsx
import React from 'react'
import TimerApp from '../components/TimerApp'

const IndexPage = () => {
  return (
    <div>
      <h1>Timer App</h1>
      <TimerApp initialCount={60} />
    </div>
  )
}

export default IndexPage
```

以上が、タイマーアプリの呼び出し方になります。ここでは、`TimerApp`コンポーネントに`60`という初期値を与え、1 分のタイマーを作成しています。

以上で、Next.js と TypeScript を使ったタイマーアプリの作成は完了です。これらのコードを活用して、自分だけのタイマーアプリを作成してみてください。


Next.js と TypeScript を駆使して、シンプルかつパワフルなタイマーアプリを開発する方法について解説します。

Next.js と TypeScript で、タイマーアプリを作る


## TL;DR

記事全体を見直し、公平さと正確性に欠ける部分があるので、削除いたしました。


WordPressのリスクやデメリットを理解します。

あなたの知らない WordPress のデメリットとリスク


## TL;DR

このページでは、Next.js のダイナミックルーティングの実装方法について解説します。事前にセグメント名を知らなくても、動的なデータからルートを作成することが可能になります。これにより、ブログ記事のような動的なコンテンツを効率的に管理することができます。

> この記事は、Next.js の公式ドキュメンテーションを参考について解説しています。特に、[Dynamic Routes](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes)のセクションを基に、その内容を理解しやすく解釈し直し、さらに詳細な説明を加えています。
>
> この記事は、Next.js の公式ドキュメンテーションの素晴らしい内容を尊重し、その知識を広めることを目指しています。そのため、この記事の内容は、公式ドキュメンテーションの内容をそのまま意訳するのではなく、それを基に私たち自身の理解と経験を元にした解釈と説明を加えています。
>
> もし、より詳細な情報や公式の説明を求める場合は、[Next.js の公式ドキュメンテーション](https://nextjs.org/docs)を直接ご覧いただくことを強く推奨します。この記事の解説はあくまで参考の一つであり、公式ドキュメンテーションには、より詳細な情報や最新の更新情報が含まれています。

| 開発環境   | バージョン           |
| :--------- | :------------------- |
| Next.js    | 13.4.4(Pages Router) |
| TypeScript | 5.0.4                |
| Emotion    | 11.11.0              |
| React      | 18.2.0               |

### セグメントとは？

セグメントというのは、道路の一部分のようなものです。

例えば、あなたが学校に行くとき、家から学校までの道のりを考えてみましょう。まず家を出て、最初の交差点まで行きます。次に、その交差点から公園まで行きます。そして、公園から学校まで行きます。このとき、家から交差点までの道のり、交差点から公園までの道のり、公園から学校までの道のり、それぞれが「セグメント」です。

ウェブサイトの URL も同じように考えることができます。例えば、`https://example.com/shop/clothes/tops` という URL があるとします。この URL は、`https://example.com/` から始まり、そこから `shop/`、次に `clothes/`、最後に `tops` と進んでいきます。このとき、`shop/`、`clothes/`、`tops` それぞれが URL の「セグメント」です。

つまり、セグメントとは、道のりや URL をいくつかの部分に分けたときの一部分のことを指します。

### ダイナミックルーティング

事前に正確なセグメント名を知らない場合や、動的なデータからルートを作成したい場合、ダイナミックセグメントを使用すると便利です。これはリクエスト時に埋め込まれるか、ビルド時に事前にレンダリングされます。

### ダイナミックセグメントのルール

ダイナミックセグメントは、フォルダ名を角括弧で囲むことで作成できます。例えば、[id] や [slug] などです。ダイナミックセグメントは `useRouter` を使ってアクセスできます。

ダイナミックセグメントの名前は任意に設定することができます。ただし、その名前は URL の一部となり、またコード内でその値にアクセスするためのキーとなるため、そのページの内容を適切に表す名前を選ぶことが推奨されます。

例えば、ブログ記事のページを作成する場合、記事の一意の識別子を表すために `[slug]` や `[id]` といった名前がよく使われます。また、ユーザープロフィールページを作成する場合、ユーザー名を表すために `[username]` といった名前を使うこともあります。

このように、ダイナミックセグメントの名前はそのページの内容や目的に応じて選ぶことができます。

### ルートのディレクトリマップ

今回解説するルートのディレクトリマップは次のようになります。

```
pages/
├─ blog/
│  ├─ [slug].js
├─ shop/
│  ├─ [...slug].js
│  ├─ [[...slug]].js
```

これは、ウェブサイトの「地図」のようなものです。それぞれのフォルダやファイルが、ウェブサイトの特定の部分を表しています。

- `pages/`：これはすべてのページが入っている大きな箱のようなものです。ウェブサイトのすべてのページは、この中に入っています。

- `blog/`：これはブログのページが入っているフォルダです。ブログに関連するすべてのページは、この中に入っています。

- `[slug].js`：これはブログの各記事を表すファイルです。`[slug]` の部分は、各記事の URL の一部になります。例えば、`/blog/my-first-post` のような URL になります。

- `shop/`：これはショップのページが入っているフォルダです。ショップに関連するすべてのページは、この中に入っています。

- `[...slug].js` と `[[...slug]].js`：これらは商品の各ページを表すファイルです。`[...slug]` と `[[...slug]]` の部分は、各商品の URL の一部になります。例えば、`/shop/clothes/tops/t-shirts` のような URL になります。

このように、フォルダとファイルを組み合わせることで、ウェブサイトの各ページの URL を作成します。そして、`[...]` や `[[...]]` のような特殊な記号を使うことで、動的な URL を作成することができます。これが、Next.js のダイナミックルーティングの仕組みです。

### 例

例えば、ブログでは次のようなルート `pages/blog/[slug].js` を含めることができます。ここで、[slug] はブログ記事のダイナミックセグメントです。

```javascript
// 'next/router'からuseRouterをインポートします
import { useRouter } from 'next/router'

// Pageという関数コンポーネントをエクスポートします
export default function Page() {
  // useRouterを使ってrouterオブジェクトを取得します
  const router = useRouter()
  // router.query.slugを使って、動的なslugを取得し表示します
  return <p>Post: {router.query.slug}</p>
}
```

このコードは、URL の動的な部分（この場合は 'slug'）を取得し、それを表示します。例えば、URL が '/blog/a' の場合、画面には 'Post: a' と表示されます。

### ブログのディレクトリマップ

一般的なブログを作る場合、ディレクトリ構造は次のようになります。

```
.
├── api
│   ├── feed.ts
│   └── og.tsx
├── page
│   └── [page].tsx
├── tags
│   ├── [tags]
│   │   └── page
│   │       └── [page].tsx
│   ├── [tags].tsx
│   └── index.tsx
├── _app.tsx
├── _document.tsx
├── [id].tsx
├── index.tsx
└── search.tsx
```

- `api/`: このフォルダは、API ルートを格納します。Next.js では、このフォルダ内のファイルは API エンドポイントとして扱われます。`feed.ts` と `og.tsx` は、それぞれ異なる API エンドポイントを表します。

- `page/`: このフォルダは、ページネーションされたページを格納します。`[page].tsx` は、ページ番号に基づいて異なるページを表示します。

- `tags/`: このフォルダは、タグに関連するページを格納します。`[tags].tsx` は、特定のタグに関連するページを表示します。`[tags]/page/[page].tsx` は、特定のタグに関連するページネーションされたページを表示します。`index.tsx` は、すべてのタグを一覧表示するページを表します。

- `_app.tsx`: このファイルは、Next.js アプリケーションのメインコンポーネントを定義します。すべてのページはこのコンポーネントを通じてレンダリングされます。

- `_document.tsx`: このファイルは、サーバーサイドでのみレンダリングされ、HTML ドキュメントの初期構造を定義します。

- `[id].tsx`: このファイルは、特定の ID を持つアイテムのページを表示します。ID は URL の一部として提供されます。

- `index.tsx`: このファイルは、ウェブサイトのホームページを表示します。

- `search.tsx`: このファイルは、検索結果のページを表示します。

このように、各フォルダとファイルはウェブサイトの特定の部分を表し、それぞれが特定のタスクを担当しています。

### キャッチオールセグメント

ダイナミックセグメントは、ブラケット内に省略記号（...）を追加することで、その後のすべてのセグメントをキャッチするように拡張することができます。

例えば、`pages/shop/[...slug].js` は `/shop/clothes` にマッチしますが、さらに `/shop/clothes/tops`、`/shop/clothes/tops/t-shirts` などにもマッチします。

以下のコードは、`pages/shop/[...slug].tsx` という名前のファイルに保存します。このファイル名は、Next.js のダイナミックルーティングの規則に従っています。`[...slug]` の部分が URL の動的な部分を表しています。

`pages/shop/[...slug].tsx`

```typescript
// 'next/router'からuseRouterをインポートします
import { useRouter } from 'next/router'
import { NextPage } from 'next'

// Pageという関数コンポーネントをエクスポートします
const Page: NextPage = () => {
  // useRouterを使ってrouterオブジェクトを取得します
  const router = useRouter()
  // router.query.slugを使って、動的なslugを取得し表示します
  // slugは配列なので、joinメソッドを使って文字列に変換します
  return <p>Shop: {router.query.slug?.join('/')}</p>
}

export default Page
```

このコードは、URL の動的な部分（この場合は 'slug'）を取得し、それを表示します。例えば、URL が '/shop/clothes/tops' の場合、画面には 'Shop: clothes/tops' と表示されます。

### オプションのキャッチオールセグメント

キャッチオールセグメントは、パラメータを二重の角括弧で囲むことでオプションにすることができます：`[[...folderName]]`。

例えば、`pages/shop/[[...slug]].js` は `/shop` にもマッチします。さらに `/shop/clothes`、`/shop/clothes/tops`、`/shop/clothes/tops/t-shirts` などにもマッチします。

キャッチオールセグメントとオプションのキャッチオールセグメントの違いは、オプションの場合、パラメータなしのルートもマッチすることです（上記の例では `/shop`）。


Next.js のダイナミックルーティングの実装方法について解説します。これにより、事前にセグメント名を知らなくても、動的なデータからルートを作成することが可能になります。

Next.js と TypeScript の、ダイナミックルーティングを学ぶ


## TL;DR

このページでは、Markdown を HTML に変換する方法について詳しく解説しますね。一言でいうと、Markdown は軽量マークアップ言語の一つで、HTML に変換することでウェブページ上での見た目を整えることができます。

| 開発環境   | バージョン |
| :--------- | :--------- |
| Next.js    | 13.4.4     |
| TypeScript | 5.0.4      |
| Emotion    | 11.11.0    |
| React      | 18.2.0     |

### Markdown とは？

Markdown とは、軽量マークアップ言語の一つで、シンプルな記述法で書かれた文章を HTML に変換することができます。これにより、ウェブ上での文章の見た目を整えることができます。

Markdown は次のような形式で書かれます。

```markdown
# 見出し 1

## 見出し 2

### 見出し 3

- リスト 1
- リスト 2
- リスト 3

**太字**

_斜体_
```

これを HTML に変換すると次のようになります。

```html
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

<b>太字</b>

<i>斜体</i>
```

Next.js では、サーバーサイドで Markdown を HTML に変換し、それをブラウザに送信して表示することができます。

### Next.js で、Markdown を HTML に変換

`data`ディレクトリにある Markdown ファイルを HTML に変換するには、`fs`と`path`モジュールを使ってファイルを読み込み、その内容を`marked`を使って HTML に変換します。以下にその方法を示します。

まず、Markdown ファイルを読み込み HTML に変換するユーティリティ関数を作ります。

`utils/markdownToHtml.ts`

```tsx
import fs from 'fs'
import path from 'path'
import marked from 'marked'

export const markdownFileToHtml = (filePath: string): string => {
  const markdown = fs.readFileSync(path.resolve(filePath), 'utf-8')
  const html = marked(markdown)
  return html
}
```

次に、サーバーサイドレンダリングを利用して、Markdown ファイルのパスを受け取り、その内容を HTML に変換して表示する Next.js のページを作成します。

`pages/markdown.tsx`

```tsx
import { GetServerSideProps } from 'next'
import { css } from '@emotion/react'
import { markdownFileToHtml } from '../utils/markdownToHtml'
import { markdownStyles } from '../styles/MarkdownStyles'

type Props = {
  html: string
}

const MarkdownPage = ({ html }: Props) => {
  return <div css={markdownStyles} dangerouslySetInnerHTML={{ __html: html }} />
}

export default MarkdownPage

export const getServerSideProps: GetServerSideProps<Props> = async () => {
  // 'data' ディレクトリ内の Markdown ファイルのパスを指定
  const markdownFilePath = path.join(process.cwd(), 'data', 'your-file.md')

  const html = markdownFileToHtml(markdownFilePath)

  return { props: { html } }
}
```

このコードでは、`getServerSideProps`で`data`ディレクトリ内の Markdown ファイルを読み込み、`marked`を使って HTML に変換しています。そしてその HTML をプロップとして`MarkdownPage`に渡し、ブラウザにレンダリングしています。

`your-file.md`は実際の Markdown ファイルの名前に置き換えてください。

この方法を使えば、`data`ディレクトリ内の任意の Markdown ファイルを HTML として表示できます。

### Markdown ファイルの一覧を表示

data ディレクトリ内の Markdown ファイルの一覧を表示するには、`fs`と`path`モジュールを使ってファイルを読み込み、その内容を`gray-matter`を使ってメタデータを抽出します。以下にその方法を示します。

Markdown ファイルの一覧とそのコンテンツの一部を表示するための Next.js ページを作成します。`gray-matter` ライブラリを使用して Markdown ファイルからメタデータを抽出します。ここでは、メタデータにタイトルと説明を含むことを想定しています。

まず、必要なパッケージをインストールします。

```bash
npm install gray-matter
```

次に、全ての Markdown ファイルを読み込み、メタデータを取得するユーティリティ関数を作成します。

`utils/getAllPostsData.ts`

```tsx
import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'

export const getAllPostsData = () => {
  const postsDirectory = path.join(process.cwd(), 'data')
  const fileNames = fs.readdirSync(postsDirectory)
  const allPostsData = fileNames.map((fileName) => {
    const id = fileName.replace(/\.md$/, '')
    const fullPath = path.join(postsDirectory, fileName)
    const fileContents = fs.readFileSync(fullPath, 'utf8')
    const { data } = matter(fileContents)
    return {
      id,
      ...(data as { title: string; description: string }),
    }
  })
  return allPostsData
}
```

それでは、この関数を使って Next.js のページを作成します。

`pages/index.tsx`

```tsx
import Link from 'next/link'
import { GetStaticProps } from 'next'
import { css } from '@emotion/react'
import { getAllPostsData } from '../utils/getAllPostsData'

type Post = {
  id: string
  title: string
  description: string
}

type Props = {
  posts: Post[]
}

const IndexPage = ({ posts }: Props) => (
  <div>
    {posts.map(({ id, title, description }) => (
      <div key={id}>
        <h2>
          <Link href={`/posts/${id}`}>{title}</Link>
        </h2>
        <p>{description}</p>
      </div>
    ))}
  </div>
)

export default IndexPage

export const getStaticProps: GetStaticProps<Props> = async () => {
  const posts = getAllPostsData()
  return {
    props: {
      posts,
    },
  }
}
```

このコードでは、`getStaticProps` 関数で `data` ディレクトリ内の全ての Markdown ファイルを読み込み、それぞれのファイルからメタデータ（タイトルと説明）を取得します。そしてそのメタデータをプロップとして IndexPage コンポーネントに渡し、各記事のタイトル（リンク付き）と説明を表示します。

注意: Markdown ファイルのメタデータ部分には `title` と `description` を含める必要があります。この部分は YAML 形式で記述し、Markdown の本文から `---` で区切ります。

data/1.md

```markdown
---
title: 'タイトル'
description: '説明'
---

智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。
とかくに人の世は住みにくい。住みにくさが高じると、
安い所へ引き越したくなる。
どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
```

この構成を使えば、`data` ディレクトリ内の全ての Markdown ファイルの一覧と各ファイルの説明を一覧表示することができます。

状況に応じて、Markdown を html に変換したり、TypeScript の型エラーを修正しながら、コードをカスタマイズしてください。


Next.js と TypeScript を使って、Markdown を HTML に変換する方法を詳しく解説します。

Next.js と TypeScript で、Markdown を HTML に変換する

Next.js と TypeScript を使って、ページとレイアウトの有効な活用方法について解説します。基本的な構造から実装の手順まで、具体的なコードを通じて学んでいきましょう。

Next.js と TypeScript で、Pages と Layout を学ぶ


## TL;DR

このページでは、Link の方法や、Next.js のルーターを使って、ページ間のクライアントサイドのルート遷移を実現する方法について解説します。これにより、シングルページアプリケーションのような動作を実現します。また、動的なパスへのリンクや、ルーターオブジェクトの注入方法、命令的なルーティング、そして浅いルーティングについても説明します。

> この記事は、Next.js の公式ドキュメンテーションを参考に、Link とナビゲーションについて解説しています。特に、[Linking and Navigating](https://nextjs.org/docs/pages/building-your-application/routing/linking-and-navigating)のセクションを基に、その内容を理解しやすく解釈し直し、さらに詳細な説明を加えています。
>
> この記事は、Next.js の公式ドキュメンテーションの素晴らしい内容を尊重し、その知識を広めることを目指しています。そのため、この記事の内容は、公式ドキュメンテーションの内容をそのまま意訳するのではなく、それを基に私たち自身の理解と経験を元にした解釈と説明を加えています。
>
> もし、より詳細な情報や公式の説明を求める場合は、[Next.js の公式ドキュメンテーション](https://nextjs.org/docs)を直接ご覧いただくことを強く推奨します。この記事の解説はあくまで参考の一つであり、公式ドキュメンテーションには、より詳細な情報や最新の更新情報が含まれています。

| 開発環境   | バージョン           |
| :--------- | :------------------- |
| Next.js    | 13.4.4(Pages Router) |
| TypeScript | 5.0.4                |
| Emotion    | 11.11.0              |
| React      | 18.2.0               |

### リンクとナビゲーション

Next.js のルーターは、ページとページの間を移動することができます。これは、一つのページで全部が完結するアプリと同じような動きです。このページ間の移動を行うために、React の部品である Link が用意されています。

```tsx
// Link という部品を使えるようにします
import Link from "next/link";

// Home という名前の部品を作ります
function Home() {
  return (
    <ul>
      <li>
        {/* "Home" と書かれたリンクを作ります。クリックすると "/" のページに行きます */}
        <Link href="/">Home</Link>
      </li>
      <li>
        {/* "About Us" と書かれたリンクを作ります。クリックすると "/about" のページに行きます */}
        <Link href="/about">About Us</Link>
      </li>
      <li>
        {/* "Blog Post" と書かれたリンクを作ります。クリックすると "/blog/hello-world" のページに行きます */}
        <Link href="/blog/hello-world">Blog Post</Link>
      </li>
    </ul>
  );
}

// 他の部品で Home を使えるようにします
export default Home;
```

上記の例では、複数のリンクが使用されています。それぞれのリンクは、パス（href）を既知のページにマッピングしています。

| パス                | 対応するファイル       |
| ------------------- | ---------------------- |
| `/`                 | `pages/index.js`       |
| `/about`            | `pages/about.js`       |
| `/blog/hello-world` | `pages/blog/[slug].js` |

ビューポート内の任意の `<Link />`（初期表示またはスクロールによる）は、デフォルトで事前にフェッチされます。これには、静的生成を使用するページの対応するデータも含まれます。サーバーサイドでレンダリングされるルートの対応するデータは、`<Link />`がクリックされたときにのみフェッチされます。

### 外部リンク

~~外部リンクを開く場合、Link は使えません。特に新しいタブで開く場合は、直接 `a` タグを使用します。~~Next.js の `Link` コンポーネントや React Router の `Link` コンポーネントは、アプリケーション内のルーティングに使用します。

また、`rel="noopener noreferrer"` を指定することで、新しいタブが元のページとは独立したプロセスで開くようにし、セキュリティを強化します。

※ 2024/11/11 修正：外部リンクを開くために `Link` コンポーネントを使用することができます。

```jsx
<Link href="example.com" target="_blank" rel="noopener noreferrer nofollow">
  外部リンク
</Link>
```

このコードは、"外部リンク" というテキストのリンクを作成します。このリンクをクリックすると、新しいタブで `example.com` が開きます。

### 動的なパスへのリンク

動的なページへのリンクを作るために、パスを作るときに変数を使うこともできます。例えば、部品に渡されたブログの投稿のリストを表示するためには、次のようにします。

```tsx
// Link という部品を使えるようにします
import Link from "next/link";

// Posts という名前の部品を作ります。この部品は "posts" という名前のデータを受け取ります
function Posts({ posts }) {
  return (
    <ul>
      {/* 受け取った "posts" のデータを一つずつ "post" という名前で取り出します */}
      {posts.map((post) => (
        <li key={post.id}>
          {/* "post.title" と書かれたリンクを作ります。クリックすると "/blog/投稿のスラッグ" のページに行きます */}
          {/* 投稿のスラッグは、特殊な文字があっても大丈夫なようにエンコードします */}
          <Link href={`/blog/${encodeURIComponent(post.slug)}`}>
            {post.title}
          </Link>
        </li>
      ))}
    </ul>
  );
}

// 他の部品で Posts を使えるようにします
export default Posts;
```

この例では、パスを UTF-8 互換に保つために `encodeURIComponent` が使用されています。また、URL オブジェクトを使用する方法もあります。

```tsx
// Link コンポーネントをインポートします
import Link from "next/link";

function Posts({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link
            href={{
              pathname: "/blog/[slug]",
              query: { slug: post.slug },
            }}
          >
            {post.title}
          </Link>
        </li>
      ))}
    </ul>
  );
}

export default Posts;
```

この場合、補間を使用してパスを作成する代わりに、`href` で URL オブジェクトを使用します。ここで：

- `pathname` は、`pages` ディレクトリ内のページの名前です。この場合は `/blog/[slug]` です。
- `query` は、動的セグメントのオブジェクトです。この場合は `slug` です。

### ルーターの注入

React コンポーネントでルーターオブジェクトにアクセスするためには、`useRouter` または `withRouter` を使用できます。一般的には、`useRouter` の使用を推奨します。

### 命令的なルーティング

`next/link` を使うと、ほとんどのページ間の移動ができます。でも、それを使わなくても、ページ間の移動はできます。以下の例は、`useRouter` を使って、簡単にページ間の移動をする方法を示しています。

```tsx
// useRouter という部品を使えるようにします
import { useRouter } from "next/router";

// ReadMore という名前の部品を作ります
export default function ReadMore() {
  // useRouter を使って、router という名前の部品を作ります
  const router = useRouter();

  // "Click here to read more" と書かれたボタンを作ります
  // このボタンをクリックすると、"/about" のページに行きます
  return (
    <button onClick={() => router.push("/about")}>
      Click here to read more
    </button>
  );
}
```

### 浅いルーティング

浅いルーティングを使うと、URL を変えてもデータを取り直す必要がなくなります。これは `getServerSideProps`、`getStaticProps`、`getInitialProps` などのデータを取る方法にも適用されます。

新しくなった `pathname` と `query` は `useRouter` または `withRouter` を使って作ったルーター部品を通じて受け取ります。これにより、データを失うことなく、URL を変えることができます。

浅いルーティングを使うには、`shallow` オプションを `true` にします。以下の例を見てみましょう：

```tsx
// 必要な部品を使えるようにします
import { useEffect } from "react";
import { useRouter } from "next/router";

// Page という名前の部品を作ります
function Page() {
  // useRouter を使って、router という名前の部品を作ります
  const router = useRouter();

  useEffect(() => {
    // 最初に画面が表示された後に、URL を '/?counter=10' に変えます
    // このとき、データを取り直す必要がないので、shallow を true にします
    router.push("/?counter=10", undefined, { shallow: true });
  }, []);

  useEffect(() => {
    // URL の 'counter' が変わったら、何かをします
  }, [router.query.counter]);
}

// 他の部品で Page を使えるようにします
export default Page;
```

URL は `/?counter=10` に更新され、ページは置き換えられず、ルートの状態だけが変更されます。

また、以下に示すように、`componentDidUpdate` を通じて URL の変更を監視することもできます：

```tsx
componentDidUpdate(prevProps) {
  const { pathname, query } = this.props.router
  // 無限ループを避けるために、プロップが変更されたことを確認します
  if (query.counter !== prevProps.router.query.counter) {
    // 新しいクエリに基づいてデータをフェッチします
  }
}
```

注意点として、浅いルーティングは現在のページでの URL 変更に対してのみ機能します。例えば、別のページ

`pages/about.js` があり、次のように実行するとします：

```tsx
router.push("/?counter=10", "/about?counter=10", { shallow: true });
```

これは新しいページなので、現在のページをアンロードし、新しいページをロードし、データフェッチを待つことになります。これは、浅いルーティングを行うように指示したにもかかわらずです。

ミドルウェアと浅いルーティングを使用すると、新しいページが現在のページと一致することを確認することはありません。これは、ミドルウェアが動的に書き換えることができ、データフェッチをスキップする浅いルーティングでは、クライアントサイドで確認できないためです。したがって、浅いルーティングの変更は常に浅いものとして扱われるべきです。


Next.js のルーターを使って、ページ間のクライアントサイドのルート遷移を実現する方法を解説します。これにより、シングルページアプリケーションのような動作を実現します。

Next.js と TypeScript で学ぶ、Link とナビゲーションの使い方


## TL;DR

このページでは、Next.js と TypeScript を使用した CSV ファイルの読み込みとその JSON 変換の実装方法について解説しますね。一言でいうと、CSV ファイルを読み込み、その内容を JSON 形式に変換するという手続きを行います。

| 開発環境   | バージョン |
| :--------- | :--------- |
| Next.js    | 13.4.4     |
| TypeScript | 5.0.4      |
| Emotion    | 11.11.0    |
| React      | 18.2.0     |

### CSV と JSON とは？

CSV（Comma Separated Values）は、データをカンマ（,）で区切る形式です。これはシンプルな構造をしており、一行が一つのデータセットを表現し、カンマで区切られた各項目がそのデータセットの属性を示します。

一方、JSON（JavaScript Object Notation）は、データ交換用の軽量なフォーマットです。人間にとって読み書きが容易で、マシンにとっても簡単に解析・生成できます。JSON は JavaScript のオブジェクトリテラル構文に基づいていますが、言語に依存せず、多くのプログラミング言語で利用できます。

これらの考え方をもとに、CSV ファイルからデータを読み込み、それを JSON 形式に変換することが目的です。この変換は、より複雑なデータ操作や解析を行う際に役立ちます。

### CSV ファイルの読み込み

初めに、CSV ファイルを読み込むためのステップを解説します。このプロセスは非常に重要で、後続の JSON 変換のための基盤となります。

今回は、Node.js の fs モジュールを使って、CSV ファイルを読み込みます。fs モジュールは、ファイルの読み書きを行うためのモジュールです。そして、その読み込んだデータを次のステップに進めるために、papa parse モジュールを使います。これは、CSV データを JavaScript のオブジェクトにパース（変換）する強力なライブラリです。

```bash
npm install papaparse
# または
yarn add papaparse
```

この部分のコードは次のようになります。ファイル名は `csvToJson.ts` とします。

```tsx
import fs from 'fs'
import Papa from 'papaparse'

type CsvToJsonProps = {
  path: string
}

export const csvToJson = (props: CsvToJsonProps) => {
  const data = fs.readFileSync(props.path, 'utf8')
  const results = Papa.parse(data, {
    header: true,
    dynamicTyping: true,
    skipEmptyLines: true,
  })

  return results.data
}
```

このコードを詳しく見ていきましょう。

- fs モジュールと papa parse モジュールをインポートしています。これらは、それぞれ CSV ファイルの読み込みとパースに必要なモジュールです。
- `CsvToJsonProps` という型を作成し、その中で `path` を定義しています。これは、ファイルのパスを指定するためのもので、CSV ファイルの場所を指定する際に使用します。
- `csvToJson` という関数を作成し、その中で `fs.readFileSync` を使用して CSV ファイルを読み込んでいます。この関数は、指定されたパスのファイルを同期的に読み込むもので、ファイルの内容を文字列として返します。
- その後、`Papa.parse` を使用して、読み込んだ CSV データを JavaScript のオブジェクトにパースしています。パースする際に、オプションを指定しています。`header: true` は、最初の行をヘッダーとして扱うことを示し、`dynamicTyping: true` は、数値フィールドを自動的に数値に変換することを示します。`skipEmptyLines: true` は、空の行を無視することを示します。
- 最後に、パースされたデータを返しています。

以上が CSV ファイルの読み込みの解説となります。ここでは、Node.js の fs モジュールと papa parse モジュールを使用して、CSV ファイルを読み込み、それを JavaScript のオブジェクトに変換することを行いました。

### csv-parse

`csv-parse` というライブラリを使用することでも、CSV ファイルの読み込みと解析を行うことができます。その際、Node.js の fs (ファイルシステム) モジュールと併用して、ファイルの読み込みを行います。

ライブラリ をインストールします。

```bash
npm install csv-parse
```

以下に `csv-parse` を使用した CSV ファイルの読み込みのコードを示します。

```tsx
import fs from 'fs'
import parse from 'csv-parse'

fs.createReadStream('path/to/your/file.csv')
  .pipe(
    parse({
      delimiter: ',',
      columns: true,
      trim: true,
    })
  )
  .on('data', (row) => {
    console.log(row)
  })
  .on('end', () => {
    console.log('CSV file successfully processed')
  })
```

まず、`fs.createReadStream('path/to/your/file.csv')` によって CSV ファイルを読み込み、そのストリームを生成します。続いて `.pipe()` メソッドを使用して、生成したストリームを `csv-parse` ライブラリで処理します。`parse` 関数の引数にはオプションを指定します。この場合、列の区切り文字を `,` にし、最初の行を列の名前として使用し、各フィールドの前後の空白を削除します。

その後、`.on('data', (row) => {})` によって、各行を JavaScript のオブジェクトとして取得し、コンソールに表示します。最後に、全ての行の処理が完了したら `end` イベントが発生し、`CSV file successfully processed` と表示します。

このコードは Next.js プロジェクトのサーバーサイドの処理（API ルート等）で実行可能であり、ブラウザサイドのコードから直接実行することはできません。なお、ファイルのパスは適宜書き換えてください。

### Next.js で、CSV を JSON に変換する実装

以下のソースコードは、Next.js で CSV ファイルを読み込み、その内容を JSON 形式に変換する処理を行うものです。

```tsx
// pages/api/convertCSV.ts

import type { NextApiRequest, NextApiResponse } from 'next'
import parse from 'csv-parse/lib/sync'

type Data = {
  [key: string]: string
}

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  const csvContent = req.body
  const records: Data[] = parse(csvContent, { columns: true })

  res.status(200).json(records)
}

export default handler
```

このコードは、Next.js の API ルートとして動作し、POST リクエストのボディから CSV コンテンツを取得し、それを JSON 形式に変換します。

- `import type { NextApiRequest, NextApiResponse } from 'next';`で Next.js の API ルートのリクエストとレスポンスの型をインポートしています。
- `import parse from 'csv-parse/lib/sync';`で csv-parse ライブラリの同期解析関数をインポートしています。この関数を使って CSV データを解析します。
- `type Data = { [key: string]: string; }`で CSV データの型を定義しています。これは任意の文字列キーと文字列値を持つオブジェクトの形を取ります。
- `const handler = async (req: NextApiRequest, res: NextApiResponse) => {...}`で API ルートのハンドラー関数を定義しています。
- `const csvContent = req.body;`で POST リクエストのボディから CSV データを取得します。
- `const records: Data[] = parse(csvContent, { columns: true });`で CSV データを解析し、それを JSON 形式に変換します。オプションの `columns: true` は、出力をオブジェクトにすることを指定しています。つまり、CSV の各行がオブジェクトに変換され、カラムのヘッダーがプロパティのキーになります。
- `res.status(200).json(records);`で解析した結果を JSON 形式でレスポンスとして返します。

以上で、Next.js と TypeScript を使った CSV ファイルから JSON に変換する方法の基本的な説明を終えます。この知識を応用すれば、CSV データをもとにより複雑なデータ操作や解析を行うことが可能となります。


Next.js と TypeScript を使って、CSV ファイルを読み込み、それを JSON 形式に変換する方法を解説します。

Next.js と TypeScript で、CSV ファイルを JSON に変換する方法


## TL;DR

このページでは、Next.js と TypeScript のコンテクストで Node.js の fs（ファイルシステム）モジュールの実装方法について詳しく解説します。一言でいうと、fs モジュールとはファイルの読み書きを可能にする Node.js の組み込みモジュールです。

| 開発環境   | バージョン |
| :--------- | :--------- |
| Next.js    | 13.4.4     |
| TypeScript | 5.0.4      |
| Emotion    | 11.11.0    |
| React      | 18.2.0     |

### 「fs モジュール」 とは？

「fs」とは、Node.js に内蔵されている「File System」の略称で、ファイルの読み書きを行う機能を提供しています。ファイルの操作は Web アプリケーションの開発においてよく遭遇する課題であり、それらを効率的に処理するための重要なツールです。

基本的な使い方は以下の通りです。まず、fs モジュールを import します。

```tsx
import fs from 'fs'
```

次に、fs モジュールの readFile 関数を使って、ファイルを読み込みます。ここでは非同期でのファイル読み込みを行います。

```tsx
fs.readFile('path/to/your/file', 'utf-8', (err, data) => {
  if (err) {
    console.error(err)
    return
  }
  console.log(data)
})
```

上記のコードは、指定したパスのファイルを読み込み、その内容を表示します。エンコーディングを 'utf-8' に指定することで、読み込んだファイルの内容を文字列として扱うことができます。また、エラーハンドリングも行い、エラーが発生した場合にはエラーメッセージを表示します。

### `fs.readFile` メソッド

`fs.readFile` メソッドは、指定されたファイルの内容を非同期で読み込むためのメソッドです。以下のように使用します。

```tsx
fs.readFile(path, [options], callback)
```

`fs.readFile` メソッドの引数は以下の通りです：

1. `path`（必須）：ファイルへのパス。文字列、バッファ、または URL を指定できます。

2. `options`（オプション）：エンコーディング、フラグ、またはモードを指定するオブジェクト。または、エンコーディングを示す文字列。デフォルトは `null` です。

3. `callback`（必須）：ファイルの内容が読み込まれた後に呼び出される関数。この関数は、最初の引数にエラーオブジェクト、二番目の引数にファイルの内容を取ります。

以下は `fs.readFile` メソッドを使ったコード例です：

```tsx
import fs from 'fs'
import path from 'path'

const filePath = path.join(process.cwd(), 'data', 'content.txt')

fs.readFile(filePath, 'utf-8', (err, data) => {
  if (err) {
    console.error('Error reading file:', err)
    return
  }

  console.log('File contents:', data)
})
```

このコードでは、まず `filePath` に読み込むファイルの絶対パスを設定します。そして、`fs.readFile` を使ってそのファイルを読み込みます。第二引数に `'utf-8'` を指定することで、ファイルの内容を文字列として読み込みます。読み込みが完了したら、コールバック関数が呼び出され、エラーがあればそれを表示し、なければファイルの内容を表示します。

### Markdown ファイルを読み込む

Markdown ファイルを読み込むためには、ファイルを読み込むための `fs` モジュールに加え、Markdown を HTML に変換するためのパッケージ（例えば `marked`）も必要となります。

まず、必要なパッケージをインストールします。ターミナルで次のコマンドを実行してください。

```bash
npm install marked
```

インストールが完了したら、`/api/content` というエンドポイントを作成します。このエンドポイントでは、`fs` モジュールを使って Markdown ファイルを読み込み、`marked` パッケージを使ってその内容を HTML に変換します。

ファイル名：`pages/api/content.ts`

```tsx
import { NextApiRequest, NextApiResponse } from 'next'
import fs from 'fs'
import path from 'path'
import marked from 'marked'

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  const filePath = path.join(process.cwd(), 'data', 'content.md')
  fs.readFile(filePath, 'utf-8', (err, data) => {
    if (err) {
      res.status(500).json({ message: 'Error reading file' })
      return
    }

    const htmlContent = marked(data)
    res.status(200).json({ data: htmlContent })
  })
}

export default handler
```

このコードでは、`fs.readFile` を使って指定の Markdown ファイルを読み込み、その内容を `marked` を使って HTML に変換します。そして、その HTML 文字列をレスポンスとして返します。

最後に、フロントエンドからこの API を呼び出す方法を見てみましょう。

ファイル名：`pages/index.tsx`

```tsx
import { useEffect, useState } from 'react'
import axios from 'axios'

const Home = () => {
  const [content, setContent] = useState('')

  useEffect(() => {
    const fetchContent = async () => {
      const res = await axios.get('/api/content')
      setContent(res.data.data)
    }
    fetchContent()
  }, [])

  return <div dangerouslySetInnerHTML={{ __html: content }}></div>
}

export default Home
```

ここでは `dangerouslySetInnerHTML` を使って API から取得した HTML 文字列を表示しています。ただし、`dangerouslySetInnerHTML` は XSS（クロスサイトスクリプティング）攻撃のリスクがありますので、信頼できないソースからの HTML をそのまま表示するのは避けるべきです。今回の例では、自分で管理している Markdown ファイルの内容を表示しているので、問題ないと思われます。

### Next.js で、fs モジュール を実装

ここからは、Next.js と TypeScript を使って、fs モジュールを使用する方法を見ていきましょう。

サーバーサイドのコードに fs モジュールを使用するため、Next.js の API ルートを使います。今回は `/api/content` というエンドポイントを作成し、その中で fs モジュールを使ってファイルの読み込みを行います。

ファイル名：`pages/api/content.ts`

```tsx
import { NextApiRequest, NextApiResponse } from 'next'
import fs from 'fs'
import path from 'path'

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  const filePath = path.join(process.cwd(), 'data', 'content.txt')
  fs.readFile(filePath, 'utf-8', (err, data) => {
    if (err) {
      res.status(500).json({ message: 'Error reading file' })
      return
    }
    res.status(200).json({ data })
  })
}

export default handler
```

このコードではまず、API ルート（handler 関数）を定義します。その中で、fs モジュールを使って `data/content.txt` ファイルを読み込みます。ファイルのパスは `path.join` 関数を使って生成しています。エラーが発生した場合には、ステータスコード 500 を返し、エラーメッセージを含む JSON をレスポンスとして返します。ファイルが正常に読み込まれた場合には、その内容を JSON の形で返します。

### fs モジュールによるファイル書き込み

fs モジュールはファイルの読み込みだけでなく、ファイルの書き込みも行うことができます。このセクションでは、fs モジュールを使ってファイルにデータを書き込む方法を見ていきましょう。

ファイル名：`pages/api/updateContent.ts`

```tsx
import { NextApiRequest, NextApiResponse } from 'next'
import fs from 'fs'
import path from 'path'

const handler = (req: NextApiRequest, res: NextApiResponse) => {
  if (req.method === 'POST') {
    const { content } = req.body
    const filePath = path.join(process.cwd(), 'data', 'content.txt')
    fs.writeFile(filePath, content, 'utf-8', (err) => {
      if (err) {
        res.status(500).json({ message: 'Error writing file' })
        return
      }
      res.status(200).json({ message: 'File updated successfully' })
    })
  } else {
    res.status(405).json({ message: 'Method not allowed' })
  }
}

export default handler
```

このコードでは、POST リクエストが送られた時、リクエストボディに含まれる `content` を `data/content.txt` ファイルに書き込みます。書き込みには fs モジュールの `writeFile` 関数を使用します。この関数は第一引数にファイルパス、第二引数に書き込むデータ、第三引数にエンコーディング、第四引数にコールバック関数を取ります。

エラーが発生した場合には、ステータスコード 500 を返し、エラーメッセージを含む JSON をレスポンスとして返します。ファイルへの書き込みが成功した場合には、成功メッセージを含む JSON を返します。

### ファイルを削除する

ファイルの削除には、`fs` モジュールの `fs.unlink` メソッドを使用します。これは非同期的な操作で、コールバック関数を必要とします。以下に、その使用例を示します。

```tsx
import fs from 'fs'
import path from 'path'

const filePath = path.join(process.cwd(), 'data', 'file-to-delete.txt')

fs.unlink(filePath, (err) => {
  if (err) {
    console.error('Error deleting file:', err)
    return
  }

  console.log('File deleted successfully')
})
```

このコードでは、まず `filePath` に削除するファイルの絶対パスを設定します。そして、`fs.unlink` メソッドを使ってそのファイルを削除します。削除が完了したら、コールバック関数が呼び出され、エラーがあればそれを表示し、なければ成功メッセージを表示します。

なお、このメソッドは非同期であるため、削除処理が終了するまでプログラムの実行はブロックされません。同期的にファイルを削除したい場合は、`fs.unlinkSync` メソッドを使用できます。ただし、同期的なメソッドはプログラムの実行をブロックするため、パフォーマンスに影響を与える可能性があることに注意してください。

### フロントエンドでの API の利用

最後に、フロントエンドのコンポーネントから上記で作成した API を呼び出す方法を見ていきましょう。

ファイル名：`pages/index.tsx`

```tsx
import { useEffect, useState } from 'react'
import axios from 'axios'

const Home = () => {
  const [content, setContent] = useState('')

  useEffect(() => {
    const fetchContent = async () => {
      const res = await axios.get('/api/content')
      setContent(res.data.data)
    }
    fetchContent()
  }, [])

  return (
    <div>
      <p>{content}</p>
    </div>
  )
}

export default Home
```

このコードでは、`useState` と `useEffect` フックを使って、コンポーネントのマウント時に API を呼び出し、その結果を状態として保持します。その状態を元に、API の結果を表示します。このように Next.js で fs モジュールを使った API を作成し、それをフロントエンドから利用することで、サーバーサイドでのファイル操作を行うことができます。

今回紹介した例は、最も基本的なものですが、fs モジュールはこれだけでなく、ファイルやディレクトリの作成、リネーム、削除など、様々なファイル操作を行うことができます。それらの機能を活用することで、より複雑な処理を行うことができます。


Next.js と TypeScript で、Node.js fs モジュールの使用法を詳細に解説します。読み込んだデータの取り扱い方やエラーハンドリング等、初学者にも理解できるよう解説します。

Next.js と Node.js で学ぶ、ファイルの読み書きを可能にするfs モジュール


## TL;DR

このページでは、indexOf() メソッドの実装方法について解説しますね。一言でいうと indexOf() メソッドとは、文字列や配列の中から特定の値がどこに位置しているかを探し出す方法です。

| 開発環境   | バージョン |
| :--------- | :--------- |
| Next.js    | 13.4.4     |
| TypeScript | 5.0.4      |
| Emotion    | 11.11.0    |
| React      | 18.2.0     |

### indexOf() メソッドとは？

JavaScript の文字列や配列を操作するためのメソッドの一つが indexOf() メソッドです。これは、文字列や配列の中から指定した要素が最初に現れるインデックスを返します。指定した要素が見つからなかった場合は、-1 を返します。

文字列の場合の基本的な使用法は以下のようになります。

```tsx
let str = 'Hello, world!'
let index = str.indexOf('world')
console.log(index) // 7 を返します
```

配列の場合の基本的な使用法は以下のようになります。

```tsx
let array = ['apple', 'banana', 'cherry']
let index = array.indexOf('cherry')
console.log(index) // 2 を返します
```

このように、indexOf() メソッドを用いることで、文字列や配列の中から目的の値が存在する場所を見つけ出すことができます。

### Next.js で、indexOf() メソッドを実装

では、Next.js と TypeScript を用いて、この indexOf() メソッドをどのように実装するのか見ていきましょう。

pages/index.tsx

```tsx
import { useState } from 'react'

type Props = {
  items: string[]
}

const IndexPage = ({ items }: Props) => {
  const [query, setQuery] = useState('')

  const handleSearch = () => {
    const index = items.indexOf(query)
    if (index !== -1) {
      alert(`Item found at position: ${index}`)
    } else {
      alert('Item not found')
    }
  }

  return (
    <>
      <input type="text" onChange={(e) => setQuery(e.target.value)} />
      <button onClick={handleSearch}>Search</button>
    </>
  )
}

export default IndexPage
```

上記のコードは Next.js で作成した単純なページで、文字列の配列から指定した文字列を探す機能を持っています。ユーザーがテキストフィールドに文字列を入力し、検索ボタンをクリックすると、その文字列が配列内に存在するかをチェックします。もし存在すれば、その位置をアラートダイアログで表示し、存在しなければ「Item not found」を表示します。

### TypeScript で型チェック

JavaScript では、文字列や配列のどちらでも indexOf()メソッドを利用することができますが、TypeScript では型が厳密にチェックされるため、文字列のメソッドを配列に適用すると型エラーが発生します。

これは、TypeScript が JavaScript のスーパーセットであり、JavaScript の柔軟性を持ちながらも、より厳格な型システムを提供するためです。この厳格な型システムにより、コードのバグを早期に発見でき、より安全なコードを書くことができます。

以下に、文字列と配列のそれぞれについて、indexOf()メソッドの使用方法と型チェックの例を示します。

```tsx
let str: string = 'Hello, world!'
let indexStr: number = str.indexOf('world')
console.log(indexStr) // 7 を返します

let array: string[] = ['apple', 'banana', 'cherry']
let indexArray: number = array.indexOf('cherry')
console.log(indexArray) // 2 を返します
```

このように、TypeScript を使用すると、コンパイル時に変数の型がチェックされ、期待する型と一致しない場合はエラーが発生します。これにより、コードの安全性を向上させ、ランタイムエラーを予防することができます。

### プラクティカルな使用例

上記で説明した基本的な使用例をもとに、もう少しプラクティカルな indexOf()メソッドの使用例を見てみましょう。例えば、ユーザーが指定した商品がカートに含まれているかどうかをチェックする機能などが考えられます。

```tsx
type CartItem = {
  id: string
  name: string
  price: number
}

type Props = {
  cart: CartItem[]
}

const ShoppingCart = ({ cart }: Props) => {
  const [query, setQuery] = useState('')

  const checkItemInCart = () => {
    const itemNames = cart.map((item) => item.name)
    const index = itemNames.indexOf(query)
    if (index !== -1) {
      alert(`Item is in the cart`)
    } else {
      alert('Item is not in the cart')
    }
  }

  return (
    <>
      <input type="text" onChange={(e) => setQuery(e.target.value)} />
      <button onClick={checkItemInCart}>Check</button>
    </>
  )
}
```

このコンポーネントでは、ユーザーがテキストフィールドに文字列を入力し、"Check"ボタンをクリックすると、その文字列がカート内の商品の名前に含まれているかをチェックします。商品の名前は`cart`配列から抽出され、`indexOf()`メソッドが使用されています。存在すれば「Item is in the cart」を表示し、存在しなければ「Item is not in the cart」を表示します。

このように、indexOf()メソッドは配列内の特定の要素が存在するかどうかをチェックするのに便利な方法を提供します。また、TypeScript を使用すれば、安全なコードを保証するとともに、コードのエラーを早期に発見できるため、より堅牢なアプリケーションを構築することができます。


この記事では、Next.js と TypeScript を用いた開発における、文字列や配列を検索する indexOf() メソッドの活用法を解説します。

2023-07-03

Next.js と TypeScript で、Rest パラメータ（残余引数）...を使う

2023-07-03

Next.js と TypeScript で、タイマーアプリを作る

2023-07-03

あなたの知らない WordPress のデメリットとリスク

2023-07-02

Next.js と TypeScript の、ダイナミックルーティングを学ぶ

2023-07-02

Next.js と TypeScript で、Markdown を HTML に変換する

2023-07-02

Next.js と TypeScript で、Pages と Layout を学ぶ

2023-07-02

Next.js と TypeScript で学ぶ、Link とナビゲーションの使い方

2023-07-01

Next.js と TypeScript で、CSV ファイルを JSON に変換する方法

2023-07-01

Next.js と Node.js で学ぶ、ファイルの読み書きを可能にするfs モジュール

2023-07-01

Next.js と TypeScript で、indexOf() メソッドを活用する