どうも、まさとらん（@0310lan）です！
今回は、ブラウザを本格的なJavaScript開発環境に変えるクラウドIDEを厳選してご紹介しようと思います！
現在では、クラウドIDEといってもさまざまな特徴を持ったサービスが存在しています。
フレームワークを活用したプログラミングに特化していたり、Linux環境の構築に強いサービスなど…それぞれの特徴も合わせて紹介するのでぜひ参考にしてみてください！
なお、JavaScriptはpaizaラーニングの「JavaScript入門編」で学ぶことができます。そちらも合わせてチェックしてみてください。
■万能型のJavaScript開発環境を提供するクラウドIDE
【 Glitch】
JavaScriptによるフロントエンド開発とNode.jsによるバックエンド開発を1つのエディタで作業できる万能型のクラウドIDEが「Glitch」です。
現時点ですべての機能を無償で利用できるうえ、開発環境をいくつでも保持することができます。また、GitHubと連携することでソースコードのインポート・エクスポートも可能ですし、ターミナルも搭載されているのでコマンド操作の実行もできます。
Node.jsのパッケージを検索して1クリックで導入できる機能も特徴的。
導入後は自動的にpackage.jsonへ書き込まれるようになっているので便利です。
また、Glitchで編集した内容はバックグラウンドで自動的にバージョン管理が行われています。
いつ・だれが・どんな変更をしたかグラフィカルに閲覧することが可能で、1クリックで任意の状態へ簡単に戻せるようになっています。
その他、便利な機能としては以下のとおり！
- 独自ホスティング機能
- 環境変数や非公開データの作成
- 複数人で同時コラボ編集
- IDE自体をそのまま埋め込み可能
- ポートフォリオ作成機能
- デバッグ機能
etc...
さらに、最近のバージョンアップでソースコードをFirebaseへ1クリックでデプロイすることも可能になっているので、以下の記事も合わせて参考にしていただくと幸いです。
＜参考リンク＞
■GitHubから起動できる本格的なクラウドIDE
【 Gitpod】
ソースコードをGitHubで管理している人も多いと思いますが、そのGitHubから起動できるクラウドIDEが「Gitpod」です。
例えば、任意のリポジトリページを開くと以下のような感じのURLになると思います。
https://github.com/sample/mysample
このURLの先頭に「gitpod.io#」を付与してみましょう。
gitpod.io#https://github.com/sample/mysample
すると、即座にリポジトリのソースコードを読み込んで自動的にクラウドIDEが起動します。（※初回のみログインが必要）
ファイルの作成・編集はもちろん、ターミナルからコマンドラインでの操作も可能です。
また、GitHubとの相性も良いのでコミットやマージ、プルリクエスト、変更履歴や差分をエディタ上で制御することもできるので便利です。
その他、便利な機能としては以下のとおりです！
- コマンドパレットによる検索・操作
- カラーテーマの設定
- Gitの履歴表示
- 変更箇所の可視化（インジケーター）
- gpコマンドによるプレビュー表示&公開
- エディタの共有機能
- 毎月100時間の無償利用付き
etc...
GitpodはTheiaをベースにしたVS Codeライクなエディタで、豊富な拡張性を備えているのも特徴です。
■JavaScriptフレームワークを即座に使えるクラウドIDE
【 CodeSandbox】
JavaScriptのフレームワークと言えばReact、Angular、Vueなど…さまざまな種類があるわけですが、これらのフレームワークを利用するための導入準備などが一切不要ですぐにでもプログラミングを始められるのが「CodeSandbox」の特徴でしょう。
1クリックで即座に任意のフレームワークが導入された状態の開発エディタが起動するうえ、プロジェクトをホスティングしてそのまま公開までしてくれます。
現在も活発にバージョンアップが行われており、今ではサーバサイドのフレームワークとして人気のNext.jsやNuxt.jsも利用可能です。
学習用途や勉強会などでも便利に活用できるし、個人開発のプロジェクトを公開する目的でも利用価値は高いでしょう。
その他、便利な機能としては以下のとおり！
- ターミナルからのコマンド操作（サーバサイド構築時）
- npmパッケージを1クリックで導入
- 複数人で編集できるコラボ連携
- デバッグ機能
- コードエディタの埋め込み機能
- GitHubアカウントとの連携&エクスポート
- コードエディタのカスマイズ機能
- ホスティング機能
- プロジェクトのダウンロード機能
- PWA対応
＜参考リンク＞
■スクリーンキャストも可能なクラウドIDE
【 Scrimba】
一般的なHTML / CSS / JavaScriptを使ったプログラミングができるのですが、スクリーンキャスト機能を使ってブラウザの画面と自分の声を録画しながら動画を作成できるのが大きな特徴でしょう。
ソースコードのテキストデータを記録することで動画を作っているので、録画中も非常に軽快な動作を実現しています。
コード補完やファイルのディレクトリ構造を作ったり、独立して操作可能なプレビューウィンドウやコンソールログの表示など機能も充実しています。
外部ライブラリも利用可能で、package.jsonやGoogleスライドのファイルをインポートすることもできます。
録画したあとは、自分の声を編集したり不要な箇所をカットするなど、基本的な編集も可能になっています。
また、動画を途中でストップするとソースコードを自由に編集できる機能もあり、ただ動画を見て学習するだけでなく実際にコードを書きながら学べるので便利です。
プレイリストも作成可能なので、自分でオリジナルのプログラミング教材も簡単に作成することができるでしょう。
その証拠に、公式サイトには多数のプログラミング実況動画が公開されています。
例えば、以下のような講座を今すぐ作成したり公開することができます。
- Vue.jsの基本マスターする全9本の動画
- CSSフレームワーク「Bulma」の基本をマスターする全13本の動画
- Reactでチャットアプリを開発する全19本の動画
- ES6以降の最新版JavaScriptを学習できる全23本の動画
＜参考リンク＞
■日本語対応のLinux環境を即座に構築できるクラウドIDE
【 PaizaCloud】
PaizaCloudは一般的なLinux環境をブラウザ上に構築できるため、JavaScriptやNode.jsはもちろんのことPHP / Ruby / Python / Goなどのプログラミング開発環境も簡単に用意できるのが大きな特徴です。
この特性を活用してLAMP環境をわずか数秒でブラウザ上に用意できるうえ、RailsやDjangoといったフレームワークや、WordPress、Jupyter notebookなどを即座に構築して利用することもできます。
多彩なプログラミング言語に対応したコードエディタやコマンド操作を行うターミナルも標準で搭載されており、プレビュー確認などに便利なブラウザも利用することができます。
また、ユニークな点として共有機能を1クリックで準備することが可能で、URLをシェアするだけでPaizaCloudのアカウントを持っていない人と複数人で1つの開発環境を共有することが可能です。
その他、便利な機能としては以下のとおり！
- 3秒で通常のLinux環境を構築
- コードエディタのカスマイズ機能
- すべての環境で日本語対応済み
- 拡張アプリの作成
- ファイル操作（作成・編集・ディレクトリ）
- 独自ホスティング機能（有料プラン）
- SSH接続
無料プランの場合は24時間で環境がリセットされますが、何度でも好きな開発環境を構築できるのでプロトタイプや学習用にも最適です！
＜参考リンク＞
■おまけ
開発環境というテーマから少しズレますが、JavaScriptやNode.jsのコードエディタと文章を書けるエディタがミックスした変わったサービスがあるので合わせてご紹介しておきます！
簡単に言うとJavaScript版のJupyter Nodebookのような使い方ができるサービスになります。
【 Observable】
ブログのように記事を書いたり画像や動画などを埋め込んだりできるエディタなのですが、JavaScriptでプログラミングできるエディタと実行環境が搭載されています。
そのため、グラフやマッピングをJavaScriptで作成してリアルタイムに表示したり、Canvasを利用して自由に描画させることも可能です。
変数や関数なども作成可能で、他ユーザーが作成した関数を自分のノートブックに読み込んで再利用できる仕組みなども提供されています。
【 RunKit】
こちらはObservableのNode.js版のようなイメージで利用できるサービスになります。
同じように文章を書くことができるエディタとNode.jsのプログラミングが可能なエディタが搭載されており、npmからパッケージをインストールすることもできるので便利です。
Node.js本体のバージョンも細かく指定可能で、サーバーレスな独自APIも簡単に作成して公開できます。
「Observable」「RunKit」はいずれも無料で使えるうえ、独自のノートブックをいつでもネット上に公開することができます。
ブログのような使い方もできるし、個人用のプログラミング学習ログとしても使える便利なツールなのでブックマークしておくことをオススメします！
■動画でプログラミングが学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。
「Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。
■まとめ
今回はブラウザをJavaScriptの開発環境に変えるクラウドIDEを厳選してまとめてみました。
いずれも無料プランが用意されており、ブラウザから気軽に使えるのでまずは気になったIDEを試してみるのがいいでしょう。
また、何度でも開発環境を新しく作り直せるので、新しい技術を試してみたりプログラミングを勉強する際にはとても重宝するはずです。
ぜひ、みなさんもクラウドIDEを活用してプログラミングの世界を楽しんでみましょう！
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
