JavaScriptでAPIを使用した開発が必要になり、まずはJavaScriptのCRUDを、ELOOPというオンライン学習サイトで学習しました。Step by Stepのカリキュラムではなく、ドーンと説明があり、その後いきなりテストといった流れなので、1度で腹落ちするのは難しいです。なので、必要な都度見返して理解していこうと思います。 ![]()
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[i].value === studentsData[index].sex) { selectBox.options[i].selected = true; } } isEditMode = true; }; // 選択された番号(selectedDataNum)の学生データを書き換える関数 function updataRecord(form) { studentsData[selectedDataNum] = 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; };※文字化けしている箇所(①&#91; ⇒ [ 、 ②&#93; ⇒ ] )
表示画面

Webプログラミング入門
- 01a. 開発環境構築(Windows8.1+VMware Player+CentOS)
- 01b. 開発環境構築(Windows 10+Ubuntu)
- 01c. 開発環境構築(Ubuntu18.04(WSL)+Ansible+Serverspec+WP-CLI)
- 01d. 開発環境構築(WSL2+Ubuntu18.04+Docker)(作成中)
- 02a. AWS環境構築(CentOS6)
- 02b. AWS環境構築(CentOS6+LAMP環境+WordPress)
- 02c. AWS環境構築(CentOS7+Django)
- 02d. AWS環境構築(CentOS7+Ansible+Serverspec+WP-CLI+Munin)(作成中)
- 02z. さくらのクラウド環境構築(CentOS7+Ansible+Serverspec+WP-CLI)
- 03a. WordPress制作入門
- 03b. WordPress制作入門
- 04. トラブルシューティング
- 11. HTML/CSS入門
- 11a. ProgateでHTML&CSS初級
- 11b. ProgateでHTML&CSS中級(ランディングページ)
- 11c. ProgateでHTML&CSS上級(レスポンシブデザイン)
- 11d. ProgateでHTML&CSS(Flexbox編)
- 11e. ProgateでSass(CSSをより便利に効果的に操作する言語)
- 11y. ドットインストールでBootstrap4入門
- 11z. PaizaラーニングでBootstrap4入門
- 12. MySQL入門
- 12a. ProgateでSQL Ⅰ~Ⅲ
- 12b. ドットインストールでmongoDB入門
- 13. PHP入門
- 14. ProgateでRubyⅠ~Ⅴ
- 15a. ProgateでRuby on RailsⅠ~Ⅴ
- 15b. ProgateでRuby on RailsⅥ~Ⅷ
- 15c. ProgateでRuby on RailsⅨ~Ⅺ
- 16. ProgateでPythonⅠ~Ⅴ
- 17. paizaラーニングでFlask入門
- 18a. Django入門1(Djangoの基本の理解)
- 18b. Django入門2(Djangoの動作の理解)
- 18c. Django入門3(Djangoのテンプレートとフォームを理解)
- 18d. Django入門4(お勧め店を投稿できるランチマップアプリの作成)
- 18e. Django入門5(Djangoでユーザー管理)
- 19a. ProgateでjQuery初級編
- 19b. ProgateでjQuery中級編
- 19c. ProgateでjQuery上級編
- 20a. ProgateでJavascript(ES6)Ⅰ~Ⅲ
- 20b. ProgateでJavaScript Ⅳ~Ⅴ
- 20c. ProgateでJavaScript Ⅵ~Ⅶ
- 20d. JavaScriptでCRUDアプリを作る(ELOOP)