Zenn
🗂

【.js】Todoを作ってみたい　#1

2023/07/17に公開
CSS
HTML
JavaScript
biginnner
tech

自己紹介

２５歳。6月末にプログラミング学習を始める。
ProgateのコースでHTML,javaScriptをとりあえず修了するも、
仕組みはわかったが何をどうすればWeb開発できるのか状態に。
VScodeとgitを導入し、まずはTodoを作ってみようというところ。

学んだ技術

document.getElementById(" ");
　HTML内の要素に.js内からアクセスする、変数に代入して使う
Element.addEventListener("",function(){});
　submit（エンター押下）やclick,DOMContentLoadedの際に特定の処理を行うようにする。
event.preventDefault();
　 .addEventListenerを使うときとりあえず記述、未だ理由不明。
localStorage.set(get)Item
.innerHTML
JSON.stiringify()及びJSON.parse()

特に難しかった項目

localStorage

Web Storage API？になるのだろうか。
　サーバー技術を伴わずTodoを実現する方法として見つけ、学んだ。
キーを設定し値（文字列型）を保存・呼出しする。
今回は配列として保存したいので以下の方法で使った

１．空の配列を変数として宣言
２．フォーム入力した内容(.value)を変数に代入
３．.push();で配列にフォーム入力した内容を追加
４．localStorage.setItem("key",JSON.stringify(配列));
として配列として呼び出せる形で保存。
５．let loadedTodos = JSON.parse(localStorage.getItem("key"));
　　配列として、localStorageから呼び出したものを変数に代入する。

appendChild()　メソッド

<ul>タグにtodoを新たに子要素<li>として追加する方法として学んだ。
　HTML上に表示するために、簡単にはいかず以下の記述をChatGPT、mdnで学んだ。
　実際のコードは以下の通り

loadedTodos.forEach(function(i){
　const newTodo = document.createElement("li");
　newTodo.textContent = i;
　//配列の一つをリストのテキストに代入する
　todoList.appendChild(newTodo);
　//代入したリストを子要素として追加する
});

成果

  • HTMLのノードにjavascriptからアクセスする基本を学べた。
  • クライアント側にデータを保存させる方法を学べた。
  • JSONについて触れた

今後の課題

このスクリプトを記述するのに３日かかった。最終的に3日目には何とか出来たスクリプトを一から書き直すことができたが、検索に寄り道が多かったと思う。
　cssは全然書けないし、javascriptも基本の概念（定数・メソッド等）がしっかりと理解できていない。
　基本ができていないことが不安と調べても調べることが増える状態を増しているように感じる。

最後に

ここまでご覧いただきありがとうございました。
　間違っていること、思われることがありましたらぜひお聞かせください。
　Hiroaki

Discussion