ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2024/09/05
NEW
【週刊ドットインストール】 レッスン制作の進捗、256timesのエディター更新、メンタリングの現場から
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%
動画レッスン一覧
(13)
質問と回答
(60)
#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() の作成
未完了
#03 B列の配列を作ろう
bはなぜconstで宣言しているのですか?
2022年1月27日
spliceは配列から要素を取得できるのですか?
2022年1月27日
#04 配列を確認してみよう
splice() の最後につける [0] の意味はなんですか?
2022年7月9日
Math.random() * source.length を定数にすると数字が連番になってしまいます
2022年1月27日
const b = [ ] の意味がわかりません
2022年1月27日
なぜ、[0] とすると整数値が返るのですか?
2022年1月27日
spliceの使い方が理解できません
2022年1月27日
配列の要素を確認する際に、後ろに[0]をつけているのはなぜですか。
2022年1月27日
#05 for文で書き換えてみよう
for 文でカウンターを 1 で初期化すると undefined となってしまいます
2022年1月27日
for 文が想定と違う結果になるのですが、理由が知りたいです
2022年1月27日
pushを使ってもいいですか?
2022年1月27日
for文の条件について教えて下さい
2022年1月27日
#06 関数で処理をまとめてみよう
function createColumn の (col) が何なのかよくわかりません
2022年1月27日
source[]を作る処理について教えて下さい
2022年1月27日
なぜcolに0から2までの数が勝手に代入されるのですか?
2022年1月27日
#07 すべての列の配列を完成させよう
columns[2][2]='FREE'; が理解できません
2022年1月27日
return の処理の流れがつかめません
2022年1月27日
returnColumn の仕組みがよくわかりません
2022年1月27日
return columnしなくてはいけない理由がわかりません
2022年1月27日
配列の配列で混乱しています
2022年1月27日
returnの使い方がわかりません
2022年1月27日
#08 配列の行と列を反転させよう
この2重ループした for 文は何をしていますか?
2023年4月30日
console.log でのテーブル表示にスクロールバーが入ってしまい、正常に表示されません
2022年8月23日
let col の col は、関数 createColumn の引数 col とは別なのでしょうか?
2022年1月27日
for文の配列が理解できません
2022年1月27日
bingo[row] = []; は必要ですか?
2022年1月27日
sourceの個数が10個になるのはなぜですか?
2022年1月27日
return source としてはダメでしょうか?
2022年1月27日
行列の反転のところが理解できません
2022年1月27日
列と行の反転がどうなっているのかわかりません
2022年1月27日
for文の入れ子構造がよくわかりません
2022年1月27日
#10 CSSでスタイルを整えていこう
なぜ text-align: center; を指定していないのに BINGO の文字が中央寄せになるのですか?
2022年9月24日
background-colorとしていないのは何故ですか?
2022年1月27日
line-heightを指定する必要はありますか?
2022年1月27日
#11 ビンゴシートを動的に生成しよう
42 行目の「tbody の子ノードに tr を追加」の位置はそちらのほうがいいのでしょうか?
2023年6月14日
for 文のループ処理の中で const を宣言しても問題ないのはなぜですか?
2022年1月27日
appendChild(tr) の tr を ' ' で囲まないのはなぜですか?
2022年1月27日
for 文で、なぜ tr が 5 回作られるのかわかりません
2022年1月27日
なぜ tr.appendChild(td) を for 文の中で記述するのですか?
2022年1月27日
関数はどのように使うのが良いのでしょうか?
2022年1月27日
HTMLから削除した要素をなぜ呼び出せるのですか?
2022年1月27日
#12 ソースコードを整理していこう
columns[i] = createColumn(i); の意味がわかりません
2023年9月15日
関数を作るメリットとは?
2022年1月27日
プログラムはどこから実行されますか?
2022年1月27日
引数で渡しているcolumnsの意味がわかりません
2022年1月27日
returnは必要なのでしょうか?
2022年1月27日
appendChildとはなんでしょうか?
2022年1月27日
#13 ビンゴシートを完成させよう
renderBingo(columns) の columns に createColumns() を反映させるために columns を定数にしているのですか?
2024年8月20日
アロー関数と function の使い分けを教えてください
2023年6月14日
renderBingo(createColumns()); としてはいけないのですか?
2022年4月4日
renderBingo(columns) の引数は同じスコープのため不要というのがわかりません
2022年1月27日
console.log で表示される source 配列の length が要素数と異なります
2022年1月27日
renderBingo(columns); に引数を入れる理由がわかりません
2022年1月27日
renderBingo(bingo); を renderBingo(columns); に変えた理由がよくわかりません
2022年1月27日
renderBingo(); としてもいいのでしょうか?
2022年1月27日
ビンゴシートを画面の真ん中に移動したい
2022年1月27日
createBingoを削除するところがよくわかりませんでした
2022年1月27日
メモを付けるとしたらこうなりますか...?
2022年1月27日
なぜreturnしなければいけないのかがわかりません
2022年1月27日
変数は先頭で宣言しなくていいのでしょうか?
2022年1月27日
リリース情報(note)
記事はありません。
詳細情報
最終更新日
2020年6月16日
バージョン情報
Chrome 83 / Visual Studio Code 1.46.0