みなさんこんにちは!おさかなです!
今回は「JSROBOT」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・ブラウザ上でJavaScriptを動かしたい方
・JavaScriptの基礎を学びたい方
・ゲーム感覚で楽しく学習したい方
「JSROBOT」って何?
「JSROBOT」とは、(@reaalkhalil)さんが開発した、PC上でロボットを動かしながら「JavaScript」が学べるサイトのことです。チュートリアル付きで遊びながら、JSの基礎が学べます!(面白い!)
#JSRobot 🤖 New features coming soon! Yup.. that’s a portal pic.twitter.com/u3w5PoQLdI
— Reaal (@reaalkhalil) December 7, 2017
![](https://osakanav.com/wp-content/uploads/2022/03/bitburner-top-160x90.png)
実際に使ってみよう!
基本操作
それでは早速サイトにアクセスしましょう!
![](https://osakanav.com/wp-content/uploads/2022/10/jsrobot.png)
まずは「Start」ボタンをクリック!(えーい!)
![](https://osakanav.com/wp-content/uploads/2022/10/jsrobot-btn.png)
すると…このような「学習画面」が表示されます。
![](https://osakanav.com/wp-content/uploads/2022/10/jsrobot-page.png)
「Script」タブに切り替えると…?
![](https://osakanav.com/wp-content/uploads/2022/10/jsrobot-script.png)
こんな感じで「コードの入力画面」が表示されます!(おー!)
![](https://osakanav.com/wp-content/uploads/2022/10/jsrobot-edit.png)
「Console」タブでは…?
![](https://osakanav.com/wp-content/uploads/2022/10/jsrobot-ctab.png)
「コンソール」が表示されます。
![](https://osakanav.com/wp-content/uploads/2022/10/jsrobot-console.png)
「Properties」タブに切り替えると…?
![](https://osakanav.com/wp-content/uploads/2022/10/jsrobot-ptab.png)
「プロパティ」が確認できます。(ふむふむ…。)
![](https://osakanav.com/wp-content/uploads/2022/10/jsrobot-pr.png)
ページ上部にある「Run」ボタンを押すと、プログラムを実行できます!(よし!)
![](https://osakanav.com/wp-content/uploads/2022/10/jsrobot-run.png)
(寒いから温かくしてね…🔥)
レベル1を攻略しよう!
それではチュートリアルに沿って、課題を進めていきましょう!(おー🚩)
まずはコンソールで「5+3」と入力……(どんな計算式でもOKです)
![](https://osakanav.com/wp-content/uploads/2022/10/jsrobot-five.png)
「Run」ボタンを押して実行すると…こんな感じで「8」と、計算結果が表示されます。
![](https://osakanav.com/wp-content/uploads/2022/10/jsrobot-hati.png)
他にもチュートリアル内に記述されていた、色々なプロパティを実行してみました…!(いえい)
![](https://osakanav.com/wp-content/uploads/2022/10/jsrobot-more.png)
ちなみに「robot.info().x」の値が「80」、「robot.info().y」の値が「279 .13…」であることから、ロボットの位置座標が(x=80)(y=279 .13…)だとわかりました。(メモメモ…)
![](https://osakanav.com/wp-content/uploads/2022/10/jsrobot-robot.png)
続いて「Script」タブへと切り替えて、それぞれの関数の動きを見てみます。
まず1つ目の「init関数」内に、console.logを記述すると…?
![](https://osakanav.com/wp-content/uploads/2022/10/jsrobot-hello.png)
こんな感じで、Consoleに「Hello Navi!」とテキストが表示されました!(パチパチ👏)
![](https://osakanav.com/wp-content/uploads/2022/10/jsrobot-navi.png)
先ほどと同じコードを、今度は2つ目の「loop関数」へと入れてみます!(えいやー!)
![](https://osakanav.com/wp-content/uploads/2022/10/jsrobot-console1.png)
すると先程とは違い、テキストが複数表示されていることがわかります。
このように2つ目のloop関数では、同じ動作を繰り返す(ループ処理)が使えます!(なるほど!)
![](https://osakanav.com/wp-content/uploads/2022/10/jsrobot-loop.png)
これを応用して、ロボットくんを動かします。
1つ目の「init関数」に、ロボットを動かすプログラムを記述すると…1歩だけ進みます!笑
![](https://osakanav.com/wp-content/uploads/2022/10/jsrobot-move.gif)
これを2つ目の「loop関数」で繰り返して実行すると、こんな感じでロボットが前進しましたー!(やったー✨)
![](https://osakanav.com/wp-content/uploads/2022/10/robotjs.gif)
(ロボットくん万歳してて可愛い✨)
![](https://osakanav.com/wp-content/uploads/2022/10/robotjs-next.png)
![](https://osakanav.com/wp-content/uploads/2022/10/dengen-top-160x90.png)
レベルアップ……どんどん進めよう!
「Next Level」を押すと、次の課題へと進めます。(わー!)
![](https://osakanav.com/wp-content/uploads/2022/10/jsrobot-kaidan.png)
レベル2では「階段」のようなステージを進む処理を書いてきます!(ゲームっぽくなってきた)
![](https://osakanav.com/wp-content/uploads/2022/10/jsrobot-lv2.gif)
レベル3では、落ちたらライフが減りそうな「凸凹ステージ」…。
![](https://osakanav.com/wp-content/uploads/2022/10/jsrobot-dekoboko.png)
ここでは「ジャンプ」という新しい動きを付けることで、クリアしました〜!(やったぜ★)
![](https://osakanav.com/wp-content/uploads/2022/10/jsrobot-jump.gif)
レベル4では、解説がなく自力で解くスタイルとなっています。(頑張るぞー🚩)
![](https://osakanav.com/wp-content/uploads/2022/10/jsrobot-nohint.png)
今までの知識を活用して……なんとか障害物を避けつつクリアできました!
更にレベルが上がると「API」などの技術も出てくるので、JavaScriptの基礎を学びたい方はぜひ遊んでみてください。(お疲れ様でした🍮)
![](https://osakanav.com/wp-content/uploads/2022/10/jsrobot-lv3.gif)
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
おさかなは浮遊するから、秒速クリアーっ!!
![ナビまる](https://osakanav.com/wp-content/uploads/2019/09/navmaru-2.jpg)
チートやめろ!笑
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!
![](https://osakanav.com/wp-content/uploads/2021/07/deep-javascript-160x90.jpg)