JavaScriptに外部読込

Question

タイピングゲームを作ったのですが、ランキング表記の仕方がわかりません。
＊現在のJavaScript＊

<script>
  var r=[
  ['59:59.95','abc'],
  ['59:59.96','xyz'],
  ['59:59.97','ijk'],
  ['59:59.98','aaa'],
  ['59:59.99','zzz'],
  ];
  var qs=[
    'q1',
    'q2',
  ];
    const viewRank=()=>{
      document.querySelector('#rank span').innerHTML=r.map(x=>x.join(" ")).join("<br>");
      };
      window.addEventListener('DOMContentLoaded',()=>{
      viewRank();
      document.querySelector('#start').addEventListener('click',e=>{
        const t1=e.target;
        const t2=document.querySelector('#a');
        t1.disabled=true;
        t2.disabled=false;
        const name=prompt("お名前を入力してください。");
        if(name=="") name="UnKnown";
        (async()=>{
          const s=new Date().getTime();
          for(var i=0;i<qs.length;i++){
            const qStr=qs[i];
            document.querySelector('#q span').textContent=qStr;
            t2.value="";
            t2.focus();
            await new Promise(resolve=>{
              const timerId=setInterval(()=>{
                if(t2.value==qStr){
                  clearInterval(timerId);
                  resolve();
                  }
                  },10);
                  });
                  }
                  const e=new Date().getTime();
                  const diff=e-s;
                  const str=(10000+diff/1000).toString();
                  const time=str.substr(1,2)+":"+
                  str.substr(3,5);
                  r.push([time,name]);
                  r=await r.sort((x,y)=>x[0]>y[0]?1:-1).splice(0,5);
                  viewRank();
                  t1.disabled=false;
                  t2.disabled=true;
                  })();
                  });
                  });
</script>
<input type="button" value="ゲームスタート！" id="start">
<font size="5"><div id="q">Q:<span>ここに問題が表示されます。</span></div></font>
<div>A:<input type="text" id="a"></div>
<table border="1">
<tr>
<td>
<div id="rank">現在のランキングトップ５<br>
    <center><span></span></center>
</div>
  </td></tr></table>

＊問題点＊

ランキングをTOP５まで表示するのですが、ランキングの更新を行いたいと思っています。
また、現在の実装状態でランキングは表示されるのですが、ページの更新などを行った際、サーバー側のデータが書き換えられないためにもとに戻ってしまう（初期値のままである）のです。
＊試したこと＊

WEB上を探してみたのですが、サーバー側のデータを書き換えるのに、外部ファイルにして読み込ませ、書き換える必要があれば書き換えるという動作にするといいということまでは判明したのですが、それをどのように実装したらいいのかまではわかりませんでした。
参考にしたらいいサイトなどがあれば紹介していただければと思います。また、できれば具体的な書き方も押せていただけると幸いです。

Comments

[oikashinoa]

> WEB上を探してみたのですが、サーバー側のデータを書き換えるのに、外部ファイルにして読み込ませ、書き換える必要があれば書き換えるという動作にするといいということまでは判明
どこに書いてあったかurlを質問本文に書くと良いです。

[退会済みユーザー]

了解しました。

Answer 1

前の質問のコメント欄で書きましたが、JavaScriptでやりきるのは難しいです。
自身のスコアだけのランキングでしたら半永続的にデータを保持し続けられる「WebStorage」の仕組みが使えますが、「ユーザーすべての」となるとクライアントサイドの技術であるJavaScriptではできません。

PHPなどサーバーサイドの言語を利用し、データベースにデータを保存するようにしてください。

Comments

[m.ts10806]

でも以前の質問でWebStorageはすすめられてますね。
https://teratail.com/questions/214345

採用見送ったのでしょうか。
その後何を試したか調べたかわからないですね。

[退会済みユーザー]

phpですか。ありがとうございます。PHPも検討していきたいと思います。もしどのように記述していけばいいかなどありましたら、コメントしていただけると幸いです。

[退会済みユーザー]

言い訳になってしまうのですが、少し時間がなかったもので、久しぶりに検討しています。

[m.ts10806]

まず調べてください。
「できること」「できないこと」は調べないとわかりませんし、
組むのはほかでもないあなたです。
ご存知かと思いますが、「コードください」となるとそれは質問ではなく作業依頼となります。
キーワードも出しています。まずそこからどんなものかを調べてください。
まずは「JavaScriptだけでやりきるのは無理」というのを理解するところからですね（Node.jsはサーバーサイドなので除く）

[m.ts10806]

厳しいこというと時間がないとか他人である回答者には関係ありませんので、冷たいと思われるかもしれませんが、あくまでここは「質問サイト」です。

[退会済みユーザー]

すみません。

[退会済みユーザー]

まぁ、今後気をつければいいことですよ(^^)

[m.ts10806]

なぜtonkoさんが？
アドバイスも結構ですが自身もよくわからない横槍を気を付けてください。

[退会済みユーザー]

あっ、失礼しました。

[kyoya0819]

横槍失礼します。
JSだけでも可能ではあります。
FireBaseを使えばの話ですが

m.ts10806さんがおっしゃるように「完全」にHTML,CSS,JSだけでやりきることは不可能です。

[m.ts10806]

asuchi0819さん
補足ありがとうございます。
FireBaseは中々取り扱う機会はないですが選択肢としてはありそうですね。
あとは要件次第となりそうです。