【JavaScript ・ライブラリなし】ユーザーの入力からプログラムを動かそう

  • 2019/6/3
  • 【JavaScript ・ライブラリなし】ユーザーの入力からプログラムを動かそう はコメントを受け付けていません。

javascript 書いてますか?

今までいろいろな JavaScript 記事を書いていましたが、
ライブラリの紹介でない限り、私はライブラリは使用しないことにしています。

もちろん、jQuery などのライブラリはとても便利だと思っています。
ただ、私個人としては、やはり JavaScript そのものの挙動を知ることが、
結果的にはライブラリなどの勉強をした際の理解も深まるかと思いますので。

というところで、素の JavaScript を書くことを大切にしているのですね。

で。今回は。

たまにはライブラリを入れない環境で、よく使う操作を
おさらいしてみようかなと思った次第です。

JavaScript はイベント駆動が基本

実際のコードを書く前に。

プログラムの書き方にはいろいろなパターンがありますが、
JavaScript を書くときには「イベント駆動」で考えるのが基本です。

イベント駆動とは、
「ユーザーが入力したことや、設定したタイマーなど(つまりイベント)をきっかけにプログラムを動かす」
ということですね。

プログラムは、実行されたときに上から順に、一度だけ実行され、最後に到達したら終了するのが基本です。
学校で C 言語などを学ばれた方であれば、大体そんな感じだったことを思いだしてもらえるかと思います。

もちろん、JavaScript も、ほぼそうなのですが、
JavaScript はブラウザ上で実行されるとき、ブラウザが良い感じに、完全にはプログラムを終了しないようにしてくれます。

というのも、JavaScript でやりたいことは、
ユーザーからボタンをクリックされたときにページの見た目を変えたいとか、
文字が入力されたときにデータを送信したいとか、
なにかしらのきっかけからプログラムを動かしたいということがほとんどなのですよね。

そういうことで、JavaScript をブラウザで使う時、プログラム自体が実行されるのはページが開かれた時ですが、
その時には「こういう動作がされたときには、こういう動きをしてください」という情報を登録だけしておいて、
後はブラウザ側がその動きを監視しておいてくれる、という機能があるわけですね。

実際にユーザー入力をきっかけに動作を起こさせてみる

さて、JavaScript はイベント駆動でプログラムを書くことが分かったところで、
実際にプログラムを書いてみましょう。

まずは比較対象として、イベント駆動でない書き方にした場合

まずはイベント駆動の設定を入れないで挙動を見てみましょう。

今回はわかりやすく、アラートを表示するプログラムを書いてみます。

単純にアラートを表示させるには

alert(’表示したい文字’);

これだけで OK。

実際にはブラウザで動かすので、html から読む必要がありますね。
今回はコード量も少ないので、 script タグに直書き。
あと、後で使うのでボタンもおいておきました。

<html>
<head>
  <meta charset=”utf-8”>
  <title>テスト</title>
</head>
<body>
  <button>ボタン</button>
  <script>
    alert(”アラートだよ!”);
  </script>
</body>
</html>

実際にこのページをブラウザで開いてみると…

ページ更新時(つまり、ページが読み込まれたとき)にすぐ、 JavaScript が実行されて
アラートが表示されているのが分かりますね。

「ボタンが押された」イベントでアラートを表示する

次に、ボタンが押されたイベントを検知して、アラートを表示させるのがこちら。

<html>
<head>
  <meta charset=”utf-8”>
  <title>テスト</title>
</head>
<body>
  <button id=’alert-button’>ボタン</button>
  <script>
    const btn = document.getElementById(’alert-button’);
    btn.addEventListener(’click’, function() {
      alert(”アラートだよ!”);
    });
  </script>
</body>
</html>

挙動としては、ページを読み込んだ際には特に JavaScript が動いている感じがしませんが、
ボタンを押してみると確かにアラートが表示されますね。

今回はページを読み込んで JavaScript が実行されたときに、
「ボタンが押されたらアラートを表示するようにしてね!」という命令を設定するだけにしておきました。

そのため、ページが読み込まれただけの時には何も起こっていないように見えて、
ボタンを押してみるとアラートが表示される、ということですね。

コード解説

さて、先ほどのコードを解説していきましょうか。
上の方は単純に html なのでこの辺は飛ばして…

7 行目

まずはここ

<button id=’alert-button’>ボタン</button>

script タグに入る前に、ボタンについて見ておきます。
ボタンに id が設定されていますね。

これは後で、「このボタンが押されたら…」という命令を書きたいので、
ボタンに名前をつけているという認識でいいでしょう。

9 行目

const btn = document.getElementById(’alert-button’);

const は最近の定数の定義の仕方ですね。
じっくり見るべきは右側。

document は、ブラウザに読み込まれた html を解析した Web ページが入っています。
最初の <html> 要素から全部の内容を、ここから持ってくることができます。

で、 getElementById は読んだとおり、
id を使って要素を探してくる命令です。

<html> 要素以下で alert-button の id が振られている要素といえば、
先ほどのボタンですよね。
ということで、これでボタンを取得してくることができます。

で、取得したボタンの要素は btn 定数に格納していますね。

10 ~ 12 行目

ここが今回のキモですね。

btn.addEventListener(’click’, function() {
  alert(”アラートだよ!”);
});

先ほど取得したボタン要素に対して、 addEventListener という命令をつけています。

これが、「この要素を監視して、指定した状態になったとき、○○をしてね」という、
イベントを監視させるための命令になります。

addEventListener には引数を 2 つ渡すことができます。
(ホントはもっと渡せるのですが、ややこしくなるので興味がある人は調べてね)

一つめが監視する動作。

今回はボタンがクリックされたときなので、click と指定しています。
後は、テキスト入力できるところであれば、内容が変更されたときの change とか、色々ありますよ。

で、二つ目が、イベントを検知したときの動き。
ここでは

function() {
  alert(”アラートだよ!”);
}

という関数を渡しているので、
イベントが検知されたときにこの関数が実行されて、
実際にアラートが表示される、という流れになっていたのですね。

ということで、晴れてボタンが押されたときにアラートが表示されるようになった、ということになります。

まとめ

今回のこの内容はユーザー入力があった場合に動作を起こさせる、第一歩の内容になります。
ライブラリを使っていると、このあたりのことは正直知らないでもプログラムはかけますが…

JavaScript の考え方を身につけ、より効率的なコードをかけるようになるためにも、
ライブラリがどのようなことを内部でやっているのか、というような内容も簡単にでも知っておきたいところですね。

Takato Ezaki

Takato Ezaki小中高の塾講師からエンジニア

投稿者プロフィール

福岡で Web 系のエンジニアをしています。

中高の理科教師免許を取り、起業に 2 年間トライした後エンジニアの道へ入りました。

化学反応の中では Belousov-Zhabotinsky 反応が大好きです。

この著者の最新の記事

関連記事

コメントは利用できません。

募集中!(o゜▽゜)o

エンジャパン
求む、社長!
follow us in feedly

コッチもヨロシク!





最近のネタ!

  1. 2019-6-24

    【JavaScript】オブジェクトより便利かも!? Map を使ってみよう!

    今回は JS ではあまり使われていない、Map のご紹介 JavaScript で連想配列のような…
  2. 2019-6-23

    第5回アウトドア部 ~なんかすごく暑い~

    2019/5/25(土)、アウトドア部の5回目の活動!! 今回はBBQです! いざ会場へ! い…
  3. 2019-6-17

    JavaScript での変数定義は var を捨てて let, const を使うべき理由

    JS の変数定義では let, const を使うべし!…って何で? JavaScript は最近…
  4. 2019-6-14

    2019年5月度社員総会&懇親会@Nagoya

    2019年5月8日(水)、名古屋社員総会&懇親会が開催されました! 今回はその様子をわたくし、おーて…
  5. 2019-6-10

    【JavaScript・小ネタ】clearTimeout と clearInterval は同じ結果になるらしい

    JavaScript 書いてると、 「○○秒ごとに実行」 みたいなことしたくなること、よくありますよ…
ページ上部へ戻る

当サイトに掲載されているコンテンツ(文書、画像等)は、許可なく複製・転用等する事を禁じます。

「フェアネス方式®」(登録6150741)は、日本国内における株式会社エージェントグローの登録商標です。

当サイトでは最低限必要と考えられる場合において、会社名/サービス名/商品名などを記載している場合があります。
これらはあくまでも説明の必要性に応じて用いているものであり、各社の権利等を侵害を目的とするものではございません。
不適切と考えられる場合には、当社お問い合わせフォームよりご連絡ください。

当サイトでは®や™などの表記を省略させていただいております。