このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#01 カレンダーを作ってみよう (02:11) 無料公開中
- 完成版の確認
- index.htmlの作成
-
#02 マークアップを進めていこう (02:57) 無料公開中
- HTMLのマークアップ
- ブラウザでの確認
-
#03 CSSでスタイルを整えよう (02:25) 無料公開中
- styles.cssの作成
- CSSによるスタイリング
-
#04 日付にスタイルをあてていこう (02:55) 無料公開中
- first-child
- last-child
- クラスによるスタイリング
-
#05 デベロッパーツールを起動しよう (01:52)
- main.jsの作成
- デベロッパーツールの起動
-
#06 今月分の日付を取得しよう (02:13)
- getCalendarBody()
- push()
-
#07 オブジェクトに書き換えてみよう (01:35)
- オブジェクトへの書き換え
- console.clear()
-
#08 実装方針を確認しよう (01:52)
- getDate()
- getDay()
- 実装方針の確認
-
#09 前月分の日付を取得しよう (03:00)
- getCalendarHead()
- unshift()
-
#10 翌月分の日付を取得しよう (02:43)
- 翌月分の日付の個数を取得
- getCalendarTail()
-
#11 すべての日付を統合しよう (02:19)
- createCalendar()
- スプレッド演算子
-
#12 週毎の配列を作ろう (01:48)
- 週毎の分割
- splice()
-
#13 カレンダーを描画しよう (02:46)
- forEach()
- DOMへの追加
-
#14 クリックイベントを設定しよう (02:28)
- prevのイベント処理
- nextのイベント処理
-
#15 年月も表示してみよう (02:41)
- テンプレートリテラル
- padStart()
-
#16 機能ごとに処理をまとめよう (01:53)
- clearCalendar()
- rendarTitle()
- renderWeeks()
-
#17 今日の日付を太字にしよう (02:42)
- new Date()
- isTodayの判定処理
-
#18 今月に戻れるようにしよう (01:12)
- Todayのイベント処理
- イベント処理の確認
