このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#01 必要なファイルを準備しよう (02:06) 無料公開中
- 完成版の確認
- index.htmlの作成
-
#02 実装方針を確認しよう (01:54) 無料公開中
- ビンゴシートのルール確認
- 実装方針の説明
-
#03 B列の配列を作ろう (02:45) 無料公開中
- main.jsファイルの作成
- splice()での配列生成
-
#04 配列を確認してみよう (01:37)
- デベロッパーツールでの確認
- spliceに関する注意点
-
#05 for文で書き換えてみよう (01:51)
- for文を使った書き換え
- 動作確認
-
#06 関数で処理をまとめてみよう (02:28)
- 関数を使った書き換え
- 扱う数値の範囲を一般化
-
#07 すべての列の配列を完成させよう (01:57)
- 配列の完成
- console.table()を使った確認
-
#08 配列の行と列を反転させよう (01:50)
- 行と列の反転
- for文の入れ子表現
-
#09 ビンゴシートの画面をマークアップしよう (01:44)
- HTMLのマークアップ
- ブラウザでの確認
-
#10 CSSでスタイルを整えていこう (01:46)
- styles.cssの作成
- CSSによるスタイリング
-
#11 ビンゴシートを動的に生成しよう (02:37)
- DOM操作によるtr､td要素の生成
- 画面の完成
-
#12 ソースコードを整理していこう (02:29)
- 関数を使った書き換え
- createColumns() の作成
- createBingo() の作成
-
#13 ビンゴシートを完成させよう (02:23)
- 関数を使った書き換え
- renderBingo() の作成
リリース情報（note）
記事はありません。
詳細情報
- 最終更新日
- 2020年6月16日
- バージョン情報
- Chrome 83 / Visual Studio Code 1.46.0
