前回に引き続きJavaScriptの総まとめになります。
「データの送受信」と「DOMの操作」がJavaScriptの大きな役割とも言われます。
データベースにデータを要求しページの情報を追加して、画面に表示する、といった具合です。皆さんがお使いのサイトにもこういった機能が当たり前のように使われているかと思います。
「WebAPIを叩く」って聞いたことありますか？(注文、実行の方がイメージしやすいかな)
APIとはプログラムとアプリケーションを繋ぐもの。「あの情報ください!「ちょっと待って…はいよ!」の「はいよ!」の役割です
そちらはデータベースともつながる話なのでドットインストールのJavaScript編では扱いませんが、「DOM操作」の説明に重点を置いています。
DOMとはHTMLをJavaScriptを使って操作する仕組み・型と考えます。
○○県の中に○○市がたくさんあって、さらにその中に○○町がいくつもある、といったツリー状になっています。○○町と○○町を合併させたり、そういった操作をしていきます。
JavaScript DOM編
#1 JavaScriptが操作するのは、DOMであって、HTMLではない
#2 querySelector()とgetElementById()が登場、もちろんよく使います。
#3 querySelectorAll()で取得した値には、forEach()が使える
#4 全ての子ノードはchildNodes、テキストノードを無視し要素ノードだけはchildrenで取得する
#5 addEventListener()です、これももちろん重要
#6 見た目の指定はCSSに任せ、JavaScriptではclass属性の操作だけにしましょう。classListで付け外しをすることになります。
#7 classNameなんてあったんだ…でも、元のクラス属性の値が上書きされ、なかったことになるので、注意。というかこれ使うか？
#8 classList.add(),remove(),contains(),toggle() これは使えるように
#9 カスタムデータ属性を使ってJavaScriptで操作。要る？
#10 ここから要素を扱います。createElement()で要素を作り、appendChild()で追加
#11 cloneNode(true)で複製して、insertBefore(copy, item2)で「items2の前にcopyしたものを挿入」 これも難しいな…
#12 指定した要素.remove()で削除も出来ますが、古いブラウザでは使えないそうなので、別の方法も、親Node.removeChild(削除)するNode、この２つがあることに注意
#13 inputを指定してtextと名付けそれに、text.valueで入力された値を取得できる
input入力欄を空にするには、text.value = ‘’; さらにフォーカスさせておくtext.focus();
#14 セレクトボックスを使って同じことをします。.valueで選択された値、.selectesIndexで選択された値が何番目か
HTMLでvalue=’’とすればタグの中身とは別の値をセットすることもできます
#15 ラジオボタンで同じことをします。チェックされたかどうかはcheckedプロパティを使います。if (color.checked = true) これで「colorがチェックされたら」
#16 チェックボックスで同じことをします。const selectedColors = []; 空の配列を作るってイメージしにくいですよね。selectedColors.push(color.value); これで「selectedColorsにcolorのvalueプロパティを追加してね」
#17 イベントいろいろ。click以外にも、dbclickでダブルクリック、mousemoveでマウスを動かしたら
#18 イベントオブジェクトの説明。イベントリスナーの後ろの’click’, ()などのイベント名の()にeventのeがよく使われます。ここでは’mousemove’, (e)でイベントに関する情報を渡してくれる。e.clientX, e.clientYでブラウザの左上からのx座標y座標を示してくれます
#19 フォーム関連のイベントです。focus,blurでフォーカスが外れた時,inputで文字が入力された時,changeは入力が終わってフォーカスが外れ更新が確定した時
#20 submitでフォームが送信された時ですが、フォームを送信するとページ遷移が起こり、一瞬画面が真っ白、ページがリロードされてしまいます。そのページ遷移をキャンセルするにはイベントの後ろの()に先ほどのeを入れ、e.preventDefault();というメソッドを実行します。
#21 イベントの伝播 例えばli全てにEventListenerをつけなくても、親のulにのみEventListenerをつければよい、となります。Eventオブジェクトを使えば、クリックされたli要素はe.target、ulはe.currentTargetで取得できます。
DOM編は以上です。これもなかなか難しかったですが、全てを暗記ではなく、考え方や言葉を覚えておくのはやはり重要です。「あれがやりたいんだけど…何て検索するんだっけ？」がよく起こるためです。今回はイベントオブジェクトやpreventDefault()がそれにあたるでしょうか。僕もポートフォリオ制作で「あれだよ!あれ!ほら!何て調べるんだ…」となりましたので。
JavaScriptでカレンダーをつくろう
#3 border-collapse: collapse;
#4 user-select: none; でダブルクリックしても選択できなくなります
#5 JavaScriptでは月は０からなので、５月は「４」で表します
#6 ややこしくなります。日付を作るのですが、末日lastDateがポイントです。「翌月の１日前」をmonth + 1, 0と表します。あとはfor文で１からlastDateまで回して、空の配列dates = []にpush(i)していきます
#7 日付の配列をオブジェクトの配列にします。Dateプロパティは日付、isTodayプロパティは今はfalse、isDisabledプロパティは今月文なのでfalse
#8 「いや～すごい」という考え方が出てきます。今月の1日は「new Date(year, month, 1)」なので、先月の末日は「new Date(year, month, 0).getDate()」で求めます。
先月の日付をいくつ書くのかは、1日が何曜日かgetDay()で調べて、日曜日は「０」なので1日が5番目(金曜日)なら先月分の日付は「日、月、火、水、木」と5個書くことになる、というわけです。すごい…
#9 実装です。30, 29 30, 28 29 30としたいのでunshift()を使います。やっと出番だ。Datesはオブジェクトの配列にしたのでこちらも。
#10 翌月文をつくります。今月の末日が2番目(火曜日)だと5に満たない(水、木、金、土)4回ループを回して、dates.push()とします。
#11 まとめていきます。getCalendarHead,Body,Tailの3つをreturn datesとして、createCalendarにまとめますが、配列の中に3つの配列となるので、スプレッド構文の出番です。「…」をつけるやつです
#12 7日ごとに分けます。dates.length / 7 で何週あるか、その数だけループをまわして、空のweeks = []にpush(dates.splice(0, 7))します。「datesの先頭から7つ取り出していく」
#13 一気に進みます。weeksにforEachで週(tr)をつくります。weekにforEachでtdをつくります。td.textContent = date.date ここはわかりにくいですが、dateのdateプロパティという意味です。あとは条件に応じてクラスをつけます。tdをtrに、そのtrをtbodyにappendChild()します。ここで今月分は完成です
#14 prev,nextにclickイベントをつけます。month++だけではダメで、年を跨ぐことも想定します。if(month < 0), if(month > 11)と書きます、12月は11ですよ。year,monthをletに直す。
#15 prev,nextをclickするたびにカレンダーが追加されてしまうので、更新するようにします。createCalendar()するたびにtbodyをクリアします。while()を使って、tbodyに最初の子要素がある限り、その最初の子要素をremoveChildします。「03」月のようにしたい時はpadStart()を使いたいのですがString()を使って文字列扱いにしてからになります。
#16 すっきりと機能をまとめます。
#17 今日を太字に。today = new Date()で「今日」を取得し、today.getFullYear()とtoday.getMonth()で「年」「月」。あとは年月を「今」と比較して、isTodayプロパティをtrueにします。
#18 prev,nextと同じように複製し、「’today’を押した時」にyearをtoday.getFullYear()として、monthをtoday.getMonth();
急ぎでやりましたが、「すべて完了!これはすごいですよ!」と表示。こんなのあったかな？なんかうれしい。
おまけ(JavaScript ミニアプリ)
✔「おみくじ」 ランダムを実践的につかいます。確率を操作と難かしそうに聞こえますが、const n = Math.random(); if (n < 0.05) これで「５％の確率のとき」ができます
✔「ビンゴシート」 これは激ムズ… tr,tdそして行と列の反転など「今、何を作っているか？」がわからなくなります。
✔「ストップウォッチ」 時間系を実践で、setTimeout(),Date.now()など、
const d = new Date(
Date.now() // 現在時刻から
– startTime // 開始した時間を引いて
+ elapsedTime); // stopで止まっていた時間を足す
Stop をクリックした時刻を Date.now() で取れる 12:01
Start をクリックした時刻は startTime 12:00
elapsedTime は1分になる
このような「どこの時点の時間を何から引くと、経過時間」などプログラミングというより算数のような箇所もあります
✔「タイピングゲーム」 keydownイベントやspliceの返り値は結果がひとつでも配列、toFixed()など
✔「三択クイズ」 フィッシャー・イェーツのシャッフルというアルゴリズムがでます。シャッフルのことです。
一般に 0 から i までのランダムな整数は
Math.floor(Math.random() * (i + 1))
✔「スライドショー」 そこまで難しいものは出ません。「次へ」「前へ」のシンプルな実装
✔「スロットマシーン」 これも激ムズです。クラスが出てくるとだいたい混乱します。「引数を渡して…」などで「どこからどこに何が影響しているのか？」の矢印の向きががわからなくなります。クラスのメソッド定義にはfunctionは必要ありません、と覚えておきます。
✔「数字タッチゲーム」 続いて激ムズです。Gameクラス、Panelクラスと出てきます。「プロパティにアクセスしたいので、インスタンスを渡してあげましょう」「thisを渡してあげましょう、コンストラクターでこのthisを受け取ってあげましょう」と「は？」が連発です。
さらにおまけ
✔よくみるUI
サラッと見ておきましょう。「モーダルウィンドウ」「ハンバーガーメニュー」でググれば作り方はたくさん出ます。
✔Canvas
使えた方がいいでしょうが、もちろん暗記までは必要ないでしょう。fillRect,strokeRectなどの用語がある、というくらい。迷路は激ムズです
✔人気に言語を体験
「ふ～ん」でいいです。
✔エディタを使いこなそう
VS Codeと Emmetをサラッと見ておきましょう、省略記法など作業時間短縮につながるものもたくさんあります
✔Googleが提供するツール
Chats入門、Maps API、拡張機能、Developer Toolsなど暇つぶし程度に見ておいてもいいでしょう。「googlemap 埋め込み」でググれば出ます
✔その他のレッスン
Bootstrap入門、Font Awesome入門で十分では？WordPressは古いレッスンですので内容も古いかと思いますし、音声も画も歴史を感じます
以上になります。おまけも含めて1行や２行ではわからないかと思います…
が、こんなコンテンツがドットインストールにあるよ、ということをまとめてみた記事ですので、ご了承ください。
ドットインストール卒業企画は以上になります。
Progateからドットインストールと学んできましたが、深い内容の説明もあってレッスンのレベルは高いです。中には「それいつ使う?」という書き方も出てきましたね。
ドットインストールのレッスンを全て理解して、暗記する必要はありません。
「あ～ドットインストールで見たかも…たしか○○だったかな？」だけでも調べるスピードに差が出ます。
ポートフォリオ制作などで最後の１か月は復習のため覗く程度でしたが、計３ヶ月ドットインストールを利用し、「脱初心者」くらいにはなれたかな？と思っています。
ではまた
コメント