2025/9/7
【I1】JavaScriptの使い方
情報の第1弾は「JavaScriptの使い方」についてです。情報というのは前頭葉を使った抽象的なものであり、運動、視覚、聴覚とは違ったものです。自分は均等にやっていきたいので、それぞれのページを作りやっていきたいと考えています。情報でも、プログラミングに関するもの、自然科学に関するもの、電子工作に関するものといろいろありますが、今回は学んで遊べそうなプログラミング、JavaScriptを選びました。そうですね、あまり時間をかけると他のことができなくなるので、30分くらいで書ける内容にしたいです。なので、「環境構築」「変数の使い方」のように分けず、一つのタイトルだけで書いていきたいと思います。
JavaScriptというのはWebサイトを動的なものにするための言語です。動的なものとは、たとえばアニメーションで上下左右に動かしたり、ボタンを押したらページを変更せずに見た目を変えたりといったものです。よくあるスライド画像もJavaScripが使われています。開閉メニューもJavaScriptですね。
JavaScriptはHTMLの中に埋め込んで使います。まずはhtmlファイルを作りましょう。環境はVisual Studio Code(通称:VSCode)を使います。デスクトップなどにJavaScriptフォルダを作り、それをVSCodeにドラッグ&ドロップします。そして、[新しいファイル]から「index.html」ファイルを作りましょう。
次に、htmlの基本形を書きます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScriptを使う</title>
</head>
<body>
</body>
</html>
この説明をすると長くなるので飛ばします。今回は簡単にボタンを押したら文字を変更するプログラムを書いていきましょう。まずはこのように書きます。
<body>
<p id="text">テキストです</p>
<button id="btn">テキスト変更ボタン</button>
<script>
</script>
</body>
pというのは段落であり文字を書く部分で、buttonというのがボタンを表示させるものです。idを使うことによりJavaScriptでその要素を呼び出すことができます。JavaScriptはscript要素の中に書いていきます。では、実際にボタンを押したらp要素の内容が変わるプログラムを書きましょう。
<script>
const text = document.querySelector("#text")
const btn = document.querySelector("#btn")
btn.addEventListener("click", () => {
text.textContent = "ボタンを押しました"
})
</script>
このように書くことで、ボタンを押したらp要素の内容が「ボタンを押しました」に変わります
constが定数を扱うもので、textという定数に、p要素を入れています。要素を指定するには、documentオブジェクトのquerySelectorメソッドを使っています。メソッドには引数を入れることができ、今回はidを指定して入れています。idを指定する場合は先頭に#を使います。#textと入れたので、p要素のidを入れたことになり、こうすることでtext定数にidがtextのp要素を入れることができるのです。btnも同じ要領でbutton要素を入れています。
btn.addEventListenerというのは、buttonのイベントを作るものです。今回は"click"としているので、ボタンをクリックしたイベントを呼び出すことができます。第二引数に入れているのは関数です。関数を簡単に書くためにアロー関数という簡単な関数の書き方で書いています。クリックしたら第二引数の関数が呼ばれるという流れになります。text.textContent = "ボタンを押しました"と書くことにより、text、つまりはp要素の内容を「ボタンを押しました」という内容に変えているのです。ちなみに、text.textContextというのは、テキスト要素のtextContentというプロパティであり、その要素を=の右の値に変えているのです。textというのが自分が作った変数ですが、textContentはオブジェクトに元々組み込まれている値になっています。
ボタンを何回押しても同じ文字でもうちょっと変化が欲しいので、押された数をカウントして終わりましょう。次のプログラムに変更します。
const text = document.querySelector("#text")
const btn = document.querySelector("#btn")
let count = 0
btn.addEventListener("click", () => {
count++
text.textContent = `${count}回ボタンを押しました`
})
constというのが定数で、letが変数を宣言するものになります。今回はcount変数を作り、0の値を入れています。そして、クリックしたらcountをプラスし、文字列の中にcountの値を入れて何回カウントしたのかを表示しています。注意すべき点は"(ダブルクォーテーション)ではなく、`(バッククォート)を使っている点です。どちらも文字を出力するためのものですが、バッククォート(`)を使うと中に変数を入れられるという点が違います。見た目的にこちらのほうがスッキリするので自分はよくバッククォートを利用しています。変数を使うときは${}の中に変数を書く感じですね。
これでボタンを押したら数字が増えるという楽しいプログラムが作れました。時間としては30分以上かかりましたが、丁度良くやろうとすると結構時間がかかりますね。こんな感じで情報を更新していけたらと思います。