はじめに
この記事を読めば、JavaScriptでテキストファイルを簡単に読み込む方法が身につくでしょう。
JavaScriptを触ったことのない初心者でも、各サンプルコードとともに分かりやすく解説しています。
使い方や注意点、カスタマイズ方法についても触れますので、ぜひ最後までお読みください。
●JavaScriptの基本
JavaScriptは、ウェブページに動的な機能を追加するために使用されるプログラミング言語です。
テキストファイルを読み込むことで、ウェブページに情報を表示したり、データを処理したりすることができます。
○テキストファイルの読み込みに関する基本
JavaScriptでテキストファイルを読み込むには、さまざまな方法があります。
それぞれの方法には、独自の利点や欠点がありますので、自分のニーズに合った方法を選択しましょう。
●テキストファイルの読み込み方法7選
ここでは、JavaScriptでテキストファイルを読み込む方法を7つ紹介します。
それぞれの方法について、サンプルコードと簡単な説明を付けています。必要に応じて、適切な方法を選択しましょう。
○サンプルコード1：HTML5 FileReader APIを使った方法
HTML5のFileReader APIを使うと、クライアントサイドでテキストファイルを読み込むことができます。
下記のサンプルコードは、input要素を使ってファイルを選択し、読み込んだ内容を表示する例です。
<!DOCTYPE html>
<html>
<body>
<input type="file" id="fileInput">
<pre id="fileContent"></pre>
<script>
const fileInput = document.getElementById('fileInput');
const fileContent = document.getElementById('fileContent');
fileInput.addEventListener('change', (e) => {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = () => {
fileContent.textContent = reader.result;
};
reader.readAsText(file);
});
</script>
</body>
</html>このサンプルコードでは、ファイルを選択すると、changeイベントが発火し、FileReaderオブジェクトを使ってテキストファイルを読み込みます。
読み込みが完了すると、onloadイベントが発火し、読み込んだ内容が<pre>タグの中に表示されます。
○サンプルコード2：XMLHttpRequestを使った方法
XMLHttpRequestは、HTTPリクエストを送信してサーバーからテキストファイルを取得する方法です。
下記のサンプルコードは、指定したURLのテキストファイルを読み込み、表示する例です。
<!DOCTYPE html>
<html>
<body>
<button id="loadButton">Load File</button>
<pre id="fileContent"></pre>
<script>
const loadButton = document.getElementById('loadButton');
const fileContent = document.getElementById('fileContent');
loadButton.addEventListener('click', () => {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'example.txt', true);
xhr.onload = () => {
if (xhr.status === 200) {
fileContent.textContent = xhr.responseText;
}
};
xhr.send();
});
</script>
</body>
</html>このサンプルコードでは、Load Fileボタンをクリックすると、XMLHttpRequestオブジェクトを使って指定したURLのテキストファイルを読み込みます。
リクエストが成功すると、読み込んだ内容が<pre>タグの中に表示されます。
○サンプルコード3：Fetch APIを使った方法
Fetch APIは、リクエストとレスポンスを操作するための新しいAPIで、XMLHttpRequestの代替として使われています。
下記のサンプルコードは、指定したURLのテキストファイルを読み込み、表示する例です。
<!DOCTYPE html>
<html>
<body>
<button id="loadButton">Load File</button>
<pre id="fileContent"></pre>
<script>
const loadButton = document.getElementById('loadButton');
const fileContent = document.getElementById('fileContent');
loadButton.addEventListener('click', async () => {
const response = await fetch('example.txt');
if (response.ok) {
const text = await response.text();
fileContent.textContent = text;
}
});
</script>
</body>
</html>このサンプルコードでは、Load Fileボタンをクリックすると、Fetch APIを使って指定したURLのテキストファイルを読み込みます。
リクエストが成功すると、読み込んだ内容が<pre>タグの中に表示されます。
○サンプルコード4：Node.jsでfsモジュールを使った方法
Node.jsを使っている場合、fsモジュールを使ってテキストファイルを読み込むことができます。
下記のサンプルコードは、Node.jsで指定したパスのテキストファイルを読み込み、表示する例です。
const fs = require('fs');
fs.readFile('example.txt', 'utf8', (err, data) => {
if (err) {
console.error(err);
return;
}
console.log(data);
});このサンプルコードでは、fs.readFile()関数を使ってテキストファイルを読み込みます。
読み込みが完了すると、読み込んだ内容がコンソールに表示されます。
○サンプルコード5：Node.jsでfsモジュールのreadFileSync()を使った方法
Node.jsでfsモジュールを使う場合、同期的にファイルを読み込むこともできます。
下記のサンプルコードは、指定したパスのテキストファイルを同期的に読み込み、表示する例です。
const fs = require('fs');
try {
const data = fs.readFileSync('example.txt', 'utf8');
console.log(data);
} catch (err) {
console.error(err);
}このサンプルコードでは、fs.readFileSync()関数を使ってテキストファイルを同期的に読み込みます。
読み込みが完了すると、読み込んだ内容がコンソールに表示されます。
○サンプルコード6：jQueryを使った方法
jQueryを使っている場合、$.get()関数を使ってテキストファイルを読み込むことができます。
下記のサンプルコードは、指定したURLのテキストファイルを読み込み、表示する例です。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="loadButton">Load File</button>
<pre id="fileContent"></pre>
<script>
$('#loadButton').on('click', () => {
$.get('example.txt', (data) => {
$('#fileContent').text(data);
});
});
</script>
</body>
</html>このサンプルコードでは、Load Fileボタンをクリックすると、$.get()関数を使って指定したURLのテキストファイルを読み込みます。
リクエストが成功すると、読み込んだ内容が<pre>タグの中に表示されます。
○サンプルコード7：ライブラリを使った方法
テキストファイルを読み込むためのライブラリもいくつか存在します。
その一つである「axios」を使った方法を紹介します。
下記のサンプルコードは、指定したURLのテキストファイルを読み込み、表示する例です。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<button id="loadButton">Load File</button>
<pre id="fileContent"></pre>
<script>
document.getElementById('loadButton').addEventListener('click', async () => {
try {
const response = await axios.get('example.txt');
document.getElementById('fileContent').textContent = response.data;
} catch (error) {
console.error(error);
}
});
</script>
</body>
</html>このサンプルコードでは、Load Fileボタンをクリックすると、axiosを使って指定したURLのテキストファイルを読み込みます。
リクエストが成功すると、読み込んだ内容が<pre>タグの中に表示されます。
●注意点
テキストファイルを読み込む際には、セキュリティの観点から、Webサーバーを使用して行うことが推奨されます。
ローカルファイルシステムを直接操作する方法では、ブラウザのセキュリティ制限によりエラーが発生することがあります。
また、非同期処理を行う際には、エラーハンドリングを適切に行うことが重要です。
例外処理やエラーコールバックを利用して、エラーが発生した際の処理を記述することで、アプリケーションが予期せぬ挙動を起こさないようにすることができます。
●カスタマイズ方法
テキストファイルの読み込みに関して、カスタマイズ方法は主に次の3つに分類されます。
- 読み込むテキストファイルの形式を変更する
- 読み込んだテキストファイルの内容を加工する
- 読み込んだテキストファイルの表示方法を変更する
それぞれのカスタマイズ方法について、具体的な例を紹介します。
1. 読み込むテキストファイルの形式を変更する
例えば、CSVファイルを読み込む場合、下記のように、ファイルの拡張子を.csvに変更して読み込みます。
fetch('example.csv')
.then((response) => response.text())
.then((data) => {
console.log(data);
});2. 読み込んだテキストファイルの内容を加工する
例えば、CSVファイルを読み込んだ後、各行を配列に変換する場合、下記のように加工を行います。
fetch('example.csv')
.then((response) => response.text())
.then((data) => {
const rows = data.split('\n');
console.log(rows);
});3. 読み込んだテキストファイルの表示方法を変更する
例えば、読み込んだテキストファイルの内容をテーブル形式で表示する場合、下記のようにHTML要素を動的に生成して表示します。
fetch('example.csv')
.then((response) => response.text())
.then((data) => {
const rows = data.split('\n');
const table = document.createElement('table');
rows.forEach((row) => {
const tr = document.createElement('tr');
const cells = row.split(',');
cells.forEach((cell) => {
const td = document.createElement('td');
td.textContent = cell;
tr.appendChild(td);
});
table.appendChild(tr);
});
document.body.appendChild(table);
});このように、読み込んだテキストファイルの内容に応じて、表示方法をカスタマイズすることができます。
まとめ
この記事では、JavaScriptでテキストファイルを読み込む方法を7つ紹介しました。
それぞれの方法には、特徴や適用シーンが異なるため、自分のニーズに合わせて適切な方法を選択することが重要です。
また、注意点やカスタマイズ方法についても触れましたので、実際にアプリケーションを作成する際には、これらのポイントを考慮してください。
