fs Module

fsモジュールを分かりやすく

fsモジュールは、Node.js のコアモジュールの一つで、ファイルやディレクトリの操作を行うためのAPIを提供しています。Node.jsの環境下で動作するNext.jsでは、このfsモジュールを利用することで、サーバーサイドのファイル操作を行うことが可能です。例えば、静的なファイルを生成したり、Markdownファイルからデータを読み込んだりする場合に活用されます。

TypeScriptと組み合わせることで、型安全なコードを記述することが可能になり、開発効率や保守性が向上します。

fsモジュールを使うメリット

fsモジュールを使うことで、以下のようなメリットが得られます。

1. ファイル操作の柔軟性: ファイルの読み書き、ディレクトリの作成や削除、ファイルの状態の確認など、様々なファイル操作が可能になります。
2. サーバーサイドレンダリングの効率化: Next.jsでは、サーバーサイドレンダリングや静的サイト生成を行う際に、fsモジュールを活用することでデータの取得やHTMLの生成を行うことが可能です。これにより、データベースへの接続なしに、ローカルのファイルを直接操作することができます。
3. 型安全性: TypeScriptと組み合わせることで、ファイル操作の結果を確実に型付けすることができ、エラーの発生を未然に防ぐことができます。

fsモジュールを実装

Next.jsとTypeScriptでfsモジュールを用いた簡単な例を考えてみましょう。Next.jsのgetStaticProps関数を使用して、ビルド時にローカルのMarkdownファイルを読み込むことができます。以下にその手順とサンプルコードを示します。

1. まず、対象のMarkdownファイルが存在するディレクトリを指定します。ここでは、プロジェクトのルートディレクトリにあるmarkdownsディレクトリとします。
2. getStaticProps関数内で、fs.readdirSyncを使用してディレクトリ内のファイル一覧を取得します。
3. 各ファイルに対して、fs.readFileSyncを使用してファイルの内容を読み込みます。
4. 取得したファイル名と内容をプロップとしてページコンポーネントに渡します。

以下は、その実装例です。ここでは、pages/index.tsxというページコンポーネントを作成します。

import fs from 'fs'
import path from 'path'
import { GetStaticProps } from 'next'

type MarkdownFile = {
  filename: string
  content: string
}

type Props = {
  markdownFiles: MarkdownFile[]
}

const MarkdownList = ({ markdownFiles }: Props) => {
  return (
    <div>
      {markdownFiles.map((file, index) => (
        <div key={index}>
          <h2>{file.filename}</h2>
          <p>{file.content}</p>
        </div>
      ))}
    </div>
  )
}

export default MarkdownList

export const getStaticProps: GetStaticProps = async () => {
  const directoryPath = path.join(process.cwd(), 'markdowns')
  // 'markdowns'はMarkdownファイルが格納されているディレクトリ名を指定します。
  const filenames = fs.readdirSync(directoryPath)
  const markdownFiles = filenames.map(filename => {
    const filePath = path.join(directoryPath, filename)
    const content = fs.readFileSync(filePath, 'utf8')
    return { filename, content }
  })

  return {
    props: {
      markdownFiles,
    },
  }
}

このコードでは、ビルド時にgetStaticProps関数が実行され、その中で指定したディレクトリ内のMarkdownファイル一覧を取得し、それぞれのファイルの内容を読み込んでいます。取得したファイル名と内容は、MarkdownListコンポーネントにプロップとして渡され、ブラウザ上で表示されます。