JavaScriptを使うとHTMLにテキストなどの外部ファイルを読み込めます。
ただし、これはサーバ環境の話で、ローカル環境ではできません。
状況
本当に無理なのか。調べてみました。
Claudeに訊いてみます。
ローカルファイルシステムでHTMLファイルを直接開いた場合、JavaScriptからファイルを生成して読み込むことはブラウザのセキュリティ制限によって制限されています。
セキュリティ上の理由から、ローカルファイルシステム上でJavaScriptからファイルを生成したり読み込んだりすることは許可されていないためです。
そのため、ローカルファイルを直接開いて別のテキストファイルを読み込む方法は、実際にはほとんどありません。
できる対応は以下の2つになります。
1. ローカルサーバーを立ち上げる
簡易的なHTTPサーバーをローカルで立ち上げ、そのサーバー経由でファイルを読み込む。
この方法ならば、XMLHttpRequestやfetchを使ってファイルを読み込めます。
2. FileReaderAPIを使い、ユーザーにファイルを選択させる
ユーザーが明示的にファイルを選択する必要があります。
セキュリティ制限のためやむを得ませんが、サーバー環境に移行するか、ユーザー入力を受け付けることになります。
完全にプログラムだけで動的にローカルファイルを読み込むことはできないようです。
やはりだめなようです。
代替策
外部のテキストファイルを読み込むことはできませんが、外部のJSファイルであれば読み込めます。
これで代替します。
sample.html
<html>
<head>
<meta charset="UTF-8">
<title>Text Display</title>
</head>
<body>
<div id="textContainer"></div>
<script src="textReader.js"></script>
<script>
const textContent = getTextContent();
document.querySelector("#textContainer").innerText = textContent;
</script>
</body>
</html>
textReader.js
const text = `
おはようございます。今朝は良い天気です。
`;
const trimmedText = text.trim();
return trimmedText;
}
テンプレートリテラルを使うと、バッククォート(`)で囲んだ中で改行を含めることができます。
上のコードの「おはようございます。今朝は良い天気です。」のところにテキストを貼り付ければHTML側に表示されます。
複数行でも問題ありません。
コメント