ブラウザ上で環境の設定をすることなく開発を行うことができるCodeSandbox(コードサンドボックス)についての紹介記事です。
ReactやVueなどのよく利用されているフレームワークも気軽に利用することができ、GitHub連携をしてバージョン管理も行うことができる優秀なエディターですので、是非一度触ってみてください。
CodeSandboxとは
CodeSandbox(コードサンドボックス)とはWeb上で無料で利用できるエディターです。煩わしい開発環境を整える必要がなく、プログラミング学習を始める初心者にとっても優しいのが特徴です。
主に利用する言語はフロントエンドで動的な処理を行うことができるようになるJavaScriptで、それに関連する多数の言語やフレームワークも利用することができます。
基本的にはGoogleアカウントやGitHubアカウントでサインインして利用することをお勧めしていますが、ユーザー登録なしでも気軽に利用できます。
必要なのがPCとインターネット環境だけというとても導入コストが低いので環境構築で挫折してしまった方なども問題なく使用することができるのはとてもありがたいですね。
これからJavaScriptを学習したい方は是非一度利用してみてください。
- Web上で無料で利用できるオンラインエディター
- ユーザー登録なしで利用できる
- GitHubと連携することができる
- 環境構築の必要がない
CodeSandboxの始め方
chromeなどのブラウザで『CodeSandbox』と検索をします。一応リンクで飛べるように張っておきますが、不安な方はご自身で検索してご利用ください。
上記画像の通りCodeSandbox(コードサンドボックス)のホームページが開いたら画面右上にある赤枠内の『Create sandbox』を選択します。
表示されたウィンドウの左リスト中段の『+ Create sandbox』を選択します。
表示されたウィンドウに様々な開発環境が表示されるので任意の環境を選択します。
今回は使用例として『Vanilla』を選択しておきます。
ちなみにVanillaとは素のJavaScriptのことで、ライブラリなどの入っていないJavaScriptだけで開発を行っていく環境のことです。
画面を開くと3分割されており、それぞれ左からファイル一覧、真ん中はコードを記述するエディタ部分、右はコードの出力画面で実際にブラウザに表示させた場合の出力確認ができます。
この画面で実際に開発を行うことができるようになりました。
実際に画面を触ってJavaScriptの学習を継続できそうだなと感じたらぜひユーザー登録をしてGitHub連携なども行ってみましょう。
CodeSandboxの基本機能と使い方
CodeSandboxの基本的な機能と使い方について紹介していきます。
- リアルタイムで編集結果を確認できるホットリロード
- 自動でコードを整形してくれるツールPrettierを搭載
- Githubと連携をすることができる
機能紹介
リアルタイムで編集結果を確認できるホットリロード
ホットリロードとはエディター部分で編集した内容をリアルタイムでブラウザに反映させてくれる開発サポートツールです。
通常の開発では下記の4つの工程で画面に反映させて確認を行えますが、ホットリロードを利用すると2つの手順だけで記述した内容や動作を確認することができます。
通常の開発工程
コード編集 ⇒ ファイル保存 ⇒ ブラウザ更新 ⇒ ブラウザに反映
ホットリロードを利用した開発工程
コード編集 ⇒ ブラウザに反映
自動でコードを整形してくれるツールPrettierを搭載
雑にコードを記述しても記述内容を自動で最適な状態に整形してくれる機能です。
初めてプログラミング言語を学んでいるとインデント(文章の行頭に空白を挿入して文字の位置を調整すること)のつけ方などがわからず、コードがとても読みにくくなってしまう場合があります。
そのような方でも常に最適なコードの整形をエディター自身で行ってくれるのでとても便利です。
ただし、こちらには欠点もあり、自分の記述方法が確立されている方にとってはその記述すらも勝手に整形されてしまうので上級者にとっては必ずしも大きなメリットがあるとはいいがたいですね。
Githubと連携をすることができる
CodeSandboxはGitHubと連携してプロジェクトを管理してくことができます。すでにアカウントを作成してあればユーザーIDとパスワードのみで簡単に連携することができ、プロジェクトの開始やコミットなどもCodeSandbox側から行うことができます。
自信の作業経歴としてもGitHubでコードを管理するのは便利なので、まだアカウント作成をしていない方はぜひこの機会にGitHubのアカウントも作成してしまいましょう。
実際の開発現場などでも利用されているので概念的なものだけでも理解しておくと仕事で利用する際にも学習しやすいかと思います。
GitHubとの連携方法については下記の記事で紹介していますので参照してください。
基本的な操作方法と使い方
ファイルの保存
直接ウィンドウ操作で作業内容を保存したい場合には、上記の画像のように画面左上の三本線よりfile ⇒ Saveで保存することができます。
未保存の記述がある場合にはファイルの横に白または青色の〇マークがついており、未保存であることが目視で分かるようになっています。
添付の画像ではIndex.htmlのファイルは修正されていて未保存のためファイル名の横に〇がついています。
保存済み、もしくは修正のないファイルの横には何もついていません。
ファイルやフォルダの追加・修正
画面左のファイル一覧画面にてsrcフォルダにマウスをホバーすると下記4つの機能が表示されます。
- 鉛筆マーク ⇒ ファイル・フォルダのリネーム
- ファイルマーク ⇒ ファイルの追加
- フォルダマーク ⇒ フォルダ追加
- ×マーク ⇒ 削除
新しくフォルダを作成した際に、作成したフォルダの直下にファイルを作成したい場合には作成したフォルダのファイルマークを選択して作成する必要があります。
console(コンソール)を確認する
上記の画像の通り赤枠をクリックします。
ブラウザ画面右下にVマークがあるのでそこを選択するとchromeなどでデベロッパーツールとして開くconsole画面を確認することができます。
コンソール画面が開いたら、赤枠内にコードを記述することができます。記述したコードはエンターキーで実行して上部の青枠に出力結果が表示されます。
【CodeSandbox】開発を加速させる便利なショートカットキー一覧(Mac/Windows)
困ったときの対処方法
ブラウザが更新されない
通信環境によって度々起こる。画面出力のブラウザ上部にリロードボタンがあるため選択して確認。
もしくはCodeSandboxの画面自体のリロードを試す(必ず保存を忘れずに)
