JavaScript勉強会

JavaScriptの学習日記

React学習 オンラインの練習ツール「CodeSandbox」

Reactの勉強メモ。

Reactを準備なしですぐに練習してみたい場合、オンラインの実行環境が用意されているので、すぐに試してみることができます。

「CodeSandbox」というオンラインエディターを使うと、すぐにReactを試せます。

 

jsstudy.hatenablog.com

 

CodeSandboxとは?

(p.31)

「CodeSandbox」は、オンライン上で直接Reactなどのコードを記述できるエディターアプリケーションです。

ブラウザーでページを開くだけで、Reactを記述する環境が一式揃っており、雛形から書き始めることができます。

 

codesandbox.io

 

https://codesandbox.io/

ブラウザーでこのURLにアクセスすると、以下のようなWebページが表示されます。

 

f:id:jsstudy:20190514004512j:plain

 

「OPEN REACT」ボタンをクリックすると、エディター画面が表示されます。

 

f:id:jsstudy:20190514004707p:plain

 

これですぐにReactの練習ができるようになってました。

ちょっと試してみるなら、これで十分ですね!(超便利)

 

CodeSandboxの使い方

www.google.com

 

CodeSandboxの使い方の事例が紹介されていました。

 

qiita.com

 

こんなWebアプリが作れるそうです。

https://codesandbox.io/s/04p2pnml4n

 

codesandbox.io

 

GUIの作り方を練習するとき、簡易の電卓みたいなのを作れば良いですね?

 

blog.piyo.tech

 

類似のツールとして、「CodePen」「Cloud9」等も紹介されてました。

 

https://codepen.io/

 

aws.amazon.com

 

CodeSandboxの作者紹介

「こんな便利なツールが無料で使えるなんてすごいなー!Facebookとかが提供してくれているのかな?」と思って、フッターのブログやSNSのリンクを見てみると、どうやらオランダの学生さんが作ってるようでした。

 

medium.com

 

twitter.com

 

ivesvh.com

 

こんな便利なツールを作ってるのが大企業じゃなくて学生さんだったことに二度ビックリ!

…モノ作りにかける情熱を見習いたいと思います…。

 

CodeSandboxの感想

今の段階では、Reactを使いこなせていないので、CodeSandboxのありがたみもいまいちよく分かりませんでした。

とりあえず、Windows10+Visual Studio CodeでReactの練習環境を構築してしまったので、これで練習してみようと思います。

 

出先で自分のパソコンがない場合など、CodeSandboxは役に立ちそうだと思いました。

 

 

 

React開発 現場の教科書

React開発 現場の教科書