JavaScriptでいいねボタンを作る

ぎぐん

2024年3月14日 00:40

はじめに

プログラミングを始めようと、Visual Studio Codeをインストールしたものの、使い方が分からず挫折した~~（過去の僕）~~人でも作れるように書きました。

使うもの

テキストエディタ（ VS Codeを使います）
ブラウザ

手順

1.テキストエディタのダウンロードとインストール

VS Code をダウンロードし、インストールします。

2.コードを保存するためのフォルダを作成

以下のディレクトリ構成で、コードを保存するためのフォルダを作成します。

C:\
└── dev\
    └── sns\
        ├── like_button.html
        └── script.js

(ディレクトリ構成の時短技)

windowsキー+Rを押して、「実行」ダイアログを開きます。
"cmd"と入力してEnterを押します。

下記のコードをコピーして、cmdにペーストする。

mkdir C:\dev\sns
echo. > C:\dev\sns\like_button.html
echo. > C:\dev\sns\script.js

3.VS Codeを立ち上げてプロジェクトを開く

４.HTMLファイルの記述

like_button.htmlファイルを選択し、以下のコードをペーストします。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>いいねボタン</title>
</head>
<body>
    <button id="likeButton">いいね</button>
    <span id="likeCount"></span>
    <script src="script.js"></script>
</body>
</html>

5.Javascriptファイルの記述

script.jsファイルを開き、以下のコードをペーストします。

// カウント用の変数
let count = 0; 

// いいねボタンの要素を取得
const likeButton = document.getElementById("like");

//取得したいいねボタンがクリックされた時、カウントを1つ増やして再代入する
likeButton.addEventListener("click", function () {
    count++;
    const likeCountElement = document.getElementById("likeCount")
    likeCountElement.textContent = count;
})

まとめ

以上で、いいねボタンを作成するための手順が完了しました。JavaScriptを使用していいねボタンのクリックごとにカウントが増えるようにしました。

＋アルファ（コードの説明）

独学で勉強する人のために分かりやすいリンクを紹介します。

HTMLのheadとbodyについて

Javascriptの変数について

(概要)

基本constを使う
数え上げはlet
varは使わない

getElementByIdとtextContentについて

addEventListenerについて

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