JavaScript | 1 日 30 分 × 7 日アプリ学習超初級編：文字を表示するアプリ

JavaScript
スポンサーリンク

1日目のゴール

1日目のテーマは
「JavaScript で“画面の文字を書き換える”感覚をつかむこと」 です。

・ボタンを押したら文字が変わる
・入力した文字を画面に出す

たったこれだけでも、
「ただの HTML ページ」が「自分で動くアプリ」に変わります。

今日はその“いちばん最初の一歩”として、

JavaScript を読み込む
HTML の要素を JavaScript から見つける
その中身（文字）を書き換える

この3つを、ゆっくり丁寧にやっていきます。

まずは「土台の HTML」を用意する

最小限の HTML を書いてみる

いきなり JavaScript から入ると迷子になりやすいので、
まずは「文字を表示する場所」と「ボタン」だけの
シンプルな HTML を用意します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文字を表示するアプリ 1日目</title>
</head>
<body>
    <h1>文字を表示するアプリ</h1>

    <p id="message">ここに文字が表示されます。</p>

    <button id="changeButton">文字を変える</button>

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

ここで大事なポイントを整理します。

<p id="message">...</p>
この <p> が「書き換えたい文字の場所」です。
id="message" という“名前タグ”をつけています。
JavaScript からこの id を使って、この要素を探しに行きます。

<button id="changeButton">文字を変える</button>
このボタンをクリックしたときに、
JavaScript で文字を書き換えるようにします。

<script src="app.js"></script>
JavaScript のファイル（app.js）を読み込んでいます。
この app.js に、これからコードを書いていきます。

JavaScript ファイルを作る

まずは「ちゃんと動いているか」を確かめる

同じフォルダに app.js というファイルを作って、
まずは動作確認用の一行を書きます。

console.log("app.js が読み込まれました");
JavaScript

ブラウザで HTML ファイルを開き、
開発者ツール（F12 キー）を開いて「Console（コンソール）」タブを見ると、
app.js が読み込まれました と表示されるはずです。

これが見えたら、

HTML から app.js がちゃんと読み込まれている
JavaScript が実行されている

ということが確認できます。

HTML の要素を JavaScript から「つかむ」

document.getElementById を覚える

次に、さっき HTML で用意した <p id="message"> を
JavaScript から触れるようにします。

const messageElement = document.getElementById("message");

console.log(messageElement);
JavaScript

ここでやっていることを、かみ砕いて説明します。

document
今表示している HTML ページ全体を表す“オブジェクト”です。
「このページの中から、要素を探したい」ときに使います。

getElementById("message")
HTML の中から、id="message" の要素を1つ探して返してくれます。
今回だと <p id="message">...</p> が見つかります。

const messageElement = ...;
見つかった要素を messageElement という変数に入れています。
これで、messageElement を通して
その <p> の中身を読んだり書き換えたりできるようになります。

console.log(messageElement);
ちゃんと見つかっているかをコンソールに表示して確認しています。

ブラウザのコンソールに <p id="message">…</p> のような表示が出ていれば成功です。

要素の「中身の文字」を書き換える

textContent を使ってみる

いよいよ「画面を書き換える」本番です。

const messageElement = document.getElementById("message");

messageElement.textContent = "JavaScript から書き換えました！";
JavaScript

ページを再読み込みすると、
最初は HTML に書いてあった

ここに文字が表示されます。

という文字が、

JavaScript から書き換えました！

に変わっているはずです。

ここで超重要なのが textContent です。

messageElement.textContent
これは「その要素の中に書かれている“文字”」を表します。

= で代入すると、その文字が丸ごと置き換わります。

つまり、

「HTML に最初に書いておいた文字」よりも
「JavaScript であとから代入した文字」が優先される

というイメージです。

ボタンを押したときに書き換える

クリックに反応させる

今のままだと、ページを開いた瞬間に文字が変わります。
ここから一歩進めて、
「ボタンを押したときに文字が変わる」ようにします。

const messageElement = document.getElementById("message");
const buttonElement = document.getElementById("changeButton");

buttonElement.addEventListener("click", function () {
    messageElement.textContent = "ボタンが押されました！";
});
JavaScript

ここで新しく出てきたのは addEventListener です。

buttonElement
これは <button id="changeButton"> の要素です。

addEventListener("click", function () { ... });
「クリックされたときに、この中の処理を実行してね」
という“イベントの登録”をしています。

function () { ... } の中身が、
「ボタンが押された瞬間に実行される処理」です。

その中で、

messageElement.textContent = "ボタンが押されました！";
JavaScript

と書いているので、
ボタンをクリックした瞬間に <p id="message"> の文字が書き換わります。

ここまでの app.js をまとめる

完成した 1日目バージョン

1日目のゴールとして、
app.js はこんな形になっていれば OK です。

// id="message" の要素をつかむ
const messageElement = document.getElementById("message");

// id="changeButton" のボタンをつかむ
const buttonElement = document.getElementById("changeButton");

// ボタンがクリックされたときの動きを登録する
buttonElement.addEventListener("click", function () {
    // ここで画面の文字を書き換える
    messageElement.textContent = "ボタンが押されました！";
});
JavaScript

HTML は、最初に書いたこれです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文字を表示するアプリ 1日目</title>
</head>
<body>
    <h1>文字を表示するアプリ</h1>

    <p id="message">ここに文字が表示されます。</p>

    <button id="changeButton">文字を変える</button>

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

これで、

ページを開く
ボタンを押す
→ 文字が変わる

という「画面を書き換えるアプリ」の、
いちばん最初の形が完成です。

重要ポイントをもう一度だけ整理する

「画面を書き換える」3ステップ

1日目で絶対に押さえておきたいのは、この3つです。

id をつけた HTML 要素を用意する
document.getElementById("id名") で JavaScript からつかむ
要素.textContent = "新しい文字"; で中身を書き換える

そして、
「いつ書き換えるか」を決めるのがイベントです。

ボタンがクリックされたとき
→ addEventListener("click", function () { ... }); の中で書き換える

この「HTML（見た目）」「JavaScript（動き）」の分担が
だんだん体に馴染んでくると、
もう“アプリ”の入り口に立っています。

もし余裕があればやってみてほしいこと

自分の言葉で遊んでみる

1日目の範囲だけでも、いろいろ遊べます。

ボタンを押すたびに、違うメッセージに変えてみる
最初のメッセージを、もっと自分っぽい言葉にしてみる
"ボタンが押されました！" を "よく押したね！" などに変えてみる

やっていることは全部、
textContent に入れる文字を変えているだけです。

でも、その「ちょっとした違い」が、
「自分のアプリを触っている感覚」につながっていきます。

1日目のまとめ

1日目で、あなたは

HTML に「書き換えたい場所」を用意する
JavaScript でその要素をつかむ
textContent で文字を書き換える
ボタンのクリックに反応して書き換える

という「画面を書き換えるアプリ」の
いちばん基本の形を手に入れました。

2日目以降は、
ここに「入力した文字を表示する」
「複数のボタンで違うメッセージを出す」など、
少しずつ“アプリっぽさ”を足していきます。

次へ
1234567
スポンサーリンク
タイトルとURLをコピーしました