ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2024/09/12
NEW
【週刊ドットインストール】 CSSバージョンのお話、レッスン制作の進捗、代表のひとりごと
PREMIUM
JavaScriptでカレンダーを作ろう
JavaScriptでシンプルなカレンダーを作る方法について見ていきます。
0%
このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
JavaScript入門 基礎文法編
(全27回)
PREMIUM
PREMIUM
0%
JavaScript入門 関数編
(全12回)
PREMIUM
PREMIUM
0%
JavaScript入門 データ構造編
(全27回)
PREMIUM
PREMIUM
0%
JavaScript入門 DOM編
(全22回)
PREMIUM
PREMIUM
0%
JavaScript入門 日時操作編
(全8回)
PREMIUM
PREMIUM
0%
動画レッスン一覧
(18)
質問と回答
(70)
#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のイベント処理
イベント処理の確認
未完了
#01 カレンダーを作ってみよう
デモサイトや仕様情報はありますでしょうか?
2022年1月27日
#02 マークアップを進めていこう
th と td の違いはなんですか?
2022年1月27日
文字実体参照とはなんですか?
2022年1月27日
#03 CSSでスタイルを整えよう
border-separate か border-collapse か、どちらにすればよいのですか?
2022年1月27日
等幅フォントとはなんですか?
2022年1月27日
","の使い方がわかりません
2022年1月27日
#04 日付にスタイルをあてていこう
first-child、last-child について教えて下さい
2022年1月27日
td.disabledにtdをつける理由はなんですか?
2022年1月27日
#の使い方、意味がよくわかりません
2022年1月27日
#05 デベロッパーツールを起動しよう
href属性とsrc属性の違いはなんですか?
2022年1月27日
#06 今月分の日付を取得しよう
for 文では i と lastDate の数値を比較しているのですか?
2022年6月9日
Date() で、指定したい日付ではなく現在の日付が出てしまいます
2022年1月27日
末日を取得するコードの構造が理解できません
2022年1月27日
末日の取得方法について教えて下さい
2022年1月27日
#07 オブジェクトに書き換えてみよう
なぜオブジェクトの配列にするのかがわかりません
2023年2月5日
isTodayとisDisabledはどういうルールで命名しているのですか?
2022年1月27日
「console.clear();」を使う理由がわかりません
2022年1月27日
#08 実装方針を確認しよう
取得される月の末日がおかしいです
2022年1月27日
#09 前月分の日付を取得しよう
配列の中身が ...28, 29 30 のようになるのはなぜですか?
2023年2月5日
「isDisabled」「isToday」という名前で呼び出せるのはなぜですか?
2022年1月27日
「for (let i = 0; i < n; i++) { ...」はなぜ0から始めるのですか?
2022年1月27日
先月の日付を取得する流れがわかりません
2022年1月27日
#10 翌月分の日付を取得しよう
getCalendarTail() が空になってしまいます
2022年1月27日
日付を取得する際の i の初期値はどのように決めているのですか?
2022年1月27日
翌月分の日付はどうやって取得していますか?
2022年1月27日
#11 すべての日付を統合しよう
createCalendar() を最後に入力する意図がわかりません
2022年1月27日
配列の中にある関数に;が付かないのはなぜですか?
2022年1月27日
returnを使う意味がわかりません
2022年1月27日
なぜ配列の中に3つの配列が入っているままではダメなのですか?
2022年1月27日
returnすると関数の出力が止まるのですか?
2022年1月27日
#12 週毎の配列を作ろう
weeks.push(dates.splice(0,7)) で weeks に取得した配列を入れているのですか?
2022年5月24日
dates に 42 個も要素が入るのはなぜですか?
2022年1月27日
console.log(`i: ${i} dates: ${dates}`); でうまく値を確認できないのはなぜですか?
2022年1月27日
for文で0から始めるのか、1から始めるのか、どのように判断すればいいですか?
2022年1月27日
getCalendarHead()などでセミコロンはいらないのですか?
2022年1月27日
pushの操作は添字を使ってもいいですか?
2022年1月27日
forの変数を変えると動かなくなるのはなぜですか?
2022年1月27日
push と splice の関係がよくわかりません
2022年1月27日
iはどこで使っているのですか?
2022年1月27日
spliceとWeeksCountのあたりの処理がわかりません
2022年1月27日
#13 カレンダーを描画しよう
tr と tdの宣言をする場所を変えたらうまく動作しないのはなぜですか?
2022年1月27日
date.date が理解できません
2022年1月27日
forEachの挙動がよくわかりません
2022年1月27日
forEach文のアロー関数で括弧は不要ですか?
2022年1月27日
forでもforEachでもどちらでもいいのでしょうか?
2022年1月27日
86行目に書いたコードの位置を変えてもいいですか?
2022年1月27日
dates.dateではないのでしょうか?
2022年1月27日
オブジェクトの配列がよくわかりません
2022年1月27日
date.dateとは何ですか?
2022年1月27日
date.dateの値がわかりません
2022年1月27日
#14 クリックイベントを設定しよう
const dates = [] を複数の関数内で書いてもエラーにならないのはなぜですか?
2022年7月9日
なぜconstでエラーになるのですか?
2022年1月27日
createCalendar()はなぜ必要なのでしょうか?
2022年1月27日
#15 年月も表示してみよう
firstChild で子要素を削除することで該当月のみ表示されるのはなぜですか?
2022年11月20日
子要素を削除する方法として、innerHTML を使っても問題ありませんか?
2022年2月16日
tbody.removeChild(tbody.firstChild); ですべての tr が 削除されているのはなぜでしょうか?
2022年1月27日
title 要素を先に取得してもよいのでしょうか?
2022年1月27日
String(month + 1) は文字列なのに、なぜ計算できるのですか?
2022年1月27日
padStart の代わりに slice を使ってもよいのですか?
2022年1月27日
whileをifに書き換えたら動かないのはなぜですか?
2022年1月27日
innerHTMLとの使い分けを教えて下さい
2022年1月27日
whileには条件式を入れるのではないのですか?
2022年1月27日
while文では何がされているのですか?
2022年1月27日
#17 今日の日付を太字にしよう
dates[today.getDate() - 1].isToday = true; で「 === 」ではなくて「 = 」を使うのはなぜですか?
2022年1月27日
dates[today.getDate() - 1].isToday = true; はなぜ -1 とするのですか?
2022年1月27日
今日の月を取得する際に getMonth() + 1; としないのはなぜですか?
2022年1月27日
当日を太字にする処理について教えて下さい
2022年1月27日
今日の日付だけを太文字にするコードがよくわかりません
2022年1月27日
isTodayで太字になる流れがわかりません
2022年1月27日
#18 今月に戻れるようにしよう
if文を&&で表現してもうまくいかない
2022年1月27日
リリース情報(note)
今週は『JavaScriptでカレンダーを作ろう』をリリースしました。
詳細情報
最終更新日
2020年7月2日
バージョン情報
Chrome 83 / Visual Studio Code 1.46.1