kabablog
Programming

CodeSandBoxとGitHubとを連携して、どこでもJavascriptが書ける環境を構築

はじめに

最近は、仕事でコーディングをすることが少ないため、プログラミングを忘れてしまうことがあります。しかし、プログラミングは常に手を動かさないと、なまってしまうため、どうにか継続しないといけません。

なぜコーディングをしないのか

「必要がないから」

やはり仕事で使わないと、必要性を感じないため、コーディングをしなくなってしまいます。

「コードを書くまでのハードルが高いから」

Javascriptはブラウザがあれば、実行を試すことができるのですが、ただのテキストエディタで書くのは非効率です。そこで、VSCodeなどのリッチなテキストエディタを入れることが多いと思うのですが、環境が変わるごとにインストールするのは大変です。VSCodeはMarkdown形式で書けるので、その他の用途で使うと思うので、意外と大丈夫な人も多いとも思います。テキストエディタ以外にも、いちいちブラウザを使ってデバッグするの大変ということも考えられます。そうすると、node.jsを入れて簡易的にJavascriptを実行することも考えるかもしれません。やはり、環境ごとにインストールするのは大変です。

ということで対処方法を考えます。

対処方法について

必要がないから

本当に必要なければ、コード書くのはあきらめましょう。

しかし、書きたい!という気持ちが残っているならば、簡単なコードや、既存のアプリの模写をやってみるのも楽しいと思います。

仕事でなく、単純に楽しみましょう!ということです。何かものを作るのは楽しいことです、せっかくなので楽しんでしまいましょう。

楽しめないなら、プログラミングは不要なんだと思います。きっぱりあきらめましょう。他にエネルギーを使った方がいいと思うのです。

コードを書くまでのハードルが高いから

いちいち、様々な環境に構築するのは面倒臭いです。そこで利用を考えたいのは、ブラウザ上で実行できる環境です。ブラウザだけあればコードを書いて試すことができるのです。

AWSであれば、Cloud9などありますし、VSCodeもWebから利用できるようになりつつあり、技術が進歩したおかげで、ローカル環境でなくともプログラムが書けてしまうのです。

CodeSandBoxとは

CodeSandBoxとは、Web上で利用するIDEです。利用できる主な言語はJavascriptです。node.jsも利用できます。

(引用元)CodeSandBoxのページより

CodeSandBoxを使ってみる

右上にあるCreate Sandboxボタンを押すと、使用するフレームワークを選択することができます。

Vanillaを選んでみます。Vanillaは素のJavascriptです。

ボタンを押すとひな形のファイルが自動的に生成されて、以下のような構成となります。

左から、「ディレクトリ構成」、「エディタ」、「プレビュー」です。

CodeSandBoxはホットリロードに対応しているので、エディタでコードを変更すると、プレビューも更新されます。

CodeSandBoxとGitHubとを連携してみる

どこでも編集できるとなると、ローカル環境に保存するではなく、GitHubなどのリポジトリサイトに登録することがおすすめです。

CodeSandBoxはGitHubとの連携ができます。

GitHubのリポジトリと紐づける

まず、一番左にある、GitHubのアイコンをクリックすると、下の様な画面が表示されます。

リポジトリ名を入力し、Create new repository on Githubを押すと、Github上にリポジトリを作成できます。また、初期ファイルから変更をした際には、Link SandBoxを押すと、変更理由や詳細を入力でき、コミットすると、GitHubリポジトリへ反映することができます。

おわりに

私も、CodeSandBoxを使うようになり、スキマ時間を使ってコードを書くようになりました。

何かものを作るのは楽しいですね。

Blog Ranking Site

よかったら応援クリックお願いします!

にほんブログ村 旅行ブログ 東南アジア旅行へ
にほんブログ村 にほんブログ村 旅行ブログへ
にほんブログ村 PVアクセスランキング にほんブログ村