ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2023/12/07
NEW
【週刊ドットインストール】 レッスン制作の進捗、代表のひとりごと
PREMIUM
JavaScriptでビンゴシートを作ろう
JavaScriptでビンゴシートを作る方法について見ていきます。
0%
動画レッスン一覧
(13)
質問と回答
(59)
未完了
#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 ビンゴシートを完成させよう
アロー関数と 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)
記事はありません。
関連キーワード
基礎講座
(386)
初心者向け
(379)
HTML5
(32)
CSS3
(20)
JavaScript (ES2017)
(36)
ミニプログラム
(6)
詳細情報
最終更新日
2020年6月16日
バージョン情報
Chrome 83 / Visual Studio Code 1.46.0