LoginSignup
0
0

More than 3 years have passed since last update.

46日目。Javascriptで配列を作ってまとめて更新、メンテしやすくなりました。

Last updated at Posted at 2019-07-16

品物のリストをずらっと表示しているホームページの改修をしています。
今後もしょっちゅう入れ替えがありそうなので

JavaScriptをつかってみました。
覚えたら使ってみたいじゃないですか!?

test.js
const Targets = [
    ["butaman.png", "横浜", "ぶたまんケーキ","2019/07/11 11:00","出荷済み"],
    ["takoyaki.png", "大阪", "たこやきケーキ","2019/07/11 14:00","製造中"],
    ・・・
    中略
    ・・・
    ["higuma.png", "札幌", "ひぐまケーキ","2019/07/12 11:00","スタンバイ"]
]

let str = "";
for (i=0; i<Targets.length; i++ ){
    Target = Targets[i]
    str = str  + `<div class='frame'>`;
    str = str  + `<img class='left'  src="${Target[0]}" >`;
    str = str  + `<div class='store'>${Target[1]}</div>`;
    str = str  + `<div class='prod'> ${Target[2]}</div>`;
    str = str  + `<div class='time'> ${Target[3]}</div>`;
    str = str  + `<img class='right' src="${Target[4]}">`;
    str = str  + `</div>`
}

const firstscript = function() { 
   document.getElementById('eid').innerHTML = str;
};

window.addEventListener("DOMContentLoaded", firstscript);

品目がたくさんあると更新が大変!
HTMLにずらっと書かれていたものを、配列にまとめて更新しやすくしてみました。
これをforでくるくる回してHTMLに返しています。

JavaScriptでHTMLを書き換えよう!

document.getElementByIdだけだと更新されなかったのでaddEventListenerで開いたときに起動させています。
【JavaScript入門】addEventListener()によるイベント処理の使い方!

最初はPHPでフォームを作ってと考えたのですが、サーバーのメンテが難しそうなので見送り。

次にCSVファイルを読み込む作戦を試したのですが、Chromeではセキュリティ上原則禁止。見送りました。

onclick()でコンテンツを変えられないかな?と思ったのですが、複数箇所のクリック画像がぜんぶ同時に更新される謎現象がわからなくて見送り。

Javascriptでローカルファイル(file://)を読み込んでみる

Chromeでcsvを開きたい 発生している問題・エラーメッセージ XMLHttpRequest cannot load file:///D:/test/Book1.csv. Cross origin requests ar

【JavaScript入門】すぐわかる!画像を切り替える方法

あきらめて一行ずつコツコツ更新を進めつつ
Progateを復習してみたら配列に変数をどんどん入れて、forでくるくる回す方法がちょうど出てきました。さっそく使ってみたらいい感じになりました。

この方法にたどりつくまでが、えらい大変でした。。。

所要時間
・PHPで試作・・・2時間
・CSV方式の試作・・・1時間
・onclickの試作・・・1時間
・Progate Javascript1,2の復習・・・1時間
・配列に格納、forで回す・・・1時間

0
0
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0