【javascript】変更フォームでlist.jsの中身を更新したい
先日よりJavascriptを勉強していて、下記のような外部リストを作ってHTMLで作ったフォームのselectに読み込んでいます。
頻繁に選択肢を変えることがあるので、このファイルをフォームで追加・削除を行いたいと考えており、どのような方法があるのか調べても分からず、ご教授いただければ嬉しいです。
よろしくお願いします。
list.js
var list = [
{val:"1", txt:"1"},
{val:"2", txt:"2"},
{val:"3", txt:"3"},
{val:"4", txt:"4"},
{val:"5", txt:"5"},
{val:"6", txt:"6"},
];
おそらくローカルPCに保存したHTMLファイルに書いたJavaScriptプログラムを使って、ローカルPCに保存されているlist.jsの内容を更新されようとしているのだと思います。
しかしなから、ローカルPCに保存した、JavaScriptプログラム（フォームを用いたファイル内容編集プログラム）が書かれたHTMLファイルをローカルのブラウザで開いて、そのフォーム画面を経由してローカルに保存されているlist.jsファイルの内容を更新（内容を変えて同じファイル名で上書き保存）することは、セキュリティの関係上不可能です。
ローカルファイルの削除も同様の理由で不可能です。
同一フォルダに、別名（たとえば、list(1).js、list(2).js・・・というような連番のついたファイル名）で保存することは可能です。
（下記コード）
<!DOCTYPE html>
<html>
<head>
<title>Input and Output Example</title>
</head>
<body>
<button id="outputButton">保存</button>
<button id="addButton">行追加</button>
<div id="container"></div>
<script>
// HTML要素を取得
const outputButton = document.getElementById('outputButton');
const addButton = document.getElementById('addButton');
for (let i= 1;i<=6;i++){
const newRow = document.createElement('div');
newRow.innerHTML = `
<input class="valueBox" type="text" placeholder="Value">
<input class="txtBox" type="text" placeholder="Text">
`;
document.body.appendChild(newRow);
}
// "list.js"にデータを書き込む関数
function writeList() {
let valueBoxes = document.querySelectorAll('.valueBox');
let txtBoxes = document.querySelectorAll('.txtBox');
let t = [];
valueBoxes.forEach((box,i) => {
t.push({ val: box.value, txt: txtBoxes.item(i).value })
});
const data = "var list=\n"+ JSON.stringify(t, undefined, 1);
const blob = new Blob([data], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'list.js';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
// "行追加"ボタンをクリックしたときの処理
addButton.addEventListener('click', () => {
// 新しい行を追加
const newRow = document.createElement('div');
newRow.innerHTML = `
<input class="valueBox" type="text" placeholder="Value">
<input class="txtBox" type="text" placeholder="Text">
`;
document.body.appendChild(newRow);
});
// "保存"ボタンをクリックしたときの処理
outputButton.addEventListener('click', writeList);
</script>
</body>
</html>
（上のコードを適当なファイルに書いて、「index.html」などの名前で保存し、ブラウザで開くと、テキストボックスが2列6行現れます。そのテキストボックスに文字を入れて「保存」ボタンを押すとテキストボックスに入力した内容が質問文記載のような形式で「list.js」という名前でローカルに保存（ダウンロード）されます。同名のファイルがダウンロード先に既に存在する場合は連番がつきます）
ですので仮にファイル名に連番がつくのを許容するなら、ファイルを読み込むときに連番を考慮して最新のものを読み込む、といった回りくどい方法になるでしょう。（ですがこれは質問者さんの希望している要件を満たすとは思えません。質問者さんの要件は、あくまで「list.js」という単一ファイルを更新する、ということのようですので）
（上のコードは保存だけですが、もちろんlist.jsと言う名前のファイルの内容を読みこんでテキストボックスに各行の値を入力した状態で表示するコードも比較的すぐ書けます。ただし要件の問題があるため（「セキュリティの関係上、list.jsファイルから読みこんで編集した内容を、list.jsという同じ名前のファイルに上書き保存できない」]ここでは省略しています）
Selectに読み込むデータをローカルの別ファイルに置いておき、そのファイルの内容をフォームのようなGUIで編集する方法としては
・ローカルのHTMLファイルに記述したJavaScriptで処理するのではなく、Node.jsを使う。
・Python や C# など、ローカルファイルの内容更新が可能な別の言語を使用する
などがあります。
または、JavaScriptを使ってcsvファイルを読み込んでその内容をSelectに取り込むこと自体は可能なので、ファイル編集はエクセルなどで行う、という手段もあります。（Selectを書いている側のJavascriptの修正は必要になる）
ファイルにこだわらなくてよいのであれば、ブラウザのローカルストレージやIndexedDBを使うという方法もあります。
ブラウザのJavaScriptだけでは無理なのでサーバーサイドの言語も使う。
この時json形式で保存すればブラウザのJavaScriptからでも扱いやすい。
list.json
[
{"val":"1", "txt":"1"},
{"val":"2", "txt":"2"},
{"val":"3", "txt":"3"},
{"val":"4", "txt":"4"},
{"val":"5", "txt":"5"},
{"val":"6", "txt":"6"},
]
「ファイルの読み書き」や「jsonで保存」は入門レベルのことなので少し勉強すればできる。
