(() => { var quiz = [], // 読み取ったCSV全てが入る配列 nQuiz, // データの個数(quiz.lengthのまま使ってもよい) pos=0; // 現在の配列の添字位置 var csvfile = "cafe.csv"; // CSVデータファイル名 function putValues(row) { // CSVの1行分のJSONがrowに入る for (let key of Object.keys(row)) { // Object.keys(JSON)でキーを1個ずつ取り出す(Rubyのkeys) let id = "__" + key + "__"; // HTML要素のID let elem = document.getElementById(id); if (elem) { // もし id="__カラム名__" の要素が見つかったら elem.innerText = row[key]; // その要素の内部テキストを更新 } } } function slide(n) { // nで指定した数だけ現在位置(pos)をずらす pos = (nQuiz+pos+n) % nQuiz; // 0以上 nQUIZ以下 になるよう調整 putValues(quiz[pos]); // ずらした添字位置で文書書き換え } function left() {slide(-1);} // 1つ前に戻るボタンの処理 function right() {slide(1);} // 1つ先に進むボタンの処理 function init() { // HTML文書を読み終わったら呼ばれる fetch(csvfile). // csvfileをサーバから読み込んで then((resp) => { // 応答がrespに入るので if (resp.ok) return resp.text(); // テキストを返す }).then((txt) => { // テキストが txt に入るので quiz = new CSV(txt, {header: true}).parse(); // CSV解析 nQuiz = quiz.length; // 行数を記憶 putValues(quiz[pos]); // 最初の行のデータを表示 });; document.getElementById("left").addEventListener("click", left); document.getElementById("right").addEventListener("click", right); } document.addEventListener("DOMContentLoaded", ()=>{ init(); // ブラウザの文書読み込みが完了したらここに来る }, false); })();