1. mikiprogram

    No comment

    mikiprogram
Changes in body
Source | HTML | Preview
@@ -1,87 +1,87 @@
#プログラミング勉強日記
2020年11月5日
JavaScriptでtodoリスト作成の学習をしたので、まとめます。
#出力結果
最終的に表示させたい結果です。
![スクリーンショット 2020-11-06 10.13.48.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/854121/547bdfa3-55d3-d24b-af44-3356ecbe5e15.jpeg)
#コード
回答コードを掲載します。
```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>)に要素を追加。
+* `insertAdjacentHTML('beforeend',li)`→取得した\<ul>の最後の子要素の後(※今回は元々の子要素ないので、\</ul>の直前を指す)に\<li>${item}\</li>を追加。
#今回の学び
* for文の扱い方
* insertAdjacentHTMLメソッドの使用方法
* 配列の書き方
#参考資料
* [【JavasScript】use strictとは](https://qiita.com/miri4ech/items/ffcebaf593f5baa1c112)
* [【JavaScript入門】「for – of文」の使い方と間違いやすいポイントを徹底解説!](https://www.sejuku.net/blog/20228)
* [element.insertAdjacentHTML](https://developer.mozilla.org/ja/docs/Web/API/Element/insertAdjacentHTML)
* [JavaScript の テンプレートリテラル を極める!](https://qiita.com/kura07/items/c9fa858870ad56dfec12)