【ゼロからはじめるプログラミング】JavaScript学習 #38

ゼロからはじめるプログラミング講座の第四十九回です。今回は外部ファイル保存のやり方を解説します。テキストファイルの保存です。ついでに読み込みもやります。

テキストファイルを出力してみよう。
テキストファイルを読み込んでみよう。

テキストファイルを出力してみよう。

まずはindex.htmlをコピペで作ってください。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>JavaScript</title>
</head>
<body>
  <span>テキスト保存</span>
  <div id="box">
    <form autocomplete="off">
      <p>テキストエリア</p>
        <TEXTAREA id="textarea"></TEXTAREA>
    </form>
    <button id="save" type="button">ファイル保存</button>
    <input type="file" id="load" accept="text/*">
  </div>
  <script src="test.js"></script>
</body>
</html>

テキストを入力する場所
入力したテキストを保存するボタン
ローカルファイルを選択するボタン

があります。まずはテキストの保存からやっていきます。

const textarea = document.querySelector("#textarea") // テキストエリア
const save = document.querySelector("#save") // 保存ボタン

save.addEventListener("click",function(){ // 保存ボタンを押したら
  let text = textarea.value // テキストエリアのテキスト
  let blob = new Blob([text], {type:"text/plain"})
  let a = document.createElement("a") // ダウンロード用のリンク作成
  a.href = window.URL.createObjectURL(blob)
  a.download = 'テキストファイル.txt' // 保存するファイル名
  document.body.appendChild(a) // リンクをDOMに追加
  a.click() // ダウンロードリンクをクリック
})

新しく出てきたのが6行目のnew Blob([text], {type:”text/plain”})です。

BlobメソッドはJavaScript外のデータをやり取りするメソッドです。

第一引数にデータ、第二引数にファイルタイプなどを指定できます。

この場合テキストエリア内のテキストをデータに、ファイルタイプをtextに指定。

この作ったBlobオブジェクトをJavaScriptでダウンロードさせるには、ダウンロード用のリンクを作り、それをクリックさせる必要があります。クリックは以前に解説しました。

ダウンロード用のURLだけは動的に作成する必要があるので、window.URL.createObjectURL(blob)というコードを使います。blobを使うときはセットで使うことが多いので覚えておきましょう。

これで保存を押すとテキストエリアに書かれたテキストを保存することができます。

次は読み込みをやってみましょう。

テキストファイルを読み込んでみよう。

test.jsにコードを加えて確認してください。

const load = document.querySelector("#load")  // 参照ボタン

load.addEventListener("change",function(){ // ファイルを参照したとき
  let fileList = load.files // 読み込んだファイル
  const reader = new FileReader()
  reader.readAsText(fileList[0])
  reader.addEventListener("load",function(){ // ファイルを展開したとき
    textarea.textContent = reader.result // テキストエリアに中身を入れる
  })
})

ファイルを選択したあとにファイルを読み込むのにFileReaderという機能を使います。

まずはnew FileReader()で読み込みメソッドを持ったオブジェクトを作ります。

6.reader.readAsText(fileList[0])
.readAsText()　テキストとして引数に渡されたファイルを読み込みます。

7-9.読み込みが成功したことを感知するイベントを登録して結果を受け取ります。

読み込んだ中身はreader.resultに入っています。あとはJavaScriptで好きに扱えます。

ファイルの保存と読み込みは簡単便利なので是非覚えておきましょう。

localStorageでは容量制限がありましたがblobを使った方法なら無制限にデータを保存することができます。

お疲れ様でした。次回は雑談回です。

次も頑張って記事を作るのでチャレンジしてください！