JavaScriptでテキストファイル出力!初心者向けステップバイステップガイド10選

初心者がJavaScriptでテキストファイル出力を学ぶイメージJS
この記事は約22分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptを使ってテキストファイルを出力する方法が身につきます。

これからJavaScriptを学びたい初心者の方や、テキストファイル出力に興味がある方に向けて、ステップバイステップのサンプルコードと応用例を10選ご紹介します。

●JavaScriptとは

JavaScriptは、ウェブページに動的な要素を追加するためのプログラミング言語です。

HTMLやCSSで静的なウェブページを作成した後、JavaScriptを使って動的な機能を追加できます。

○JavaScriptの基本

JavaScriptは、ウェブブラウザ上で動作するため、特別な開発環境を用意する必要はありません。

ブラウザとテキストエディタがあれば、すぐに始めることができます。

  1. まず、新しいHTMLファイルを作成し、下記のような基本構造を記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScript テキストファイル出力</title>
</head>
<body>
  <!-- ここにコンテンツを記述 -->

  <script>
    // ここにJavaScriptコードを記述
  </script>
</body>
</html>
  1. <script>タグ内にJavaScriptコードを記述します。
    この記事では、テキストファイル出力に関するサンプルコードを提供します。

●テキストファイル出力の方法

テキストファイルの出力には、BlobオブジェクトとURL.createObjectURL()メソッド、および<a>タグを使用します。

○サンプルコード1:テキストファイルの作成と出力

下記のサンプルコードでは、テキストファイルを作成し、ブラウザでダウンロードできるようにする方法を示しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>テキストファイル出力サンプル1</title>
</head>
<body>
  <button id="download">テキストファイルをダウンロード</button>

  <script>
    document.getElementById("download").addEventListener("click", function() {
      const text = "Hello, JavaScript!";
      const blob = new Blob([text], {type: "text/plain"});
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = "sample.txt";
      a.click();
      URL.revokeObjectURL(url);
    });
  </script>
</body>
</html>

このコードでは、<button>要素をクリックすると、”Hello, JavaScript!”という文字列を含むテキストファイルがダウンロードされます。

○サンプルコード2:文字列を追加して出力

下記のサンプルコードでは、複数の文字列を追加して出力する方法を示しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>テキストファイル出力サンプル2</title>
</head>
<body>
  <button id="download">テキストファイルをダウンロード</button>

  <script>
    document.getElementById("download").addEventListener("click", function() {
      const lines = ["こんにちは、JavaScript!", "テキストファイル出力のサンプルです。"];
      const text = lines.join("\n");
      const blob = new Blob([text], {type: "text/plain"});
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = "sample.txt";
      a.click();
      URL.revokeObjectURL(url);
    });
  </script>
</body>
</html>

このコードでは、<button>要素をクリックすると、複数の文字列が改行で結合されたテキストファイルがダウンロードされます。

○サンプルコード3:オブジェクトをJSON形式で出力

下記のサンプルコードでは、JavaScriptオブジェクトをJSON形式のテキストファイルに変換して出力する方法を示しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>テキストファイル出力サンプル3</title>
</head>
<body>
  <button id="download">JSONファイルをダウンロード</button>

  <script>
    document.getElementById("download").addEventListener("click", function() {
      const obj = {
        name: "山田太郎",
        age: 30,
        job: "エンジニア"
      };
      const json = JSON.stringify(obj, null, 2);
      const blob = new Blob([json], {type: "application/json"});
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = "sample.json";
      a.click();
      URL.revokeObjectURL(url);
    });
  </script>
</body>
</html>

このコードでは、<button>要素をクリックすると、オブジェクトがJSON形式のテキストファイルに変換され、ダウンロードされます。

○サンプルコード4:エンコーディングの変更

下記のサンプルコードでは、テキストファイルのエンコーディングを変更する方法を示しています。

今回は、UTF-8からShift_JISに変換して出力します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>テキストファイル出力サンプル4</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/encoding-japanese/1.0.30/encoding.min.js"></script>
</head>
<body>
  <button id="download">Shift_JISのテキストファイルをダウンロード</button>

  <script>
    document.getElementById("download").addEventListener("click", function() {
      const text = "こんにちは、JavaScript!\nテキストファイル出力のサンプルです。";
      const sjisArray = Encoding.convert(Encoding.stringToCode(text), {from: "UTF8", to: "SJIS"});
      const blob = new Blob([new Uint8Array(sjisArray)], {type: "text/plain"});
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = "sample_sjis.txt";
      a.click();
      URL.revokeObjectURL(url);
    });
  </script>
</body>
</html>

このコードでは、<button>要素をクリックすると、エンコーディングがShift_JISに変換されたテキストファイルがダウンロードされます。

エンコーディングの変換には、encoding-japaneseという外部ライブラリを使用しています。

●テキストファイル出力の応用例

ここでは、テキストファイル出力を応用したサンプルコードをいくつか紹介します。

○サンプルコード5:フォームデータをテキストファイルに出力

下記のサンプルコードでは、フォームで入力したデータをテキストファイルに出力する方法を示しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>テキストファイル出力応用サンプル5</title>
</head>
<body>
  <form id="myForm">
    <label for="name">名前:</label>
    <input type="text" id="name" name="name">
    <label for="age">年齢:</label>
    <input type="number" id="age" name="age">
    <label for="job">職業:</label>
    <input type="text" id="job" name="job">
    <button type="button" id="download">テキストファイルに出力</button>
  </form>

  <script>
    document.getElementById("download").addEventListener("click", function() {
      const formData = new FormData(document.getElementById("myForm"));
      const lines = [];
      for (const [key, value] of formData.entries()) {
        lines.push(`${key}: ${value}`);
      }
      const text = lines.join("\n");
      const blob = new Blob([text], {type: "text/plain"});
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = "form_data.txt";
      a.click();
      URL.revokeObjectURL(url);
    });
  </script>
</body>
</html>

このコードでは、フォームに入力されたデータをFormDataオブジェクトに格納し、テキストファイルに出力しています。

<button>要素をクリックすると、テキストファイルがダウンロードされます。

○サンプルコード6:外部APIデータを取得して出力

下記のサンプルコードでは、外部APIからデータを取得し、テキストファイルに出力する方法を示しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>テキストファイル出力応用サンプル6</title>
</head>
<body>
  <button id="download">APIデータをテキストファイルに出力</button>

  <script>
    async function fetchData() {
      const response = await fetch("https://api.example.com/data");
      const data = await response.json();
      return data;
    }

    document.getElementById("download").addEventListener("click", async function() {
      const data = await fetchData();
      const text = JSON.stringify(data, null, 2);
      const blob = new Blob([text], {type: "text/plain"});
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = "api_data.txt";
      a.click();
      URL.revokeObjectURL(url);
    });
  </script>
</body>
</html>

このコードでは、fetchData関数でAPIからデータを取得しています。

APIから取得したデータはJSON形式であるため、JSON.stringifyを使って整形してテキストファイルに出力しています。

○サンプルコード7:CSVファイルとして出力

下記のサンプルコードでは、データをCSVファイルとして出力する方法を示しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>テキストファイル出力応用サンプル7</title>
</head>
<body>
  <button id="download">データをCSVファイルに出力</button>

  <script>
    const data = [
      ["名前", "年齢", "職業"],
      ["山田太郎", "30", "エンジニア"],
      ["鈴木花子", "25", "デザイナー"],
      ["佐藤一郎", "28", "営業"]
    ];

    function arrayToCsv(data) {
      return data.map(row => row.join(",")).join("\n");
    }

    document.getElementById("download").addEventListener("click", function() {
      const csv = arrayToCsv(data);
      const blob = new Blob([csv], {type: "text/csv"});
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = "data.csv";
      a.click();
      URL.revokeObjectURL(url);
    });
  </script>
</body>
</html>

このコードでは、arrayToCsv関数を使って2次元配列のデータをCSV形式に変換しています。

その後、Blobオブジェクトを作成し、ダウンロードリンクを生成してCSVファイルを出力しています。

○サンプルコード8:画像データをテキストファイルに出力

下記のサンプルコードでは、画像データをBase64形式でエンコードし、テキストファイルに出力する方法を示しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>テキストファイル出力応用サンプル8</title>
</head>
<body>
  <input type="file" id="inputImage" accept="image/*">
  <button id="download">画像データをテキストファイルに出力</button>

  <script>
    document.getElementById("download").addEventListener("click", async function() {
      const inputImage = document.getElementById("inputImage");
      if (inputImage.files.length === 0) {
        alert("画像ファイルを選択してください");
        return;
      }

      const file = inputImage.files[0];
      const base64 = await readFileAsDataURL(file);
      const blob = new Blob([base64], {type: "text/plain"});
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = "image_data.txt";
      a.click();
      URL.revokeObjectURL(url);
    });

    function readFileAsDataURL(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = () => resolve(reader.result);
        reader.onerror = () => reject(reader.error);
        reader.readAsDataURL(file);
      });
    }
  </script>
</body>
</html>

このコードでは、readFileAsDataURL関数で画像ファイルをBase64形式にエンコードしています。

エンコードした画像データをテキストファイルに出力するために、Blobオブジェクトを作成し、ダウンロードリンクを生成しています。

○サンプルコード9:ファイルアップロードと出力

下記のサンプルコードでは、ファイルアップロード機能を実装し、アップロードしたファイルの内容をそのままテキストファイルに出力する方法を示しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>テキストファイル出力応用サンプル9</title>
</head>
<body>
  <input type="file" id="inputFile">
  <button id="download">アップロードしたファイルをテキストファイルに出力</button>

  <script>
    document.getElementById("download").addEventListener("click", async function() {
      const inputFile = document.getElementById("inputFile");
      if (inputFile.files.length === 0) {
        alert("ファイルを選択してください");
        return;
      }

      const file = inputFile.files[0];
      const text = await readFileAsText(file);
      const blob = new Blob([text], {type: "text/plain"});
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = "uploaded_file.txt";
      a.click();
      URL.revokeObjectURL(url);
    });

    function readFileAsText(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = () => resolve(reader.result);
        reader.onerror = () => reject(reader.error);
        reader.readAsText(file);
      });
    }
  </script>
</body>
</html>

このコードでは、readFileAsText関数を使ってアップロードされたファイルの内容をテキストとして読み込みます。

読み込んだテキストをテキストファイルに出力するために、Blobオブジェクトを作成し、ダウンロードリンクを生成しています。

○サンプルコード10:エクスポート機能の実装

下記のサンプルコードでは、ウェブページ上のデータをテキストファイルにエクスポートする機能を実装しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>テキストファイル出力応用サンプル10</title>
</head>
<body>
  <textarea id="data" rows="10" cols="50">ここにエクスポートしたいデータを入力してください。</textarea>
  <button id="export">データをテキストファイルにエクスポート</button>

  <script>
    document.getElementById("export").addEventListener("click", function() {
      const data = document.getElementById("data").value;
      const blob = new Blob([data], {type: "text/plain"});
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = "exported_data.txt";
      a.click();
      URL.revokeObjectURL(url);
    });
  </script>
</body>
</html>

このコードでは、<textarea>要素に入力されたデータをテキストファイルとしてエクスポートします。

そのために、Blobオブジェクトを作成し、ダウンロードリンクを生成しています。

●注意点と対処法

セキュリティ制限

ブラウザによっては、ファイルの読み込みや書き込みに制限がかかっている場合があります。

その場合、適切な権限を付与するか、別のブラウザを試してください。

エンコーディング問題

テキストファイルの読み書き時にエンコーディングが異なると文字化けが発生することがあります。

対処法として、ファイルを扱う際には常に同じエンコーディングを使用してください。

ブラウザ互換性

一部のブラウザでは、BlobFileReaderなどのAPIが未対応の場合があります。

対応状況を確認し、必要に応じてポリフィルを使用してください。

まとめ

この記事では、JavaScriptでテキストファイルを出力する方法を、基本から応用まで10のサンプルコードを用いて解説しました。

各サンプルコードを参考に、自分のプロジェクトに合った実装を行ってください。

また、注意点と対処法にも目を通し、問題が発生した際に迅速に対処できるようにしておきましょう。