JavaScriptでアプリを作成しました【3】【超基礎TodoList 】 #JavaScript

はじめに

学習するに至った経緯

2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。
入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、
卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。

【作成にあたり学習した事】

Javascriptとは
アプリケーションの作り方
データ型、型変換
関数
if文(条件分岐)
for文(繰り返し文)
オブジェクトの操作
ブラウザーAPI（document）

プログラムを書くポイント

小さく作って小さく動かす。
最初にタスクを明確にして、作成順を決める。

TodoListのタスクの明確化と作成順

①【HTML】Todo入力ホームを整える
②【javascript】　Todoを表示・保存
③【javascript】　Todoを削除
④【javascript】　Todoを完了

JavaScript

JavaScriptとは

HTMLからjavascriptを読み込み、ブラウザがjavascriptを実行する。
JavaSciptが見た目を動的に変える事ができる。
ブラウザ上で実行される唯一のプログラミング言語。

JavaScriptで出来ること

アニメーション（例 : crazy wedding ）
ユーザー操作に合わせた見た目の変更（例 : Nike ）
API（APIとは、バックエンドからデータを提供する仕組み事）
バックエンドでも実行できる
バックエンド実行環境はNode.js

ブラウザーAPIとは

『ブラウザーAPI』は、Webブラウザーに組込まれていて、ブラウザーやコンピューターの環境の情報を取得し、これを使って役に立つ複雑な事を行えるようにするもの。
例えば Geolocation API は位置情報を取得するための簡単な JavaScript 構造を提供するので、グーグルマップにあなたの居場所を表示するような事ができるなど。
裏で実際にはブラウザーは低レベル (例えば C++) の複雑なコードをいくつか使ってデバイスの GPS 機器 (あるいは位置情報を得られる他のなんだか) と通信し、位置情報を取得し、コードから利用できるようにブラウザー環境に情報を戻しているが、ここでもこの複雑な事柄は API で抽象化され隠蔽される。

用語一覧・基本操作・機能

inputタグ

『input』タグとは、formタグで作成したフォームの中でテキスト入力欄やボタンなどの部品を作成する要素。部品はtype属性の値に指定することが可能で、一行テキストボックス、チェックボックス、ラジオボタン、実行ボタン、リセットボタンなどの部品を作成することができる。input要素に入力された情報は、データとしてサーバに送信される。

例:type="text"：1行テキストボックスを作る。  
<input type="text" name="text" value="初期値（任意の値）">

autocomplete=""

form要素に『autocomplete=""』を追加すると、
オートコンプリート機能（入力内容の自動補完）を有効にするかどうかを指定できる。
autocomplete属性を省略した場合は、オートコンプリート機能が有効になる。
オートコンプリート機能が有効になっている場合は、過去に入力した内容が入力候補として表示される。（対応しているブラウザのみ）

autocomplete="on"   オートコンプリートを有効にする （初期値）
autocomplete="off"  オートコンプリートを無効にする

document

ブラウザAPIの一種
ブラウザに読み込まれたWEBページの情報を扱っている
JavaScriptの機能ではないので注意

documentを使ってみる

①『検証ツール』⇨ Console

②　＞document.getElementById('input')と入力すると③が表示
③  <input type="text" id="input" placeholder="TODOを入力する" autocomplete="off">

④　＞document.getElementById('input').valueと入力すると⑤が表示
⑤  text(TODOを入力する)の中身に入力した文字が表示

jsのファイルから値を取る

データを取るタイミング

ユーザーがエンターを押した時　⇨　必要な知識：① 変数、② 関数、③ addEventLister

① 変数

データの入れ物 ⇨ 使い所：データを使い回したい時

let：値の再代入が可能
const : 値の再代入が不可　定数の宣言
var : letとほぼ同じで、昔の記法　今はあまり使用しない

② 関数

一連の処理を一つの処理としてまとめたもの ⇨ 使い所：同じ処理を使い回したい時

③ addEventLister

特定のイベントが起きた時にJavaScriptの処理を追加するためのブラウザAPIの機能
⇨ 使い所：イベントが起きた時に処理を追加したい時

ターゲット.addEventListener(イベント名、関数);

event.preventDefault()

event.preventDefaultメソッドは、submitイベントの発生元であるフォームが持つデフォルトの動作をキャンセルするメソッド。フォームが持つデフォルトの動作とは、フォームの内容を指定したURLへ送信するという動作。

form.addEventListener('submit',function(event) {
// submitイベントの本来の動作を止める
    event.preventDefault();
console.log(input.text)
});

取得したフォームの値をHTML上に追加する

ulとliタグを使って、リストとして情報を追加

createElement()メソッド

JavaScript で HTML 要素を動的に生成するには createElement() メソッドを使用する。

const element = document.createElement(タグ名)

crreateElement() メソッドで生成した要素を、実際の HTML 要素に追加することで HTML を動的に生成することができる。 HTML 要素への追加には appendChild() メソッドなどを使用する。

HTML要素.appendChild(生成した要素)

データ型

データ型 = データの種類によってできる事を区別するために存在

JavaScriptのデータ型は大きく２つに分かれる

①　プリミティブ型　⇨　真偽値　数値　文字列
②　オブジェクト　⇨ オブジェクト　配列　関数

if文

条件式がtrueなら実行する

if (条件式) {
// 条件式の評価結果がtrueなら実行する処理
}

if (true ) {
 console.log('実行');
}

真偽値の判定

falseになる値 ⇨ false 　undefined 　null 　0 　On 　NaN 　''(空文字)
それ以外は全てtrue

ローカルストレージに保存

LocalStrage（ローカルストレージ）とは

LocalStrageとは、JavaScriptでデータをブラウザに保存する仕組み。永続的に保存。

データを保存する   localStorage.setItem('キー', 値)
データを取得する　　localStorage.getItem('キー')

配列

値に順序をつけて格納できるオブジェクト ⇨ 使い所：複数の値をまとめて扱いたい時

[]で定義
０から順に割り振る

const array = [ 'one','two','three'];
array[0]; //　=> 'one'

ループ

繰り返し処理を行うもの　⇨ 使い所：同じ処理を繰り返したい時

forEach:配列の全要素に対して反復処理

const array = [1,2,3];

array.forEach(value => {
console.log(value * 2);
});
//2,4,6

「push」とは

「push」はArray（配列）オブジェクトの組み込みメソッドとして用意されており、主に配列データの末尾に任意の要素を追加するために利用される。

let items = [1,2,3,4];
//配列「items」に数値データを追加する
items.push( 5,6,7,8 );

console.log( items );
実行結果
[1, 2, 3, 4, 5, 6, 7, 8]

TODOを削除できる機能

クリックしたら、要素を削除・非表示にする

イベントの登録

「イベント」とは、「ブラウザ操作」のこと。
⇨ クリックやインプット要素への入力、マウスオーバーなど。フロントエンド JavaScript 開発では、「いつ（＝イベント）」「何が起こる（＝DOM 操作）」か、という軸で発想する。

addEventListener

イベントは、addEventListener メソッドで登録する。

// DOM 検索メソッドにより、HTML 要素の参照を得る
const button = document.querySelector('#btn-1');

// HTML 要素に対して、イベントのハンドラー関数を登録する
button.addEventListener('click', function(event) {
  // ここに、要素がクリックされたときに実行されるべき処理を記述する
例　button.remove();
});

TODOに完了マークをつける機能

クリックしたら、取り消し線を付ける

classListで簡単にクラスを追加・削除する

JavaScriptでクラスを追加・削除する場合は、classList を使用すると簡単に実現でき、クラスを追加する場合は add()、削除する場合は remove()を使う。 toggle()を使用すると、指定したクラスがない場合は追加、すでにある場合は削除する。

// 追加
elem.classList.add('クラス名');
// 削除
elem.classList.remove('クラス名');
// 追加・削除
elem.classList.toggle('クラス名');

TODOアプリ完成

<!DOCTYPE html>
<html>

  <head>
    <title>TodoList Super basic 1</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div>
    <h1>TODOLIST</h1>
    <form id="form">
      <input type="text" id="input" placeholder="TODOを入力する" autocomplete="off">
    </form>
    <ul class="list" id="ul"></ul>
    </div>
    <script src="main.js"></script>
  </body>
</html>

'use strict';
{
//constでformを定義して、formを指定する
const form　= document.getElementById('form');
//inputの値を取る
const input = document.getElementById('input');
//ulの値を取る
const ul = document.getElementById('ul');
//local strageのデータ取得
const todos = JSON.parse(localStorage.getItem('todos'));
//todosが空でなければliタグを取得
if (todos) {
 todos.forEach(todo => {
    add(todo);
 })
}

//formに対して、イベントを追加
form.addEventListener('submit', function(event) {
// submitイベントに関して「preventDefault」する
  event.preventDefault();
// input.valueでテキスト中身の値を取る
//   console.log(input.value);
// add関数を呼び出す元
　add();  
});
// add関数を呼び出す
function add(todo){
//formに値が追加された時だけ表示　const li-input.value = ''をif文でくくる
//todoTextを変数宣言
let todoText = input.value;

if (todo) {
  todoText = todo.text;
}
//テキストの中身が一文字以上入力されていたら const li-input.value = '' を表示 
if (todoText)　{
//liタグを作成
　const li = document.createElement('li');
//ユーザーが取得した値をテキストへ入力
　li.innerText = todoText;
//liタグにクラスを指定し、追加する
　li.classList.add('list');
  if (todo && todo.completed) {
    li.classList.add('text-decoration-line-through');
  }
//右クリックしたら、liタグを削除する
  li.addEventListener('contextmenu',function(event) {
    //右クリックしたら出てくる表示をブロック
    event.preventDefault();
    li.remove();
    //ローカルステージに反映
    saveData();
  });
//左クリックしたら、完了線を付ける
li.addEventListener('click',function(){
    li.classList.toggle('text-decoration-line-through');
    saveData();
});

//ulタグの子としてliを追加
  ul.appendChild(li);
//投稿をしたら空にする
　input.value = '';
//関数追加
  saveData();
}
}
function saveData() {
// liタグのデータを取ってくる
　const lists = document.querySelectorAll('li');
//console.log(lists);
//新しい配列を作成
　let todos = [];

//liタグのテキスト情報を全て取得
　lists.forEach(list => {
    let todo = {
      text: list.innerText,
      completed: list.classList.contains('text-decoration-line-through')
    };
    todos.push(todo);
    // console.log(list.innerText);
});
//ローカルステージに保存
　localStorage.setItem('todos', JSON.stringify(todos));
}
}

参考サイト

JavaScriptの「基礎」が1時間で分かる「超」入門講座【初心者向け】
Web API の紹介
 【JavaScript】event.preventDefault()が何をするのか
 JavaScriptでcreateElementメソッドを使いHTMLを動的生成する方法を現役エンジニアが解説【初心者向け】
JavaScriptのLocalStrage（ローカルストレージ）の使い方を現役エンジニアが解説【初心者向け】
【JavaScript入門】pushで配列に要素を追加する方法(連想配列/pop)
JavaScript超基礎講座！イベント処理を学ぶ
 JavaScript: classListで簡単にクラスを追加・削除する

JavaScriptでアプリを作成しました【3】【超基礎TodoList 】