0Pricing
Javascript for Kids · レッスン

行と列

グリッドを作ります

「行と列」はCoddyKit上の無料Javascript for Kidsレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavascript for Kids学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Javascript for Kidsコースには全4レッスンが含まれています。

グリッドを作る! 🟦🟦

グリッドは、チェッカーボードや小さな四角形が並ぶ窓のようなものです!行(横)と列(縦)でできています。⬜⬜⬜

ネストしたループは、グリッドを描くのにぴったりです!

行を作る 📏

星を1行並べるには、文字列の中で+を使って星をつなげます。

行のテキストを少しずつ作ってみましょう!

let row = ''
for (let col = 1; col <= 4; col++) {
  row = row + '*'
}
console.log(row)

何が起きましたか 🔍

最初は空の文字列''でした。ループのたびに*が1つ追加されます。そのため、*、**、***、****と増えていきます!

そして完成した行を表示しました。きれいですね!✨

let row = ''
for (let col = 1; col <= 3; col++) {
  row = row + '*'
  console.log(row)
}

たくさんの行 📚

次は、それを外側のループで囲んで、たくさんの行を作りましょう!外側が行、内側が列です。

for (let r = 1; r <= 3; r++) {
  let row = ''
  for (let c = 1; c <= 4; c++) {
    row = row + '*'
  }
  console.log(row)
}

4×4の正方形 🟦

完璧な正方形を作りましょう!星を4行、4列に並べます。

for (let r = 1; r <= 4; r++) {
  let row = ''
  for (let c = 1; c <= 4; c++) {
    row = row + '*'
  }
  console.log(row)
}

絵文字を使う! 🎨

退屈な星を使う必要はありません。ハートのグリッドを作りましょう!💖

for (let r = 1; r <= 3; r++) {
  let row = ''
  for (let c = 1; c <= 3; c++) {
    row = row + '💖'
  }
  console.log(row)
}

横長の長方形 ▭

行数と列数を同じにする必要はありません!横長の長方形を作りましょう:2行、6列です。

for (let r = 1; r <= 2; r++) {
  let row = ''
  for (let c = 1; c <= 6; c++) {
    row = row + '🟩'
  }
  console.log(row)
}

数字のグリッド 🔢

星の代わりに、列番号でグリッドを埋めましょう!

for (let r = 1; r <= 3; r++) {
  let row = ''
  for (let c = 1; c <= 4; c++) {
    row = row + c
  }
  console.log(row)
}

縦長のグリッド 🏢

縦長の塔を作りましょう!ブロックを6行、2列に並べます。🧱

for (let r = 1; r <= 6; r++) {
  let row = ''
  for (let c = 1; c <= 2; c++) {
    row = row + '🧱'
  }
  console.log(row)
}

スペースを追加する 🔲

記号の間にスペースを入れて、間隔を広げましょう!スペースを含む'* 'を使います。

for (let r = 1; r <= 3; r++) {
  let row = ''
  for (let c = 1; c <= 4; c++) {
    row = row + '* '
  }
  console.log(row)
}

グリッドを作ってみましょう 🌟

ハートを星に変えたり 🌟、サイズを変えたりしてみましょう!編集して実行し、自分だけのグリッドを作ってください。

for (let r = 1; r <= 4; r++) {
  let row = ''
  for (let c = 1; c <= 5; c++) {
    row = row + '🌟'
  }
  console.log(row)
}

クイックチェック ✅

グリッドの理解度チェックです!🧠

行と列のまとめ 🎉

美しいグリッドができました!🟦 グリッドの作り方を学びました。

  • 外側のループ = 行
  • 内側のループ = 列
  • row = row + symbolで行のテキストを作り、それを表示します

次は、成長する星の三角形を作ります!🔺

よくある質問

「行と列」レッスンは無料ですか?

はい。「行と列」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、Javascript for Kidsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Javascript for Kidsコースには全4レッスンが含まれています。

「行と列」で何を学びますか?

グリッドを作ります ブラウザで直接実行するハンズオンコードでJavascript for Kidsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Javascript for Kidsを始めるのに経験は必要ですか?

事前経験は必要ありません。CoddyKitのJavascript for Kidsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「行と列」レッスンにはどのくらい時間がかかりますか?

ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJavascript for Kidsレッスンでコードを書いて実行できますか?

はい。すべてのJavascript for Kidsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. ループの中のループ
  2. 行と列
  3. 星の三角形
  4. 掛け算表
← Javascript for Kidsに戻る