【JavaScript】 No

2025/4/28 作成

JavaScript

気軽に始めるシリーズとして、最初にJavaScriptを扱っていこうかと思います。これを始めようと思った経緯は、自分がちゃんとアウトプットできていないからです。特にプログラミングに関しては知りたい人がかなり多くいると思われます。なんせ、プログラミングでゲームを作ることもできるからです。もちろんちゃんとしたゲームを作るのにはゲームエンジンがあったほうが便利ですが、ちょっとしたゲームならプログラミングのみで作ることもできます。この自由さから、自分もプログラミングをやっているのです。

JavaScriptというのはWebサイトに動的な処理を入れるのに使います。具体的には、ページの画像をゆらゆらさせたり、スライドできるようにしたり、開閉メニューを作るのに使われます。しかし、それはもはや定型であり、やっていて楽しいのかと聞かれたら義務感があり、まあこんなもんだろうとしか思わないでしょう。それよりももっと自由度の高いプログラミングをしていきたいものです。自分の目指すべき道もそんなところです。

個人的には、気軽に30分程度で記事を書けていけたらなあと思っています。なので、多少短くなることは必至です。ただ、毎回上手く簡潔させていきたいとは思っているので、付き合う方はよろしくお願いします。

そうそう、最近というか、今日から頭に描いたものをそのまま作ることにしています。そうなると、やはり自分のやることを記事にしていったほうが、客観的に満足できるものになるのです。では、JavaScriptを始めていきましょう。

Canvasに円を描画して動かす

と思ったのですが、もう時間がないので、一気にCanvasに円を描画して動かして終わります。ここではあくまでプログラミングに集中するので、ファイルの使い方、開発環境の構築、HTML&CSSの使い方に関しては説明しないのでご了承ください。

デスクトップなどに新しいフォルダを作り、それをVisual Studio Codeにドラッグ&ドロップし、フォルダの中に「index.html」ファイルと「main.js」ファイルを作りましょう。そして、index.htmlファイルを開き、次のように書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>円を動かす</title>
    <style>
        body{
            margin: 0;
            overflow: hidden;
        }
        canvas{
            display: block;
            margin: 120px auto;
            border: 1px solid;
        }
    </style>
</head>
<body>
    <canvas width="640" height="480"></canvas>
    <script src="main.js"></script>
</body>
</html>

そして、main.jsファイルのほうには、次のコードを書きます。

const canvas = document.querySelector("canvas")
const ctx = canvas.getContext("2d")
const width = canvas.width, height = canvas.height

let keyRight = false, keyLeft = false, keyUp = false, keyDown = false

document.addEventListener("keydown", (e) => {
    if(e.key == "ArrowRight") keyRight = true
    if(e.key == "ArrowLeft") keyLeft = true
    if(e.key == "ArrowUp") keyUp = true
    if(e.key == "ArrowDown") keyDown = true
})

document.addEventListener("keyup", (e) => {
    if(e.key == "ArrowRight") keyRight = false
    if(e.key == "ArrowLeft") keyLeft = false
    if(e.key == "ArrowUp") keyUp = false
    if(e.key == "ArrowDown") keyDown = false
})

function drawRect(x, y, w, h, col){
    ctx.fillStyle = col
    ctx.fillRect(x, y, w, h)
}

function drawCircle(x, y, r, col){
    ctx.beginPath()
    ctx.arc(x, y, r, 0, 2*Math.PI)
    ctx.fillStyle = col
    ctx.fill()
    ctx.stroke()
}

let posX = width/2
let posY = height/2

function loop(){
    drawRect(0, 0, width, height, "ivory")

    if(keyRight) posX += 4
    if(keyLeft) posX -= 4
    if(keyUp) posY -= 4
    if(keyDown) posY += 4

    drawCircle(posX, posY, 20, "Yellow")

    requestAnimationFrame(loop)
}

onload = loop

index.htmlファイルをダブルクリックでブラウザを開くと、次のように表示され、方向キーで黄色の円を動かすことができるはずです。

30分ほどで記事を書くと書きましたが、プログラム自体は既に自分が作ったものしか利用できないことになりそうです。たしかに、考えながらプログラムを書いていると30分どころか2時間とかかかってしまいそうです。既に自分がやったことを書くというスタイルでやっていきましょう。また、プログラムを載せて解説していくとなると、とてもじゃないけど30分で書くことは不可能です(とてもですね)。なので、ある結果を生み出すコードを書いて、次回解説するというやり方になるかもしれません。まだ様子見ですね。

ということで、次回解説するか、また新しいプログラムを書いていくことにしましょう。