Node.jsで外部ファイルをURLから読み込みする５つの方法

Node.jsで次のような処理をしたい

テキスト・画像など外部ファイルがある
つまり自サーバーの外にあるファイル
その外部URLを同期・非同期に読み込みたい

これを実現するのは色々方法があります。

どれがいいかは状況にもよるので、
ここではNode.jsで外部ファイル読み込みの方法、

それをコード例付でまとめていきます。

このページの目次

１．requestで非同期的に外部ファイル読込
２．sync-requestで同期的な外部ファイル読込
３．httpsによる外部ファイル取得(面倒)
４．Fetch APIモジュールを使った方法
５．XMLHttpRequestモジュールを使う方法
外部ファイル読み込みはCORSに注意が必要

１．requestで非同期的に外部ファイル読込

初めはrequestモジュールを使うやり方

ただしこのモジュールは非同期的な動作であり、
後述のような同期読み込みは対応してません。

これはインストールが必要なモジュールです。

▼ npm経由でインストするコマンド例

$ npm install request

1	$ npm install request

▼ 外部ファイル読み込みのコード例

const request = require('request');

/// CDNから外部JSコードを読み込み
request({
  url:'https://code.jquery.com/jquery.min.js'
}, (err, res, body)=>{
  /// bodyにはテキストデータが入る
  console.log('body : ', body);
});

/// 外部の画像ファイルを読み込み
request({
  url:'https://fnordware.com/superpng/pnggrad8rgb.png'
}, (err, res, body)=>{
  /// bodyには生のデータが入る
  console.log('body : ', body);
});

const request = require('request');

/// CDNから外部JSコードを読み込み

request({

url:'https://code.jquery.com/jquery.min.js'

}, (err, res, body)=>{

/// bodyにはテキストデータが入る

console.log('body : ', body);

});

/// 外部の画像ファイルを読み込み

request({

url:'https://fnordware.com/superpng/pnggrad8rgb.png'

}, (err, res, body)=>{

/// bodyには生のデータが入る

console.log('body : ', body);

});

もし非同期関数 async function(){...} あるいは asyc ()=>{...} の中なら、await request({url: ...}) のように同期させることも可能です。

ただそれ以外では非同期な処理になります。

２．sync-requestで同期的な外部ファイル読込

非同期関数とかに関係なく、
外部ファイルを同期的に読み込みしたい…

それならsync-requestモジュールが便利です。

▼ npm経由でモジュールをインストする

$ npm install sync-request

1	$ npm install sync-request

▼ 動的に外部ファイル読み込みのコード例

const syncRequest = require('sync-request');

/// テキストで外部JSコード読み込み
const outerCode = syncRequest(
  'GET',
  'https://code.jquery.com/jquery.min.js'
).body.toString();

/// 外部の画像ファイルを読み込み
const outerImgData = syncRequest(
  'GET', 'https://fnordware.com/superpng/pnggrad8rgb.png'
).body;
console.log('outerImgData : ', outerImgData)
  /// =>  <Buffer 89 50 4e 47 0d...

const syncRequest = require('sync-request');

/// テキストで外部JSコード読み込み

const outerCode = syncRequest(

'GET',

'https://code.jquery.com/jquery.min.js'

).body.toString();

/// 外部の画像ファイルを読み込み

const outerImgData = syncRequest(

'GET', 'https://fnordware.com/superpng/pnggrad8rgb.png'

).body;

console.log('outerImgData : ', outerImgData)

/// => <Buffer 89 50 4e 47 0d...

こんな風にスッキリと同期的に書けます。

返ってきた外部ファイルのデータ本体は body から参照可能。
テキスト・バイナリに関わらずBuffer型として返ってきます。

▼ Node.js Bufferクラスの概要

Buffer objects are used to represent a fixed-length sequence of bytes. Many Node.js APIs support Buffers.The Buffer class is a subclass of JavaScript's Uint8Array class and extends it with methods that cover additional use cases. Node.js APIs accept plain Uint8Arrays wherever Buffers are supported as well.

引用元　：　https://nodejs.org/api/buffer.html#buffer

もし外部ファイルがテキストなら、toString() を使ってテキストへと変換できます。バイナリの扱いはリファレンスを見てください。

非同期なrequestモジュールとも共存可能です。

３．httpsによる外部ファイル取得(面倒)

お次はhttpsモジュールによる外部ファイル読み込み

これはビルトインモジュールです。

だからインストールは必要ないけど、
読込処理を書くのがとてつもなく面倒くさいです。

▼ httpsでの外部ファイル読み込みのコード例

const https = require("https");

https.get('https://code.jquery.com/jquery.min.js', res=>{
  if (res.statusCode < 200 || res.statusCode >= 300) {
    /// エラー時の処理
    return;
  }
  let body = [];
  res.on('data', function(chunk) {
    /// チャンク(塊)ごとにデータ読込
    body.push(chunk);
  });
  res.on('end', function() {
    /// 全てのチャンク読み込み完了時
    try {
      body = JSON.parse(Buffer.concat(body).toString());
    } catch(e) {
      console.error(e);
    }
    //console.log('body : ', body)
      /// => [<Buffer 2f 2a 21 20 6a...
  });
});

const https = require("https");

https.get('https://code.jquery.com/jquery.min.js', res=>{

if (res.statusCode < 200 || res.statusCode >= 300) {

/// エラー時の処理

return;

}

let body = [];

res.on('data', function(chunk) {

/// チャンク(塊)ごとにデータ読込

body.push(chunk);

});

res.on('end', function() {

/// 全てのチャンク読み込み完了時

try {

body = JSON.parse(Buffer.concat(body).toString());

} catch(e) {

console.error(e);

}

//console.log('body : ', body)

/// => [<Buffer 2f 2a 21 20 6a...

});

見てわかるように長ったらしい処理です。

使うメリットがあるか正直分からない…

４．Fetch APIモジュールを使った方法

Fetch APIは普通のJSではお馴染みだと思います。

でもNode.jsではFetch APIは使用できません。

▼ そこでnode-fetchモジュールをインストール

$ npm i node-fetch

1	$ npm i node-fetch

▼ node-fetchモジュールの概要と使い方

npm

node-fetch

https://www.npmjs.com/package/node-fetch

A light-weight module that brings Fetch API to node.js. Latest version: 3.3.1, last published: 2 months ago. Start using node-fetch in your project by running `npm i node-fetch`. There are 31017 other projects in the npm registry using node-fetch.

慣れた方法を使いたいならこっちが良いかも

５．XMLHttpRequestモジュールを使う方法

普通のJavaScriptではXMLHttpRequestも使えます。

でもNode.jsではサポートされてません。

もしどうしてもXHRを使いたいなら、
モジュールとしてインストールする必要あります。

▼ npm経由でXMLHttpRequestインストール

$ npm install xhr2

1	$ npm install xhr2

▼ xhr2のパッケージ情報と使い方

npm

xhr2

https://www.npmjs.com/package/xhr2

XMLHttpRequest emulation for node.js. Latest version: 0.2.1, last published: 2 years ago. Start using xhr2 in your project by running `npm i xhr2`. There are 490 other projects in the npm registry using xhr2.

今時XHRを使う出番は少なそう。

どうしても使いたいなら上記の方法もあります。

外部ファイル読み込みはCORSに注意が必要

あと外部ファイル読み込みの注意点について。

読み込み先がCORS許可してないとエラーが出ます。

▼ MDN : CORSについての解説

オリジン間リソース共有 (Cross-Origin Resource Sharing, CORS) は、追加の HTTP ヘッダーを使用して、あるオリジンで動作しているウェブアプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組みです

引用元　：　https://developer.mozilla.org/ja/docs/Web/HTTP/CORS

なんだそれ？と思った人はググってください。

例えばサイトでRest APIを公開していて、それを外部サイトのJavaScriptから自由にアクセスできると不都合です。場合によってはセキュリティ的な危険が生じます。

だからJavaScriptでのやり取りを一部の場所にだけに制限する、これがCORSの基本理念になってます。

▼ より具体的なCORSの実例