JavaScrip基本〜ボタンを動かす〜

/ コラム / By
今日の実践学習

JavaScriptが難しい人へ。
今日はボタンを1つ動かします。

ワンピースの海賊船に例えながら、
JavaScriptの仕組みを未経験者向けに解説します。

JavaScriptの基本をワンピースの海賊船に例えて学ぶ

JavaScriptを勉強しようとして、

「英語みたいなコードばかりで分からない」

「何を書いているのか意味が分からない」

「自分には難しそう」

そう感じていませんか？

大丈夫です。

最初から、すべてのコードを理解する必要はありません。

今日覚えることは、たった1つです。

ボタンを押したら、
画面の文字が変わる。

難しいアプリは作りません。

計算もしません。

長いコードも必要ありません。

まずは、

JavaScriptを使うと、Webページが動く

という感覚をつかんでください。

JavaScriptをワンピースに例えると？

Webサイトの仕組みを、ワンピースの海賊船に例えてみます。

麦わらの一味が乗っている船を、1つのWebサイトだと考えてください。

HTML

船の本体を作る

HTMLは、Webページの骨組みを作るものです。

船でいうと、

  • 船体
  • 甲板
  • マスト
  • キッチン
  • 船員の部屋

Webページでは、見出し・文章・画像・ボタンなどを置きます。

つまりHTMLは、海賊船そのものを組み立てる役割です。

CSS

船の見た目を整える

CSSは、Webページの見た目を整えるものです。

船でいうと、

  • 船体の色
  • 帆のデザイン
  • 部屋の内装
  • 文字の大きさ
  • ボタンの色

HTMLだけでは、部品が置かれているだけです。

CSSを使うことで、海賊船らしい見た目に整えられます。

JavaScript

船員たちを動かす

JavaScriptは、Webページに動きや反応をつけるものです。

船が完成していても、誰も動かなければ航海は始まりません。

ルフィが出航の合図を出す。

ナミが進む方向を決める。

フランキーが船を動かす。

このように、何かのきっかけに反応して動く役割がJavaScriptです。

ワンピースで整理すると

HTML：海賊船の船体や部屋

CSS：船の色やデザイン

JavaScript：麦わらの一味の行動

今日作るもの

今日は、ボタンを押すと文字が変わる仕組みを作ります。

最初の画面には、

ボタンを押す前 まだ出航していません
↓
ボタンを押した後 冒険が始まりました！

その下に、

「出航する」

というボタンを置きます。

ボタンを押すと、画面の文字が変わります。

ルフィが「出航するぞ！」と合図を出したら、船が動き始める。

今日作るJavaScriptも、これと同じ仕組みです。

まずはHTMLで船を作る

最初に、画面に文字とボタンを置きます。

index.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>

  <h1 id="message">まだ出航していません</h1>

  <button id="button">出航する</button>

  <script src="script.js"></script>
</body>
</html>

今は、すべてのコードを理解しなくて大丈夫です。

見る場所は2つだけです。

現在の状況を表示する看板

<h1 id="message">まだ出航していません</h1>

これは、船の現在地を伝える看板だと思ってください。

出航するためのボタン

<button id="button">出航する</button>

これは、ルフィが押す出航ボタンです。

ただし、HTMLでボタンを置いただけでは何も起きません。

船は完成していますが、まだ誰も動いていない状態です。

そこで、JavaScriptを使います。

JavaScriptで船員たちを動かす

次に、script.jsというファイルを作ります。

その中に、次のコードを書いてください。

script.js
const message = document.querySelector("#message");
const button = document.querySelector("#button");

button.addEventListener("click", function () {
  message.textContent = "冒険が始まりました！";
});

少し難しく見えるかもしれません。

でも、やっていることは4つだけです。

① 変更する看板を探す

const message = document.querySelector("#message");

これは、

「messageという名前の看板を探してください」

という意味です。

HTMLでは、ここを探しています。 

<h1 id="message">まだ出航していません</h1>

id=”message”が、この部品につけた名前です。

② 出航ボタンを探す

const button = document.querySelector("#button");

これは、

「buttonという名前のボタンを探してください」

という意味です。

HTMLでは、こちらを探しています。 

<button id="button">出航する</button>

JavaScriptは、HTMLにつけられた名前を使って、操作する部品を見つけます。

③ ルフィからの合図を待つ

button.addEventListener("click", function () {

これは、

「出航ボタンがクリックされるまで待ってください」

という意味です。

麦わらの一味が、ルフィの

「出航するぞ！」

という合図を待っているイメージです。

clickが、出航の合図です。

④ 合図が来たら看板を変える

message.textContent = "冒険が始まりました！";

これは、

「messageの文字を、冒険が始まりました！に変えてください」

という意味です。

看板を探す

↓

出航ボタンを探す

↓

ルフィがボタンを押すまで待つ

↓

押されたら文字を変更する

難しい英語を全部覚えなくて大丈夫です。

最初は、

「部品を探す」
「クリックを待つ」
「文字を変える」

この3つだけ理解できればOKです。

ファイルを同じフォルダに入れる

index.htmlとscript.jsを、同じフォルダに入れてください。 

javascript-practice/
├── index.html
└── script.js

次に、index.htmlをブラウザで開きます。

画面に、

まだ出航していません

と表示されます。

「出航する」ボタンをクリックしてください。

文字が、

冒険が始まりました！

に変われば成功です。

JavaScriptで出航ボタンを押して文字を変える

動かない時に確認すること

① ファイル名が合っているか

JavaScriptのファイル名は、 

script.js

です。

HTMLの最後も、次のようになっているか確認してください。 

<script src="script.js"></script>

② idの名前が同じか

HTMLとJavaScriptで、同じ名前を使う必要があります。

HTML： 

id="message"

JavaScript： 

"#message"

1文字でも違うと、JavaScriptは部品を見つけられません。

③ ファイルを保存したか

コードを書いた後は、必ずファイルを保存してください。

保存せずにブラウザを更新しても、新しいコードは反映されません。

今日の実践課題

コードが動いたら、表示する文字を自分で変えてみてください。

例えば、 

message.textContent = "新しい島へ出発しました！";

でもいいです。 

message.textContent = "海賊王への一歩を進みました！";

でも大丈夫です。 

message.textContent = "JavaScriptが動いた！";

でもOKです。

文字を1つ変えるだけでも、自分でコードを編集した経験になります。

ただのコピペで終わらず、自分の言葉に変更してみてください。

船を眺めているだけでは、冒険は始まらない

InstagramやXで、プログラミングの投稿を保存する。

YouTubeで、分かりやすい動画を見る。

それだけでは、船を港から眺めている状態です。

船を眺めているだけでは、冒険は始まりません。

ファイルを作る。
コードを書く。
ボタンを押してみる。

そこで初めて、JavaScriptの航海が始まります。

今日、すべてを理解する必要はありません。

まずはコードを写して、動かす。

次に、表示する文字を変えてみる。

この順番で進めれば大丈夫です。

今日はJavaScriptを1行書こう

ボタンが動いた人へ

実際にボタンを押して、文字が変わった人は、

「動いた」

と、このLINEに送ってください。

次は、ボタンを押すたびに色が変わるJavaScriptに進みます。

LINEで「動いた」と送る