Next.jsのチュートリアルをやっていたらいきなりimport fsだのimport pathだの出てきて分からなくなったので調べました。
したがって本稿ではチュートリアルに出てきた内容に絞って書いています。
なお、当方は初心者ですので間違っているところがあれば教えていただけると助かります。
fsやpathはNode.jsでファイルを操作するためのモジュール
「fs」はファイルを読み込んだり、新規作成したり、追記したり、削除したりできる。
File Systemの略ってとこですかね。
「path」はファイルパスからディレクトリ名を取得したり、文字列としてパス操作ができます。
pathはファイルパスのことですね。
前提
当たり前だけど、Node.jsを使うわけだからあらかじめnodeをインストールしておく必要があります。
Next.jsのチュートリアルだったので初めにcreate-next-appしたときにインストール済みだったわけですね。
モジュールをインポートする
プレレンダリングとデータフェッチの段階でいきなりこいつらが現れました。
Next.js公式チュートリアル
import fs from 'fs'
import path from 'path'
/*
const fs = require('fs') および
const path = require('path') という書き方で解説してるサイトもあるが、同じこと。
*/
ここでは、fsやpathといったモジュールをインポートして以降このファイルでファイル操作を可能としているわけです。
続いて以下のコードが記述されています。
const postsDirectory = path.join(process.cwd(), 'posts') // ...１
export function getSortedPostsData() {
// Get file names under /posts
const fileNames = fs.readdirSync(postsDirectory) // ...2
const allPostsData = fileNames.map(fileName => {
//... 中略
})
return(
//... 中略
)
path.join( )はディレクトリ名を結合する
まず1.の内容について
const postsDirectory = path.join(process.cwd(), 'posts') // ...１
path.join(引数1, 引数2, ...)は引数にディレクトリ名を複数指定することで/を追加して引数1/引数2/...という文字列を取得します。
今回はprocess.cwd()で現在のワーキングディレクトリ(current working directory)を取得し、postsディレクトリまでのパスを戻り値としてpostDirectoryという名前をつけているんですね。
※このチュートリアルではブログ記事を作成しています。
path.join( )について＜Node.js公式ドキュメント＞
fs.readdirSync( )はディレクトリの内容を読み取る（同期処理）
続いて2.の内容について
readdirはディレクトリを読み込み、中身のファイルを配列で返します。
そしてSyncは処理を同期的に実行するという意味です。
const fileNames = fs.readdirSync(postsDirectory) // ...2
fs.readdirSync(引数1[オプション],引数2)について
引数1には読み込みたいファイルのパスを文字列で記述します。
また、オプションで文字コードやファイル情報の取得要否を設定できます。
引数2にはファイルが存在しない場合の処理を記述できます。（省略可能）
fs.readdirSync( )について＜Node.js公式ドキュメント＞
今回は引数1のみで、前述したpath.joinで辿ったところにあるディレクトリpostDirectoryを渡しています。
postDirectory内のファイルのファイル名を、配列としてfileNamesに渡しています。
おまけ
最後にmap処理をしているのでそれも見ていきましょう。
本筋ではない＆チュートリアルのコードは結構長文なので、ここではサラッと触れるだけにします。
const allPostsData = fileNames.map(fileName => {
//... 中略
})
先ほどのreaddirSync( )で取得したpostDirectoryディレクトリの中にあるファイル名の配列(fileNames)から、各要素に対して一つずつ順番に{ }内の処理を実行したのち、allPostsDataという新たな配列を生成しています。
ふう...
ようやくこれでNext.jsのチュートリアルに戻れます。
さいごに
pathとfsについてはまだまだたくさんのメソッドが用意されています。
また、同期処理か非同期処理かについて今回は割愛しましたが、とても奥深いですので気になった方は調べてみてください。
侍エンジニア【JavaScript入門】誰でも分かるPromiseの使い方とサンプル例まとめ！
↧