プログラミング練習記、つまずいていたのは開発環境

このごろの畑は…

クレソンは開花のピークを迎えて、

気になっていた田んぼの準備として、田んぼのあら起こし取り掛かっています。

今年は雨が多かったので、ようやくトラクターで耕せました(>_<)

今日はしっかりと降った雨の一日でした。

雨の合間を縫って草刈りをしたり、

最近ハマっているプログラミングなんかをいじってみたりしていました。

これまで行き詰っていたプログラミングをする環境をどうにかすることができたので、

備忘録代わりにブログにまとめたいと思います。

プログラミング練習記、問題は開発環境

遠距離の場所でクレソンを育てているので、

遠隔地でもweb経由で畑の状況をチェックしたい。

というキッカケで始めたプログラミンの勉強でしたが、

プログラミングのサンプルコードを入力して試してみようにも、

なかなかうまく実行できないという問題で困っていました。

本を読んでも、開発環境についてはサラっと触れるだけです。

例えばこんなのをダウンロードすればいいですよー

と書いてあっても、

どうやってすればいいのか…と途方に暮れていました。

ほうぼう調べてみたところ、

web上のブラウザでコードを掻くことができるサービスがある!

ということで、プログラミングの勉強をするために、

サンプルコードを写経しながら覚えるということが可能になりました!(拍手👏パチパチ)

これがcodesandoboxです

というわけで、こちらがcodesandboxです。

コードからグラフを書いているところです。

そして、こちらがその実行したグラフになります。

D3:SVG bar chart with balue(centered)

詳細はこちらの引用にある通り、

CodeSandboxは開発用ツールを自分で用意することなく、クラウド上に用意し、ブラウザからコードを書くことができるサービスです。

引用元:note noonworks2020年2月13日「(2) CodeSandboxでサンプルを動かす – デザイナー向けのVue.js紹介

ブラウザでコードをかけるサービスとなります。

英語での説明で理解しづらいところがありましたが、

CodeSandboxの公式テンプレート「Static」(筆者注:html&cssという名前でした)は、特別な機能のない、HTMLファイルだけのサンドボックスを作るテンプレートです。まずはこれを使ってエディターの操作に慣れるといいでしょう。

引用元:note noonworks2020年2月13日「(2) CodeSandboxでサンプルを動かす – デザイナー向けのVue.js紹介

と、引用した通り、

サンプルコードを入力して確認するには「html&css」というテンプレートを使うと操作できました。

詳細な登録方法や操作方法は引用元をご参照ください。

つまずいたのは、ファイルを新規で開くときに

「+Repository」でも「+Devbox」でもなく、

「+Sandbox」を選択して、html&cssを選択して始めること。

そして、わからないときはchatGPTに尋ねると優しく教えてくれます。

まとめ

最近、クレソン畑は開花のピークで、田んぼの準備も進行中。

雨が多かったが、ようやくトラクターで耕すことができた。

本日は雨。わずかな晴れ間に草刈りや雨宿りがてらプログラミングなどを。

遠隔地でクレソンを育てるためにプログラミングを学び始めたが、

実行環境につまずき、CodeSandboxの便利さを発見。

サンプルコードを書きながら学ぶことができ、chatGPTに聞けば優しく教えてもらえる。