paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

Webアプリ、ゲーム、IoTまで!ブラウザだけでJavaScript開発環境が構築できるWebサービスまとめ

f:id:paiza:20170823150345j:plain
どうも、まさとらん(@0310lan)です!

今回は、ブラウザだけで本格的なWebアプリの開発から、ゲーム、IoTまで幅広くトライできる無料のWebサービスを厳選してみました!

それぞれの用途に特化したWebエディタをピックアップし、その特徴や機能などを解説しているのでご興味ある方はぜひ参考にしてみてください!

■React & Angular開発に特化したWebエディタ「StackBlitz」!

StackBlitz

f:id:paiza:20170823150427j:plain
JavaScript開発でのフレームワークと言えば「React」「Angular」が有名ですが、いざ開発を始めようとするとサーバーの準備や関連パッケージの導入など…環境の構築が面倒だったりします。


ところが、この「StackBlitz」はクリック1発で「React」「Angular」の開発環境が整った状態のWebエディタが即座に起動します!
f:id:paiza:20170823150440j:plain
コードエディタとしても優秀で、コード補完はもちろんのこと「Ctrl + P」で起動するプロジェクト検索機能や、自動でリロードしてくれる「ライブプレビュー」など、便利な機能が多数搭載されています。

Progressive Web AppのAPIを使用していることで、ネット回線が無いオフラインの状態でもプログラムの作成や実行が出来るように設計されているのも魅力でしょう。


npmパッケージの導入も簡単で、左メニューから必要なパッケージ名とバージョンを指定するだけでOK!

例えば、reduxを導入したければ「redux@3.7.2」のように入力して「エンターキー」を叩くだけで、導入作業をすべて自動的に処理してくれます!
f:id:paiza:20170823150455j:plain
また、CDN経由のJS / CSSファイルの追加や、新規にファイルやフォルダを作成して開発していくことも自由に行えます。

もちろん、PCに保存されているファイルなども、ドラッグ&ドロップで素早く取り込んで作業を進めることが可能!


共有機能も優れており、作成したプロジェクトを無料でホスティングしてくれるので、URLだけでプロジェクトの公開や共同作業などがおこなえます。
f:id:paiza:20170823150510j:plain
「埋め込みタグ」も生成してくれるので、「React」「Angular」プロジェクトを自分のブログやサイトへ気軽に貼り付けて公開することも可能です。

すべてのプロジェクトファイルは「Zipファイル」としてダウンロードすることができるのですが、GitHubアカウントでログインすればクラウド上に複数のプロジェクトを保存することもできます。

ちなみに、「React」だけに特化したWebエディタ「CodeSandbox」もすぐに開発を始められるサービスなので、ご興味ある方は参考にしてみてください。


<参考>

■「3Dゲーム開発」に特化したWebエディタ「nunuStudio」!

nunuStudio

f:id:paiza:20170823150633j:plain
3Dゲーム開発と言えば「Unity」が人気ですが、よく似た操作感でブラウザ上からすぐに開発できるのが「nunuStudio」です!

Web GL, Web Audio, Web VRなどの既存技術を組み合わせ、さらに3D描画はThree.jsを使い物理エンジンはCannon.jsのライブラリを使うなど、さまざまなオープンソースを融合して1つの統合エディタにしているのが特徴です。


開発エディタはとても軽快に動作し、3Dオブジェクトの構築やライティング、オーディオ、カメラワーク、パーティクルエンジンなど…多彩な機能を簡単に使えます。
f:id:paiza:20170823150648j:plain
また、スプライトを使った2Dゲームの開発も可能なうえ、Leap Motion, Kinectに対応したVRアプリを作成することもできます。

完成した作品は、クリック1発でWebファイルに書き出す機能が搭載されていたり、既存の3Dモデルをインポートしたり逆にSTL, OBJファイルなどに出力することも可能です!


そして、ゲームロジックをJavaScriptでプログラミングできるコードエディタも搭載されています。
f:id:paiza:20170823150701j:plain
ゲーム開発に便利なAPIが数多く提供されており、コード補完の効くエディタで軽快に開発作業を進めることができます。


具体的なサンプル例の作り方などは、コチラの記事で解説しているのでぜひ参考にしてみてください。

2017年8月時点でまだベータ版ですが、かなり速いペースで開発が進んでおり新しい機能もどんどん追加されているので、ご興味ある方は要チェックです!


<参考>

■「IoT開発」に特化した「micro:bit エディタ」!

micro:bit エディタ
f:id:paiza:20170823150832j:plain
最近、少しずつ人気が高まっている極小ボード「micro:bit」のプログラムを作成できるWebエディタがコチラ!

とても優秀なエディタで、「micro:bit」本体を持っていなくても画面上に再現したエミュレータが正確に動作するので、このエディタだけでIoTプログラミングが楽しめるのが特徴です。


画面上部のタブを切り替えるだけで、ブロックエディタからJavaScriptへと即座に変換されます!
f:id:paiza:20170823150915j:plain
詳しいマニュアルも搭載されていますが、まず最初にScratch風の分かりやすいブロックでロジックを組み立てて、その後にJavaScriptへ切り替えれば仕組みが分かるので便利です。

「micro:bit」には、ディスプレイ代わりになる5×5に配置されたLEDで文字情報を表示したり、加速度センサーや電子コンパスなどを使ったプログラミングも楽しめるのが魅力でしょう。


また、初めてエディタに触れる人でも、丁寧なチュートリアル機能が搭載されているので指示通りに作業を進めていけば簡単なプログラムを実行できるので便利です。
f:id:paiza:20170823150930j:plain
実際に「micro:bit」を持っている方であれば、このままプログラムをダウンロードして転送することも可能。

さらに、エディタをそのままブログやサイトに埋め込める「タグ」を生成することも可能で、友人・知人と気軽に共有できるのも特徴といえるでしょう。


<参考>

■全部入りの統合Webエディタ「Glitch」!

Glitch

f:id:paiza:20170823151133j:plain
バックエンドを「Node.js」で開発し、フロントエンドを「HTML / CSS / JavaScript」でプログラミングできるように設計されたWebエディタが「Glitch」です!

サーバー側のプログラミングも可能なのが特徴で、例えばexpressなどのフレームワークを使ったWebアプリ開発も気軽に取りかかれます。(React / Angularなどの開発もOK)


「package.json」ファイルを開いて、必要なパッケージ名を入力して表示される候補をクリックするだけで自動インストールできる機能もあります。
f:id:paiza:20170823151154j:plain
GitHubアカウントで登録すれば、テーマカラーの変更や複数のプロジェクトを保存できたり、任意のリポジトリへコードをエクスポートすることも可能です。


さらに、コンソール画面も利用可能なので、CLIによるコマンド操作に対応できるのは便利です。
f:id:paiza:20170823151208j:plain
作成したプロジェクトは、クリック1つでそのままWebに公開することも可能です。

また、リンクを共有することで複数人とコラボ連携したり、秘密にしたいデータの隠密化やSECRET変数による認証コードなどの非公開など、機能面でも充実しています。


実際に「Glitch」を使ったサンプルデモの作成例をコチラの記事で解説しているので参考にしてみてください。
※リンク先で扱っている「Gomix」は「Glitch」の旧名称・旧バージョンです。

お金をかけずに本格的なWebアプリ開発に挑戦したい人にオススメのエディタですが、プログラミングの練習用としても実用的なのでぜひみなさんもトライしてみてください!


<参考>

JavaScript講座も公開中!動画でプログラミングが学べるレッスン


paizaでは、プログラミング未経験者・初心者向け学習サービス「paizaラーニングを公開しています。

今回記事の中で使用しているJavaScriptが学べる入門講座をはじめとして、PythonJavaC言語PHPRubySQL、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンが多数ございます。プログラミング初心者の方はぜひごらんください!

また、現在paizaラーニングではRubyRailsの有料講座を期間限定で無料公開しているので、興味のある方はぜひごらんください。
無料公開の期間など、詳しくはこちら↓
paiza.hatenablog.com

■まとめ

今回ご紹介したWebエディタは、すべての機能を無料で利用できるものばかりなので、気になったモノがあれば気軽にトライしてみることをオススメします。

また、バージョンアップにより本格的なWeb開発にも対応した「CodePen Projects」や、スマホアプリの開発に最適な国産サービス「Monaca」なども活用してみると良いでしょう。

ぜひみなさんも、これらのサービスを使ってオリジナルのWebアプリやゲーム開発に挑戦してみてください!





paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

現在、普段有料公開しているHTML/CSSのレッスンを期間限定で連続無料公開中ですのでぜひごらんください。

↓詳しくはこちら
paiza.jp

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
paiza.jp
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

ITプログラマ・エンジニア向け転職・就活・学習サービスのpaiza