平成最後の Linux デスクトップ環境

慶應義塾大学ロボット技術研究会その2 17日目

こんにちは、mt_caretです。Linux デスクトップ環境 2017 – k0kubun’s blog に影響されようかと思ったらLinux デスクトップ環境 2018 – 遺言書Linux デスクトップ環境 2018 が既にあったのでタイトルを変えてみました。

ということで、統計的学習の次は、またもやロボットに大変関係があるLinuxデスクトップ環境について書いていこうと思います。

淡々とした紹介に加えて、エヴァンジェリズムっぽい内容を交互に入れていくので取捨選択して読んでいって下さい。

Continue reading “平成最後の Linux デスクトップ環境”
広告

VS Codeをカスタマイズ

慶應義塾大学ロボット技術研究会その1

こんにちは、一年のbesshyです。F3RCでは制御班に所属していました。今はNHKロボコンにむけて手動機の足回り制御を手伝わせてもらっています。

さて、今回はVS Codeについて書こうと思います。皆さんはVS Codeを使ってますか?VS Code(Visual Studio Code)はMicrosoftが提供しているエディタです。ただのエディタですが、見た目もかっこいいですし、使い勝手もよくておすすめです。クロスプラットフォームで、多数の言語をサポートしており、構文ハイライトやIntelliSenseサポートもついています。今回は今僕がいれているVS Codeの拡張機能についてまとめようと思います。

まずはじめに

今回紹介する拡張機能についてインストール方法をすべて書いていくと終わりそうもないので、詳しいインストール方法は割愛します。詳しいインストール方法は他サイトを参照してください。ざっくり説明するとアクティビティバー(画面の一番左)の一番下のアイコンが拡張機能というアイコンになっているはずなのでそれを押すと、サイドバーに検索ボックスが表示されます。そこで入れたい拡張機能を検索すればokです。

デフォルトだとこんな感じです。

vscodedefo2

これだけでも結構使いやすいエディタですが、ここから拡張機能を追加していきます。

PlatformIO IDE

簡単に言うとマイコンにプログラムを書き込める拡張機能です。

platformIO3

インストール画面はこんな感じです。僕はすでにこの拡張機能が入っていてインストールのボタンが表示されていませんが、インストールされていない状態だと緑色のインストールボタンが表示されていると思います。

platform1

インストール後はこんな感じです。上の画面で右上のNew Projectを選択します。

platform2

プログラム名と使うマイコンボードを566種類の中から選択することができます。これで新しいプロジェクトが作られるとコーディングできるようになり、書いたコードをマイコンに書き込むことができます。皆さんが普段つかっているmbedのcompilerはブラウザ上でしかつかえないので、wifiの状態が悪い場所では使えませんがこの拡張機能があれば基本的にどこでもマイコンにプログラムを書き込めます。作業場所に困ることが減るかもしれませんね。

Bracket Pair Colorizer

ペアとなる括弧を同じ色に色付けしてくれる拡張機能です。特に式などを書いたときに括弧の対応がわかりやすくなるので、結構便利です。

bracket1

bracket2

こんな感じに括弧が色付けされて見やすいし綺麗です。

indent-rainbow

各行の先頭にあるインデント(空白)を深さごとに色付けしてくれます。

indent1

indent2

こんな感じです。(なんか16行目にインデントがある。(笑))

変なインデントがあると濃い赤色で表示されるため綺麗なコーディングができます。

Dracula Official

これは好き嫌いに個人差があるかもしれませんが、VS Codeの背景のテーマの拡張機能です。これをいれると下の写真のようになります。

dracula1

dracula2

シックな感じになって個人的にはおすすめです。

VS Live Share

今回この記事を書こうと思うきっかけになった拡張機能です。これはいわゆるペアプログラミングが遠隔の人とできる拡張機能で、コードの共同編集ができます。今年の5月にパブリックレビューが公開され、新しく追加されました。

vsliveshare

liveshare2

一緒にコードを書いてくれる友達がいなかったので結構悲しい感じ(笑)になってしまいましたが、上の写真の左右は別々の人と考えてください(toshiki0113-rogikenが2人いますね)。同じコードを複数人で書くことができて、コードを書いている場所に書いている人の名前がリアルタイムに表示されます。Slackなどをとなりに表示させて会話しながら一緒にコードを書くもよし、教育にもつかえそうな機能です。

 

おまけ

waka time・・・作業時間を自動で計測して、可視化してくれる拡張機能です。wakatimeでのアカウント登録が必要になります。

Image preview・・・コメントアウトに画像のURLを埋め込むことができる拡張機能です。URLの部分にカーソルを持っていくとその画像が表示されます。複雑な式をコメントに含めないといけないときに便利です。ネタ画像を含めたい人にもおすすめです(笑)。

background・・・僕はまだいれていないんですが、背景に画像を埋め込める拡張機能みたいです。目の保養のためにアニメキャラクターを設定している記事が多く見つかります。(笑)

他にもいろんな拡張機能があると思うので、自分好みにカスタマイズしてみると面白いとおもいます。

 

CADデータでもバージョン管理がしたい! ~GrabCAD Workbenchを使ってみる~

こんにちは、pirorohsです。この記事は慶應ロ技研アドベントカレンダー10日目です。え、10日どころか既に12月が終わりかけてる?何のことやらさっぱりわかりませんね。投稿日とURLをよく見てください。ところでWordPressって最高ですね。

1日目

←9日目11日目→

GrabCAD Workbenchとは何か

ユーザーが作製した様々なパーツの3Dモデルを共有するGrabCAD Communityなどで有名なGrabCADによる、CADデータに特化したバージョン管理及びコラボレーションの為のシステム。主な機能は

  • ローカルとリモートの同期
  • バージョンやリビジョンの管理とバックアップ
  • 簡単な共有、チーム管理
  • 変更点を3Dモデルやコメントで確認
  • 3Dモデルや図面をどこからでもブラウザやアプリで閲覧可能
  • 様々な形式のCADデータに対応

などなど。

バージョン管理の必要を示す図(複数人で編集し更なる混沌へ)

そもそも、バージョン管理の分野にはGitという定番が存在する訳ですが、基本的にソースコードの管理を目的としており、KiCadの各ファイルのようなテキストベースのデータはともかくバイナリ形式のCADデータには不向きであるという事情があります。その為にWorkbenchのような特化したシステムが必要なのです。

登録とインストール

それでは早速Workbenchを使ってみましょう。

Workbenchのトップページにアクセスし、右上のボタンから新規登録を行います。GrabCADのアカウントが既にあればそのままでかまいません。

登録時に会社名を聞かれますが、これがチーム名となります。変更もできるので適当に。

登録し、サインインができたら、クライアントアプリをインストールします。

適当にポチポチやって終了(この時、SolidWorksがインストールされていればアドインのインストールができるようです)。

Project

WorkbenchではCADデータをチーム内のProjectという単位で管理します。Projectには、CADデータやその他のファイル、フォルダが含まれます。変更履歴を管理したいものをProject内に含めることで、その変更履歴を記録することができます。

Projectは自分のPC内とWorkbenchのサーバー上の2箇所に保存されます。Workbenchを利用した作業は、自分のPC内のProjectフォルダで編集を行い、その変更内容をサーバー側にアップロードするという流れになります。

なお、これは(分散型と集中型という違いはありますが)一般的なバージョン管理システム全てに共通するものです。こちらのGithubの解説は参考になるでしょう。

=>今さら聞けない!GitHubの使い方【超初心者向け】

使ってみる

Projectの作成

まずはProjectを作成しましょう。ブラウザからもできますが、ここでは先ほどインストールしたアプリを起動します。ログインしてCADデータの保存に使うフォルダを設定すると、以下のようなメニュー画面が開きます。

「+ New」ボタンをクリックし、次の画面で名前を入力するとProjectが作成され、対応するフォルダが先ほど設定したフォルダ内に用意されます。

ファイルの作成

Project作成直後は管理するファイルが存在しないため、上記のようにNo Filesと表記されています。「OPEN FOLDER」をクリックして自分のPC内のProjectフォルダを開き、CADデータを作成しましょう。

Part1.SLDPRT

Part2.SLDPRT

6-3
Assem1.SLDASM

今回は人類の普遍的欲求を表したモデルを用意しました。

Workbenchアプリに戻ると、新規ファイルが認識され「Files ready to upload」と表示されています。クリックして確認し、コメントを付けてサーバーと同期しましょう。

ファイルの確認

Workbenchに同期されたファイルはブラウザから確認できるようになります。アプリ内の「OPEN PROJECT」をクリックするかブラウザで直接アクセスすると、以下のようにタイムラインや3Dモデルが確認できます。さらにここから各ファイルにコメントを付けたり、旧バージョンのファイルを回復、別のユーザーをチームに招待することもできます。

ファイルの更新

さて、5000兆円欲しいのは人類普遍の欲求ですが、実際に5000兆円なんぞ貰った日には世界経済が崩壊しロボコンどころではなくなることが容易に想像されます。ここは現実的に、5000億円程度に留めておくのが吉でしょう。

ファイルを更新し…

コメントを付けて同期します。

ちなみに、WorkbenchのSolidWorksアドインを利用するとこの作業がSolidWorksの画面内で完結するので効率的です。

これで世界経済は救われました。上記画像にある、変更箇所の比較機能は便利ですね。

もちろん、お望みなら世界経済を再び崩壊させることだって簡単です。3Dモデル表示左上の「V2」をクリックし、旧バージョンをリストアします。

Workbenchアプリに戻り「File ready to download」をクリックすると…

見事、世界経済が再び崩壊しました。

ここまで、Workbenchを利用した作業の大まかな流れを紹介しました。今回は1人での作業でしたが、複数人が関わるような大きなProjectではバージョン管理、アップデート内容の記述やファイルへのコメント機能がかなり役立つでしょう。あわよくばGithubと共にロ技研全体に導入したいところです。

余談

先ほど、Workbenchアプリの初回起動時にCADデータの保存に使うフォルダを指定しました。各Projectはその配下に作られますが、他のフォルダで管理したい場合は少し細工をしましょう。

スタートメニューを右クリックし、「Windows Powershell (管理者)」を選択します。

New-Item -ItemType SymbolicLink -Path "Projectのフォルダ" -Value "実際のデータを保存したいフォルダ"

これでシンボリックリンクが作成され、Workbenchアプリにデータが認識されます。

参考=>機能を強化された Item コマンドレットを使ってシンボリック リンクを操作する

KiCadの拡張子何もわからん…。

この記事は慶應ロ技研アドベントカレンダー2日目です。

←1日目3日目→

はいどーも!元気1倍、tokkyo13です。去年はロボットと全然関係ない記事だったけど、今年はちゃんとロ技研らしく、KiCadというフリーのプリント基板CADにフィーチャーしちゃいます!それではいってみよ~!!

はじめに

KiCadを使っていてライブラリを自分で作ったりすると、ファイル構成も謎だし、よくわからん拡張子のファイルがでてくるしで、僕は今まで毎回勘だけを頼りに適当にやっていました。なのでこの機会にKiCadのファイルフォーマットについて一度まとめてみようかと思います。KiCadを一度も触ったことのない方にとっては無価値な記事かもしれませんが、一度触ったことがある方などは全体が見渡せて良いかもしれません。

用語

解説の前に軽く用語説明します。

PCBはprinted circuit boardの略です。つまり、プリント基板ってことですね!

コンポーネントというのは要するに回路記号です。回路図を書くときに使います。

コンポーネント
いろいろなコンポーネント

フットプリントというのは、プリント基板に並べるパーツ1つの「はんだ付けするパッド」と「パーツの射影」がセットになっているものです。

フットプリント
バイポーラトランジスタのフットプリント

拡張子の雑な解説

  • *.pro : プロジェクトファイル。
  • *.sch : 回路図ファイル。
  • *.lib : コンポーネントライブラリファイル。一つのファイルに複数のコンポーネントの情報が記述されている。
  • *.dcm : コンポーネントライブラリの説明ドキュメント。
  • *.kicad_pcb : PCBレイアウトファイル。
  • *.pretty : フットプリントライブラリフォルダ。フォルダ自体がライブラリとして扱われる。
  • *.kicad_mod : フットプリントファイル。*.pretty以下に格納される。各ファイルは1つのフットプリントの情報を含む。
  • *.net : Eeschemaが作成するネットリストファイル。
  • *.cmp : Pcbnewで作られる、コンポーネントとフットプリントの対応を記録したファイル。

まあ、ここまでは適当にググっても分かるわけですが、どのソフトがどのファイルを読み込んでどのファイルを吐き出すのかが視覚的に分かる図があったらもっと幸せになれる気がするんですよ。

KiCadのファイルの流れ

というわけで作ってみました。厳密性には欠けますが、イメージしやすいように考えたつもりです。

それじゃあ図の解説をば。緑の枠の中はEeschema(回路図エディタ)で作業する範囲、オレンジの枠の中はPcbnew(PCBレイアウトエディタ)で作業する範囲です。

回路図を作るためには回路記号が、PCBレイアウトを作るためにはフットプリントが必要なので、まずは*.libファイルと*.kicad_modファイルを必要に応じて用意する必要があります。*.libファイルはEeschemaのコンポーネントエディタで、*.kicad_modファイルはPcbnewのフットプリントエディタで編集できます。

ライブラリの用意ができたら今度はそれをEeschemaとPcbnewで読み込みます。ただし、Pcbnewで読み込むのは*.prettyフォルダを新しく作ったときだけです。*.prettyフォルダ下に*.kicad_modファイルを追加した場合は自動的に読み込まれるはずです。追加するのは新しいライブラリであり、あくまでライブラリは*.lib*.prettyです。

そうしたら今度は回路図を書きます。Eeschemaで回路図を書くと*.schファイルにデータが保存されます。

回路図を書き終えたら今度は各コンポーネントにフットプリントを割り当てます。コンポーネントに対応させたいフットプリントを*.prettyライブラリ群の中から選んでいきます。対応付けのデータは*.schファイルに保存されます。

次は、完成した*.schファイルをもとにネットリスト*.netを生成します。ネットリストには、使うフットプリントの情報と各フットプリントのパッドがどこと接続されるかの情報が記録されています。

この*.netファイルをもとにPcbnewがフットプリントのデータとネット情報を読み込み、PCBレイアウトの編集を始められます。PCBレイアウトのデータは*.kicad_modに保存されます。

PCBレイアウトを編集している最中にフットプリントを変更した時は、そのことをEeschemaの方で扱うデータに反映させるために*.cmpというデータをPcbnewで作ることができます。このデータをPcbnewからEeschemaに渡すことで対応付けの変更が*.schに反映されます。

*.kicad_pcbが完成したら、後はこれをもとに製造用ファイルを出力するだけです。

以上が図の解説でした。

もちろんEeschemaとPcbnewだけが仕事してるわけではないのですが、連携する補助的なソフトウェアも2つの中に含めてしまいました。そのほうが図がきれいになるので。この図を頭に入れておけば、ライブラリの追加をする時にKiCadが尋ねてくる質問の意味も分かるようになると思います。たぶん。

おまけ

Pcbnewが扱うファイルのフォーマットは過去に大きく変更されているようで、いわゆるレガシーファイルというものが存在します。Githubとかで公開されているフットプリントファイルの中にたまに見かけます。それについてもちょっとまとめます。

  • *.brd : *.kicad_pcbの古いフォーマットです。いまは読み込めるけど、編集できない。
  • *.mod : *.prettyの古いフォーマットです。*.prettyと違ってファイルです。1つの*.modファイルに複数のフットプリントの情報が含まれています。*.libと同じ構造だったのですね。これも読み取り専用です。

おわりに

というわけで、個人的に今までよくわかっていなかったKiCadのファイルフォーマットについてまとめてみました。僕もKiCadは初心者なので間違っていることもあるかもしれませんが、誰かの参考になれば幸いです。それじゃあ、またね〜(ぴょいっ!)

JSでmbed

この記事は慶應ロ技研 Advent Calendar 4日目/JavaScript Robotics Advent Calendar 5日目になります

←3日目:F^3RCの話|4日目:レーザー加工機の紹介→

あと10分程で誕生日を迎えます、Piroroです。百合ください。よろしくお願いします。

突然ですが皆さん、JavaScriptはお好きですか?私は大好きです。++[[]][+[]]+[+[]] == 10がtrueになる謎の多い言語仕様や、雨後の筍のように現れては消えていき諸行無常を感じさせる様々なフレームワークなどが大変魅力的ですね。
そんなJavaScriptですが、NodeJSでサーバーサイド、Electronでデスクトップアプリを作りスマホアプリはReactNative、とどんどん活躍の場を広げているものの、組み込み分野ではあまり活躍していません。そこで今回はmbedをJavaScriptで制御する話です。 Continue reading “JSでmbed”

OpenGLでオセロを作る①「ボードの描画」

岡野です。
初のシリーズ物です。
僕がプログラミングで最初に作ったのがオセロでした。
最初はコマンドライン上で座標を入力して置いてましたが、OpenGLを使ってGUI化してからはクラスでよくドヤ顔してました。

  1. はじめに

    OpenGLを使ってオセロゲームを作ります。
    さらに、敵コンピュータを作って簡単な人工知能を作ってみたいと思います。
    ゲームとそのゲームで動く敵コンピュータを自分で作って闘いながら改良していくのがプログラミングの醍醐味だと思います。

  2. プロジェクトの作成

    まずは、こちらを参考にOpenGLのプロジェクトを作成します。

  3. 早速、オセロボードの作成

    ではさっそく、オセロのゲームボードを表示させてみましょう。
    まず、下のソースコードにをコピペしてください。
    ところどころ、コメントの//が表示されてませんが、コピペはできます。

    
    #ifdef __APPLE__
    	#include <GLUT/glut.h>
    #else 
    	#include <glut.h> 
    	//#include <GL/glut.h> 
    #endif
    
    void display(void)
    {	
    	glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    	//ラインを描く
    	glColor3f(0,0,0);
    	glLineWidth(3);//線幅の指定。省略可。指定しなければ1。
    	glBegin(GL_LINES);
    	for(int i=0;i<9;i++){
    		glVertex2i(80+80*i,720);//縦線上端
    		glVertex2i(80+80*i,80);//縦線下端
    		glVertex2i(80,80+80*i);//横線左端
    		glVertex2i(720,80+80*i);//横線右端
    	}
    	glEnd();
    
    	//点を4箇所描く
    	glColor3f(0,0,0);
    	glPointSize(10);
    	glBegin(GL_POINTS);
    		glVertex2i(240,240);
    		glVertex2i(240,560);
    		glVertex2i(560,240);
    		glVertex2i(560,560);
    	glEnd();
    	glutSwapBuffers();
    }
    
    int main(int argc, char *argv[])
    {
    	glutInit(&argc, argv);
    	glutInitDisplayMode(GLUT_RGB | GLUT_DEPTH | GLUT_DOUBLE);	
    	glutInitWindowSize(800,800);//ウィンドウの画面の幅と高さを指定
    	glutInitWindowPosition(0, 0);//ウィンドウの場所を指定
    	glutCreateWindow("Othello");//ウィンドウの名前
    	glClearColor( 0 , 0.7, 0, 1);//オセロ盤の色
    	gluOrtho2D(0, 800, 800,0);//座標系の設定
    	glutDisplayFunc(display);//描画関数を指定
    	glutMainLoop();
    	return 0;
    }
    
    

    visual studioでは「デバッグ」->「デバッグ無しで実行」を押してみると、コンパイルされ、実行されます。
    Xcodeでは、左上の再生ボタンで実行されます。

    実行してみると次のように表示されると思います。
    othello1
    これでオセロボードが作成できました。

  4. 解説

    OpenGLの関数にはgl~やglu~という名前がついています。
    main関数を見ると、OpenGLの初期化に様々な関数が呼び出されていますが、関数名やコメントを見れば、大体察しが付くと思います。
    とりあえず、今回は「おまじない」ということにしてスルーします。
    基本的には、glutDisplayFunc関数の引数に、描画の関数の名前を与えると、描画するときに、その描画関数が呼び出されます。
    サンプルコードの場合は、display関数が与えられているので、描画をする時はdisplay関数が呼び出されます。
    display関数の中で、線や四角形などの図形を描画します。

    基本的には、
    1.glColor3f関数でRGBで色を指定し、
    2.glBegin関数の引数で図形を指定し。
    3,glEnd関数との間に、glVertex2i関数で図形の頂点を指定します。

    glColor3fの引数は0~1で表します。

    glBeginの引数は、ググればいろいろ出てきますが。
    GL_LINESは直線。
    GL_QUADSは四角形。
    などいろいろあります。

    glVertexAB関数では、A={2,3}が次元を表し、B={i,f,d}が引数の型を指定します。
    例えば、3次元で浮動小数点数float型で頂点したい場合はglVertex3fを使います。

    簡単ですが、これだけで、OpenGLは半分理解できたと思っても過言ではありません。

  5. 次回は石を表示させてみましょう。

jsdo.itで手軽にJavascriptゲームプログラミング入門

岡野です。
産まれも育ちも広島で、広島風お好み焼きを愛して止まないのですが、
上京して文化の差で一番驚いたのは、こっちの人はお好み焼きにうどんを入れるという概念が全く無いことです。

豚玉うどんダブルで(^o^ )

という広島では一番オーソドックスな注文をすると、

はぁ(゚∀゚??

という反応をされます。
異国の地に着いたのかと思いました。
でも探してみると、店長が広島出身の広島風お好み焼き店があったりします。日吉や元住吉にも。
ぜひ食べてみてください。

さて、夏休みが近づいてきました。
この時期は、図書館のプログラミングの入門書がごっそり借りられる季節であります。
プログラミングを始める目的として一番多いのは、やはり「ゲームプログラミング」だと思います。
そこで、今日はJavascriptとゲームプログラミング入門にふさわしいJavascriptライブラリのenchant.jsと、Javascriptでのプログラミングに便利なwebサービスであるjsdo.itを紹介したいと思います。

game

ロボットのプログラミングで最も使われる言語は勿論、C言語ですが、
C言語でプログラミングを始めるには、visual studio等の開発環境をパソコンにインストールする必要があります。
さらに、そこからGUIのゲームを作るとなると、OpenGLやDirectXなどのグラフィックライブラリを準備する必要があります。
プログラミングの概念を理解するにはC言語は最適だと私は思いますが、
入門者には、そこまで一人で準備するのはある種の勇気が要り、かなり大変だと思われます。

新入生には、まだ周りにそんなにパソコンに詳しい友達や先輩は少ないでしょうから(経験談)。
そもそも、1年生はまだプログラミングの授業無いですし。。
その点、うちみたいな技術系サークルにはパソコンに詳しい輩が比較的多いですからねぇやっぱり、、特にうちとかねぇ。。壁|ω・) ジー

そこで!今回ご紹介するのは、Javascriptというプログラミング言語と、jsdo.itというwebサービスです。

まず、JavascriptはHTMLやCSSと共にWebで使われるプログラミング言語で、
ホームページに動的な表示をさせたいときなどに使います。

JavascriptはC言語と違い、コンパイラは必要なく、
「メモ帳」などのテキストエディタと、Internet ExplorerやGoogle ChromeなどのWebブラウザさえあれば、すぐにプログラミングを始めることができます。
つまり、新たにパソコンにインストールするソフトはありません。

プログラミング作業の流れは、
テキストエディタでJavascriptのプログラムとHTMLファイルを書いてパソコンの中に保存し、
webブラウザでパソコン内のHTMLファイルにアクセスすると実行できます。

しかし、エディタとブラウザを行ったり来たりするのは少し面倒です。
そこで便利なのはjsdo.itというwebサービスです。
jsdo.itでは↓画像のようにwebブラウザ上の左側のエディタでプログラミングし、右側の画面ですぐさま実行できます。

editing
他の人の作品やソースコードを見ることもできますし、
forkすれば自分もそのプログラムを自分の作品リストにコピーして編集できます。
学術論文と同じで、view数やfork数が多いほどあなたのプログラムは優れているということになります。
他人に見られたくなければ、「private」にして自分にしか見れないようにすることもできます。
また、自宅のパソコンでなく、大学の図書館のパソコンなど別のパソコンでもログインすればいつでも始められます。
jQueryやenchant.jsなど人気のライブラリも多数用意されているので、わざわざダウンロード/アップロードする必要がなく簡単に追加できます。

ユーザ登録にはGoogleやFacebook,Twitterなどのアカウントがあれば一瞬です。
私も最近始めたばかりですが、普段、自宅のパソコンとノートパソコンと研究室のパソコンの3台併用しているので、いつでもどこでも好きな時にプログラミングの続きができるのでかなり便利です。

Javascriptは決してマイナーな言語ではなく、Windows8アプリの開発言語として使われたり、Node.jsなどサーバーサイドスクリプトをJavascriptで書けたり、Titaniumを使えばiPhoneアプリやAndroidアプリが作れるなど、さまざまなシーンで使われる言語らしいです。
名前が似ているJavaに退け劣らず非常に汎用性の高い言語です。
覚えておいて決して損はありません。

初心者の方は、ゼロから書き始めるより、他の人の作品で面白いなと思ったものをforkして、ソースコード読んでみて、書き換えてチートして動作を確認しながら学んでいくのが王道だと思います。

あとは、jsdo.it! ( just do it! )

(追記)
とは言っても、実際にはJavascript”だけ”では簡単にはゲームは作れません。
実際には、jQuery,enchant.js,WebGL,Bootstrap,D3.js等のライブラリを用いてプログラミングをします。
Javascriptでゲームプログラミングする上で、最もおすすめするのは、enchant.jsです。
メリットとしては
・コードが短くかける。ホントに
・日本人が作ったライブラリなので日本語の資料(サイトや本)が多いので初心者にも安心
その他

実際に、ここで僕が書いたサンプルコードなり、コーディングする作業動画があればいいのですが、
既にenchant.jsの開発元が実際にコーディングしながらわかりやすく解説している動画がYutubeにありましたので、ご紹介します。

ライブコーディングは10分あたりから始まります。