1
2025年度 第8回Javascriptプログラミング3
デジタル人財育成道場
浦添市
CoderDojo浦添
2
今日やること
VSCodeをもう一度練習
2
プロゲートやってみよう
3
タイピング
1
問題にチャレンジ
4
ワークの準備をしましょう
3
参加者用サイトで資料を開く
4
5
Google にログインしましょう
まずGoogle Chromeを起動して、Googleにログインしましょう。
6
Google にログインしましょう
Gmailのメールアドレスとパスワードを入力してログインします。
7
Gmailを開きましょう
ログインできたら、Gmailを選択します。
8
「参加者用サイト」メールを探しましょう
Tedako / Urasoe「参加者用サイト」と件名に書いてあるメールを探して選択しましょう。
9
メールをスター付きにしましょう
メール右上の星マークを選択すると、メールが星付きになって、次からは「スター付き」を選ぶと同じメールをすぐに探すことができます
10
メールをスター付きにしましょう
次からは「スター付き」を選んでメールをすぐに探すことができます。
11
メールのリンクを開きましょう
もういちどメールを開いて次のリンクを選択しましょう。
12
参加者用サイト
参加者用サイトが開いたら「資料」を選択します。
13
今日の資料を開く
資料ページから今日の資料を探して右上にマウスを重ねて矢印アイコンを選択しましょう。
14
資料を見ながら学習を進めましょう
選んだ資料が別のタブで開いて画面いっぱいに表示されます。マウスでクリックするか、キーボードの矢印キーでページが移動します。
タイピング・チャレンジ!!
15
昨日の自分を超えろ！
16
ちょっと休憩
17
Geminiを表示
18
Geminiにいつでも質問できるようにしよう！
復習
19
前はなにやったっけ？
VSCodeでJavascriptを復習
20
第7回は、JavaScriptでプログラミングのきそをやったさ！
21
VSCodeを開きましょう
Visual Studio Code
22
「ファイル」->「フォルダを開く」
23
「書類」で前に作ったフォルダを「開く」
24
作ってないときは「新規フォルダ」を作成
前の回で作った人はこれは必要ありません！
25
自分の名前を英字で入力して「作成」
前の回で作った人はこれは必要ありません！
26
新しいフォルダができたら「開く」
前の回で作った人はこれは必要ありません！
27
「index.html」をえらんで開きましょう
エクスプローラー
でファイルを選ぶと、ファイルが開きます
28
作ってない人は、新しく「index.html」作成
前の回で作った人はこれは必要ありません！
29
「！」を入力してエンターキー選択
「！」
を入力してエンターキーを押します
もう作った人はこれは必要ありませんよー
30
HTMLのテンプレが自動的に作成されます
もう作った人はこれは必要ありませんよー
31
「<body>」の下にJavaScriptを書きます
<script>
console.log('hello');
</script>
32
「Go Live」を選択します
「Go Live」を選択
33
真っ白な画面が表示されたら右クリックで「検証」を選びます
34
「Console」を選び「hello」の表示を確認します
35
JavaScriptをいろいろ書いてみましょう
<script>
console.log('hello');
console.log(5 + 2);
console.log(5 - 2);
console.log(3 * 7);
console.log(6 / 3);
console.log(9 / 2);
</script>
36
検証の画面でJavaScriptの結果を確認
37
メッセージを出してみる
alert("こんにちは世界！");
38
メッセージが表示される
39
答えを入力できるようにする
const kotae = prompt("今日の天気は？");
alert(kotae);
40
答えを入力するメッセージが出ます
41
答えを入力するメッセージが出ます
42
答えを入力して「OK」を選びます
43
入力した答えが表示されます
Progate（プロゲート）での学び方
44
この前の回では、変数と定数までやってみよう！だったよ。
Progateへログイン
45
まずはProgateへログインしよう！
JavaScript
46
Javascriptの基礎を学んでいくよ！
JavaScript
47
ES6のJavascriptⅠからはじめてみようね！
JavaScript
48
せつめいを読んで、キーボードの右やじるしキーを押すと次にすすむよ！
JavaScript
49
スライドさいごまで進んだら、キーボードのエンターキーを押してね！
キーボードのエンターキーを押すと、次にすすみます。
JavaScript
50
ES6のJavascriptⅠからはじめてみようね！
ここで、プログラミングを行います
問題をよんで、
JavaScript
51
ES6のJavascriptⅠからはじめてみようね！
「自分のコードを実行する」ボタンでプログラムを実行できます
「見本のコードを実行する」
ボタンでお手本はどうなるか見ることもできます
JavaScript
52
ES6のJavascriptⅠからはじめてみようね！
「できた」ボタンは
commandキーと、
エンターキーでも
押すことができます
JavaScript
53
Congratulations!とでたら、せいかい！
JavaScript
54
まちがってたら「答えをみる」でせいかいをみてみようね！
JavaScript
55
「自分のコードと比べてみる」
で、どこがちがうか確認してね！
JavaScript
56
文字を大きくしたり、色を変えたりできるよ！
JavaScript
57
文はコピーすることもできるよ！
こたえの文は、コピーボタンでコピーして、貼り付けることもできます
JavaScript
58
「文字列と数値」「変数・定数」
までクリアをめざそう！
チャレンジ！
59
プロゲートで変数と定数までクリアしたら問題にチャレンジしてみようね！
60
新しいファイル「challenge.html」を作成
新しく作るファイル
challenge.html
まず、じゅんび！
61
「！」を入力してエンターキー選択
「！」
を入力してエンターキーを押します
62
HTMLのテンプレが自動的に作成されます
JavaScriptを書く
63
この後の問題のこたえは、<script></script>のあいだに書いてね
<body>の下に、
<script>
</script>
を書きます。
この間にJavaScriptの答えを書いていきます
変数と定数の問題！
64
前の問題の解答ものせてるよ！
たしざん問題
65
たしざんの問題！
自分なりに考えてみてね！
Geminiに聞いてもいいよ！
りんごが5こ、みかんが3こあります。全部で何こ？
の答えを「alert」で表示するプログラムを考えましょう。
ヒント
でこたえを表示します
答え
66
alertのかっこの中では、文字列をくっつける書き方でこたえを表示してるよ！
let apples = 5;
let oranges = 3;
let total = apples + oranges;
alert("くだものは全部で " + total + " こ");
かけざん問題
67
かけざんの問題！
光は1秒で300,000km進みます。
1分では何km進むでしょう？
ヒント
でこたえを表示します
答え
68
かけざんは「*」アスタリスだよ！
let lightSpeed = 300000; // km/s
let seconds = 60;
let distance = lightSpeed * seconds;
alert("光は1分で " + distance + " km 進むよ。");
わりざん問題
69
わりざんの問題！
沖縄本島の海岸線（1周の長さ）は約 470km あります。
もし1日に 20km 歩いたとしたら、沖縄本島を1周するのに何日かかるでしょう？
ヒント
でこたえを表示します
答え
70
わりざんは「/」スラッシュ！
let okinawaRound = 470; // 沖縄本島1周の距離（km）
let perDay = 20; // 1日に歩く距離（km）
let days = okinawaRound / perDay;
alert("沖縄本島を1周するには " + days + " 日かかるよ。");
1089になる数字
71
1089になる不思議な数字のプログラムを、考えてみてね！
ヒント
答え
簡単バージョン
72
かんぺきじゃなくて、こんな感じでもOK！
<script>
let kazu = 123;
let hantai = 321;
let hikizan = hantai - kazu;
let kotae = hikizan + 891;
alert(kotae);
console.log(kotae);
</script>
自分で計算してる
答え
ムズいバージョン
73
「ひっくり返す」がムズいよね！
Geminiに聞くとこんなん返ってくるよ！
<script>
// 1. 好きな3桁の数を考えます（例：123）
let kazu = 123;
console.log(`元の数: ${kazu}`);
// 2. 3桁の数をひっくり返します
let hantai = parseInt(String(kazu).split('').reverse().join(''));
console.log(`ひっくり返した数: ${hantai}`);
// 3. 引き算をします
let hikizan = Math.abs(kazu - hantai);
console.log(`引き算の結果: ${hikizan}`);
// 4. 引き算の結果をひっくり返します
let hantaiHikizan = parseInt(String(hikizan).split('').reverse().join(''));
console.log(`引き算の結果をひっくり返した数: ${hantaiHikizan}`);
// 5. 足し算をします
let tasizan = hikizan + hantaiHikizan;
console.log(`足し算の結果: ${tasizan}`);
</script>
String(kazu)
数字を文字列に変えます。
.split('')
文字列を1文字ずつの配列にします（例：['1', '2', '3']）。
.reverse()
配列の順番をひっくり返します（例：['3', '2', '1']）。
.join('')
配列を再び1つの文字列に戻します（例：'321'）。
parseInt()
文字列を数字に戻します。
数字をひっくり返すプログラム
条件分岐の問題！
74
「if」「else」「else if」を使いこなせ！
条件分岐まで終わっていたら
75
プロゲートで条件分岐まで終わった人はやってみて！
偶数と奇数
76
条件分岐「if」「else」を使ってね。
偶数は2で割ることができる数字だよ。
数を入れて、偶数なら「偶数です」、奇数なら「奇数です」と表示しましょう。
ヒント
答え
77
入力された答えが正解か判定するプログラムを作ってみてね！
const num = 17;
if (num % 2 === 0) {
alert(num + " は偶数です");
} else {
alert(num + " は奇数です");
}
おみくじ
78
「if」「else」に加えて「else if」を使ってね。
１から５までの数字を「prompt」で入力して、
5なら「大吉」4なら「中吉」3なら「小吉」2なら「吉」1なら「凶」になるおみくじプログラムを作ってみましょう
ヒント
答え
79
else ifがたくさん並ぶよ！
let input = prompt("1〜5の番号を入力してください！");
let number = Number(input);
// 条件分岐で運勢を判定してアラートで表示
if (number === 5) {
alert("大吉！✨ 今日は最高にいい日！🌞");
} else if (number === 4) {
alert("中吉！😊 ちょっとラッキーなことがあるかも");
} else if (number === 3) {
alert("小吉！🍀 いいことが小さくあるよ");
} else if (number === 2) {
alert("吉！😌 まあまあ平和な日");
} else if (number === 1) {
alert("凶…😱 気をつけてすごそう");
} else {
alert("1〜5の数字を入れてね！");
}
クイズを作ろう
80
条件分岐と「prompt」を使って
入力された答えが正解か判定するプログラムを作ってみてね！
答え
81
入力された答えが正解か判定するプログラムを作ってみてね！
// クイズのもんだいとこたえ
const mondai = "きめつのやいばのこいばしらのなまえは？";
const seikai = "かんろじみつり";
// promptをつかってこたえをにゅうりょくしてもらう
const kotae = prompt(mondai);
// こたえがあっているかはんていする
if (kotae === seikai) {
// せいかいのばあい
alert("せいかい！すごいね！");
} else {
// ちがうばあい
alert(`ちがいます。せいかいは「${seikai}」でした。`);
}
点数をつける
82
クイズを改造してみましょう！いくつか作って、正解の数を表示しましょう
答えの例
83
<script>
// せいかいしたもんんだいの数をかぞえるへんすう
let seikaiNoKazu = 0;
// もんだい1
let mondai1 = "きめつのやいばのこいばしらのなまえは？";
let seikai1 = "かんろじみつり";
let kotae1 = prompt(mondai1);
if (kotae1 === seikai1) {
alert("せいかい！");
seikaiNoKazu = seikaiNoKazu + 1;
} else {
alert(`ちがいます。せいかいは「${seikai1}」でした。`);
}
// もんだい2
let mondai2 = "きめつのやいばのれんごくさんのなまえは？";
let seikai2 = "れんごくきょうじゅろう";
let kotae2 = prompt(mondai2);
if (kotae2 === seikai2) {
alert("せいかい！");
seikaiNoKazu = seikaiNoKazu + 1;
} else {
alert(`ちがいます。せいかいは「${seikai2}」でした。`);
}
// もんだい3
let mondai3 = "きめつのやいばのいちばんさいしょのてきのなまえは？";
let seikai3 = "おに";
let kotae3 = prompt(mondai3);
if (kotae3 === seikai3) {
alert("せいかい！");
seikaiNoKazu = seikaiNoKazu + 1;
} else {
alert(`ちがいます。せいかいは「${seikai3}」でした。`);
}
// さいごにせいかいの数をひょうじ
alert(`クイズおわり！ぜんぶで${seikaiNoKazu}もんせいかいしたよ！`);
</script>
こんな感じで条件分岐の「if」や「else」を使ってね！
繰り返しの問題！
84
「while」「for」を使いこなせ！
繰り返しまで終わっていたら
85
プロゲートで繰り返しまで終わった人はやってみて！
星を並べよう
86
繰り返し処理、forを使ってみましょう
⭐を10こならべて、だんだん増えていくように表示してみましょう。
ヒント
答え
87
let stars = "";
for (let i = 1; i <= 10; i++) {
stars = stars + "⭐";
console.log(stars);
}
こんな感じでfor分使ってできるよ
フィボナッチ数列
88
フィボナッチ数列ってなんだろう？Geminiで調べてプログラミングであらわしてみてね
フィボナッチ数列を100つ表示するプログラムを作ってみよう
ヒント
答えの例
89
100も数を出したら、最後の数の単位はなんだろうね？
// フィボナッチ数列のはじめの2つの数をせってい
let maeNoKazu = 0; // 1つ前の数
let imaNoKazu = 1; // いまの数
// 100回くりかえす
for (let i = 0; i < 100; i++) {
// いまの数をひょうじする
console.log(imaNoKazu);
// つぎの数を計算する
let tsugiNoKazu = maeNoKazu + imaNoKazu;
// かずをずらす
maeNoKazu = imaNoKazu;
imaNoKazu = tsugiNoKazu;
}
Fizz Buzz問題
90
有名な問題だよ！
繰り返しと条件分岐を使って実現してみよう！
答えの例
91
for文とif、else if、elseを組み合わせるよ！
for (let i = 1; i <= 100; i++) {
if (i % 3 == 0 && i % 5 == 0) {
console.log("FizzBuzz");
} else if (i % 3 == 0) {
console.log("Fizz");
} else if (i % 5 == 0) {
console.log("Buzz");
} else {
console.log(i);
}
}
92
次の開催（土曜日）