Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

【JavaScript】Todoリストを作成

プログラミング勉強日記

2020年11月5日
JavaScriptでtodoリスト作成の学習をしたので、まとめます。

出力結果

最終的に表示させたい結果です。
スクリーンショット 2020-11-06 10.13.48.jpg

コード

回答コードを掲載します。

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メソッドの使用方法
  • 配列の書き方

参考資料

mikiprogram
2020年4月から学習を始めました。現在、JavaScriptを勉強中です。学習の記録として、プログラミング関係をこれから投稿していきます
https://www.yuito-design.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away