後編 JavaScript で ToDo アプリを作る

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

もし良かったらムーザルちゃんねるのチャンネル登録お願いします！
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.28 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. 前回のおさらい 見た目を作る CSS で完了したタスクを表現する 完了ボタンを押した時に、完了スタイルにする 全てのボタンを押して完了できるようにする 今回→新規タスクの登録をできるようにする 1 2 3 4 5
8. 前回のおさらい
9. 今回のステップ （新規タスクの登録をできるようにする） 見た目を作る id と class をつけて JS から呼び出しやすくする 入力テキストを取得する 入力したテキストを表示する 1 2 3 4
10. Step.1 まずは HTML だけで見た目を作ってみます
11. Step.2 id と class をつけて JavaScript から呼び出すくする id とは、HTML 全体の中で必ず重複しないユニークな名前をつける必要が ある。この id をつけることで JavaScript から簡単にタグを特定して呼び 出すことができる。 button = document.querySelector('#add-button'); button = document.getElementById('add-button');
12. Step.2 id と class をつけて JavaScript から呼び出すくする class は、HTML のなかに同じ名前が何個あっても問題ない。 buttons = document.querySelectorAll('.done-button'); buttons = document.getElementsByClassName('done-button'); 複数存在する前提なので、配列で返ってくる。
13. Step.2 id と class をつけて JavaScript から呼び出すくする このままだと、全てのボタンに対して「完了する」というアクションが 発生してしまう。 querySelectorAll('button') → querySelectorAll('.done-button')
14. Step.3 入力したテキストを取得する document.querySelector('input').value 指定した input タグの入力した値を .value で取得できる。
15. Step.4 タグを JavaScript で作成する element = document.createElement('要素名') 指定した要素を新しく作る element.innerText = 'text' 要素のテキストを設定 document.body.appendChild(element) 要素を body に追加
16. ありがとうございました 次回は 6/4（木）21:00 予定 「データベースとSQLが分かった気になる勉強会」 今回のソースコードはこちら github.com/mu-zaru/mu-zaru-channel 質問や感想など呟いていただけると嬉しいです ハッシュタグは #mu_zaru