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

JavaScript

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

うさタブ
うさタブ

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

ユウキ
ユウキ

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

うさタブ
うさタブ

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

【相手】

       

【あなた】

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

<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>
うさタブ
うさタブ

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

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

うさタブ
うさタブ

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

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

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

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

うさタブ
うさタブ

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

ユウキ
ユウキ

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

うさタブ
うさタブ

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

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

うさタブ
うさタブ

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

うさタブ
うさタブ

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 で指定した場所の、画像を差し替えることができる
スポンサーリンク
スポンサーリンク
スポンサーリンク

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

 

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんなは、キュレオプログラミング教室がオススメッピ!

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

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
コース買い切り
講座によってサンプル○
Unityゲーム講座アリ
 

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

小学2年生〜中学3年生 Scratch 全国各地
2500教室
無料体験◯
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
東京都,神奈川,埼玉県,千葉
オンライン
無料体験◯
3Dプリントなどの講座によっては別途料金

ユウキ
ユウキ

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

アイカ
アイカ

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

スポンサーリンク

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

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

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

うさタブ
うさタブ

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

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

うさタブ
うさタブ

全国2500教室もあるから、

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

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

ユウキ
ユウキ

なんだこれ! スゲーなっ

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

アイカ
アイカ

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

うさタブ
うさタブ

ロボットをプログラミングしてみるなら

LITALICOワンダーがオススメッピ!

JavaScriptも勉強できるッピよ~!

教室名 対象 学習言語 無料体験/教室場所
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
講座によってサンプル○
「QUREOプログラミング教室」
小学2年生〜中学3年生 Scratch 教室によって無料体験◯
全国各地の教室
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
無料体験◯
3Dプリントなどの講座によっては別途料金
東京周辺
オンライン

ユウキ
ユウキ

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

アイカ
アイカ

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

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