1. mikiprogram

    Posted

    mikiprogram
Changes in title
+【JavaScript】Todoリストを作成
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +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>)に要素を追加。
+
+#今回の学び
+* 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)
+
+
+