エンジニア編: ToDoリストアプリを作成してみた（HTML, CSS, JavaScript）
VSCode
VSCode使ってやっと開発しようかと思ったが、そもそもこのツールの使い方を知らないことが発覚。
Mac上部のメニュー欄からHelpを選択、Documentationを確認。
最上部にあった動画を視聴。
・コマンドパレットから>Color Themeと入力することで、色を変えられる
・⌘Nでファイルを作成できる
HTML
要素（Element）の構成
サンプルコードをとりあえず書き写してみた。
・コードを書いてると勝手に「これはHtmlですね」みたいな感じで、右下に表示される
.<head>部分の<title>は、webページ上のタイトルじゃなくてメタデータ
・<h1>、<h2>、...という感じで題名、各章のタイトル、的に構造化されてく
・本文は、<p>で囲う
とりあえず書いてみて、VSCode上でShow Previewで実際にどう動くか観察するのが1番の学習になるかも（ChatGPTに聞いても内容は入ってこない。デバッグの時とかに活躍するのかな）
CSS
次にindex.cssをstylesというフォルダに入れて書く。
Documentを見る限り、index.htmlの中で直接スタイルを指定すると、可読性が落ちるようだ。
だから別個で、cssファイルをつくって、htmlコード上で<link rel="stylesheet" type="text/css" href="styles/index.css" />と書くことで呼び出す。
JavaScript
JavaScriptは、ボタンとかいろいろな機能をウェブサイト上で動作させるための言語。
APIを呼んできて、音声・動画の組み込みとか、GoogleMapsの位置情報の組み込みとかもできる。
constは変数を定義できる。
const taskInput = document.getElementById("taskInput");
getElementByIdは、HTMLの要素をidで指定して自分で決めた変数に格納する。
addEventListenerは、ある特定のイベントが発生したときに関数を適用できる。
addEventListener("click", function() {}
node
ここで、textContentというプロパティを調べたときに、nodeという単語が何度も出てきたので、調べてみた。nodeとは、HTMLやその要素を含め、DOMの階層構造にある木の構成要素である。DOMとは、HTML等の文書、各要素を参照・制御するための手法とのこと。
1分でわかるDOMとノードについて【イラスト解説】
JavaScript（つづき）
textContent()とは、指定したnodeとその子nodeのtext内容を取り出すproperty。
appendChild()は、特定の親ノードの下にノードを追加するmethod。
addEventListener()の最初の引数で、"keydown"をイベントとして指定すると、なんらかのキーが押された時に、関数を呼び出す設計にできる。
その後、2つ目の引数でコールバック関数（特定の条件が発生した際に呼び出される関数）function()を指定、例えば、
function(event) {
if (event.key == "Enter")...
のように指定すると、Enterキーを押された時に、関数を呼び出すことができる。
eventは、特定のイベントの情報を保持するオブジェクトで、上記の例だと、"keydown"をイベントとして指定しているので、なんらかのキーが押されるというイベント情報を保持している。
ここで、event.preventDefault()とすると、event.key == "Enter"で指定したイベント「Enterキーを押す」というイベントが元から持っている動作（フォームの送信など？）を防ぎ、指定した動作だけ発生させることができる。
以下の画像の例だと、チェックボックスへのチェックという動作の代わりに警告文が出力する設計になっている。
document.getElementById("addTaskBtn").click()とすると、ユーザーによるクリックによらず、プログラム上でクリックという動作を発生させることができる。つまり、Enterキーを押すというイベントのコールバック関数内含めれば、Enterキーを押すという動作に、タスク追加ボタンのクリックと同様の効果を与えることができる。
ToDoリストアプリが完成
以下のように書いて、addボタンをクリックしたときにタスクとともにdeleteボタンも生成されるようにした。
const deleteButton = document.createElement("button");
deleteButton.textContent = "delete";
その後、deleteボタンがクリックされるとタスクがリストから消えるようにした
deleteButton.addEventListener("click", function() {
taskList.removeChild(taskItem);
});
最後にgit関係で少し詰まる
README.mdを入れようとして、Github上で直接リポジトリをいじくったら、その後にローカルからpushしようとしたときにエラーが出た。convergeしてないとかなんとか。pullも同じ理由でできなかった。VScode上でconvergeとやらをできたので、その後にpuulしてから、編集・pushの流れで解決
画像元
mdn web docs "element"
参照:
HTML入門 https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
html各要素の説明が載っている辞書的なサイト
Discussion