【第3話】JavaScriptで動く、反応するWebアプリを作ってみる

Webアプリの基礎知識、第3話目はJavaScriptです。

おそらく、皆さんがイメージするところのTheプログラミングだと思います。

HTMLやCSSは厳密には開発言語ではありません。ソースコードの書き方も独特なので違和感がある人も少なくないのではないでしょうか。

その点、JavaScriptはプログラミングをかじったことがある人なら安心してしまうかもしれないですね。

ということで、JavaScriptを説明していきます。例によって、ミニコデを起動しておいてください。

＼ 今すぐタップ ／

JavaScriptってなに？

JavaScript（ジャバスクリプト）は、Webページに動きをつけるための開発言語です。

JavaScriptは「ボタンを押したら文字が変わる」、「入力したら計算してくれる」、などの「ユーザーの操作に反応する仕組み」を作れます。

• HTML＝中身（骨組み）
• CSS＝見た目（デザイン）
• JavaScript＝動き（反応・処理）

因みに開発言語なので、CSSと異なりHTMLが無くても、JavaScript単体で動作させることもできます。

ですが、本サイトではあくまでWEBアプリにこだわっていますので、基本的にHTMLがある形の書き方をご紹介します。

実際に動かしてみよう

ここからは「ミニコデ」を開いて、HTMLタブに書いていきます。コピーして貼り付けて「プレビュー」を押せばすぐに動きますよ。

因みにHTMLファイルの中の<script>～</script>タグの間にJavaScriptを書くことでプログラムが動作します。

ボタンを押したら文字が表示されるアプリ

ボタンをタップ（クリック）すると文字が変わるプログラムの例です。

<div id="app">
  <h1>こんにちは！</h1>
  <button id="btn">押してね</button>
  <p id="msg"></p>
</div>

<script>
document.getElementById("btn").addEventListener("click", () => {
  document.getElementById("msg").textContent = "ボタンが押されました！";
});
</script>

• <button> でボタンを作りつつ、ボタンのid（固有名称のこと）”btn”を設定します。
• addEventListener("click", ...) で「”btn”が押されたときにやること」を決めます。
• textContent で <p> の中の文字を入れ替えます。

つまり「ボタンを押したら文字が出る」プログラムです。

“ボタンが押されました！”を別の文章に変えたり、ボタンを増やしてみたり、簡単なことはできると思うので試してみてください。

足し算をするアプリ

<h2>足し算アプリ</h2>
<input id="a" type="number"> ＋ <input id="b" type="number">
<button id="calc">計算する</button>
<p id="result"></p>

<script>
document.getElementById("calc").addEventListener("click", () => {
  const a = Number(document.getElementById("a").value);
  const b = Number(document.getElementById("b").value);
  document.getElementById("result").textContent = `答えは ${a + b} です！`;
});
</script>

• <input> で数字を入力できる箱「a]、「b」を用意します。
• <button>「計算する」ボタンを設置。
• a + b で足し算をして、答えを表示します。

答えは ${a ⁺ b} です！を答えは ${a - b} です！ に変えれば、引き算も可能です。

算数がプログラムでできると、ちょっとワクワクしませんか？

おみくじを作る

<h2>おみくじ</h2>
<button id="omikuji">引く！</button>
<p id="fortune"></p>

<script>
const fortunes = ["大吉！", "中吉", "小吉", "凶…"];
document.getElementById("omikuji").addEventListener("click", () => {
  const i = Math.floor(Math.random() * fortunes.length);
  document.getElementById("fortune").textContent = fortunes[i];
});
</script>

• fortunes は「おみくじの結果」をまとめたリストです。
• Math.random() でランダムな数を出します。
• fortunes[i] でランダムに選ばれた「おみくじの結果」を表示します。

これで「毎回ちがう結果が出る」遊びができます。

fortunes= [“大吉！”, “中吉”, “小吉”, “凶”, “大凶”, “吉”, “末吉”, “平”];

･･･と増やしてもらえば、おみくじの種類も増やせますよ！

まとめ

• JavaScriptは、人の操作にあわせて動く仕組みを作れる。

あくまで基礎編なので難しい用語はまだ覚えなくても大丈夫です。

これも立派なWebアプリです。

「こう書いたらこう動いた！」を少しずつ体験していければよいと思います。

折角なのでコードを少し書き換えて遊んでみましょう。

たとえば「おみくじの種類をふやす」「足し算じゃなく引き算にする」など、ちょっと変えるだけでも自分だけのWebアプリになりますよ。

ということで、今回はここまで！

残念パパいのっちでした！

では、また！