Moment.js入門 (全18回)
JavaScriptで日時計算を扱うためのライブラリである、Moment.jsの使い方について見ていきます。
このレッスンでは Moment.js 2.22.2 を使用しています。
-
#01 Moment.jsを使ってみよう (02:34)
- 公式サイトの確認
- index.htmlの作成
- main.jsの作成
-
#02 JavaScriptだけで日時計算してみよう (02:09)
- 要素の取得
- クリックイベントの設定
-
#03 日付を整形してみよう (01:58)
- Dateオブジェクト
- 動作確認
- getMonth()の注意点
-
#04 Moment.jsで書き直してみよう (02:46)
- Moment.jsの読み込み
- 日本語用ロケールの読み込み
- Moment.jsでの書き換え
- 入力値のチェック
-
#05 moment()オブジェクトを作ろう (02:56)
- コンソールの表示
- moment()オブジェクトの作成
- 動作確認
-
#06 公式サイトを参照してみよう (02:43)
- 公式サイトの参照方法
- 一時的にロケールを変更する方法
-
#07 format()を使って表記を指定しよう (02:33)
- format()
- ロケールの変更
- 動作確認
-
#08 日時に関する情報を取得しよう (02:20)
- daysInMonth()
- toArray()
- toObject()
- []
-
#09 get()で日時情報を取得しよう (02:34)
- get()
- キーワードの指定方法
- メソッドでの取得方法
-
#10 日時情報を設定してみよう (01:59)
- set()
- メソッドをつなげて書く方法
- 動作確認
-
#11 clone()で値をコピーしてみよう (01:55)
- 破壊的変更の確認
- clone()
-
#12 add()､subtract()を使ってみよう (02:15)
- add()
- subtract()
-
#13 日時の差を計算してみよう (02:56)
- diff()
- fromNow()
-
#14 日時に関する判定をしてみよう (02:46)
- isValid()
- isBefore()
- isAfter()
- isSame()
- isBetween()
- isLeapYear()
-
#15 誕生日アプリを作ってみよう (02:58)
- 要素の取得
- クリックイベントの設定
- 入力値の判定
- 生後日数の表示
-
#16 次の誕生日の求め方を理解しよう (01:45)
- 次の誕生日の考え方について
-
#17 次の誕生日を計算してみよう (02:21)
- 次の誕生日の表示
- 動作確認
-
#18 次の誕生日までの日数を表示しよう (02:31)
- 次の誕生日と現在日時の差分確認
- 次の誕生日までの日数表示
補足情報 事前に受講しておきたいレッスンについて
このレッスンの前に以下を受講されることをおすすめしておきます。
https://dotinstall.com/lessons/basic_javascript_v2