前編 JavaScript で ToDo アプリを作る

配信動画はこちら
https://www.youtube.com/watch?v=11BV4MWSZSw

もし良かったらムーザルちゃんねるのチャンネル登録お願いします！
https://www.youtube.com/channel/UCLPHXwLp90A5R69Eltxo-sg

Twitter でもプログラミングネタをつぶやいているのでフォローお待ちしております。
ムー
https://twitter.com/mu_vpoe
zaru
https://twitter.com/zaru

Transcript

1. CTO と VPoE がプログラミング初学者向けにオンライン勉強会を開催します。 ライブ配信で Web サービスづくりを一緒に学んで行きましょう。 質問なども随時受け付けていますので、お気軽にどうぞ。ハッシュタグ #mu_zaru ムーザルちゃんねる JavaScript で ToDo アプリを作ろう (前編) YouTube Live 2020.5.21 Thur. 21:00~
2. Lv.4 Lv.3 Lv.2 Lv.1 HTML/CSS を触り始める 初学者向けです。JavaScript/PHP/Ruby などを使って Web 開発をしていきたい方向けです。Lv.2-3 をメイン対象としてます。 難易度？ 書籍、Progate、ドットインストールなどで JS/PHP/Ruby 入門 スクールに通いフレームワーク Laravel/Rails や DB/Git 入門 未経験から内定圏内 / エンジニア1年目 実務 1~2年 テストコード、リファクタ、設計、インフラ 中堅 以上 Lv.5 Lv.6
3. Progate や ドットインストールなどで基礎を学び、その次 になにをしようか迷ってる方。 スクールに入るか迷ってる方。 何かをつくるのが 一番勉強になる
4. 現役のエンジニア二人 赤貝が好きな CTO と デザイン勉強中のエンジニア 話す人 @mu_vpoe 居候→エンジニア→Mgr チームづくり採用など。 Twitter で虚空に放たれ た疑問に答える。数学が 好き。 ムー zaru @zaru CTO, Love 赤貝, JavaScript, Firebase, Web Components.
5. エディタ触りながらではなく、 動画に集中してもらって大丈夫です。 YouTube 上でも、Twitter の メンションでも構いません。 質問にはできるだけ答えていきた いと思います。 質問OK ライブ配信の動画は、 そのまま YouTube に公開します。 なので途中で抜けてもいいし、 生で見なくてもいいです。 動画公開 ソースコード公開 講義中に使うソースコードは全て GitHub に公開しています。 github.com/mu-zaru/mu-zaru-channel
6. 今回つくるもの Demo ブラウザ上で動く ToDo アプリです。新規 のタスク登録や、完了処理などを作りま す。データの保存は行わないので、実用に は耐えませんが、JavaScript の勉強には ちょうど良いです。
7. Step.1 まずは HTML だけで見た目を作ってみます
8. Step.2 text-decoration: line-through; 　　　　↑　　　　　　　↑ 　テキストの装飾　 打ち消し線 CSS で完了したタスクを表現します
9. Step.3 element = document.querySelector('要素名') 指定した要素を HTML 全体から探してきてくれる 完了ボタンを押した時に、完了スタイルにする element = document.querySelector('li') 上から探して一番最初の <li> がヒットする
10. Step.3 element.addEventListener('イベント名', 'イベント時の挙動') 要素に対して指定したイベントが発生した時の挙動を設定できる よく使うイベントの種類 • click : 要素をクリックした時 • mouseover : 要素の上にカーソルが来た時 • mouseleave : 要素の上からカーソルが外れた時 完了ボタンを押した時に、完了スタイルにする
11. Step.3 element.classList.add('クラス名') 要素に対して指定したクラスを追加する 他にも classList.remove() / classList.toggle() / classList.replace() 完了ボタンを押した時に、完了スタイルにする li.classList.add('todo-done') todo-done と言うクラスを追加
12. Step.4 element = document.querySelectorAll('要素名') 指定した要素を HTML 全体から全て探してきてくれる 全てのボタンを押して完了できるようにする仕上げ elements = document.querySelectorAll('li') 全ての <li> がヒットする
13. [1, 2, 3].forEach( value => { 何かの処理 } ) 配列に入っている複数の要素に対して、1個ずつ処理をすることができる Step.4 全てのボタンを押して完了できるようにする仕上げ 1 2 3 1 2 3 '1' に対して処理をする 2 3 3 '2' に対して処理をする '3' に対して処理をする 1 1 2 全ての要素に対して繰り返す
14. Step.4 element.closest('親要素名') 指定した要素の最も近い親要素を取得できる 全てのボタンを押して完了できるようにする仕上げ button.closest('li') ボタンの親要素をさかのぼって、 一番最初に見つかった（近い）要素 を取得
15. ここまでの流れ 見た目を作る CSS で完了したタスクを表現する 完了ボタンを押した時に、完了スタイルにする 全てのボタンを押して完了できるようにする 次回→新規タスクの登録をできるようにする 1 2 3 4 5
16. ありがとうございました つづきは次回 5/28（木）21:00 予定 今回のソースコードはこちら github.com/mu-zaru/mu-zaru-channel 質問や感想など呟いていただけると嬉しいです ハッシュタグは #mu_zaru