開発環境ってどうやんの

2021年2月8日 16:53

プログラミング学習中のりょうさまです。

Progateでは、学習者に直接ソースコードを打たせる、
テクノロジアでは、それに加えて
予め用意された画像や音の素材を利用して
実際にゲームを作ったり、絵を動かしたり

画面を確認しながらソースコードを打ちこむことが出来るようになってるわけです。

で、テクノロジアの方は5章までクリアー。
（１～４章まではセットで販売、5章以降は追加購入するシステム）

Progateは4章のクラスについて学ぶ所まで来ました。

で、思ったんだけど。
そろそろ自力で簡単なゲームなら作れるんじゃないか？って。

YouTubeでプログラミング学習について誰かが言ってたんだけど
「学習教材を周回するより実際に作ってみる方が一番身につく」
とのことだし。

やってみようか、と。

で、問題。

どこでどう作ればいいのか？

まぁつまりは、テクノロジアの方ではソースコードを打つ場所も
実行される画面も用意されてたけど
いざ自分でやるとなるとどこに書けばいいのか？

「メモ帳」の拡張子「.txt」を「.html」や「.js」に書き換えれば
そのままソースコード扱いになることは知ってる。
（昔ニコニコ動画のプログラミング講座で知った。）

メモ帳じゃなくて。何て言うんだっけ…
ソースコードを打ち込みやすいやつ。
打ち込んだ文字の属性で文字の色が変わったり
エンターキーを押したら自動で頭に空白（インデント）を作ってくれたり

そうだ、開発環境ってやつだ。
テキストエディタっていうらしい。

【Windows編】フリーテキストエディタ13選！初心者にもおすすめ https://eng-entrance.com/free_texteditor_windows

Atomってのを選んだ。使いやすそうなので。タダだし。

パソコン上にフォルダを作って、その中に
html、JavaScriptのソースコードを保存し、
それぞれをAtomで編集しつつ。
htmlはwebブラウザで実行。
その２つを画面の半分ずつに配置すれば一応
画面を確認しながらの編集が出来る。

これでhtmlは見ながら作れるようになった。

JavaScriptはどうすればいいのか…。

htmlにJavaScriptを埋め込んで…ってやり方をするらしいんだけど。
今そこで苦戦してる所。

JavaScriptで　テクノロジアで習った通りの画面を作るコード

function setup(){
createCanvas(500,500);
}

function draw(){
background(255,255,255);
}

って風に打ち込んで　htmlでは

<!DOCTYPE html>
<html>
<head></head>
<body>
<script type="text/javascript" src="main.js"></script>
</body>
</html>

って風に打っても。webブラウザーの画面は真っ白で何も表示されん。
昨日はずっとこの辺の方法を探してました。

テクノロジアって作り方は教えてくれるけど　いざ自分でやる方法
教えてくれてないな…この先に進めたら教えてもらえるのか？

まぁそんな感じです今。

この記事が気に入ったらサポートをしてみませんか？