JSで単語帳を作ろう(前編) | ジョイタスネット

JSを使って単語帳を作ってみよう。

準備

任意の場所にwordlistフォルダを作成し、その中にjsフォルダと、cssフォルダを作成する。

作成

1.wordlistフォルダの直下にindex.htmlを作成し以下のように記述する。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>単語帳</title>
		<link rel="stylesheet" href="css/main.css">
		<script src="js/main.js"></script>
	</head>
	<body>
		<h1>単語帳</h1>
		<input type="text" placeholder="単語">
		<input type="text"  placeholder="意味">
		<button id="btn">登録</button>
		<p id="total">全0件</p>
		<table id="table"></table>
	</body>
</html>

実行してみよう。以下のように表示されれば成功だ。

main.js作成

入力した内容で表を作成していこう。jsフォルダ内にmain.jsを以下のように作成する。

//厳格モードで実行
'use strict';
//文書が読み込み終わったら処理を実行
window.onload=()=>{
  //Wordクラスの作成
	class Word{
    //コンストラクター
		constructor(en,ja){
			this.en=en;
			this.ja=ja;
		}
    //メソッド
		showInfo(){
			return `<td>${this.en}</td><td>${this.ja}</td>`;
		}
	}
  //input要素をNodeListとして取得
	const inputs=document.querySelectorAll('input');	
  //セレクタをもとに要素を取得
	const btn=document.querySelector('#btn');	
	const total=document.querySelector('#total');	
	const table=document.querySelector('#table');	
  //空の配列を準備
	let list=[];
  //btnにクリックイベントを登録
	btn.addEventListener('click',()=>{
    // 入力値を取得(前後についた無駄なスペースを除去)
    const enValue = inputs[0].value.trim();
    const jaValue = inputs[1].value.trim();

    // 入力が空でないか確認
    if (enValue === '' || jaValue === '') {
      alert('単語と意味を両方入力してください。');
      return; // 入力が不正な場合は処理を中断
    }
    //Wordインスタンスを作成
		let word=new Word(enValue,jaValue);
    //インスタンスを配列に追加
		list.push(word);
    //すべてのinput要素を空欄にする
    inputs.forEach((input)=>{
      input.value='';
    });
		updateTable();
	});
	function updateTable(){
    //見出し行を作成
		table.innerHTML='<tr><th>単語</th><th>意味</th></tr>';
    //配列から1件1件取り出しながら処理を行う(取り出した1件をwordとして扱う)
    list.forEach((word)=>{
      //tr要素を作成
			let tr=document.createElement('tr');
      //trの子要素をhtmlが含まれた文字列で設定
			tr.innerHTML=word.showInfo();
      //table要素の子要素として作成したtr要素を追加
			table.appendChild(tr);
    });
    //total要素のテキストコンテントを設定
    total.textContent=`全${list.length}件`;
	}
	updateTable();
};

実行して、いくつか単語を登録してみよう。以下のように入力した内容が下に表示されれば成功だ。

main.css

テーブルにスタイルを当てよう。cssフォルダの中にmain.cssを作成し以下のように記述する。

/*idにテーブルがついている要素*/
#table{
  /* テーブルの境界線を重ねて表示し、隣接するセルの境界線を1本にまとめる */
	border-collapse:collapse;
}
/*td要素とth要素*/
td,th{
  /*1px実践の罫線(色は#333)*/
	border:1px solid #333;
  /*上下0 左右10pxのパディング*/
	padding:0 10px;
  /*テキストを中央揃えにする */
	text-align:center;
}
th{
  /*背景色を青に設定*/
  background-color:#0000ff;
  /*文字色を白に設定*/
  color:white;
}

[解説]
テーブルにボーダーに引くときにborder-collapseの指定をcollapseにしないと線が2重になってしまう。「collapse」という言葉は「崩壊する」という基本的な意味から、データや要素が「統合されて一つになる」というニュアンスになる。

実行してみよう。テーブルに線が引かれた。
(現状はリロードするとデータが全部消えてしまうので再入力の必要がある)