【JavaScriptロードマップ】ページに動きをつける最短順｜最初は「押すと変わる」からで十分（初心者向け）
toshi
ToshiLab
【JavaScript 1-1】JavaScriptで何ができる？｜まずは“押すと変わる”を体験する（初心者向け）
toshi
記事内に商品プロモーションを含む場合があります
HTMLとCSSまで進むと、
ページの中身を書いて、見た目を整えるところまではできるようになります。
次に出てくるのが、
「ボタンを押したら変わる」
「表示を切り替える」
「入力内容に反応する」
といった動きです。
この“動き”や“変化”を加える入口になるのが、
**JavaScript**です。
今回はまず、
JavaScriptで何ができるのかを、
小さな例で見ていきます。
- 「JavaScriptは“ページに変化を加える”ための技術です」
-
最初はこの整理で大丈夫です。
・HTML：ページの中身を書く
・CSS：ページの見た目を整える
・JavaScript：ページに動きや変化を加えるたとえば、
・ボタンを押したら文字が変わる
・メニューを開いたり閉じたりする
・入力欄が空なら注意を出す
・表示内容を切り替えるこういうことが、JavaScriptでできるようになります。
最初から全部覚える必要はありません。
まずは「押すと変わる」を体験できれば十分です。
Q
目次
ここまでできればOK
今回のゴール
- JavaScriptが何をする技術か分かる
- HTML / CSS / JavaScript の役割の違いが分かる
- ボタンを押すと文字が変わる体験ができる
- 次の script タグの回へ進む準備ができる
JavaScriptは何をするもの？
| 技術 | 役割 |
|---|---|
| HTML | 見出し・文章・画像・フォームなど、 ページの中身を書く |
| CSS | 色・余白・配置など、見た目を整える |
| JavaScript | ボタン操作や入力に反応して、 ページに変化を加える |
HTMLとCSSだけでも、静的なページは作れます。
ただ、
ユーザーが何かを押した時に反応させたり、
ページの一部を書き換えたりするには、
JavaScriptが必要になります。
ここでいう“動き”は、
派手なアニメーションだけではありません。
文字が変わる。
表示が切り替わる。
入力内容を確認する。
こういう小さな変化も、JavaScriptの大事な役割です。
コピペOK
まずは完成形を見る
まずは、ボタンを押すと文章が変わる小さな例を見てみます。
今回は JavaScript の役割を体験する回なので、細かい文法は次回以降で少しずつ見ていきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JavaScript 1-1</title>
</head>
<body>
<h1>JavaScriptで何ができる？</h1>
<p id="message">ここに表示される文字が変わります。</p>
<button id="changeButton">文字を変える</button>
<script>
const message = document.getElementById("message");
const changeButton = document.getElementById("changeButton");
changeButton.addEventListener("click", function () {
message.textContent = "ボタンを押したので、文字が変わりました。";
});
</script>
</body>
</html>
今はコードを全部理解しなくて大丈夫です。
まずは「押したら変わる」を見られればOKです。
変化のポイント
どこを見ればいい？
| 見る場所 | 起きていること |
|---|---|
| p id=”message” | ここに表示される文字が変わる |
| button id=”changeButton” | クリックするボタン |
| addEventListener | ボタンが押された時の処理を用意している |
| textContent | 表示される文字を書き換えている |
今回の例では、
ボタンを押した時に、
pタグの中の文字を書き換えています。
つまり、
HTMLに書いてある要素をJavaScriptで見つけて、
その中身を変えている形です。
この
**HTMLを見つける**
**反応する**
**書き換える**
という流れが、JavaScriptの入口になります。
JavaScriptでできることの例
| できること | 例 |
|---|---|
| 文字を変える | ボタンを押すと説明文が変わる |
| 表示を切り替える | メニューを開く・閉じる |
| 入力内容を確認する | 未入力なら注意を出す |
| 画像を切り替える | ボタンで画像を変更する |
| 数字を計算する | 合計金額やカウントを表示する |
最初から全部作れる必要はありません。
まずは、
「JavaScriptはページに反応を足せる」
と分かれば十分です。
次の記事から、
この中でも一番小さいところから順番に触っていきます。
HTMLとCSSだけではできないこと
| やりたいこと | HTML/CSSだけ | JavaScriptを使うと |
|---|---|---|
| 見出しや文章を表示する | できる | さらに内容を書き換えられる |
| 色や余白を整える | できる | 操作に応じて変化させられる |
| ボタンを置く | できる | 押した時の反応を作れる |
| フォームを作る | できる | 入力内容を確認できる |
今回のコードを
もう少しだけ分解する
今回のJavaScript部分だけを見ると、こうなっています。
const message = document.getElementById("message");
const changeButton = document.getElementById("changeButton");
changeButton.addEventListener("click", function() {
message.textContent = "ボタンを押したので、文字が変わりました。";
});ここでやっていることを、かなりざっくり言うと次の流れです。
| 行 | ざっくりした意味 |
|---|---|
| document.getElementById(“message”) | message という id の要素を 探している |
| document.getElementById(“changeButton”) | changeButton という id のボタンを 探している |
| addEventListener(“click”, …) | クリックされた時の動きを決めている |
| message.textContent = … | 表示される文字を変えている |
今は、
document、const、function の意味を全部覚えなくて大丈夫です。
まずは、
「ボタンを押す」
「JavaScriptが反応する」
「文字が変わる」
という流れを見てください。
細かい文法は、このあと少しずつ分けて扱います。
最初は
“押すと変わる”で十分です
- ボタンを押す
- 文字が変わる
- HTMLの一部がJavaScriptで書き換わる
- JavaScriptはページに変化を加える技術だと分かる
JavaScriptの入口は、最初から難しく考えるより
「押したら変わった」で十分です。
少しだけ変えてみる（練習）
- ボタンの文字を変えてみる
- 変わったあとの文章を別の言葉にしてみる
- h1 の文章を変えてみる
- id の名前を変えたら動かなくなるか確認してみる
- もう一度、id の名前をそろえて動くように戻してみる
特に、id の名前を変える練習はおすすめです。
HTML側とJavaScript側の名前がずれると、
JavaScriptが対象を見つけられなくなります。
この感覚は、次の記事以降でもかなり大事になります。
ここだけ確認
よくあるつまずき
- 「つまずき①：ボタンを押しても何も変わらない」
-
まずは id の名前を確認します。
HTML側が、
HTML<p id="message">ここに表示される文字が変わります。</p>なのに、JavaScript側で違う名前を書いていると、うまく見つけられません。
HTMLとJavaScriptで、同じ id 名を使っているか見直してみてください。
Q
- 「つまずき②：コードの意味が多すぎて分からない」
-
それで大丈夫です。
今回の目的は、全部の文法を覚えることではありません。
まずは、
「JavaScriptを使うとページの一部を変えられる」
という体験ができればOKです。
Q
- 「つまずき③：HTMLとCSSとの違いがまだ曖昧です」
-
最初はこの整理で大丈夫です。
- HTML → 中身
- CSS → 見た目
- JavaScript → 動きや変化
使いながら少しずつ分かれてきます。
Q
- 「つまずき④：実務ではもっと違う書き方をしていそうです」
-
はい、実務ではもっと今風の書き方や分け方もあります。
ただ、この章ではまず基礎を優先します。
慣れてきたら、モダンJavaScript入門ロードマップで別章として整理していきます。
Q
ここだけ押さえればOK
今回のまとめ
- JavaScriptはページに動きや変化を加える技術
- 最初は「押すと変わる」を体験できれば十分
- HTMLをJavaScriptで見つけて、内容を書き換えることができる
- id の名前がずれると動かないことがある
- 次は script タグでJavaScriptをどう読み込むかを見ていく
※一例として今回の内容の確認と復習を含めて作成したものを
zipファイルとして置いておきます。階層は下記のようになっております。
javascript-01-01-example.zip
└─ javascript-01-01-example/
├─ index.html
├─ css/
│ └─ style.css
└─ js/
└─ script.js
できた判定
今日のゴール確認
ここまでできたらOKです。
- JavaScriptで何ができるか、ざっくり分かった
- ボタンを押すと文字が変わる体験ができた
- HTML / CSS / JavaScript の役割の違いが少し見えた
- 次の JavaScript 1-2 に進む準備ができた
次に読む
JavaScript 1-2へ
今回は、JavaScriptで何ができるかをざっくり見ました。
次は、
JavaScriptをHTMLの中でどう読み込むのか、
scriptタグを使って最初の1行を動かすところを見ていきます。
PR：最初の1冊（必要な方だけ）
PR：JavaScriptの最初の学習に使いやすい参考(必要な方だけ)
この段階では、まず記事内のコードだけで進めて大丈夫です。
※価格や在庫は変わるため、最終確認はリンク先でお願いします。
リンク
ABOUT ME
C型肝炎や感染症の闘病を経て現在通院中
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。