20d. JavaScriptでCRUDアプリを作る(ELOOP) | ☂☂☂ボツワナに恵みの雨を☂☂☂

JavaScriptでAPIを使用した開発が必要になり、まずはJavaScriptのCRUDを、ELOOPというオンライン学習サイトで学習しました。Step by Stepのカリキュラムではなく、ドーンと説明があり、その後いきなりテストといった流れなので、1度で腹落ちするのは難しいです。なので、必要な都度見返して理解していこうと思います。

Contents

1 index.html
2 style.css
3 main.js
4 表示画面
- 4.1 Webプログラミング入門

index.html

< !DOCTYPE html>
<html>

<head>
  <meta charset='UTF-8'/>
  <link rel='stylesheet' href='./style.css'/>
  <title>インデックスページ</title>
</head>

<body>
  <div class="container">
    <p>入力フォーム</p>
    <div>
      <label>名前</label>
      <input type="text" id="name"/>
    </div>
    <div>
      <label>年齢</label>
      <input type="number" id="age"/>
    </div>
    <div>
      <label>性別</label>
      <select id="sex">
        <option value='選択しない'>選択しない</option>
        <option value='男性'>男性</option>
        <option value='女性'>女性</option>
      </select>
    </div>
    <div>
      <button class="btn btn-blue" onclick="onFormSubmit()">フォームを送信</button>
    </div>
  </div>
  <div id='display'></div>
  <script src="./main.js"></script>
</body>

</html>

style.css

p {
  margin: 0px;
}

li {
  list-style: none;
}

.container {
  border: 1px solid #ccc;
  padding: 10px;
}

.btn {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  color: #FFF;
  border-radius: 3px;
}

.btn-blue {
  background: #668ad8;  /*ボタンの色*/
}

.btn-orange {
  background-color: #fd9535;
}

.btn-green {
  background-color: #03864c
}

main.js

// 表示させる部分のdiv要素
const display = document.getElementById('display');

// 生徒データのの初期データ
let studentsData = [
  { name: '田中太郎', sex: '男性', age: 21 },
  { name: '田中次郎', sex: '男性', age: 19 },
  { name: '田中花子', sex: '女性', age: 14 }
];

let selectedDataNum = null;   // 選択しているデータの番号
let isEditMode = false;       // 編集モードであるかどうかの真偽値

document.addEventListener('DOMContentLoaded', function () {
  refreshDisplay(studentsData);
});

// 学生データ提出時のハンドラ
function onFormSubmit() {
  let formData = readFormData();
  if (isEditMode) {
    updataRecord(formData);
  } else {
    insertNewRecord(formData);
  }
  refreshDisplay(studentsData);
  resetForm();
};

// フォームの学生データを読み込む関数
function readFormData() {
  let formData = {};
  formData["name"] = document.getElementById("name").value;
  formData["age"]  = document.getElementById("age").value;
  formData["sex"]  = document.getElementById("sex").value;
  return formData;
};

// 学生データに要素を追加し、新しい学生データを戻す関数
function insertNewRecord(form) {
  studentsData.push(form);
};

// 編集モードに移行する関数
function onEdit(index) {
  selectedDataNum = index;
  document.getElementById("name").value = studentsData[index].name;
  document.getElementById("age").value = studentsData[index].age;
  const selectBox = document.getElementById("sex");
  for (let i = 0; i < selectBox.options.length; i++) {
    if (selectBox.options&#91;i&#93;.value === studentsData&#91;index&#93;.sex) {
      selectBox.options&#91;i&#93;.selected = true;
    }
  }
  isEditMode = true;
};

// 選択された番号(selectedDataNum)の学生データを書き換える関数
function updataRecord(form) {
  studentsData&#91;selectedDataNum&#93; = form;
};

// 指定されたindexのデータをstudentsDataから削除するをする関数
function onDelete(index) {
  studentsData.splice(index, 1);
  refreshDisplay(studentsData);
};

//渡された学生データを画面に表示する関数
function refreshDisplay(data) {
  display.textContent = null;
  for (let itemIndex = 0; itemIndex < data.length; itemIndex++) {
    display.insertAdjacentHTML('beforeend',
    `
    <ul class="container">
      <li>名前：${data[itemIndex].name}</li>
      <li>性別：${data[itemIndex].sex}</li>
      <li>年齢：${data[itemIndex].age}歳</li>
      <button class="btn btn-green" onclick="onEdit(${itemIndex})">編集</button>
      <button class="btn btn-orange" onclick="onDelete(${itemIndex})")>削除</button>
    
    `)
  }
};

// フォームの内容を初期値に戻す関数
function resetForm() {
  document.getElementById("name").value = null;
  document.getElementById("sex").value = null;
  document.getElementById("age").value = null;
  document.getElementById("sex").options[0].selected = true;
};

※文字化けしている箇所（①＆＃９１； ⇒ [ 、 ②＆＃９３； ⇒ ] ）

index.html

style.css

main.js

表示画面

Webプログラミング入門