どうも、まさとらん（@0310lan）です！
今回は、JavaScriptを使ってとにかく遊んだり楽しんだりできるインタラクティブなWebサービスやツールを厳選してご紹介します。
ゲーム体験をしたり、アート作品を作ったり、JavaScriptで開発されたユニークなサービスを利用してじっくりと遊んでみましょう。
Webの楽しい世界にご興味ある方は、ぜひ参考にしてください！
■リアルタイムにコードを書いて戦うオンライン対戦ゲーム
【yare.io】
世界中のプレイヤーと1対1で戦うゲームなのですが、その戦い方はJavaScriptのコードをリアルタイムに書き換えながら自機を操作するというのが大きな特徴です。
見た目は簡素なシューティングゲームですが、実はかなり奥深いストラテジーゲームみたいな要素が詰まっています。
ゲームの大まかな流れとしては、以下のとおりです。
- JavaScriptで自機を制御する
- 自機を操作してエネルギーを回収する
- エネルギーを基地に持ち帰る
- エネルギーを消費して自機を生成する
- 自機をどんどん増やして大群を作る
- 敵プレイヤーを攻撃する
- 敵の基地を破壊すれば勝利
上記のように、自機を増やして敵の基地を破壊するのが目的です。ただし、敵プレイヤーも同じことを考えているため、どのように自機を増やしながらどのタイミングで攻撃を仕掛けていくのかを見極める必要があります。
実際のゲーム画面にはプログラムを書くエディタが常駐しており、状況を常に監視しながらリアルタイムに最適なコードへ書き換えていくのが醍醐味と言えます。
専用のグローバル変数や関数が提供されているので、敵の位置を取得したり攻撃方法を制御したりなどは簡単なコードで実装できるように工夫されています。
インタラクティブに試せる丁寧なチュートリアルもあるので、基本的なJavaScriptプログラムが組める方であれば楽しめるサービスです。コアなファンも多く存在していて、過去に開催されたトーナメントでは上位のプレイヤーにイーサリアムが配布されています。
＜参考リンク＞
■少ないコードでアート作品が作れるサービス
【Dwitter】
140文字以内のJavaScriptコードで、Canvasを利用したビジュアル重視のアート作品をプログラミングできるサービスです。
サービス内に自分の作品を投稿でき、アニメーションで動作するプレビュー画面とソースコードがセットになって公開できるのが特徴です。プログラムの文字数に制限があるので上級者向けではありますが、以下のようなショートハンドも提供されています。
- t：経過時間(秒)
- c：Canvas(xがコンテキスト)
- R：rgbaでカラーを生成
- S：Math.sin()
- C：Math.cos()
- T：Math.tan()
経過時間を取得できる「t」を上手く掛け合わせれば、動きのあるアニメーションを手軽に作成できます。
ショートハンドを駆使すれば、以下のような立体的な作品も140文字以内に収まります。
（※投稿元はこちら）
投稿した作品は、GIFに書き出したり埋め込みコードを生成してブログなどに貼り付けたりも可能です。
また、同じようなコンセプトのサービスとして、さらに文字数が少ない32文字以内のコードでアート作品を作るサービスもあります。
【tixy.land】
16×16のドットをディスプレイとして使い、さまざまなアニメーション作品をプログラミングできるのが特徴です。
こちらのサービスも以下のようなショートハンドが用意されています。
- t：経過時間(秒)
- i：ドットインデックス(0-255)
- x：X方向インデックス(0-15)
- y：Y方向インデックス(0-15)
入力できる文字数は少ないものの、工夫次第で無限のパターンを生成できる面白さがあります。
カラーに関しては、「正の数」が白色で「負の数」が赤色という2色だけですが、ドットのサイズを細かく調整してグラデーションを作ることができます。
コードを入力したあとにエンターキーを押すと、コードがURLの一部として生成されます。なので、そのままURLをシェアするだけで、自分の作品を公開できる手軽さも魅力です。
ちなみに「tixy.land」に影響を受けて開発された音楽シーケンサー「B.I.T.O」も公開されています。画面構成やショートハンドもよく似ており、少ないコードで音楽を手軽に作れるのが特徴です。
＜参考リンク＞
■マウスカーソルが動く猫に大変身するライブラリ
【pet_cursor.js】
マウスカーソルを猫に変えるだけでなく、マウスの動きに合わせてさまざまなアニメーションをしてくれるのが大きな特徴です。
例えば、マウスカーソルを左方向に移動すれば猫も左を向いて走り出し、マウスを操作しなかったら猫は耳を掻いたり眠りだします。さらに、リンクやボタンなどの要素に近づくと爪を研ぐなど固有のアニメーションも提供されています。
使い方も簡単で、ライブラリを読み込んだらbodyタグに次のような記述を追記します。
<body onload="startPetCursor();">
あとは同じディレクトリに「pet_cursor」というフォルダを作成して、その中にアニメーションを表示させたい画像を入れておくだけです。デフォルトでは猫の画像になっていますが、自分で画像を用意すればどんなキャラクターでも表示可能というわけです。
Webサイトを訪問してくれたユーザーが、あっと驚くようなキャラクターを用意してみるのも面白いのではないでしょうか。
＜参考リンク＞
■ブラウザ上に構築された独自のデスクトップ環境を利用する
【OS13k】
Windowsのようなデスクトップ環境をJavaScriptで構築したサイトです。ウィンドウマネージャやタスクバーなども搭載し、サウンドシステムや動画プレイヤーなども標準装備しています。
コアファイルはZIPで13KB以内に収まるほど軽量に作られており、さまざまなゲームやシステムツールなどが軽快に動作します（スマホ操作にも対応）。自分で独自のプログラムやシェーダなどを追加して、OS13k自体を拡張していくことも可能です。
また標準で搭載されているゲームは、「js13kGames」というコンテンストにエントリーされている作品というのも特徴的です。
【js13kGames】
「js13kGames」は与えられたキーワードに沿ったゲームを、およそ1ヶ月の間にJavaScriptで開発していく競技です。大きな特徴として、開発したゲームはすべてをパッケージした容量が13KB以内に収まらなくてはいけないというルールがあります。
そのため、「OS13k」で起動させるゲームとしては軽量で相性も良いというわけです。さらに言えば、「OS13k」自体も実は「js13kGames」のエントリー作品だったりします。純粋なゲームではありませんが、他のエントリー作品のゲームと接続してトロフィーを獲得できる機能なども提供されています。
冒頭でご紹介した「Dwitter」の閲覧ビューワーも搭載しており、軽量な開発ツールとしても楽しめます。
＜参考リンク＞
■自分だけの機械学習モデルを作って遊んでみる
【 Teachable Machine 】
TensorFlow.jsをベースにした機械学習モデルを、ブラウザ上に構築されたグラフィカルなWebエディタを利用して誰でも手軽に作成できるサービスです。
学習モデルを作ったらJavaScriptから簡単なコードで制御ができるので、独自のWebアプリやサービスに組み込んで利用できるのが魅力です。
モデルの作り方としては、最初にPCのカメラやマイクを利用して対象となるモノ、音や声、ポーズを取り込みます（以下は手のカタチを認識させています）。
PCのカメラを使う場合は、ボタンを押している間ずっとコマ撮り撮影されていくので、簡単に複数枚の画像を取り込めるのが特徴です。最後に「トレーニング」ボタンを1クリックするだけで、すべて自動的に処理されて独自の学習モデルが完成します。
プレビューウィンドウを利用して、学習モデルがしっかりと認識できているかをテストできる機能も提供されているので便利です。
学習モデルが作れたら、エクスポート機能を利用してクラウド上にデータを保存できます。
そして、そのデータを利用してJavaScriptから制御するためのサンプルコードも一緒に表示されます。
独自のモデルとJavaScriptを活用すると、例えば手の動きだけでコントロールするゲームを開発したり、任意の画像だけを抽出するアルバムを開発したりなどが実現するわけです。
＜参考リンク＞
■ソースコードを可視化するビジュアルプログラミング
【 CodeWire 】
Unreal Engineのブループリント風に開発されたノードベースのエディタで、JavaScriptをビジュアルプログラミングできるようになります。
右クリックから必要なブロックを選択し、画面左にあるパネルで変数を作成してドラッグしていくのが一般的な使い方になります。基本的な構文はもちろんのこと、HTTPリクエストなどもノードを繋げていくだけで完成するので簡単です。
また、エクスポート機能でJSON形式のファイルに保存したり、それを読み込んで続きから始めたりも可能です。最終的にJavaScriptのネイティブコードに書き出すこともできます。
【 natto 】
専用のキャンバス上に小さなコードエディタ機能を搭載したブロックを複数配置し、それらを相互に接続しながらJavaScriptプログラミングを楽しめる斬新なサービスです。
各ブロックの出力結果を異なるブロックの入力として再利用できるのが特徴で、プログラムの過程がどのように処理されていくのかを可視化できます。JavaScriptで実現できることはほとんど対応しているので、簡単なWebアプリを開発して公開することも可能です。
以下の記事では詳しい使い方について解説しているので、合わせて参考にしてください（※一部仕様変更あり）。
paiza.hatenablog.com
【 Code to Graph 】
ダイアグラムやチャートを作成できる「Mermaid構文」を利用して、JavaScriptプログラムを可視化してくれるサービスです。コードエディタにプログラムを入力すると、リアルタイムに変換されてプレビューにソースコードが図解で表示されるのが特徴です。
JavaScriptファイルをドラッグ＆ドロップするだけでも変換は可能であり、画面右下のパネルには「Mermaid構文」も出力されているので便利でしょう。最近だとドキュメントサービスNotionのコードブロックもMermaidに対応したので、活用してみると面白いと思います
（※Notionに貼り付ける場合は1行目と末尾の記述は削除しておきましょう）。
＜参考リンク＞
■小さなミニゲームをJavaScriptで開発する
【 Bitmelo 】
ドット絵で表現されたキャラクターやステージを作成して、ゲームのロジックをJavaScriptで構築できるWebエディタです。
面白いのは、自分でドット絵を作れるペイントエディタが搭載されており、キャラクターやステージを構成するオブジェクトを手軽に作成できます。またタイルエディタも用意されているので、好きなステージを構成するのも簡単です。
ゲームで利用する効果音などの音作りも専用のサウンドエディタから編集でき、ロジックを構築するコードエディタも搭載されています。とにかくゲームを開発するためのツールがすべて詰め込まれたサービスというのが大きな特徴でしょう。
【 Replit 】
JavaScriptだけでなく50を超える多彩なプログラミング言語に対応したクラウドIDEです。
さまざまなWebアプリの開発にも活用できる優れたサービスですが、Kaboom.jsを利用したミニゲームを開発できる開発環境も1クリックで構築できます。
Kaboom.jsは斬新なコンポーネントシステムを取り入れた2Dゲームエンジンで、JavaScript初心者でもカジュアルなゲームを素早く開発できるのが特徴です。ゲームに必要なリソースも搭載されているので、すぐにでもオリジナルゲームを作って楽しむことができます。
ゲームの開発から公開まで、すべて無料で利用できるのも大きな特徴と言えるでしょう。
詳しい使い方については、以下の記事でもご紹介しているので参考にしてください。
＜参考リンク＞
■ソースコードをアスキーアートに大変身させる
【 Harnocode 】
ごく普通のJavaScriptコードを、見た目にもインパクトの大きいアスキーアートに変換できるCLIツールです。
しかも、単純にアスキーアートへ出力しているだけでなく、変換後もしっかりとJavaScriptコードとして機能し続けることができます。以下のリンクから、変換されたソースコードを確認できます。
＜変換後のJavaScriptコード＞
使い方も簡単で、以下のコマンドからharnocodeをインストールします。
$ npm install -g harnocode
「harnocode」コマンドが使えるようになるので、あとは任意のファイルを選択して実行するだけです。
公式のリポジトリには、以下のようにさまざまなデザインのアスキーアートに変換されたサンプルが公開されています。
ぜひみなさんもユニークなソースコードをデザインして楽しんでみましょう。
＜参考リンク＞
■JavaScriptでコードを書かないと開かないリンクを生成する
【 CodeCaptcha 】
任意のリンクをプログラマーだけに共有できないか？ というコンセプトの元に開発されたWebサービスです。
サービスの内容としては、フォームやWebサイトなどを共有するためのリンクを生成するサービスです。
ただし、1つだけ違うのはリンクをクリックすると以下のようなコードエディタが表示されるのです。
関数名から推測される「課題」を解決するためのコードを書く必要があります。そして、無事に解決できたら、元のリンクが開いて閲覧できるという仕組みです。
現状は簡単な問題が多いですが、近日中に課題の難易度を選択できる機能が追加されるそうです。ぜひお試しでプログラマー仲間にリンクを共有して楽しんでみましょう。
＜参考リンク＞
SILVER BULLET 戦場のエンジニア 銀の弾丸コードを打て公開中！
paizaでは先日プログラミングゲーム『SILVER BULLET 戦場のエンジニア 銀の弾丸コードを打て』を公開いたしました！
新種の軍事プログラミングで戦場に【銀の弾丸】を打ち込め！
世界中でIT化が加速し、プログラミングも生存のために重要なスキルのひとつとなった近未来の戦場。ミリタリーインテリジェンスから最前線へと飛び出した我々は、軍事プログラミングを駆使して自軍を勝利へと導く任務を負った。
平和をもたらす【銀の弾丸】を見つけることはできるのか！？
プログラミング問題を解くと拠点を制圧できるだけでなく、新たな武器や装備を獲得できます。武器イラストは、エアソフトガンメーカーの東京マルイの製品をベースにデザイン。実在するアイテムを装備することもできます。お気に入りの装備で、新たな拠点制圧に向かいましょう。
各拠点を制圧するには、それぞれに設定されているプログラミング問題をクリアしなければなりません。各拠点には問題の難度に応じてS、A、B、C、Dのランクが付与されているので、自分のスキルに応じて挑戦する拠点を選びましょう。拠点を制圧（クリア）したり、特定のミッションをクリアしたりすると、アイテムを獲得できます。
アイテムを充実させて、自分だけの装備を作り上げ、さらなる拠点の制圧を目指しましょう！
■まとめ
今回は、JavaScriptを利用して楽しめるWebサービスやツールを厳選してご紹介しました。
ユニークなアイデアを具体化して開発を進める有志の方々がたくさんいるおかげで、JavaScriptに興味を持つ人が今後も増えるかもしれません。
また、本文ではご紹介できませんでしたが、JavaScriptで個性的なWebゲームを公開している開発者もたくさんいます。例えばスペースウォー、プリンスオブペルシャ、倉庫番などは人気も完成度も非常に高くて面白いです。
ぜひみなさんも、JavaScriptを活用したユニークな体験を実践してみましょう。
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
