paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

ブラウザ上にAngular,React,Vue等の環境を一発構築&開発できる「CodeSandbox」を使ってみた!

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

今回は、面倒な開発環境を一瞬で構築してブラウザ上からWebアプリを気軽に開発&公開できる無料のWebサービスをご紹介します!

完全なオープンソースで開発が進められており、React / Angular / Vueなどのプロジェクトを誰でも簡単にプログラミングできる高度なエディタを搭載しているのが特徴です。

CodeSandbox

f:id:paiza:20180328132235j:plain

■「CodeSandbox」の使い方

それでは、まず最初に「CodeSandbox」の使い方から見ていきましょう!

サイトにアクセスしたら、画面右上にあるボタンをクリックします。
f:id:paiza:20180328132404j:plain
次に、「React」「Vue」「Angular」などのプロジェクトを選択する画面が開きます。
f:id:paiza:20180328132419j:plain
ここで好きなフレームワークを選んだり、素のJavaScript(Vanilla JS)やCLIツール、GitHubからリポジトリを読み込んだりも可能です!


すると、こんな感じで「コードエディタ」がブラウザ上に起動します。
f:id:paiza:20180328132437j:plain
このまますぐにプログラミングを開始することができるようになっています。(ユーザー登録も不要です)

サーバーを用意してNode.jsや各種フレームワークをセットアップしてコマンドを叩いて…という面倒な初期設定は一切不要というわけです。

簡単なプロトタイプを作ったり、学習や勉強会などの用途においては非常に心強いかと思います。


また、「CodeSandbox」を利用している他のユーザーが作成したプロジェクトを検索できる機能もあります。


Sandbox検索
f:id:paiza:20180328132505j:plain
「CodeSandbox」をどのように活用しているのかをチェックしたり、ReactやVueなどのコード学習にも最適でしょう。

■「コードエディタ」の使い方

ここからは「CodeSandbox」で利用できるコードエディタについて詳しく見ていきます。

エディタ自体は、マイクロソフトVisual Studio Codeでも利用されている「Monaco Editor」がベースになっているので非常に高機能です。

また、JavaScriptのES2015(ES6)を完全にサポートしており、ESLintによるコード検証やEmmetによる効率化も可能です。


エディタの画面は大きく分けて3つのコンポーネントから構成されています。
f:id:paiza:20180328132538j:plain
それぞれの画面サイズ(幅)やレイアウトは自由に調整できるようになっているので、自分の好みに合わせて設定することができます。


ちなみに、「プレビュー」はマウスのドラッグ操作で好きな場所に配置できる面白い機能が搭載されています。
f:id:paiza:20180328132609j:plain
もちろん、プレビューではなく新規タブで通常のWebサイトのように表示することも可能で、ホットリローディングにも対応しています。


「ファイル管理」に関しては、一般的なファイルエクスプローラのように新規ファイルを作成したりフォルダを作って階層構造にすることができます。
f:id:paiza:20180328132620j:plain


また、Node.jsの各種パッケージを追加したい場合は、「Add Dependency」ボタンをクリックすることで簡単にできます。
f:id:paiza:20180328132634j:plain


追加したいパッケージのキーワードを入力して、表示された候補の中から好きなものを選んでクリックするだけです!
f:id:paiza:20180328132645j:plain
自動的に「package.json」ファイルへ追加してくれるので便利です。

コマンドラインから「npm install・・・」のように入力する必要はありません。


コードの「シンタックスハイライト」や「オートコンプリート」などの標準機能もしっかりサポートされています。
f:id:paiza:20180328132700j:plain
コードの入力ミスや構文エラーなどもリアルタイムに教えてくれるので効率的です。


さらに、エラーの詳細についてはプレビュー側に詳しく表示されるので非常に便利です!
f:id:paiza:20180328132712j:plain
どんな内容のエラーで、どこの箇所がおかしいのかを素早く判断できるので重宝する機能でしょう。


また、ブラウザに搭載されている開発者ツールの「コンソール」とほぼ同じ機能も搭載されています。
f:id:paiza:20180328132725j:plain
ログの確認やエラーの表示などをチェック可能で、ワンライナーJavaScriptコードを実行することもできます。


「CodeSandbox」は、ほぼすべての機能を無料で利用できますが、有料プランに登録すると複数人によるコラボ連携が可能になります!
f:id:paiza:20180328132755j:plain
ペアプログラミングやオンラインでのコード学習など、アイデア次第で活用範囲はかなり広いと思います。

■プロジェクトを公開してみよう!

ある程度プロジェクトが完成したら、「CodeSandbox」がホスティングサーバー代わりをしてくれるのでそのままネット上へ公開することができます。

方法は簡単で、画面上部にあるメニューの「Share」をクリックします!
f:id:paiza:20180328132813j:plain


すると、「シェア用のURL」と「埋め込み用のURL」が表示されているので、それぞれコピーするだけでOKです。
f:id:paiza:20180328132825j:plain
シェア用のURLはSNSやメールなどで友人・知人へ送ったり、埋め込みURLを使って自分のブログやサイトに貼り付けることができます。


実際に、埋め込みURLを使って貼り付けると以下のようになります!

■多彩なシェア・公開手段について!

「CodeSandbox」では他にもいくつかの公開手段があるので、少しだけピックアップしてご紹介しておきます。

例えば、自分のGitHubアカウントと連携することで新規リポジトリを作成してエクスポートすることができます!
f:id:paiza:20180328132851j:plain
また、ZEITが提供するデプロイサービス「Now」と連携することで、プロジェクトをそのまま1クリックで公開することも可能なのは便利ですね!


さらに、QRコードを生成する機能も用意されています!
f:id:paiza:20180328133033j:plain
スマートフォンのカメラからサクッと共有できるのでオススメです。


また、プロジェクト自体を丸ごとダウンロードする機能もあります!
f:id:paiza:20180328133044j:plain
zip圧縮ファイルで取得することが可能で、自分で用意したサーバーに移動させればすぐに公開することができます。

このようにさまざまな手段を使ってシェア・公開する機能が用意されているのは大きな魅力でしょう。

JavaScript入門編は全編無料!動画で学べるpaizaラーニング


動画でプログラミングが学べるpaizaラーニングでは、JavaScript入門編はもちろんPythonJavaC言語C#PHPRubySQL、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。

JavaScript入門編」「Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。

■まとめ

今回は、完全オープンソースで公開されているWebコードエディタ「CodeSandbox」を駆け足でご紹介しました!

気軽に誰でもWebアプリを開発して公開できるエディタとしては非常に優秀で、開発用の機能も豊富なのでPCによる作業だけでなくタブレットChromebookなどでも有効活用できると思います。

ぜひ、みなさんもオリジナルのWebアプリを開発しながら楽しんでみてください!


<参考>




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

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

paizaのスキルチェック





※このブログで紹介しているキャンペーンやイベント、およびサイト内の情報については、すべて記事公開時の情報となります。閲覧されたタイミングによっては状況が変わっている場合もございますのでご了承ください。

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

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編AI機械学習入門

エンジニアのためのプログラミング転職サイト|paiza転職

プログラミング スキルチェックエンジニア求人一覧

未経験からエンジニアを目指す人の転職サイト|EN:TRY

プログラミング スキルチェックエンジニア未経験可求人一覧

エンジニアを目指す学生の就活サイト|paiza新卒

プログラミング スキルチェックエンジニア求人一覧

ブラウザを開くだけで エディタ、Webサーバ、DB等の開発環境が整う|PaizaCloud