新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
-
#01 タイピングゲームを作ってみよう (02:40) 無料公開中
- 完成版の確認
- index.htmlの作成
-
#02 画面のマークアップをしよう (02:45) 無料公開中
- styles.cssの作成
- main.jsの作成
- マークアップ
-
#03 画面のスタイルを整えよう (01:52) 無料公開中
- bodyのスタイリング
- #targetのスタイリング
- .infoのスタイリング
-
#04 タイプしたキーを取得しよう (01:46) 無料公開中
- keydownイベントの設定
- キーの取得
-
#05 タイピングの正誤を判定しよう (02:59)
- 要素の取得
- if文
-
#06 正解とミスの数をカウントしよう (02:47)
- 要素の取得
- scoreの表示
- missの表示
-
#07 正解した文字の表示を変えよう (02:38)
- updateTarget()
- for文
- substring()
-
#08 複数の単語に対応させよう (02:15)
- 配列wordsの定義
- ランダムな要素の選択
-
#09 ゲームをスタートさせよう (01:37)
- clickイベントの設定
- target.textContentの書き換え
-
#10 タイマーを表示しよう (02:50)
- Date.now()
- updateTimer()
-
#11 タイマーを動かそう (02:09)
- setTimeout()
- alert()
-
#12 タイマーの不具合を修正しよう (01:51)
- setTimeout()
- alert()
-
#13 イベント発生時の誤動作を防止しよう (02:38)
- isPlayingによる状態の管理
- if文
-
#14 正答率を表示しよう (02:51)
- 条件演算子
- テンプレートリテラル
-
#15 リプレイができるようにしよう (02:26)
- clickイベントの設定
- 変数の宣言と初期化の分離
