シェアしたくなる最新のWebサービス・ITニュース情報をチェック!
  • follow us in feedly

アプギガトップ > クリック一発で「JavaScript」に変換可能なビジュアルプログラミング言語をまとめてみた!
注目記事ピックアップ
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
share0
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
share0
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
share0
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
share0
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
匿名もOK!SkypeでWebコードエディタを共有できる「Interviews on Skype」が無償公開中!
share0
匿名もOK!SkypeでWebコードエディタを共有できる「Interviews on Skype」が無償公開中!
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
share0
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
share0
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
share0
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
share0
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
スマホのタッチ操作に最適化されたWebアンケートが作れるサービス「Wyzerr」を使ってみた!
share0
スマホのタッチ操作に最適化されたWebアンケートが作れるサービス「Wyzerr」を使ってみた!
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
share0
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
ブログ感覚でWebアプリやサイトの更新履歴を作成&公開できる「Barelog」を使ってみた!
share0
ブログ感覚でWebアプリやサイトの更新履歴を作成&公開できる「Barelog」を使ってみた!
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
share0
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
share0
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
ブラウザ上でサイト構成図(マップ)を作成して複数人とコラボ連携可能な「FlowMapp」を使ってみた!
share0
ブラウザ上でサイト構成図(マップ)を作成して複数人とコラボ連携可能な「FlowMapp」を使ってみた!
「docs・Wiki・task」が融合した超軽量Webエディタ「Notion」の潜在能力が高過ぎる件!
share0
「docs・Wiki・task」が融合した超軽量Webエディタ「Notion」の潜在能力が高過ぎる件!
今すぐブラウザ上に「ライブ配信」のスタジオ環境をタダで構築できる「Lightstream」を使ってみた!
share0
今すぐブラウザ上に「ライブ配信」のスタジオ環境をタダで構築できる「Lightstream」を使ってみた!
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
share0
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
share0
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
share0
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
プログラミング
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
2014/03/11 23:00

クリック一発で「JavaScript」に変換可能なビジュアルプログラミング言語をまとめてみた!


どうも、まさとらん(@0310lan)です!

みなさんは「ビジュアルプログラミング言語」をご存知でしょうか…?

Scratch」などに代表されるプログラム言語の一種で、レゴブロックを組み立てるようにプログラミングしていくので、初心者でも楽しく作品を作れるのが特徴となっています。


しかしながら、意外に本格的なゲームが作れるので、過去にアプギガでも記事にして反響を頂いたことがあります。

参考記事:「レゴ感覚の「scratchプログラム」を極めた猛者の作品5選が異次元レベル!

 

そこで今回、このような便利に使える「ビジュアルプログラミング言語」の中から、「JavaScript言語」へクリック1つで変換することができるモノを厳選してみましたのでご紹介しようと思います!

 

第2の「Scratch」を目指して開発段階のビジュアルプログラミング言語!
Waterbear


冒頭でご紹介した「Scratch」に影響を受けたと言われるビジュアルプログラミング言語。

色鮮やかなブロックや、多彩なパラメータが用意されており、上部メニューからサンプルプログラムを読み込んで動かすことも可能となっています。

 

例えば、お馴染みの「ブロック崩し」や、ピンポン、マルバツゲーム、グラフィックサンプルなどが用意されています。


 

ドラッグ&ドロップで組み立てたブロックは、同時にバックグラウンドでJavaScriptに変換されています。

変換したい場合は、エディタ上部にある「Script Text」タブをクリックするだけでOKです。


 

すると、現在組み立てているブロックのJavaScriptが表示されます。


あとは、こちらをコピーして自分のサイトなどで利用したり、友人とシェアしても良いでしょう。

もちろん、ブロックを組み立てながらJavaScriptがどのように動くのかを学習するのにも最適となっています。

 
マルチな言語変換が可能なGoogleのビジュアルプログラミング言語!
Blockly


Googleが提供するビジュアルプログラミング言語ということで、知っている方も少なくないはず。

パラメータは少ないのですが、基本的なプログラミングは可能になっており、現在も少しずつ開発が進められています。

 

ブロックを組み立てたら、上部タブメニューの「JavaScript」をクリックすれば変換することが可能。


 

簡単ですね。


しかも、ご覧のとおりPython、Dart、XMLへの変換も1クリックで可能になっているのが特徴的です。

 

また、面白いチュートリアルが豊富に揃っているのも必見です。


ブロックの概念を学習するために、国旗・首都を組み合わせる問題や、迷路のゴールに辿り着くように誘導するブロックを組み立てたり、飛行機の座席数を算出する問題など…。どれも、楽しみながらプログラミングを学べますよ。

 
ゲームも簡単に作れる国産のビジュアルプログラミング言語!
MOONBlock


日本語で安心して使えるビジュアルプログラミング言語として知られているのがこちら!

特に、ゲームを作るのが得意で、横スクロールアクションやシューティング、パズルなど幅広いゲーム作りが、ブロックを組み立てるだけで楽しめるようになっています。

 

もちろん、JavaScriptに変換するのも簡単で、画面下部の「ソースコード」ボタンをクリックするだけです。


 

すると、ソースコードをすぐに確認することができます。


 

また、簡単にゲームが作れるということもあり、子供たちにも人気が高いです。

そのせいか…ビジュアルプログラミング言語としては珍しく、日本語の書籍も販売されているくらいです!


興味のある方は、ぜひ一読されることをオススメします。

 
おまけ
最後に、JavaScriptとは関係ないのですが、過去にアプギガでご紹介した面白いビジュアルプログラミング言語を紹介しておきます!

Viscuit(ビスケット)


こちらは、アニメーション作成が得意なビジュアルプログラミング言語となっており、動くゲームアプリを非常に効率よく短時間で作ることができます。

ほぼすべて、マウスのドラッグ&ドロップで作成できるので、子供から大人まで幅広く楽しめるようになっています。

 
まとめ
最近は、小学生からプログラミングを始める人が増えているせいか、今回ご紹介したようなビジュアルプログラミング言語のニーズが年々高まっているようです。

いきなり小難しい英数字の羅列を勉強するよりかは、「ブロックを組み立てる」という動作の方が確かに楽しいですよね。それに、基本的な概念も分かりやすいかと思います。

これからプログラミングを始めよう!と、思っている方も…まずは、ビジュアルプログラミング言語から実践してみてはいかがでしょうか?

 

written by まさとらん

 

 

 


 

まさとらん

国内外問わず「良いモノ」だけひたすら集めて情報共有してます。
厳選ネタはアプギガ内で分かりやすく情報発信中!
その他の旬なネタは、twitterにて発信してますので、お気軽にどうぞ!

twitter:0310lan

この記事を読んでいる人は、他にこんな記事も読んでいます。
Related Posts Plugin for WordPress, Blogger...

ページトップへ戻る