【プログラミング】JavaScriptでToDoアプリを作る！【海外のおすすめチュートリアル】

こんにちは、よみあきです。

今回紹介したい海外のチュートリアルはこちら！

「JavaScriptとHTMLとCSSでToDoリストアプリを作る！」というものです！

↓関連記事

学べること

この動画ではToDoアプリを作っていきます。

前半はアプリの説明、後半は実際にコードを書いていくという構成になっています。

前半部分でToDoアプリの画面構成を図とHTMLのコードと共に解説していて、とてもわかりやすかったです。

ただ、CSSの部分には触れられていないので、配置などのカスタマイズについて学びたい人にはおすすめではないかもです。

後半の実際にコードを書くところでは、HTMLとJavaScriptをイチから書いていき、CSSや画像などは動画の主のGithubからダウンロードして使います。

ToDoアプリの画面の操作、更新を実装ためのあれこれが説明されています。

HTMLとJavaScriptの連携で、フォームに書いた内容をinsertAdjacentHTMLを使ってリストを追加していくことや、toggleを用いて、完了、未完了のチェックの切り替えを行ったり、項目の追加、削除、チェック表示の表示非表示などに関して多くのことが学べます。

僕としてはJavaScriptの「`（バッククォート）」を使った記法が、目から鱗でした。

文字列に変数埋め込んでHTMLに出力というのは、いろんなところで使えそうです。

この動画は正直やってみて「難しい！」って思いましたが、一発で理解しようとせず、ざっと前半部分をみて、「こんな感じか～」ってなんとなくわかった気になってから、後半で動画の進行と一緒にコードを打ち込んでいったら少しずつ仕組みがわかるようになってきました。

「ここはなにをやってるんだろう？」と思ったら、すぐ前半パートに戻って確認して、後半に戻ってコード打つの繰り返し。

なんとか作ったものが動いたときは脳汁ブッシャーの達成感。

ぜひ、みなさんもこのチュートリアルやってみてください！