JavaScriptで円を描いてみた　日本語変数で😊

2024年3月31日 13:07

毎回ヘンなことばっかりやっております😆

今回はタイトルの通り、JavaScriptで日本語変数関数を使って円を描いてみました。
埋め込みができなくなっちゃったようなので、Xへの直リンクで。。
https://twitter.com/moegiiro_com/status/1774281235914965165?s=20

もともとJavaScriptは日本語によるコーディングにも対応すると言われていたので、じゃぁやってみようかと思い立って書いたのが以下のコードです。
気持ち悪いと思われた方はお引き取りください。たぶん意見があいません。。
またscriptタグ内のコードはhtmlの閉じタグの後ろに書いています。これも意図して書いています。scriptタグ内のスクリプトはbodyの閉じタグの直前に書くのが暗黙のルールになっていますが、このスクリプトは完全にhtmlとは別に動くので、html外に書いた方が見通しがいいんじゃないかと思ってです。
さらに、関数はfunctionじゃなくてアロー関数使えというツッコミもありそうですが、嫌いなもので。。
あと x, y の変数名は横, 縦にしてもいいんだけど、ここはx, y の方がイメージが慣れているのであえて日本語にはしませんでした。

昔からAccessのVBAで日本語の変数関数を使っていたので、私としては日本語での記述は気になりませんが、VBA以外では見慣れないので、まだちょっと違和感があるけど、コレも慣れの問題かなぁと思います。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<title>円を描く</title>
	</head>
	<body>
		<canvas id="描画枠" style="border:black solid 1px;" width="600" height="600"></canvas>
		<div    id="出力枠" style="border:black solid 1px;  width: 600px"></div>
	</body>
</html>
<script>
/**
 * JavaScriptで円を描く　その際、変数や関数を日本語で記述してみる.
 * 
 * 描画枠を600x600として、円の大きさを半径150、中心(原点)をx,yとも300とする.
*/
	// 初期化
	const 描画	= document.getElementById("描画枠").getContext("2d");
	const 出力	= document.getElementById("出力枠");
	const 半径	= 150;
	const 原点x	= 300;
	const 原点y	= 300;
	let   座標x	=   0;
	let   座標y	=   0;
	let   角度	=   0;

	// 計算関数
	function 計算座標x(角度値){
		return 半径 * Math.cos(角度値 * Math.PI / 180); //角度値をラジアンに変換してからcos計算
	}
	function 計算座標y(角度値){
		return 半径 * Math.sin(角度値 * Math.PI / 180); //角度値をラジアンに変換してからsin計算
	}

	// 描画方法を定義
	function メインループ(){
		座標x = 計算座標x(角度) + 原点x;
		座標y = 計算座標y(角度) + 原点y;

		描画.beginPath();
		描画.arc(座標x, 座標y, 5, 0, 360);
		描画.fill();
		出力.innerText = `角度:${角度} X:${座標x.toFixed(4)} Y:${座標y.toFixed(4)}`;

		角度++;
		if (角度 > 360) {						// 1周描画したら
			描画.clearRect(0, 0, 600, 600);		// 画面消去
			角度 = 0;
		}
		requestAnimationFrame(メインループ);	// 描画を繰り返し(ループ)
	}

	// 描画開始
	メインループ();
</script>

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

JavaScriptで円を描いてみた 日本語変数で😊

JavaScriptで円を描いてみた　日本語変数で😊