JavaScriptで円を描いてみた 日本語変数で😊
毎回ヘンなことばっかりやっております😆
今回はタイトルの通り、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>