JavaScript でファイルを 1 行ずつ読む

Ashok Chapagai 2023年10月12日
  1. JavaScript でプレーン JavaScript を使用してローカルファイルを 1 行ずつ読み取る
  2. JavaScript で Node.js readline モジュールを使用してローカルファイルを読み取る
  3. JavaScript で Node.js の line-reader モジュールを使用してローカルファイルを読み取る
JavaScript でファイルを 1 行ずつ読む

この記事では、VanillaJS と JavaScript フレームワーク Node.js を使用して JavaScript を使用してファイルを読み取る方法を紹介します。

JavaScript でプレーン JavaScript を使用してローカルファイルを 1 行ずつ読み取る

HTML 入力として入力されたローカルファイルを読み取るための簡単な JavaScript 関数を作成できます。

input HTML タグを使用してファイルをアップロードし、関数 FileReader() を使用して、関数を使用してファイルからコンテンツを 1 行ずつ読み取ることができます。

コード例:

<input type="file" name="file" id="file" />
document.getElementById('file').onchange = function() {
  var file = this.files[0];
  var reader = new FileReader();
  reader.onload = function(progressEvent) {
    console.log(this.result);
  };
  reader.readAsText(file);
};

ここで、入力フィールドは getElementById メソッドによって選択されます。このメソッドは、変更されるたびに(ファイルが選択されるたびに)関数をトリガーします。オブジェクト FileReader() の新しいインスタンスを作成します。インスタンス reader.onload がトリガーされると、パラメーターprogressEvent を持つ関数が呼び出され、ファイルのコンテンツ全体を console.log(this.result) としてコンソールに出力できます。

以下に示すように、関数を拡張してファイルの内容を 1 行ずつ読み取ることができます。

document.getElementById('file').onchange = function() {
  var file = this.files[0];
  var reader = new FileReader();
  reader.onload = function(progressEvent) {
    var fileContentArray = this.result.split(/\r\n|\n/);
    for (var line = 0; line < lines.length - 1; line++) {
      console.log(line + ' --> ' + lines[line]);
    }
  };
  reader.readAsText(file);
};

前のメソッドの拡張スニペットは、split() を使用して、結果変数によって読み取られたコンテンツを分割し、配列 fileContentArray 変数に格納します。次に、for ループを使用して、fileContentArray 変数の各行をループし、ファイルの内容を 1 行ずつ出力します。

テストの目的で、次のコンテンツを含む demo.txt ファイルを作成します。

Line 1
Line 2
Line 3

Line 5

これで、ファイルに 5 行が含まれていることがわかります。また、HTML Input 要素からファイルをアップロードすると、次の出力のようにファイルの内容が表示されます。

出力:

1 --> Line 1
2 --> Line 2
3 --> Line 3
4 --> 
5 --> Line 5

ファイルの行番号を視覚化するためのコンテンツ 1 --> は無視できます。

JavaScript で Node.js readline モジュールを使用してローカルファイルを読み取る

この方法を使用するには、Node がインストールされていることを確認する必要があります。ターミナルまたはコマンドプロンプトで node -v と入力することで確認できます。readline モジュールを使用して、ファイルの内容を簡単に読み取ることができるようになりました。ファイル app.js を作成し、ファイル app.js の最初の行に、以下に示すようにモジュールをインポートします。

const readline = require('readline');
const fs = require('fs');

readline モジュールは Node.js に組み込まれているため、明示的にインストールしません。fs モジュールを使用して、読み取り可能なストリームを作成できます。これは、readline モジュールが読み取り可能なストリームとのみ互換性があるためです。

サンプルコード:

const readLine = require('readline');
const f = require('fs');
var file = './demo.txt';
var rl = readLine.createInterface(
    {input: f.createReadStream(file), output: process.stdout, terminal: false});
rl.on('line', function(text) {
  console.log(text);
});

ファイル app.js をファイル demo.txt と同じフォルダーに保存し、コマンド node app.js で実行できます。

出力:

Line 1
Line 2
Line 3

Line 5

JavaScript で Node.js の line-reader モジュールを使用してローカルファイルを読み取る

Node.js line-reader モジュールを使用して、JavaScript でファイルを読み取ることができます。モジュールはオープンソースであり、コマンド npm install line-reader --save または yarn add line-reader を使用してインストールする必要があります。

line-reader モジュールを使用してファイルの内容を読み取るのは、eachLine() メソッドを提供するため簡単です。これにより、ファイルを 1 行ずつ読み取ることができます。ファイル app.js の先頭に const lineReader = require('line-reader') としてインポートできます。

eachLine() メソッドは、2つの引数を持つコールバック関数を取ります。引数は linelast です。オプション line はコンテンツを保存し、オプション last は読み取られた行がファイルの最後の行であるかどうかを示します。2 番目のオプションは、ブール値を表します。

コード例:

const lineReader = require('line-reader');
lineReader.eachLine('./demo.txt', (line, last) => {
  console.log(line);
})

ファイル app.js をファイル demo.txt が配置されているフォルダーに保存するか、ファイルへのパスを明示的に設定することができます。これにより、ファイルの内容が 1 行ずつ読み取られて出力が出力されます。コンソール。

出力:

Line 1
Line 2
Line 3

Line 5
著者: Ashok Chapagai
Ashok Chapagai avatar Ashok Chapagai avatar

Ashok is an avid learner and senior software engineer with a keen interest in cyber security. He loves articulating his experience with words to wider audience.

LinkedIn GitHub

関連記事 - JavaScript File