JavaScript講座|性格診断テストをつくろう【ラジオボタン】

JavaScript
うさタブ
うさタブ

今回はJavaScriptで診断テストをつくるッピ!

ユウキ
ユウキ

診断テスト~?

うさタブ
うさタブ

今日は【陰キャ・陽キャ診断テスト】をつくってみるッピよ~

ユウキ
ユウキ

なんかビミョーなテストだなぁ~

この記事で学べること
  • <p>タグでの問題文のつくりかた
  • <input>タグでのラジオボタンのつくりかた
  • JavaScriptでの判定プログラムのつくりかた

サンプル診断テスト

性格診断

甘いものが好き?
好き 普通 嫌い

アウトドア派? インドア派?
アウトドア派 どちらでもない インドア派

旅行でみっちり計画建てるほう?
ぜんぜん どちらでもない みっちり

ケンカしたらすぐあやまる?
ぜんぜん どちらでもない あやまる

ボタンを押してください

完成コード見本

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<script>
<!-- ↓②ここに判定プログラムを書こう!↓ -->
function answer(){
    let Q= document.getElementById( "Q" );
    let A = Number(Q.q1.value) + Number(Q.q2.value) + Number(Q.q3.value) + Number(Q.q4.value);

    if (A >= 9) {
        text = "あなたは陽キャです。"
    }else if(A >= 4 && A <= 8){
        text = "あなたはふつうです。";
    }else{
        text = "あなたは陰キャです。";
    }
    document.getElementById("kotae").innerHTML = text;
}
</script>
<!-- ↓①この下に問題文を入力してね!↓ -->
<h1>性格診断</h1>
<form id="Q">
    <p>甘いものが好き?<br>
    <input name="q1" type="radio" value="3"> 好き
    <input name="q1" type="radio" value="2"> 普通
    <input name="q1" type="radio" value="1"> 嫌い
    </p>
    <p>アウトドア派? インドア派?<br>
    <input name="q2" type="radio" value="3"> アウトドア派
    <input name="q2" type="radio" value="2"> どちらでもない
    <input name="q2" type="radio" value="1"> インドア派
    </p>
    <p>旅行でみっちり計画建てるほう?<br>
    <input name="q3" type="radio" value="3"> ぜんぜん
    <input name="q3" type="radio" value="2"> どちらでもない
    <input name="q3" type="radio" value="1"> みっちり
    </p>
    <p>ケンカしたらすぐあやまる?<br>
    <input name="q4" type="radio" value="3"> ぜんぜん
    <input name="q4" type="radio" value="2"> どちらでもない
    <input name="q4" type="radio" value="1"> あやまる
    </p>
</form>

<button onclick="answer();">性格診断!</button>
<div id="kotae">ボタンを押してください</div>

<!-- ここまで! -->
</body>
</html>
うさタブ
うさタブ

今回はこのコードをわかりやすく!

じっくり解説していくッピよ~

性格診断テストをつくろう

必要なもの

うさタブ
うさタブ
メモ帳
  • メモ帳
  • ブラウザ

が必要ッピ!

元になるコード

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<script>
<!-- ②↓ここに判定プログラムを書こう!↓ -->


</script>
<!-- ①↓この下に【問題文】を入力してね!↓ -->

<!-- ここまで! -->
</body>
</html>

問題文をつくってみよう

うさタブ
うさタブ

準備ができたらさっそく【問題文】を作ってみるっぴ!

うさタブ
うさタブ

まず<body><body>の間に

<h1>性格診断</h1>
<p>甘いものが好き?</p>
<p>アウトドア派? インドア派?</p>
<p>旅行でみっちり計画建てるほう?</p>
<p>ケンカしたらすぐあやまる?</p>

と入力するッピ!

ユウキ
ユウキ

お、こんな感じかな?

うさタブ
うさタブ

いい感じッピ!

ここまでのコード
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<script>
<!-- ↓②ここに判定プログラムを書こう!↓ -->


</script>
<!-- ↓①この下に問題文を入力してね!↓ -->

<h1>性格診断</h1>
<p>甘いものが好き?</p>
<p>アウトドア派? インドア派?</p>
<p>旅行でみっちり計画建てるほう?</p>
<p>ケンカしたらすぐあやまる?</p>

<!-- ここまで! -->
</body>
</html>

ラジオボタン(チェックボックス)をつくってみよう

うさタブ
うさタブ

次はラジオボタン(チェックボタン)をつくってみるッピ!

ユウキ
ユウキ

ラジオボタンってさっきのコレ?

この丸ポチみたいなやつ

うさタブ
うさタブ

そのとおりッピ!

これを使ってチェックリストを作っていくッピ!

fromタグでチェックリストをタグ付けする

うさタブ
うさタブ

チェックリストをつくるためには、

ここから先はユーザーの入れた情報を受信する

from】タグで『問題文』囲ってあげる必要があるッピ!

うさタブ
うさタブ

さっきの問題文

<form id="Q">
問題文
</from>

で囲ってみるッピよ~

ここまでのコード
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<script>
<!-- ↓②ここに判定プログラムを書こう!↓ -->


</script>
<!-- ↓①この下に問題文を入力してね!↓ -->

<h1>性格診断</h1>

<form id="Q">
<p>甘いものが好き?</p>
<p>アウトドア派? インドア派?</p>
<p>旅行でみっちり計画建てるほう?</p>
<p>ケンカしたらすぐあやまる?</p>
</form>

<!-- ここまで! -->
</body>
</html>
ユウキ
ユウキ

この

<from id=”Q“>って??

うさタブ
うさタブ

このid=”Q“は

Qという名前のID住所ですよ

という意味ッピね!

うさタブ
うさタブ

idをつけることによって、あとで

「この住所のこの部分をカスタマイズして!」という

プログラミングが組みやすくなるッピよ~

ユウキ
ユウキ

なるほどな~

ラジオボタンをつくる

うさタブ
うさタブ

次はラジオボタンを設置してみるッピ!

最初の問題文甘いものが好き? に

<p>甘いものが好き?<br>
 <input name="q1" type="radio" value="3"> 好き
 <input name="q1" type="radio" value="2"> 普通
 <input name="q1" type="radio" value="1"> 嫌い
</p>

とボタンを付け加えていくッピ!

うさタブ
うさタブ

<from></from>のくくりでみるとこんな感じッピ!

<form id="Q">
<p>甘いものが好き?<br>
 <input name="q1" type="radio" value="3"> 好き
 <input name="q1" type="radio" value="2"> 普通
 <input name="q1" type="radio" value="1"> 嫌い
</p>
<p>アウトドア派? インドア派?</p>
<p>旅行でみっちり計画建てるほう?</p>
<p>ケンカしたらすぐあやまる?</p>
</form>
ユウキ
ユウキ

うーんこんな感じかな?

うさタブ
うさタブ

よくできてるッピ!

ユウキくん天才ッピ!!

ユウキ
ユウキ

やったぜ♪

ここまでのコード
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<script>
<!-- ↓②ここに判定プログラムを書こう!↓ -->


</script>
<!-- ↓①この下に問題文を入力してね!↓ -->

<h1>性格診断</h1>

<form id="Q">
<p>甘いものが好き?<br>
 <input name="q1" type="radio" value="3"> 好き
 <input name="q1" type="radio" value="2"> 普通
 <input name="q1" type="radio" value="1"> 嫌い
</p>
<p>アウトドア派? インドア派?</p>
<p>旅行でみっちり計画建てるほう?</p>
<p>ケンカしたらすぐあやまる?</p>
</form>

<!-- ここまで! -->
</body>
</html>
ラジオボタン解説
ユウキ
ユウキ

なあ、このラジオボタンの

<input name=”q1″ type=”radio” value=”3″>

とかって、どういう意味なんだ??

ユウキ
ユウキ

たくさんあって意味がわからないよ・・・

うさタブ
うさタブ

それはッピね、

<inputユーザー入力を反映します name 名前は=”q1q1です type 入力タイプは=”radioラジオボタンですvalueうめこむ値は=”33です“>

という意味ッピ!

ユウキ
ユウキ

うーん

わかったようなわからないよーな・・・

ユウキ
ユウキ

とりあえずこの<input>

情報を入力したり選択すると部分に取り付けるタグで、

type=”radio”は『ラジオボタン』を設定する命令文こと??

うさタブ
うさタブ

そのとおりッピ!

name=”q1“は<input>タグにおけるid

value=”3“はプログラミングにおける変数

になるッピ!

うさタブ
うさタブ

このvalueをしこむことで、

あとでプログラミングするとき、ここに設定した文字や数値を呼び出して

計算コメントを変化させることができるッピ!

ユウキ
ユウキ

むーなんだか難しいな・・・

この先が思いやられるよ

うさタブ
うさタブ

安心するッピ!

このうさタブがユウキくんにわかりやすく解説してみせるッピ!

ユウキ
ユウキ

たのむぜ、うさタブ!

うさタブ
うさタブ

まかせるッピ!

この調子で、他の問題文にもラジオボタンを設置するッピ!

うさタブ
うさタブ

つづいて<body><body>

<form id="Q">
    <p>甘いものが好き?<br>
    <input name="q1" type="radio" value="3"> 好き
    <input name="q1" type="radio" value="2"> 普通
    <input name="q1" type="radio" value="1"> 嫌い
    </p>
    <p>アウトドア派? インドア派?<br>
    <input name="q2" type="radio" value="3"> アウトドア派
    <input name="q2" type="radio" value="2"> どちらでもない
    <input name="q2" type="radio" value="1"> インドア派
    </p>
    <p>旅行でみっちり計画建てるほう?<br>
    <input name="q3" type="radio" value="3"> ぜんぜん
    <input name="q3" type="radio" value="2"> どちらでもない
    <input name="q3" type="radio" value="1"> みっちり
    </p>
    <p>ケンカしたらすぐあやまる?<br>
    <input name="q4" type="radio" value="3"> ぜんぜん
    <input name="q4" type="radio" value="2"> どちらでもない
    <input name="q4" type="radio" value="1"> あやまる
    </p>
</form>

と入力するッピよ~

ここまでのコード
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<script>
<!-- ↓②ここに判定プログラムを書こう!↓ -->

</script>
<!-- ↓①この下に問題文を入力してね!↓ -->
<h1>性格診断</h1>
<form id="Q">
    <p>甘いものが好き?<br>
    <input name="q1" type="radio" value="3"> 好き
    <input name="q1" type="radio" value="2"> 普通
    <input name="q1" type="radio" value="1"> 嫌い
    </p>
    <p>アウトドア派? インドア派?<br>
    <input name="q2" type="radio" value="3"> アウトドア派
    <input name="q2" type="radio" value="2"> どちらでもない
    <input name="q2" type="radio" value="1"> インドア派
    </p>
    <p>旅行でみっちり計画建てるほう?<br>
    <input name="q3" type="radio" value="3"> ぜんぜん
    <input name="q3" type="radio" value="2"> どちらでもない
    <input name="q3" type="radio" value="1"> みっちり
    </p>
    <p>ケンカしたらすぐあやまる?<br>
    <input name="q4" type="radio" value="3"> ぜんぜん
    <input name="q4" type="radio" value="2"> どちらでもない
    <input name="q4" type="radio" value="1"> あやまる
    </p>
</form>
<!-- ここまで! -->
</body>
</html>
ユウキ
ユウキ

できた~

判定ボタンを設置する

うさタブ
うさタブ

次は判定ボタンを設置するッピ!

ユウキ
ユウキ

お、楽しみだな~

<button>タグでボタンを作成する

うさタブ
うさタブ

まずはボタンをつくるッピ!

ユウキ
ユウキ

ボタンってコレ?

うさタブ
うさタブ

そのとおりッピ!

さっそく問題文の下判定ボタンを設置するッピよ~

うさタブ
うさタブ
<button onclick="answer();">性格診断!</button>
<div id="kotae">ボタンを押してください</div>

と入力するッピ!

ここまでのコード
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<script>
<!-- ↓②ここに判定プログラムを書こう!↓ -->

</script>
<!-- ↓①この下に問題文を入力してね!↓ -->
<h1>性格診断</h1>
<form id="Q">
    <p>甘いものが好き?<br>
    <input name="q1" type="radio" value="3"> 好き
    <input name="q1" type="radio" value="2"> 普通
    <input name="q1" type="radio" value="1"> 嫌い
    </p>
    <p>アウトドア派? インドア派?<br>
    <input name="q2" type="radio" value="3"> アウトドア派
    <input name="q2" type="radio" value="2"> どちらでもない
    <input name="q2" type="radio" value="1"> インドア派
    </p>
    <p>旅行でみっちり計画建てるほう?<br>
    <input name="q3" type="radio" value="3"> ぜんぜん
    <input name="q3" type="radio" value="2"> どちらでもない
    <input name="q3" type="radio" value="1"> みっちり
    </p>
    <p>ケンカしたらすぐあやまる?<br>
    <input name="q4" type="radio" value="3"> ぜんぜん
    <input name="q4" type="radio" value="2"> どちらでもない
    <input name="q4" type="radio" value="1"> あやまる
    </p>
</form>

<button onclick="answer();">性格診断!</button>
<div id="kotae">ボタンを押してください</div>
<!-- ここまで! -->
</body>
</html>
ユウキ
ユウキ

できた~!!

ユウキ
ユウキ

・・・だけどコレ、

ボタンを押してもうんともすんとも言わないぞ?

ユウキ
ユウキ

どうなってるんだ、うさタブ?

うさタブ
うさタブ

それはまだ【判定プログラム】を組み込んでいないからッピね

うさタブ
うさタブ

これから性格判定プログラムを作って、

ボタンを押したら呼び出す仕組みをつくっていくッピよ~

判定プログラムを作成する

うさタブ
うさタブ

ここから最後の解説に入るッピ!

一緒に性格診断プログラムをつくっていくッピね!

うさタブ
うさタブ

そのためにはまずボタンを押したらプログラムが動作するように、

プログラムのセットをつくる必要があるッピ!

ユウキ
ユウキ

知ってるぜ!

プログラムを他の場所で呼び出すためには、function関数を設定するんだよな

うさタブ
うさタブ

さすがユウキくんッピ!

さっそくfunction関数を設定して行くッピ!

function関数を作成する

うさタブ
うさタブ

<script></script>の間に

function answer(){
 //判定プログラムをここに組み込む
}

と入力するッピ!

この function anser{ }の中に、セットに組み込むプログラムを書いていくッピ!

うさタブ
うさタブ

これにくわえて、前に書いたボタンプログラム

<button onclick="answer();">性格診断!</button>

と組み合わせるとプログラムを呼び出すことができるんだッピ!

うさタブ
うさタブ

これは

<buttonボタンを設置します  onclickクリックしたら =”answer() このプログラムを実行して;“>性格診断!</buttonボタンを終わります>

という意味になるッピよ~

if文を使って判定プログラムを書き出す

うさタブ
うさタブ

ここは一気にプログラムを公開するッピ!

function answer(){ } の中に

function answer(){
    let Q= document.getElementById( "Q" );
    let A = Number(Q.q1.value) + Number(Q.q2.value) + Number(Q.q3.value) + Number(Q.q4.value);

    if (A >= 9) {
        text = "あなたは陽キャです。"
    }else if(A >= 4 && A <= 8){
        text = "あなたはふつうです。";
    }else{
        text = "あなたは陰キャです。";
    }
    document.getElementById("kotae").innerHTML = text;
}

と入力するッピ!

うさタブ
うさタブ

このコードについて詳しく解説していくッピよ~

valueを使って入力した値を呼び出す
うさタブ
うさタブ

この診断テストは、

選択肢にあてられた数値の合計によって性格の診断ができる

というものッピ!

ユウキ
ユウキ

っていわれても、わかんないなー

ユウキ
ユウキ

あ、もしかして

<input name="q1" type="radio" value="3"> 好き
<input name="q1" type="radio" value="2"> 普通
<input name="q1" type="radio" value="1"> 嫌い

のこと?

ユウキ
ユウキ

この

< input name=”q1″ type=”radio” value=”3” >

valueの後ろにある数字の合計が性格診断テストに使われてるかんじ??

うさタブ
うさタブ

そのとおりッピ! ユウキくん天才ッピ!

この

< input name=”q1” type=”radio” value=”3″ >

name で、選択肢をグループ分けをして、

< input name=”q1″ type=”radio” value=”3” >

で、選択したvalueの値を集計して診断してるんだッピ!

ユウキ
ユウキ

なるほどね~

うさタブ
うさタブ

だからこのプログラムを

< input name=”q1″ type=”radio” value=”3” >

で、JavaScriptで吸い出して計算する必要があるがあるんだッピ!

うさタブ
うさタブ

この

let Q= document.getElementById( "Q" );
let A = Number(Q.q1.value) + Number(Q.q2.value)....; 

ラジオボタンの選択データを取得(吸い取る)プログラムになるッピ!

うさタブ
うさタブ

これは

let Q変数Qを作成= document.id=”Q” のデータをgetElementById 変数Qに組み込みます( “Q” );

let A変数Aを作成 = Number文字データを数値変換 (QID(住所)Qの中の.q1 name=”p1″ .valueデータを取得します) + Number文字データを数値変換 (Q.q2.name=”p2”の valueデータを取得します)….;

という意味ッピね~

ユウキ
ユウキ

へ~

Number()で文字データを数値に変換する
ユウキ
ユウキ

なあうさタブ

この

Number文字の数変換(Q.q1.value)

って何?

ユウキ
ユウキ

なんで文字列を数値に変換する必要があるんだ?

うさタブ
うさタブ

それはッピね~

< input name=”q1″ type=”radio” value=”3” >

valueデータは、そのままだと【文字データ】だからッピ

うさタブ
うさタブ

つまり、このまま文字データだと【数値】として認識されないから

計算ができないんだッピよ~

ユウキ
ユウキ

そうなのか~

うさタブ
うさタブ

もし文字データのままだと

1+1=2

ではなくて

1+1=>11

になってしまうッピ!

ユウキ
ユウキ

へー

うさタブ
うさタブ

話をもどすッピ!

このNumber()を使うことで

let A = Number(Q.q1.value) + Number(Q.q2.value) + Number(Q.q3.value) + Number(Q.q4.value);

で選択したラジオボタンの数値を集計して最後に診断結果を表示することができるんだッピよ!

ユウキ
ユウキ

んーと、つまり

let A = Number(Q.q1.value質問の数値) + プラス  Number(Q.q2.value質問の数値) + プラス  Number(Q.q3.value質問の数値) + プラス  Number(Q.q4.value質問の数値);

・・・この変数A集計した結果の数字になるってことか!

うさタブ
うさタブ

ジャストライ! そのとおりッピ!

次はこの集計結果をもとに、診断結果をかえていく仕組みをつくっていくッピよ~

if文・>大なり・小なり<を使って範囲をしぼりこんでいく
うさタブ
うさタブ

次はif文で診断結果をしぼりこんでいくッピよ~

うさタブ
うさタブ
if (A >= 9) {
        text = "あなたは陽キャです。";
    }else if(A >= 4 && A <= 8){
        text = "あなたはふつうです。";
    }else{
        text = "あなたは陰キャです。";
    }

このプログラムで最後に診断結果を表示する変数textを変更するんだッピ!

うさタブ
うさタブ

ifもしも (A >= 9変数Aが9以上なら)
{ text変数textは = “あなたは陽キャです”; }

else ifもしもそれ以外で ( A >= 4Aが4以上で && さらに  A <= 8 Aが8以上なら)
{ text = “あなたはふつうです。”; }

elseそれ以外は【すべて】
{ text = “あなたは陰キャです。”; }

という意味ッピ!

ユウキ
ユウキ

つまり変数Aの数値が

9以上は「陽キャ」
以下以上なら 「ふつう」
それ以下の数値は「陰キャ」

になるってこと??

うさタブ
うさタブ

そのとおりッピ!

if (条件A &&さらに 条件B)

とすることで、複数の条件を当てはめて

結果をしぼりこむことができるんだッピよ~

getElementById(“住所ID”) でテキストを書き換える
うさタブ
うさタブ

最後はテキストの書き換えプログラムッピね!

document.getElementById("kotae").innerHTML = text;

で、いちばんうしろの文章を診断結果にかきかえることができるッピ!

うさタブ
うさタブ

これは

documentホームページ内の.getElement指定した部分ById(“kotae“). ID(住所)kotaeをinnerHTML 書き換えて = text変数textのなかみに;

という意味ッピよ~

ユウキ
ユウキ

できた~

全体のコードの確認

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<script>
<!-- ↓②ここに判定プログラムを書こう!↓ -->
function answer(){
    let Q= document.getElementById( "Q" );
    let A = Number(Q.q1.value) + Number(Q.q2.value) + Number(Q.q3.value) + Number(Q.q4.value);

    if (A >= 9) {
        text = "あなたは陽キャです。"
    }else if(A >= 4 && A <= 8){
        text = "あなたはふつうです。";
    }else{
        text = "あなたは陰キャです。";
    }
    document.getElementById("kotae").innerHTML = text;
}
</script>
<!-- ↓①この下に問題文を入力してね!↓ -->
<h1>性格診断</h1>
<form id="Q">
    <p>甘いものが好き?<br>
    <input name="q1" type="radio" value="3"> 好き
    <input name="q1" type="radio" value="2"> 普通
    <input name="q1" type="radio" value="1"> 嫌い
    </p>
    <p>アウトドア派? インドア派?<br>
    <input name="q2" type="radio" value="3"> アウトドア派
    <input name="q2" type="radio" value="2"> どちらでもない
    <input name="q2" type="radio" value="1"> インドア派
    </p>
    <p>旅行でみっちり計画建てるほう?<br>
    <input name="q3" type="radio" value="3"> ぜんぜん
    <input name="q3" type="radio" value="2"> どちらでもない
    <input name="q3" type="radio" value="1"> みっちり
    </p>
    <p>ケンカしたらすぐあやまる?<br>
    <input name="q4" type="radio" value="3"> ぜんぜん
    <input name="q4" type="radio" value="2"> どちらでもない
    <input name="q4" type="radio" value="1"> あやまる
    </p>
</form>

<button onclick="answer();">性格診断!</button>
<div id="kotae">ボタンを押してください</div>

<!-- ここまで! -->
</body>
</html>
学習のまとめ
  • <from>で問題文をつくる
  • <input type=”radio”>でラジオボタンをつくる
  • <button onClick=”関数名”>で、判定ボタンをつくる
  • 関数 funtcionでボタンを押すと呼び出すプログラムを作成する
  • Nunber()で、取得した要素を数字に変換する
  • if関数で判定プログラムを作成する
  • document.getElementById(“住所”).innerHTML でテキストを書き換える

うさタブ
うさタブ

上手くできたッピか?

これからも色んなゲーム作りやプログラムの解説をしていくッピ!

次回も楽しみにしているッピよ~~!

スポンサーリンク
スポンサーリンク
スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング教室がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅近所の教室がよいッピ!

うさタブ
うさタブ
テレビや雑誌に紹介された超有名教室
QUREOプログラミング教室とかどうッピか?

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのねっ!

うさタブ
うさタブ
キュレオプログラミング教室は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、確かな実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
 

「QUREOプログラミング教室」

小学2年生〜中学3年生 Scratch
HTML/CSS
JavaScript
全国各地
教室
無料体験◯
 

Tech Kids Online Coaching

小学1年生〜中学3年生 Scratch
C++
Unity
渋谷
またはオンライン
無料体験◯
 

Udemy

社会人 HTML/CSS
JavaScript
Python
講座購入
ブラウザ
アプリ
サンプル等◯
うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

ちびっこのみんな、スクールで
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング教室がオススメッピね~

アイカ
アイカ

プログラミング教室??

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

プログラミング教室は、やっぱり安心の近所の教室ッピ!

うさタブ
うさタブ

テレビや雑誌に紹介された超有名教室

プログラミング教室数国内No.1!「QUREOプログラミング教室」
とかどうッピか?

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのね

うさタブ
うさタブ
「QUREOプログラミング教室」は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 無料体験・カウンセリング
 

「QUREOプログラミング教室」

小学2年生〜中学3年生
教室で授業を受けたい方
Scratch
C++
JavaScript
無料体験◯
 

Tech Kids Online Coaching

小学生~中学生
オンライン授業を受けたい方
Unity
C++
Scratch
無料体験◯
Udemy
社会人
講座コースで勉強したい人向け
HTML/CSS
JavaScript
Python
サンプル等◯

うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

ちびっこのみんなは、スクールで
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

JavaScriptJSゲームJSゲームテクニックプログラミング
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました