こんにちは。KOUKIです。
前回は、Todoリストアプリケーションのバックエンド側の機能をGo言語で実装しました。
今回は、JavaScriptからバックエンド(Go)にアクセスし、Todoの取得、保存、ステータス更新、削除処理の連携をしたいと思います。
<目次>
前回
ワークスペース
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
$ tree . ├── api │ ├── Makefile │ ├── delivery │ │ ├── allget.go │ │ ├── delete.go │ │ ├── statusupdate.go │ │ └── store.go │ ├── domain │ │ └── todo.go │ ├── go.mod │ ├── main.go │ ├── repository │ │ ├── todo_map.go │ │ └── todo_map_test.go │ └── usecase │ └── todo_usecase.go └── ui ├── index.html ├── script.js └── style.css |
JavaScriptコード
ほとんど前回と同じです。まずは、実装後のソースコードをお見せします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
const form = document.getElementById('form') const input = document.getElementById('input') const todosUL = document.getElementById('todos') // baseURL const baseURL = 'http://localhost/' // サーバーからデータを取得 let todos getAllTodo() // Todoを取得する async function getAllTodo() { const response = await fetch(baseURL + 'todos') const todos = await response.json() // 画面を開いた時にリストを生成する if(todos) { todos.forEach(todo => addTodo(todo)) } } // Todoを格納する async function store(todo){ await fetch(baseURL + 'todo/store',{ method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(todo), }) } // Todoのステータスを更新する async function statusUpdate(id){ await fetch(baseURL + 'todo/statusupdate',{ method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({id: id}), }) } // Todoを削除する async function deleteTodo(id){ await fetch(baseURL + 'todo/delete',{ method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({id: id}), }) } form.addEventListener('submit', (e) => { e.preventDefault() addTodo() }) function addTodo(todo) { let todoText = input.value // 1 ~ 10000までのランダムな文字列 let id = Math.floor( Math.random() * (10000 + 1 - 1) ) + 1 // データを作成 const todoData = { id: id, text: todoText } if(todo) { // idを入力 id = todo.id todoText = todo.text } // 新規かつテキストに入力があるのみ if (!todo && todoText) { // バックエンドにアップロード store(todoData) } if(todoText) { const todoEl = document.createElement('li') if(todo && todo.completed) { todoEl.classList.add('completed') } todoEl.innerText = todoText todoEl.addEventListener('click', () => { todoEl.classList.toggle('completed') // ステータスアップデート statusUpdate(id) }) todoEl.addEventListener('contextmenu', (e) => { e.preventDefault() todoEl.remove() // タスクデリート deleteTodo(id) }) todosUL.appendChild(todoEl) input.value = '' } } |
前回からの差分部分だけ説明します。
fetchAPI
サーバーとのリクエストのやりとりは、fetch APIを使いました。axiosなども便利なのですが、ここは簡単に^^
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
async function getAllTodo() { const response = await fetch(baseURL + 'todos') const todos = await response.json() // 画面を開いた時にリストを生成する if(todos) { todos.forEach(todo => addTodo(todo)) } } async function store(todo){ await fetch(baseURL + 'todo/store',{ method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(todo), }) } async function statusUpdate(id){ await fetch(baseURL + 'todo/statusupdate',{ method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({id: id}), }) } async function deleteTodo(id){ await fetch(baseURL + 'todo/delete',{ method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({id: id}), }) } |
ローカルストレージの廃止
前回は、Todoデータをローカルストレージに格納していました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// ローカルストレージ更新 function updateLS() { // li要素を取得 todosEl = document.querySelectorAll('li') // 保存データ const todos = [] todosEl.forEach(todoEl => { // オブジェクトを配列にpush todos.push({ text: todoEl.innerText, completed: todoEl.classList.contains('completed') }) }) // ローカルストレージにtodosキーで保存保存 localStorage.setItem('todos', JSON.stringify(todos)) } |
しかし、データをバックエンドに持たせるように変更したので、この処理を削除しています。
次回
次回は、検索機能を実装してみましょう。
関連記事
こちらの記事も人気です!
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/190f24cd.7532be9b.190f24ce.766b3442/?me_id=1213310&item_id=18177978&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F4111%2F9784774184111.jpg%3F_ex%3D240x240&s=240x240&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。