Reactの環境構築につまずいた全ての人へCodeSandboxをオススメする理由と使い方

---

絶賛React勉強中のじゃけぇです。

何か新しい言語やフレームワークを勉強しようとしたときに誰もがぶつかる壁、それが




環境構築




全ての仕事は環境構築から始まると言っても過言ではありません。

そして多くの時間をここに割かれてしまうのも事実、、、

世界にこんにちはするまで１週間かかったぜ、、、なんてことも



私がReactの勉強を始めた時も、環境構築から始めましたがはやり色々エラーがでました。

しかし環境構築など全くせずにReactの開発ができるサイトがあることを知りました。

その名も




CodeSandbox




名前もお洒落(‘Д’)

自分の勉強や軽くアプリを作る程度なら絶対オススメです。紹介していきたいと思います。

CodeSandboxとは

CodeSandboxはオープンソースのオンラインエディタで、サイトにアクセスするだけで世界中誰でも気軽に利用することができます。

なんとReactだけでなく、以下のようにこんなに多くの言語・フレームワークに対応しています。

私の思うCodeSandboxの評価すべき点は以下です。
とにかくお洒落。テーマも変えれたりする。
GitHubとの連携が容易
シェアしたい、ブログにiframeで上げたい時など、シェア用URLが色々用意されている
モジュールのimportなどが画面上で簡単に行える
保存時に自動でフォーマットしてくれる


小規模の開発だったらこれで完結すんじゃね！？ってレベルです。

快適サクサク感もかなりのもので、サイトにアクセスしてからReactのHello World的な画面を表示するまで5秒くらいですかね。

何よりやばいのは、オランダ人で開発者のIves van Hoorneさんは今年22歳の年でまだ21歳みたいです(1996年12月20日生まれ)

CodeSandboxの使い方

ではCodeSandboxの使い方を説明します。

まずはCodeSandboxの公式サイトにアクセスします。

右上のCreate Sandboxを押下



テンプレートを選択(今回はReactを作成するのでReactを押下)



以上！

最低限のファイルが設定された状態でプロジェクトが作成されます。

私が１日かけてやった作業が5秒で終わりました。

Oh My Ives

CodeSandboxの各種機能の説明

Hello CodeSandboxが表示されたところで各機能を簡単に説明します。

各種設定

下記ボタンを押すと、CodeSandboxに関する各種設定を行える画面が開きます。

↓



「Appearance」のフォントやテーマなどが真っ先にいじりたい部分ですかね。

あとは、CodeSandboxはファイルの保存時に勝手に設定したフォーマットに変換される(※)のでその設定などは「Prettier Settings」で行います。

(※)シングルクォーテーションをダブルクォーテーションに変換したり、HTMLタグを綺麗に整形したりなど

その他は特に触らなくても大丈夫だと思います。

GitHubアカウントとの接続

右上の「Sign in with GitHub」を押すとGitHubアカウントにログインできます。



既に同じセッションでGitHubにログインしている場合は、１度ポップアップがあがりますがすぐに閉じて自動でログインしてくれます。

まだログインしていない場合は以下のような画面が表示されるのでログイン情報を入力して「Sign in」を押します。

プロジェクト・エクスプローラー部分について

画面左部にプロジェクト・エクスプローラーがあります。

Reactの場合はデフォルトで

という感じで設定されています。

各ファイルをダブルクリックすることでエディタ部に表示されます。

また、各フォルダ部分にマウスオーバーするとメニューが表示され、「名前の変更」「ファイルのエクスポート」「配下にフォルダの作成」「配下にファイルの作成」「削除」などが出来ます。



「Dependendies」には現在追加されているモジュールが表示されます。

新たに追加したい場合は、「Add Dependency」を押します。

追加したいモジュール名で検索して対象モジュールを選択すると取り込みが行われます。

選択した「redux」が追加されているのが確認できます。



因みに上記モジュールのインポートなど、なんか画面でいじったりすると画面の左側にひょこっとメニューがでてきます(笑)

最初から出しておいてほしい、、、

ForkとShare

上部の「Fork」を押すと、現在のプロジェクトをコピーして新しいプロジェクトを開始することができます。



確認されるのでOKを選択

一見何も変わってないように見えますがアドレスバーを見るとURLが変わっていることが確認できます。

下記のShareの際のURL等も変わるので別のものとして公開することができます。

上部の「share」を押すと、様々なオプションや方法でアプリをシェアすることができます。

各オプションは自分で色々試してみてください。
URLやiframe、ボタン、Markdown、HTML、なんとQRコードまであります。

コンソールやエラー情報

少し気付き辛いですが、右下の「＾」ボタンを押すとコンソールが表示され、console.log()の内容やエラーの内容を確認することができます。

画面の表示方法を変える

大きい画面で確認したい場合は、画面右部の下記ボタンを押すことで別タブで画面を表示することも可能です。



また、デフォルトでは右部に画面が表示されていますが、下記ボタンを押すことで下部に表示するように変更できます。

↓「うにゅん」って変化します(笑)



以上がよく使う機能の説明の説明です。

その他にも色々機能があるので試してみてください＾＾

さいごに

Reactの開発がサクサクできるCodeSandboxについて紹介しました。

今後の機能拡張にも期待ですね。

まぁとは言ってもNode.jsのインストールしたり、npmについての知識もつくので１回は自分のPCにReactの環境を作るのはやってみることをオススメします。

さぁてReduxについて勉強するかなぁ～

それでは！また！！