中学生がWEBで動作する英単語学習サイトを作ってみる。単語帳作成其の1 #JavaScript

自己紹介

どうも、こんにちは。今回が初投稿になります。
ということで簡単に自己紹介を。

中学生
鉄道ファン

技術スタック

PHP
HTML・CSS（プログラミング言語じゃあない）
SQL（多少）
Unity C#
Javascript
GAS（GoogleAppsScript）
WordPress

あと、jQueryは苦手です。

html

<div class="deta" id="deta">
  <div class="unok" id="unok">0</div>
  <div class="spacer" id="spacer"></div>
  <div class="ok" id="ok">0</div>
</div>
<div class="card" id="card">
  <div class="front-card" id="front-card">日本語</div>
  <div class="back-card" id="back-card">英語</div>
</div>

front-cardは単語帳でいう表、back-cardは単語帳でいう裏を表す。
また、上のdetaがクラスの<div>でわかった単語の数、わからなかった単語の数を表している。

CSS

.deta{
  display: flex;
}
.ok{
  width: 20%;
}
.spacer{
  width: 60%;
}
.unok{
  width: 20%;
}
.card{
  position: relative;
}
.front-card{
  position: absolute;
  background-color: #FFFFFF;
  width: 100%;
  height: 400px;
  border: 1px solid black;
  z-index: 2;
}
.back-card{
  position: absolute;
  background-color: #FFFFFF;
  width: 100%;
  height: 400px;
  border: 1px solid black;
  z-index: 1;
}

苦手なので必要最低限のものにした。
カードの裏表はz-indexを指定することで重ね順を指定して実装している。

Javascript

//配列定義
var key = ["くるま","りんご","ピアノ","テレビ（TV）"];//日本語
var value = ["car","apple","piano","TV"];//英語
var wakaru = [];//わかる単語のキー
var wakaranai = [0,1,2,3];//わからない単語のキー
var nowid = 0;//何番目の単語なのか。はじめは「0」
var noknow = [];//わからない単語を一時的に保存する配列。
var knownum = 0;//わかる単語の数。初期値は0
var unknownum = 0;//わからない単語の数。初期値は0
var username = "hirune-train";//ユーザー名
var tangoid = "1";//単語帳のID
var cani = 0;//まだ単語帳が終わっていないか判定。

//初期表示設定
document.getElementById("front-card").innerHTML = key[wakaranai[0]];//カードの表をわからない単語の一番初めの番号に
document.getElementById("back-card").innerHTML = value[wakaranai[0]];//カードの裏をわからない単語の一番初めの番号に

//どのキーが押されたか判定するイベントリスナー
document.addEventListener("keydown",(event) => {
  if(cani == 0){
    var keyname = event.key;
    //alert(keyname)
    if(keyname == "Enter"){//もしエンターキーが押されたら
      turn();//カードを裏返す関数を実行する。
    }else if(keyname == "ArrowRight"){//もし右キーが押されたら
      if(wakaranai.length == nowid+1){//最後じゃなかったら
        knownum++;
        drowmoji();
        finish();
      }else{
        cardru(nowid);//カードが分かったときに作動する関数を実行する。
      }
    }else if(keyname == "ArrowLeft"){//もし左キーが押されたら
      if(wakaranai.length == nowid+1){//最後じゃなかったら
        putarray(noknow, nowid);
        unknownum++;
        drowmoji();
        finish();
      }else{
        cardnai(nowid);//カードがわからなかったときに作動する関数を実行する。
      }
    }
  }
})

/*関数軍*/
function turn(){//カードを裏返す関数。
  var frontz = document.getElementById("front-card").style.zIndex;
  var backz = document.getElementById("back-card").style.zIndex;
  if(frontz == 2 && backz == 1){
    document.getElementById("front-card").style.zIndex = 1;
    document.getElementById("back-card").style.zIndex = 2;
  }else{
    document.getElementById("front-card").style.zIndex = 2;
    document.getElementById("back-card").style.zIndex = 1;
  }
}

function cardru(ima){//カードが「わかった」時の関数
  nowid++;
  knownum++;
  drowmoji();
}

function cardnai(ima){//カードが「わからなかった」時の関数
  putarray(noknow, ima);
  nowid++;
  unknownum++;
  drowmoji();
}

function cutarray(array,keyword){//配列より指定の値を持つ要素を削除する関数。
  //arrayは配列
  //keywordは指定の値
  for(i=0; i<array.length; i++){
      if(array[i] == keyword){
          array.splice(i, 1);
      }
  }
}

function putarray(array,keyword){//配列に指定の値を追加する関数
  //arrayは配列
  //keywordは指定の値
  array.push(keyword);
}

function drowmoji(){//単語帳の画面に単語を記入する関数。
  document.getElementById("front-card").innerHTML = key[wakaranai[nowid]];//表
  document.getElementById("back-card").innerHTML = value[wakaranai[nowid]];//裏
  document.getElementById("ok").innerHTML = knownum;//わかった数
  document.getElementById("unok").innerHTML = unknownum;//わからなかった数
}

function finish(){//単語帳で全てのものを学び終わった時に画面を表示する関数。
  document.getElementById("front-card").innerHTML = "お疲れ様でした！全ての単語を学び終わりました。"
  document.getElementById("back-card").innerHTML = "お疲れ様でした！全ての単語を学び終わりました。"
  arraymoji = cutarray(noknow)
  onajax(knownum, unknownum, arraymoji, username, tangoid)//結果をphpにAjax送信してデータをデータベースに保存する
  cani = 1;
}

function onajax(know,unknow,unknowarray,user,tangoid){//Ajax送信をする関数。
  $.ajax({
      type: "POST", //　GETでも可
      url: "on-db.php", //　送り先
      data: {
        'knownum': know,//わかる数
        'unknownum': unknow,//わからない数
        'unknowarray': unknowarray,//わからない配列
        'user': user,//やった人のユーザー名
        'tangoid': tangoid//単語帳のID
      }, //　渡したいデータをオブジェクトで渡す
      dataType : "json", //　データ形式を指定
      scriptCharset: 'utf-8' //　文字コードを指定
  })
  .then(
      function(param){　 //　paramに処理後のデータが入って戻ってくる
          //alert(param); //　帰ってきたら実行する処理
      },
      function(XMLHttpRequest, textStatus, errorThrown){ //　エラーが起きた時はこちらが実行される
          //alert(XMLHttpRequest); //　エラー内容表示
  });
}

function cutarray(array){//配列を文字列化する関数。
  ary = array;
  str = ary.join(',');
  str = "["+str+"]"
  return str;
  //=>Spring,Summer,Fall,Winter
}

なんだかんだ一番頑張った。
できるだけ関数でまとめ、デバッグしやすいようにしている。

まとめ

今回は、xとりあえずプログラム内で指定した配列をもとに単語帳を作り出すようにしました。
次回は、既に用意しておいたサーバーに結果をajax送信する関数を使って結果をデータベースに保存し、そこから単語帳を作り出すようにしたいです。

もっと良いコード、改善点などあればどしどしコメントからお寄せください。