JavaScript入門講座|じゃんけんゲームを作ろう

JavaScript
この記事で学べること
  • グー / チョキ/ パー の3つの変数をまとめたリスト配列の作り方
  • Function関数によるプログラムセットの作り方
  • 乱数(ランダム)数字の作り方
  • プログラムを呼び出すボタンの設置
  • if 文による 勝ち負け判定
  • じゃんけんゲームに画像をつける

じゃんけんゲームの作り方

うさタブ
うさタブ

今回はじゃんけんゲームの作り方を紹介するッピよ~!

ユウキ
ユウキ

じゃんけんか~ 楽しみだなー

じゃんけんゲームの全体コード

<html>
<head>
    <script>
        
    function R_Click(p_janken_r) {
        let janken = ['グー','チョキ','パー',];//"janken"のリストを作成します。
        let janken_r = Math.floor( Math.random() * 3);//Math.random() で乱数を作ります

        let p_janken = ['グー','チョキ','パー'];//"プレイヤーのjanken"のリストを作成します。
            //勝ち負けの判定機プログラムです
            if (janken_r === p_janken_r) {
                Result_end = "あいこです";
            } else if(p_janken_r === 0 && janken_r === 1) {
                Result_end = "あなたの【勝ち】";
            }else if(p_janken_r === 1 && janken_r === 2) {
                Result_end = "あなたの【勝ち】";
            }else if(p_janken_r === 2 && janken_r === 0) {
                Result_end = "あなたの【勝ち】";
            }else {
                Result_end = "あなたの【負け】";
            }

            //結果を表示するためのプログラムです
            document.getElementById("jankenpon").src="jan" + janken_r + ".png";
            document.getElementById("Rejan1").innerHTML = p_janken[p_janken_r] +"を選択しました。ジャンケンの結果は・・・?";
            document.getElementById("Rejan2").innerHTML = "相手は" + janken[janken_r] + Result_end;
  document.getElementById("jankenpon2").src="jan" + p_janken_r + ".png";
        }

    </script>
</head>
<body>
    <p><img id="jankenpon" src="jan.png" width="100" height="100"></p>
    <button onclick="R_Click(0);"> グー</button>
    <button onclick="R_Click(1);"> チョキ</button>
    <button onclick="R_Click(2);"> パー</button>
    <br />
    <p><img id="jankenpon2" src="jan.png" width="100" height="100"></p>
    <div id="Rejan1"></div>
    <div id="Rejan2"></div>
</body>
</html>
うさタブ
うさタブ

完成品はこんな感じッピネ~

【相手】

       

【あなた】

うさタブ
うさタブ

用意するものはいつものメモ帳と、インターネットが見れるブラウザだけッピ!

ブラウザはこのネットを見るためにすでに使っているから、このサイトが見られれば問題ないッピよ~!

うさタブ
うさタブ

このプログラムをひとつひとつ、わかりやすく解説しながら作っていくッピ!

楽しみにしてるッピヨ~!

グー・チョキ・パーの【リスト配列】を作ろう

うさタブ
うさタブ

まずはグー・チョキ・パー配列リストを作るッピよ~!

ユウキ
ユウキ

配列リスト? ってなんだっけ・・・

うさタブ
うさタブ

最初に、変数を例えるなら『箱』

箱の中には『お手紙』が入っている・・・と言ったッピね?

うさタブ
うさタブ

配列リストは、何通かある●●さんからのお手紙まとめたような感じッピ!

うさタブ
うさタブ

let 変数名 = [ リスト1, リスト2, リスト3, ];

で作れるッピヨ~!

ユウキ
ユウキ

あ~ 前にやったなあ! 思い出した!

うさタブ
うさタブ

さっそく作ってみるッピよ~

下のコードをベースにJavaScriptを記述するッピ!

サンプルコード

<html><!- ここからホームページがはじまるとコンピュータにお知らせする  ->
<head>

</head><!- ↑見えない部分の設定・骨組み  ->
<body><!-  ↓見えるところの設定・看板  ->

</body>
</html>
うさタブ
うさタブ

次は<head></head>の中に、

<script>
        let janken = ['グー','チョキ','パー'];
</script>

と記述するッピ!

うさタブ
うさタブ

これは

let janken変数jankenをつくります = [‘リストの中身はグー‘,’チョキ‘,’パー];です

という意味になるッピ!

ユウキ
ユウキ

<body></body>の中じゃないんだな!

うさタブ
うさタブ

もう<body></body>は卒業ッピ!

今度は見えない部分<head></head>にプログラムを仕込んで、スマートにプログラミングするッピよ~!

ここまでのコード
<html><!- ここからホームページがはじまるとコンピュータにお知らせする  ->
<head>
<script>
        let janken = ['グー','チョキ','パー'];//"janken"のリストを作成します。
</script>
</head><!- ↑見えない部分の設定・骨組み  ->
<body><!-  ↓見えるところの設定・看板  ->

</body>
</html>
ユウキ
ユウキ

何も表示されないな・・・

うさタブ
うさタブ

<head></head>の中は、ホームページには表示されない裏方の部分ッピからネ・・・

<head></head>のプログラムを呼び出すために、呼び出しボタンFunction関数を作るッピよ~!

プログラムセット・Function関数を作ろう

ユウキ
ユウキ

ところで、Function関数ってなんだっけ?

うさタブ
うさタブ

Function関数というのは、プログラムのセットのことッピ!

プログラムセットをあらかじめ作っておくことで、好きなときにプログラムを呼び出すことができるッピ!

うさタブ
うさタブ

さっそくそのFunction関数でプログラムセットを作るッピよ~!

function 関数名 () { 命令文;}

で作ることができるッピ!

うさタブ
うさタブ

サンプルはこんな感じッピよ~

<head></head>の間にはこのコードを入れるッピ。

<script>

    function R_Click() {

        let janken = ['グー','チョキ','パー'];
        let janken_r = Math.floor( Math.random() * 3);

        document.getElementById("Rejan2").innerHTML = "相手は" + janken[janken_r] + "を出しました";

        }

</script>

プログラムを動かすボタンを設置しよう

うさタブ
うさタブ

見える部分・・・<body></body>にはこのコードを入れるッピ

<body>
    <button onclick="R_Click();"> ジャンケンする</button>
    <div id="Rejan2"></div>
</body>
<html><!- ここからホームページがはじまるとコンピュータにお知らせする  ->
<head>
<script>

    function R_Click() {

        let janken = ['グー','チョキ','パー'];//"janken"のリストを作成します。
        let janken_r = Math.floor( Math.random() * 3);//Math.random() で乱数を作ります
	document.getElementById("Rejan2").innerHTML = "相手は" + janken[janken_r] + "を出しました";//id="Rejan2"という場所でプログラムを動作します。コンピュータが何を出したか書き出す命令文です。

        }

</script>
</head>
<!- ↑見えない部分の設定・骨組み  ->


<!-  ↓見えるところの設定・看板  ->
<body>
    <button onclick="R_Click();"> ジャンケンする</button>
    <div id="Rejan2"></div>
</body>
</html>
ユウキ
ユウキ

おおおお! なんか出た!

うさタブ
うさタブ

ふふふふ、まだまだ終わらないッピヨ!

しかしまず、今回使った命令文タグの解説をするッピネ~

関数にいれたプログラム・乱数について

うさタブ
うさタブ

まずはランダムな数字を作る命令文・・・これは、

let janken_rjanken_r という変数を作ります = Math.floor小数点を切り捨て整数にします ( Math.random( ) * 30,1,2, の 3つ の パターン(乱数)を作成します) ;

という意味ッピね~。 janken_r の _r はランダムの r ッピ!

ユウキ
ユウキ

これはサイコロゲームでもやったな!

ユウキ
ユウキ

小数点を切り捨てないと、3.14159265…とかになっちゃうんだっけ?

うさタブ
うさタブ

そのとおりッピ!
かならず Math.floor を使って整数をつくるッピよ~

関数にいれたプログラム・HTMLの書き出しについて

うさタブ
うさタブ

次はHTMLの書き出し・・・

document.プログラムを動作しますgetElement 指定した ById(“Rejan2“)id=”Rejan2″ という場所で.

innerHTMLHTMLデータの書き換えます = “相手は” + janken リストjankenの中の [janken_r乱数の結果 0,1,2, の中の1つ] + “を出しました” ;

という感じッピね~

ユウキ
ユウキ

let janken = [“グー”,”チョキ”,”パー”,]; みたいな配列リストには、あらかじめ番号が振ってあって

  • janken[0] = “グー”  //0番目
  • janken[1] = “チョキ” //1番目
  • janken[2] = “パー”  //2番目

って意味なんだよな!

うさタブ
うさタブ

そのとおりッピ! だから、

janken [ janken_r ] //ランダムに選択されたグー・チョキ・パーのどれかひとつ

ということになるッピ!

<html><!- ここからホームページがはじまるとコンピュータにお知らせする  ->
<head>
<script>

    function R_Click() {

        let janken = ['グー','チョキ','パー'];//"janken"のリストを作成します。
        let janken_r = Math.floor( Math.random() * 3);//Math.random() で乱数を作ります
	document.getElementById("Rejan2").innerHTML = "相手は" + janken[janken_r] + "を出しました";

        }

</script>
</head>
<!- ↑見えない部分の設定・骨組み  ->


<!-  ↓見えるところの設定・看板  ->
<body>
    <button onclick="R_Click();"> ジャンケンする </button>
    <div id="Rejan2"></div>
</body>
</html>

プログラムを作動させるボタンについて

うさタブ
うさタブ

次はプログラムを呼び出すボタンッピね~

これはHTMLタグッピ!

うさタブ
うさタブ

<buttonボタンをつくります   onclickクリックしたら=“R_Click();”R_Clickというプログラムセットを動かします> ジャンケンする </button> ボタンを終了します

という意味ッピね~

うさタブ
うさタブ

次のdivは、

<divここからdivブロックです id =”Rejan2 id=”Rejan2″という場所です></divdivを終わります>

という意味ッピ!

ユウキ
ユウキ

何回もやってるからバッチリだよ!

この<div id=”Rejan2″>って場所に、このJavaScript命令文が動作するんだよな!

うさタブ
うさタブ

そのとおりッピ!

document命令実行して.getElementById指定する場所は(“Rejan2”).innerHTMLそのHTMLを書き換えて=””

という命令文Rejan2という場所を指定してプログラムを動かしているんだるッピ!

勝ち負けの判定機をつくろう

うさタブ
うさタブ

次は勝ち負けの判定を作るッピよ~

ユウキ
ユウキ

ついに勝負をつけるのか! ワクワクするな~

うさタブ
うさタブ

ふふふふ、プログラミングの力をみるッピよ!

ここは一気にサンプルコードを公開するッピ!!

<html><!- ここからホームページがはじまるとコンピュータにお知らせする  ->
<head>
<script>  
    function R_Click() {
        let janken = ['グー','チョキ','パー',];//"janken"のリストを作成します。
        let janken_r = Math.floor( Math.random() * 3);//Math.random() で乱数を作ります

        let p_janken = ['グー','チョキ','パー'];//"プレイヤーのjanken"のリストを作成します。
        let p_janken_r = Math.floor( Math.random() * 3);//Math.random() で乱数を作ります★

            //勝ち負けの判定機プログラムです
            if (janken_r === p_janken_r) {
                Result_end = "あいこです";
            } else if(p_janken_r === 0 && janken_r === 1) {
                Result_end = "あなたの【勝ち】";
            }else if(p_janken_r === 1 && janken_r === 2) {
                Result_end = "あなたの【勝ち】";
            }else if(p_janken_r === 2 && janken_r === 0) {
                Result_end = "あなたの【勝ち】";
            }else {
                Result_end = "あなたの【負け】";
            }

            //結果を表示するためのプログラムです
            document.getElementById("Rejan1").innerHTML = p_janken[p_janken_r] +"を選択しました。ジャンケンの結果は・・・?";
            document.getElementById("Rejan2").innerHTML = "相手は" + janken[janken_r] + Result_end;
        }
</script>
</head>
<!- ↑見えない部分の設定・骨組み  ->


<!-  ↓見えるところの設定・看板  ->
<body>
    <button onclick="R_Click();> ジャンケンする </button>
    <div id="Rejan1"></div>
    <div id="Rejan2"></div>
</body>
</html>
ユウキ
ユウキ

おおおおお! すげええええ勝った!

ユウキ
ユウキ

でもこれ、オレは何もしてないよ? グーもチョキも出してないし

うさタブ
うさタブ

そうッピよね~。これは、

let p_janken = ['グー','チョキ','パー'];//"プレイヤーのjanken"のリストを作成
let p_janken_r = Math.floor( Math.random() * 3);//Math.random() で乱数を作る★

で、自分も相手も、『何を出すか』コンピュータが勝手に決めている状態ッピ。

やっぱり自分で何を出すか決めたいッピよね・・・

うさタブ
うさタブ

そんな時はズバリ、『グー・チョキ・パー』分のボタン用意するッピ!

グー / チョキ / パー の3つのボタンを設置しよう

うさタブ
うさタブ

まずは、プレイヤーが何を出すか・・・

勝手に決めてる命令文を削除するッピ!

うさタブ
うさタブ
let p_janken_r = Math.floor( Math.random() * 3);//Math.random() で乱数を作る★

というjavascriptコードと

<button onclick="R_Click();"> ジャンケンする </button>

HTMLの『ジャンケンする』ボタンを消すッピ!

うさタブ
うさタブ

さらに、

<button onclick="R_Click(0);"> グー</button>
<button onclick="R_Click(1);"> チョキ</button>
<button onclick="R_Click(2);"> パー</button>

で、HTMLに新しく3つのボタンを作るッピよ~

ユウキ
ユウキ

オッケー!

うさタブ
うさタブ

そしてここがポイント!

最初のjavascriptのfunction関数

function R_Click ( ) { 命令文 ;}

に 【引数】を入れるッピ!

ユウキ
ユウキ

引数~?

うさタブ
うさタブ

今までは、コンピュータが仮に、『プレイヤー』がジャンケンで何を選んだか?を設定したッピが、

今度は【引数を設定することによって、プレイヤーが自分で選んだか?結果を変えることができるッピ!!

ユウキ
ユウキ

全くわからん・・・

うさタブ
うさタブ

難しいことは無視するッピ・・・単純に最初の関数

function R_Click ( p_janken_r ) { 命令文 ;}

と、( ) の中にp_janken_r』入れるだけッピよ~!

ユウキ
ユウキ

ふーん・・・よく分かんないけど、とりあえずやってみるか・・・


    function R_Click(p_janken_r) {
        let janken = ['グー','チョキ','パー',];//"janken"のリストを作成します。
        let janken_r = Math.floor( Math.random() * 3);//Math.random() で乱数を作ります

       //..........(以下省略)
        }
<html>
<head>
    <script>
        
    function R_Click(p_janken_r) {
        let janken = ['グー','チョキ','パー',];//"janken"のリストを作成します。
        let janken_r = Math.floor( Math.random() * 3);//Math.random() で乱数を作ります

        let p_janken = ['グー','チョキ','パー'];//"プレイヤーのjanken"のリストを作成します。
            //勝ち負けの判定機プログラムです
            if (janken_r === p_janken_r) {
                Result_end = "あいこです";
            } else if(p_janken_r === 0 && janken_r === 1) {
                Result_end = "あなたの【勝ち】";
            }else if(p_janken_r === 1 && janken_r === 2) {
                Result_end = "あなたの【勝ち】";
            }else if(p_janken_r === 2 && janken_r === 0) {
                Result_end = "あなたの【勝ち】";
            }else {
                Result_end = "あなたの【負け】";
            }

            //結果を表示するためのプログラムです
            document.getElementById("Rejan1").innerHTML = p_janken[p_janken_r] +"を選択しました。ジャンケンの結果は・・・?";
            document.getElementById("Rejan2").innerHTML = "相手は" + janken[janken_r] + Result_end;
        }

    </script>
</head>
<body>
    <button onclick="R_Click(0);"> グー</button>
    <button onclick="R_Click(1);"> チョキ</button>
    <button onclick="R_Click(2);"> パー</button>
    <br />
    <div id="Rejan1"></div>
    <div id="Rejan2"></div>

</body>
</html>
ユウキ
ユウキ

おおおおおっ! ちゃんとボタンもできてる!!

勝負もできてるよ!!

今回使ったコードの解説

うさタブ
うさタブ

今回つかった命令文の説明をするッピよ~!

勝ち負けを作るためのプレイヤーリスト作り

うさタブ
うさタブ

まずは

let p_jankenp_janken というリストを作ります = [“グー”,”チョキ”,”パー”,];内容は グー・チョキ・パー です

という命令文でプレイヤー側が何を出すかというリストを作るッピネ!

勝ち負けを作るための判定作り(if文)

うさタブ
うさタブ

そして次がジャンケンの大事な部分!

勝ち負けを決める『判定機』づくりッピ!

うさタブ
うさタブ

リストの中身には、あらかじめ 0.1.2.3.4.5…..という数字が割り振られているというのは知っているッピネ?

ユウキ
ユウキ

ああ! 前に勉強したからな~

ユウキ
ユウキ

let janken = [“グー”,”チョキ”,”パー”,]; みたいな配列リストには、あらかじめ番号が振ってあって

  • janken[0] = “グー”
  • janken[1] = “チョキ”
  • janken[2] = “パー” 

って意味なんだよな!

うさタブ
うさタブ

今回は、その数字if文を利用して

勝負の判定】を決めるッピよ~

うさタブ
うさタブ

例えば最初の

ifもしも  (janken_r === p_janken_r janken_r と p_janken_r の【数字】が同じだったら) { Result_end =“あいこです” ; Result_end という【変数】は “あいこです”}

という意味ッピ!

うさタブ
うさタブ

次の else if文はこういう意味ッピネ!

else ifもしも上の条件以外で  (p_janken_r === 0p_janken_r(プレイヤー) が 0 (グー)で && さらに  janken_r === 1) janken_r(コンピュータ)が 1(チョキ)なら

{Result_end =あなたの【勝ち】“;}

うさタブ
うさタブ

まず プレイヤー側の勝ちを設定して、最後に

else それ以外のすべては{Result_end = “あなたの【負け】”; }

を加えれば完成ッピ!

ユウキ
ユウキ

へ~ 勝ち負けの判定ってこうやって作ってるのか!

ユウキ
ユウキ

プログラミングってスゲーんだな~

ボタンで好きなの引数を呼び出そう

うさタブ
うさタブ

あとは、プレイヤー側が

グー・チョキ・パーの何を出すか? というのを決めるッピ!

うさタブ
うさタブ

これはボタン側を

<button onClick=”R_Click( 0 );> グー </button >
<button onClick=”R_Click( 1 );”> チョキ </button >
<button onClick=”R_Click( 2 );”> パー </button >

として、最初の関数

Function R_Click (p_janken_r) { ;}

とすることで解決したッピ!

ユウキ
ユウキ

この<botton onClick=”R_Click( 数字 );” />

に入れた数字が、function R_Click( p_janken_rプレイヤー側の数字 ) になるのか?

うさタブ
うさタブ

そうッピね!

ボタンを押すと、自動的に0,1,2,の中で何の数字を選んだか・・・

グー・チョキ・パーの何を選んだかがコンピュータ側に送信される仕組みッピ!

うさタブ
うさタブ

つまり、

function R_Click( p_janken_r )

<button onClick=”R_Click(変数の値);> ボタンの名前 </button >

の組み合わせで、

let変数 p_janken_r = プレイヤーが選択したボタンの 変数 に代入(箱の中に要素を入れる)ことができるッピ!

じゃんけんの画像を表示しよう

うさタブ
うさタブ

最後はジャンケンの画像をつけてみるッピヨ~!

ユウキ
ユウキ

サイコロゲームでもやったから、これは簡単そうだな!

画像を用意しよう

うさタブ
うさタブ

今回もジャンケンの画像を用意したッピね~

上の画像を右クリックで保存するッピ!

うさタブ
うさタブ

画像はHTMLファイルと同じ場所において、

上の画像のように同じ場所に置くッピ!

うさタブ
うさタブ

<head></head>の中の

Function R_Click( ) { 命令文;} の中に、下のコードを入れるッピ!

document.getElementById("jankenpon").src="jan" + janken_r + ".png";

<body></body>の中には、画像を表示するためのタグ

<p><img id="jankenpon" src="jan.png" width="100" height="100"></p>

を入力するッピよ~!

ユウキ
ユウキ

できた~~~!

うさタブ
うさタブ

あとは最後の仕上げッピね!

<script></script>に↓を追加して

document.getElementById("jankenpon2").src="jan" + p_janken_r + ".png";

<body></body>

<p><img id="jankenpon2" src="jan.png" width="100" height="100"></p>

を入れると、お互い何を出したか見えるッピ~!

全体のコード確認

<html>
<head>
    <script>
        
    function R_Click(p_janken_r) {
        let janken = ['グー','チョキ','パー',];//"janken"のリストを作成します。
        let janken_r = Math.floor( Math.random() * 3);//Math.random() で乱数を作ります

        let p_janken = ['グー','チョキ','パー'];//"プレイヤーのjanken"のリストを作成します。

            //勝ち負けの判定機プログラムです
            if (janken_r === p_janken_r) {
                Result_end = "あいこです";
            } else if(p_janken_r === 0 && janken_r === 1) {
                Result_end = "あなたの【勝ち】";
            }else if(p_janken_r === 1 && janken_r === 2) {
                Result_end = "あなたの【勝ち】";
            }else if(p_janken_r === 2 && janken_r === 0) {
                Result_end = "あなたの【勝ち】";
            }else {
                Result_end = "あなたの【負け】";
            }

            //結果を表示するためのプログラムです
            document.getElementById("jankenpon").src="jan" + janken_r + ".png";
            document.getElementById("Rejan1").innerHTML = p_janken[p_janken_r] +"を選択しました。ジャンケンの結果は・・・?";
            document.getElementById("Rejan2").innerHTML = "相手は" + janken[janken_r] + Result_end;
  document.getElementById("jankenpon2").src="jan" + p_janken_r + ".png";
        }

    </script>
</head>
<body>
    <p><img id="jankenpon" src="jan.png" width="100" height="100"></p>
    <button onclick="R_Click(0);"> グー</button>
    <button onclick="R_Click(1);"> チョキ</button>
    <button onclick="R_Click(2);"> パー</button>
    <br />
    <p><img id="jankenpon2" src="jan.png" width="100" height="100"></p>
    <div id="Rejan1"></div>
    <div id="Rejan2"></div>
</body>
</html>
うさタブ
うさタブ

上手くできたッピか?

次回も色んなゲームを作っていくッピ! 楽しみにしてるッピよ~

学習のまとめ
  • let 変数名 = [ 配列1, 配列2,配列3, ] ; でリストを作成できる
  • Function 関数名() { ;}によって、プログラムのセット関数を作ることができる
  • HTMLタグ <button onClick=”関数名”> で、プログラムを作動させるボタンを作ることができる
  • if / else文 で勝ち負けの判定ができる
  • document.getElementById( “id名” ).innerHTML =で、 id で指定した場所の、文字を書き換えたりタグを書き換えたりできる
  • document.getElementById( “id名” ).src =で、 id で指定した場所の、画像を差し替えることができる
スポンサーリンク
スポンサーリンク
スポンサーリンク

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

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

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

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

うさタブ
うさタブ
テレビや雑誌に紹介された超有名教室
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ゲームプログラミング
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました