いわゆるプログラミング思考ってな考え方で、大事なことです。

何を作りたい？作るためにどうする？そのために何をする？

大切なことは逆算思考と分析能力ということ。

まずは箇条書きにしながらアプリ開発のやりたいことを書き出してみようと思う。

お題はこちら

TODOリストを作成する

ということで具体的に機能はこちら

• インプットができる
• インプットし、エンターを押したら入力したものを記憶している
• 左クリックすると取り消し線が入る
• 右クリックすとるTODOリストが削除される
• インプットしたものをエンターでHTMLとして画面に出力する

さてさてそれでは作成開始！！

HTMLやCSSは割愛します。まずは第一項目として「インプットができる」という課題に対してのアプローチをします。

「インプットができる」ためにHTMLを用意しましたら、

const input = document.getElementById("input");

変数にinputへのアクセスを定義しておく。

let todolist = input.value;

.valueでinputされた値にアクセスできるようになる。

値が取れるようになったので、formにもアクセスできるようにしておきましょう。

const form = document.getElementById("form");

後はaddEventListenerで送信ボタンが押された時にするアクションを登録しておきます。

addEventListener（イベント名,function(){この中に処理を書く});

form.addEventListener("submit",function(event){
  event.preventDefault();
  add();
});

内容としてエンターが押されると自動でリロードが起きてしまうのでこれを回避するために

event.preventDefault();も一緒に登録しておく。

そしてadd();関数が起きるように仕込んでおく。こちらはこれから処理の中身を書いていこうと思います。具体的にadd();の内容としては、、

• liタグの生成
• liタグの中身にinput.value;の中身を取得したい
• ＨＴＭＬとしてulタグの中に出力したい
• エンターと同時に入力された内容をクリアしたい

これをadd();の中に一つづつ書いていきます。

ulタグにアクセスするためにこれも関数にしておきましょう

const ul = document.getElementById("ul");

これで準備ができたのでfunctionを書いていきます。

function add() {
  const li = document.createElement("li");
  let todolist = input.value;
  li.innerText = todolist;
  ul.appendChild(li);
  input.value = '';
};

liタグの生成は　const li = document.createElement(“li”);で行っています。さらに入力された値も変数にします。

let todolist = input.value;の部分ですね。

その変数を使用し先に作成したliタグの中身、innerTextに代入します。

li.innerText = todolist;

そしてul にアクセスし、その子要素としてliタグを出力します。

ul.appendChild(li);

エンターと同時に入力された値を削除したいのでそれも仕込んでおきます。

input.value = ”;

さてこれで入力が出来るようになりました。　　しかしこれではinputに何も入力せずにエンターを押したときもからのliタグを出力してしまいます。　　そこでinput.value;の変数宣言の際に値が入っているか条件分岐でまるまる処理を覆います。コードとしては、、

function add() {
  let todotext = input.value;
  if (todotext) {
    const li = document.createElement("li");
    li.innerText = todotext;
    ul.appendChild(li);
    input.value = '';
  }
};

このように変更しました。

長くなってきたので続きは別のブログにします。