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