#プログラミング勉強日記
2020年11月5日
JavaScriptでtodoリスト作成の学習をしたので、まとめます。
#出力結果
最終的に表示させたい結果です。
#コード
回答コードを掲載します。
index.html
<section>
<h1>やることリスト</h1>
<ul id="list">
</ul>
</section>
script.js
'use strict';
let todo = ['デザインカンプ作成','データ整理','勉強会申し込み', '牛乳買う'];
for(let item of todo ) {
const li = `<li>${item}</li>`;
document.getElementById('list').insertAdjacentHTML('beforeend',li);
}
#コードの解説
###①use strict宣言を行う
script.js
'use strict';
JavaScript内でuse strictを宣言すると、ストリクトモードになり、厳格なエラーチェックが行えます。
###②変数todoに、配列の形で値を代入する
script.js
let todo = ['デザインカンプ作成','データ整理','勉強会申し込み', '牛乳買う'];
-
let→変数を定義する宣言 -
todo→任意の変数名 -
=→右辺の値をtodoに代入する。※等しいという意味で使わない！ -
[ ]→配列の形で値を格納。文字列や数値を格納できる。 -
'デザインカンプ作成','データ整理','勉強会申し込み', '牛乳買う'→配列の中身
###③for文を書いて、完成
script.js
for(let item of todo ) {
const li = `<li>${item}</li>`;
document.getElementById('list').insertAdjacentHTML('beforeend',li);
}
-
for→繰り返し処理。 -
let item of todo→定義した変数itemには、繰り返し処理が行われるごとに配列の値が代入される。 -
const li =→定数名liに値を代入 -
<li>${item}</li>→テンプレートリテラルで書く -
document.getElementById('list')→listというID名を持つ要素を取得する -
insertAdjacentHTML('beforeend',li)→取得した<ul>の最後の子要素の後に<li>${item}</li>を追加。 ※今回は元々の子要素がないので、</ul>の直前を指す
#今回の学び
- for文の扱い方
- insertAdjacentHTMLメソッドの使用方法
- 配列の書き方
#参考資料