はじめに
現在web制作の勉強として、jQueryの勉強をしているのですが、jQueryの学習が楽に感じたJavaScriptの勉強法を紹介します！
JavaScriptの勉強方法
web制作のための勉強なので、DOM操作とイベント処理についてのみの勉強方法ですが、他にも応用可能だと思っています。
以下の手順で進めました。
- JavaScriptの基本文法
- DOM操作のメソッドの確認
- DOM操作、イベント処理のコードの書き方
- 演習を通して、コードを書く
JavaScriptの基本文法
まずはJavaScriptの基本文法からやっていきます。
1.変数の宣言
let name = "太郎";
const age = 20;
-
letは値を後で変更できる変数 -
constは値を後で変更できない変数
javascriptはpythonとは異なり、文末に;が必要です。
2.データの種類(データ型)
let text = "こんにちは";//文字列
let number = 10; //数値
let flag = true; //真偽値
データ型は自ら定義しなくても自動的に設定してくれます。
3.条件分岐(if文)
let score = 80;
if (score >= 70) {
console.log("合格です！");
} else {
console.log("残念、不合格です。");
}
4.繰り返し処理(for文)
for (let i = 0; i < 5; i++) {
console.log("こんにちは！");
}
上記の例では、「こんにちは！」が5回表示されます。条件式の中で、変数を定義することもできます。
5.関数(function)
関数はweb制作においてとても重要なので、しっかり理解しておきましょう。
function sayHello() {
console.log("こんにちは！");
}
sayHello(); // 関数を呼び出す
特定の処理をまとめておくことで、何度も同じ記述をする手間を省くことができます。
だいたいこの辺りを理解しておくだけで十分です。全然コード書けないよって状態でも、この後に演習を行っていく中で、徐々にかけるようになっていきます！！
DOM操作のメソッド確認
ここでは、DOM操作と呼ばれるjavascriptで行えるブラウザに表示されているHTMLの要素操作についてのメソッドにどんなものがあるかを確認します。
よく使うDOM操作メソッドを以下にまとめました！
1.document.getElementById()
htmlのID要素を所得します。
const title = document.getElementById("main-title");
<h1 id="main-title">こんにちは！</h1>
2.document.querySelector()
CSSのセレクタで要素を1つ取得します。
const item = document.querySelector(".menu-item");
#id名や.クラス名など()内はCSSと同じ書き方で記述します。
3.document.querySelectorAll()
複数の要素をまとめて取得することができます。
const items = document.querySelectorAll(".menu-item");
items.forEach(function(item) {
console.log(item.textContent);
});
4..textContent
要素の中の文字を読み取ったり、変更できます。
title.textContent = "新しいタイトルです";
5..innerHTML
HTMLの中身ごと書き換えたいときに使います。.textContentと異なる点は、htmlのタグごと書き換えられる点です。
const box = document.getElementById("box");
box.innerHTML = "<p>新しい内容</p>";
6..classList.add()/.remove()/.toggle()
CSSにクラスを追加・削除することができます。
box.classList.add("active");
box.classList.remove("active");
box.classList.toggle("active"); // ON/OFF切り替え
7..setAttribute()/.getAttribute()
属性(id,src,hrefなど)を操作できます。
const link = document.querySelector("a");
link.setAttribute("href", "https://example.com");
const url = link.getAttribute("href");
8..style
直接CSSを指定することができます。
box.style.backgroundColor = "red";
box.style.fontSize = "20px";
まずはこの辺を覚えておけば大丈夫です！！
DOM操作、イベント処理のコードの書き方
確認したメソッドを使って、どのようにDOM操作を実現するか見ていきます！
イベント処理(ユーザー操作が行われたら処理を実行する)を使っていきます。
よく使うイベントには以下のようなものがあります。
イベントの種類
-
click: クリックされたとき -
input: 入力されたとき(文字入力など) -
change: 値が変わったとき(セレクトボックスなど) -
submit: フォームが送信されたとき -
mouseover: マウスが上に乗ったとき -
keydown: キーボードが押されたとき
イベントの書き方(基本形)
const button = document.getElementById("myBtn");
button.addEventListener("click", function() {
alert("ボタンがクリックされました！");
});
-
addEventListener(): イベントを登録する命令 -
"click": クリックされたとき -
function(){...}: 実行する処理
このfunction(){...}の中にDOM操作のメソッドを記述することで、動的なWebページを作成できます！！
イベント処理の例
1.テキストを変更する
const btn = document.getElementById("btn");
const title = document.getElementById("title");
btn.addEventListener("click", function() {
title.textContent = "クリックされました！";
});
htmlのid="btn"を取得し、それがクリックされたら、id="title"のテキストが「クリックされました！」に変更されます。
2.クラスをつけて見た目を変える
const menu = document.getElementById("menu");
menu.addEventListener("mouseover", function() {
menu.classList.add("hovered");
});
id="menu"の要素の上にマウスカーソルを持ってきたとき、id="menu"要素にclass="hovered"を追加します。これはcssの:hoverをjavascriptで表したものです。
3.入力内容をリアルタイムで表示する
<input id="name" value=name>
<div id="preview"></div>
const input = document.getElementById("name");
const preview = document.getElementById("preview");
input.addEventListener("input", function() {
preview.textContent = input.value;
});
htmlのinput要素に文字入力されたら、入力された文字をid="preview"要素に出力するものです。イベントがinputなので、入力されたときに実行されます。
ここまでで、javascriptの基礎とDOM操作、イベント処理の基本的なものを学習しました。
この後はひたすら演習を解いていきます！！
演習を通して、コードを書く
ここから演習に入っていきます！
でも、演習ってなにをやるの？そこでChatGPTを使っていきます！
ChatGPTに演習問題と答えを作成してもらうことで、だれでも無料で大量の演習を行うことができます。
試しに「JavascriptでDOM操作とイベント処理の演習問題をだして。HTMLとCSSは作成して、Javascriptだけ記述するようにして。答えは出力しないで。」というプロンプトを送ってみましょう。
そうすると以下のように演習を作ってくれました。
見切れてしまっているが、以下のように仕様、html、cssも作成してくれています。
仕様
- 入力欄に文字を入力し、「追加」ボタンを押すと、リストに新しいタスクが表示される
- 各タスクの横に「削除」ボタンがあり、それを押すとそのタスクが削除される
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タスク管理</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>タスク管理</h1>
<input type="text" id="taskInput" placeholder="タスクを入力">
<button id="addBtn">追加</button>
<ul id="taskList"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
body {
font-family: sans-serif;
background-color: #f0f0f0;
padding: 30px;
}
.container {
background: white;
padding: 20px;
max-width: 500px;
margin: 0 auto;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input[type="text"] {
width: 70%;
padding: 10px;
margin-right: 10px;
}
button {
padding: 10px 15px;
cursor: pointer;
}
ul {
list-style: none;
padding: 0;
}
li {
margin-top: 10px;
padding: 10px;
background: #e3e3e3;
display: flex;
justify-content: space-between;
align-items: center;
}
このように出力してもらった演習を解いていきます。
自分で解いたら、ChatGPTに答えの出力をお願いしましょう！
ChatGPTに「答えをみせて」と送ったところ、以下のようなコードが返ってきました。
// 要素を取得
const addBtn = document.getElementById('addBtn');
const taskInput = document.getElementById('taskInput');
const taskList = document.getElementById('taskList');
// 「追加」ボタンのクリックイベント
addBtn.addEventListener('click', function () {
const taskText = taskInput.value.trim();
if (taskText === '') return; // 空欄は追加しない
// li要素を作成
const li = document.createElement('li');
li.textContent = taskText;
// 削除ボタンを作成
const deleteBtn = document.createElement('button');
deleteBtn.textContent = '削除';
deleteBtn.style.marginLeft = '10px';
// 削除ボタンのイベント
deleteBtn.addEventListener('click', function () {
taskList.removeChild(li);
});
// liに削除ボタンを追加
li.appendChild(deleteBtn);
// ulにliを追加
taskList.appendChild(li);
// 入力欄を空に
taskInput.value = '';
});
このようにして、1人で演習を何回も行うことができます！
この方法はどのプログラム言語でもできるので、アウトプットの場として、活用してみてください！！