Node.js - ファイルアップロード：初めてのガイド

こんにちは、将来のプログラミングスーパースター！Node.jsでのファイルアップロードの世界へのエキサイティングな旅へようこそ。あなたの近所の親切なコンピュータの先生として、この冒険をガイドするのを楽しみにしています。コードを書いたことがないとしても心配しないでください - から始めて少しずつ進めていきます。このチュートリアルの終わりまでに、プロのようにファイルをアップロードできるようになります！

Node.jsでのファイルアップロードの紹介

本題に入る前に、ファイルアップロードがなぜ重要か話しましょう。ソーシャルメディアアプリを作成してユーザーが写真を共有できるようにする場合、または企業のドキュメント管理システムを作成する場合を考えてみてください。どちらの場合も、ユーザーがサーバーにファイルを送信する方法が必要です。それがファイルアップロードの役割です！

私たちの信頼のJavaScriptランタイム、Node.jsは、ファイルアップロードを処理する複数の方法を提供しています。今日は、FormidableとMulterという2つの人気ライブラリに焦点を当てます。これらをファイルアップロードのスーパーヒーローだと思ってください。それぞれが独自の特別なパワーを持っています！

Formidable：初めてのファイルアップロードの相棒

Formidableとは？

Formidableは、信頼できる友達のようにいつも助けてくれる存在です。それは、フォームデータ、特にファイルアップロードを解析するためのNode.jsモジュールです。使い方を見てみましょう！

Formidableの設定

まず第一に、Formidableをインストールする必要があります。ターミナルを開いて以下のコマンドを入力します：

npm install formidable

このコマンドは、スーパーヒーローの店に行ってFormidableのコスチュームを拾うようなものです。これでアップロードを始める準備が整いました！

Formidableでの基本的なファイルアップロード

簡単なサーバーを作成してファイルアップロードを処理するコードを見てみましょう：

const http = require('http');
const formidable = require('formidable');
const fs = require('fs');

http.createServer((req, res) => {
if (req.url == '/fileupload') {
const form = new formidable.IncomingForm();
form.parse(req, (err, fields, files) => {
const oldPath = files.filetoupload.filepath;
const newPath = 'C:/Users/YourName/uploads/' + files.filetoupload.originalFilename;
fs.rename(oldPath, newPath, (err) => {
if (err) throw err;
res.write('ファイルがアップロードされました！');
res.end();
});
});
} else {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write('<form action="fileupload" method="post" enctype="multipart/form-data">');
res.write('<input type="file" name="filetoupload"><br>');
res.write('<input type="submit">');
res.write('</form>');
return res.end();
}
}).listen(8080);

これを分解すると：

1. http.createServer()を使ってサーバーを作成します。
2. URLが'/fileupload'の場合、Formidableを使って入力フォームを解析します。
3. アップロードされたファイルを一時的な場所から永久的な場所に移動します。
4. URLが他の場合、簡単なアップロードフォームを表示します。

複数ファイルアップロードの処理

一度に複数のファイルをアップロードしたい場合はどうしますか？問題ありません！コードを以下のように修正します：

const http = require('http');
const formidable = require('formidable');
const fs = require('fs');

http.createServer((req, res) => {
if (req.url == '/fileupload') {
const form = new formidable.IncomingForm();
form.multiples = true;
form.parse(req, (err, fields, files) => {
if (Array.isArray(files.filetoupload)) {
files.filetoupload.forEach((file) => {
const oldPath = file.filepath;
const newPath = 'C:/Users/YourName/uploads/' + file.originalFilename;
fs.rename(oldPath, newPath, (err) => {
if (err) throw err;
});
});
} else {
const oldPath = files.filetoupload.filepath;
const newPath = 'C:/Users/YourName/uploads/' + files.filetoupload.originalFilename;
fs.rename(oldPath, newPath, (err) => {
if (err) throw err;
});
}
res.write('ファイルがアップロードされました！');
res.end();
});
} else {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write('<form action="fileupload" method="post" enctype="multipart/form-data">');
res.write('<input type="file" name="filetoupload" multiple><br>');
res.write('<input type="submit">');
res.write('</form>');
return res.end();
}
}).listen(8080);

ここでの主要な変更点は：

1. form.multiples = trueを設定して複数ファイルアップロードを許可します。
2. files.filetouploadが配列であるかオブジェクトであるかをチェックします。
3. 必要に応じてforEachを使って複数ファイルを処理します。

Multer：新参者の紹介

次に、私たちの2番目のファイルアップロードスーパーヒーロー、Multerを紹介します。MulterはFormidableのより若い、もっとクールな兄弟です。multipart/form-dataを処理するために設計されています。

Multerの設定

Multerを始めるには、npmを使ってインストールします：

npm install multer

Multerでの基本的なファイルアップロード

以下にMulterを使った簡単な例を示します：

const express = require('express');
const multer = require('multer');
const path = require('path');

const app = express();

const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/')
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname))
}
});

const upload = multer({ storage: storage });

app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});

app.post('/upload', upload.single('filetoupload'), (req, res, next) => {
const file = req.file;
if (!file) {
const error = new Error('ファイルをアップロードしてください');
error.httpStatusCode = 400;
return next(error);
}
res.send(file);
});

app.listen(3000, () => console.log('サーバーがポート3000で開始されました'));

これを分解すると：

1. ストレージエンジンを設定して、ファイルをどこに保存するか、どのように名前を付けるかを指定します。
2. ストレージ設定を使ってアップロードインスタンスを作成します。
3. フォームとファイルアップロードを処理するためのルートを定義します。
4. アップロードルートでは、upload.single('filetoupload')を使って単一ファイルアップロードを処理します。

Multerでの複数ファイルアップロード

Multerは複数ファイルアップロードを簡単に処理できます。以下のようにします：

app.post('/upload', upload.array('filetoupload', 12), (req, res, next) => {
const files = req.files;
if (!files) {
const error = new Error('ファイルを選択してください');
error.httpStatusCode = 400;
return next(error);
}
res.send(files);
});

ここでの主要な変更点は、upload.array('filetoupload', 12)を使うことです。'12'は最大12ファイルを指定します。

FormidableとMulterの比較

FormidableとMulterを実際に使ってみたところで、比較してみましょう：

機能	Formidable	Multer
使用のしやすさ	シンプルで直感的	設定が必要だが、もっと制御できる
統合	どのNode.jsサーバーにも対応	Express専用に設計
ファイルの処理	ファイルとフィールドの両方を処理	ファイルアップロード専用
カスタマイズ性	少し不自由	高度にカスタマイズ可能
複数ファイルアップロード	追加コードが必要	標準機能

結論

おめでとうございます！Node.jsでのファイルアップロードのスキルを一つ上がりました。FormidableかMulterを選んでも、どちらもファイルアップロード機能をNode.jsアプリケーションに追加する手段を持っています。

実践して完璧にするためには、ファイルアップロード機能を使った小さなプロジェクトを試してみてください。シンプルな画像共有アプリやドキュメントストレージシステムなど、どんどん作ってみてください。コードを書くことが越多、この概念に慣れるにつれて、ますます快適になるでしょう。

お楽しみください、そして、あなたのアップロードが常に成功するように！

Credits: Image by storyset