雑記

【JavaScript超入門】基礎から学べるサンプルコード解説|第3回

基礎から学べるJavaScriptサンプルコード解説、第3回です。超入門はこれで最後になります。

JSでも頻繁に使われるオブジェクトとコンストラクター(クラス)について書きます。

それでは早速まいりましょう。

【JavaScript超入門】基礎から学べるサンプルコード解説|第2回前回に引き続き、基礎から学べるJavaScriptサンプルコードについて解説していきたいと思います。 それでは早速まいりましょう。...

配列からオブジェクトへ、配列はたくさんの値を管理する

変数は、値を保管しておく入れ物と考えるとよいでしょう。

この入れ物、1つの入れ物には1つの値しか保管できないのです。

もし、大量のデータを変数に入れて処理しないといけなくなった場合、

それらを1つずつ変数に入れておくのは想像以上に大変なのです。

let x = 50;
let y = 60;
let z = 70;
......

 

こんな文を数百数千行も書かないといけないとしたら、やってられない。

ではどうすればよいか?

このときに用いられるのが配列です。

配列は、値をまとめる変数

配列は、一種の変数です。

普通の変数とは異なり、たくさんの値をまとめて保管することができる、

特殊な変数なのです。

配列には、値を保管できるような箱のようなものが用意されています。

それぞれの箱には『インデックス』と呼ばれる番号が割り振られていて、

その番号を使って、どの値を利用するか指定できるようになっています。

配列の基本的な使い方をまとめておきましょう。配列の書き方からです。

配列の値の書き方
[値1, 値2, ......]
配列の作成
配列の作成
let 変数 = new Array();
let 変数 = new Array(要素の数);
let 変数 = [値1, 値2, ......];

 

配列は、変数に配列の値を代入して作ります。

この配列の値というのは、いくつかの書き方があります。

「空っぽの配列」を作るなら、『new Array()』というものを作ります。

これはArrayオブジェクトを作る書き方です。

最初からいくつか保管できる箱を確保しておきたい場合は、new Array(番号)のように、

引数に保管できる値の数を指定しておきます。

最初から配列にまとめる値がわかっているなら、直接それらを記述して配列を作ることもできます。

配列は[]という記号の中に値をカンマで区切って並べていくだけで作れるのです。

配列の値のやり取り
配列 [ 番号 ] = 値;
変数 = 配列 [ 番号 ];

 

配列は、変数名の後に[]という記号でインデックスの番号を指定して使います。

イコールを使って値を取り出したり代入したりできるのは普通の変数とまったく同じです。

配列を使ってみる

では簡単なサンプルを作って、配列を利用してみることにしましょう。

script.jsを以下のように書き換えてください。

let arr = [12, 345, 67, 89];
let answer = arr[0] + arr + arr + arr;

document.write('<p>合計は、' + answer + 'です。');

 

修正したらhello.htmlで確認してください。配列の各値を加算して答えを表示してます。

配列のためのfor文

配列の中の値を利用する場合、それが2つや3つならばいいのですが、

「数万ある値を全部合計する」というようなことになると手作業ではやっていられなくなります。

しかし、配列では「保管している全部の値を同じように処理していく」ということがよくあります。

こうした場合の処理の方法を知っておかないと困るでしょう。

実を言えば、JSには『配列専用のfor』が用意されています。

これを使うことで配列に保管されている全要素を処理することができるようになります。

配列のfor文の基本形
for (let 変数 in 配列) {
  ........繰り返し処理.........
}
※letはvarでも可

 

このforは、配列と変数を()内に持ちます。

この構文では、配列から順にインデックスの値を取り出し、変数に代入しています。

こうすることで、インデックス番号の一番小さなものから順番に値を取り出していけるのです。

注意したいのは、『forで変数にとりだされるのは、値ではない』という点。

値が保管されているインデックス番号です。

配列でデータを集計する

では実際にforを利用してみましょう。

script.jsを以下のように修正して、webブラウザから表示を確かめてみましょう。

let arr = [85, 90, 100, 69, 77];
let total = 0;
for (let n in arr) {
  total += arr[n];
}
let average = total / 5;
document.write('<p>合計は、' + total + 'です。平均点は' + average + 'です。</p>');

 

これは、配列に保管している値の合計と平均を計算するものです。

forを使い、配列arrから順番に値を取り出して変数totalに足しています。

for (let n in arr) {
  total += arr[n];
}

 

for (let n in arr)でarrから順番にインデックス番号をnに取り出していきます。

これを利用し、arr[n]の値を取り出してtotalに足していけば、

全部の値の合計が計算できる、という訳です。

キーを指定する「連想配列」

配列は、番号を使って全要素を管理します。ですが、

時には「数字ではなく、名前をつけて管理できたほうが便利」ということもあるでしょう。

こうした場合は一般に『連想配列』と呼ばれるものを利用します。

オブジェクトとも呼ばれます。

これはインデックス番号の代わりに「キー」と呼ばれる名前をつけて値を管理するものです。

この連想配列は以下のように使います。

連想配列の書き方
{ key1: 値1, key2: 値2, key3: 値3, ... }

連想配列の作成
let obj = new Object();
let obj = { key1: 値1, key2: 値2, key3: 値3, ... };

 

連想配列のやりとり
obj[property] = 値;
obj.property = 値;

 

配列が[]の中に値をいれるのに対し、

連想配列は{}の中にキーと値をコロン(:)でつなげて書きます。

連想配列を使ってみる

実際に連想配列を使ってみましょう。配列を使ったサンプルを、連想配列に書き換えてみます。
script.jsを書き換えてください。

let sub = { '国語': 71, '数学': 95, '理科': 98, '社会': 68, '英語': 82 };
let total = 0;
document.write('<ol>');
for (let key in sub) {
  document.write('<li>' + key + ':' + sub[key] + '点</li>');
  total += sub[key];
}
document.write('</ol>');
let average = total / 5;
document.write('<p>合計:' + total + '</p>');
document.write('<p>平均点:' + average + '</p>');

 

Webブラウザで確認してみましょう。

連想配列に保管してあるキーと値を順に出力し、最後に合計と平均を表示します。

for文の見ればわかるように、基本的なな処理の仕方は配列と同じです。

配列の場合、forでインデックス番号が得られるのに対し、

連想配列ではキーが得られる、というだけの違いです。

さらっと書きましたが、キー名には漢字も使えます。変数名も漢字で書けます。

ここでは分かりやすいように漢字で書きましたが、

プログラムを書くときはコメントを除いて基本的には英語で書くようにしましょう。

連想配列に関数を入れる

配列には、さまざまな値を入れることができます。

数字やテキストだけでなく、「関数」もです。

関数は値として変数に入れることもできます。

上のサンプルを考えてみましょう。

このサンプルで合計や平均を計算する関数そのものも配列に入っていたらかなり便利です。

では、実際に「データから処理まで全部配列にまとめる」ということをやってみましょう。

let subject = new Object();
subject.data =  { '国語': 71, '数学': 95, '理科': 98, '社会': 68, '英語': 82 };

// データの計算をする
subject.count = function() {
  let n = 0;
  for(let key in this.data) { n++; }
  return n;
}

// 合計を計算する
subject.total = function() {
  let total = 0;
  for(let key in this.data) {
    total += this.data[key];
  }
  return total;
}

// 平均を計算する
subject.average = function() {
  return this.total() / this.count();
}

// データを出力する
subject.print = function() {
  document.write('<ol>');
  for(let key in this.data) {
    document.write('<li>' + key + ':' + this.data[key] + '点</li>');
  }
  document.write('</ol>');
}

// ここからメインプログラム

document.write('<h2>定期試験の結果</h2>');
subject.print();
document.write('<p>合計:' + subject.total() + ' 平均点 ' + subject.average() + 'でした。</p>');

 

急に難しそうになりましたが、それほど複雑ではありません。

ソースコードの大半はsubjectという変数に連想配列や関数を代入しているものです。

実際に実行している処理は、最後の数行だけです。

要素の書き方
このsubjectにデータの配列は関数を代入するとき、subject[‘data’]ではなくsubject.dataと書いています。これは基本的にsubject[‘data’]と同じです。ブランケット記法といいます。subject.dataはドット記法と言います。一般的にはドット記法が主流です。

thisについて
代入している関数の中では、他の関数やdataに設定した連想配列を利用しているものもあります。こうした場合、自分自身を示すのに「this」というものを使っています。例えばsubjectに組み込んでる関数の中でdataの配列を使う場合は、this.data[○○]とういうように指定をすればいいわけです。

これがオブジェクト

書き方が変わってる部分もありますが、

とりあえず

「連想配列はキーを指定して値をいれる」「関数も値として扱える」ということを

頭に入れてサンプルのソースコードを読み返してみてください。

するとsubjectという変数が、連想配列のデータやそれを処理する関数などを

全てひとまとめにして使えるようになっていることが分かるでしょう。

こうした「必要なデータや処理をすべてひとまとめにしたもの」を、

『オブジェクト』と呼びます。

今回のsubjectは、オブジェクトを作っていたのです。

オブジェクトとは?

オブジェクトというのは、

「自身が必要とするデータ(値)や処理(関数など)を全て自分自身の中に持っていて、

それだけで独立して使うことのできるもの」のことです。

subjectは、必要なデータや処理をすべて自分の中に組み込んでいて、

それらを利用するのに自分以外の何か(値や関数などを)必要としません。

こういうものがオブジェクトです。

配列は、new Arrayというもので作りましたが、

オブジェクトはnew Objectというもので作成します。

一般的にはnew Objectはあまり使用しません。

オブジェクトリテラルを使用します。

オブジェクトリテラル
let obj = {};

プロパティとメソッド

subjectオブジェクトには、dataのように値を保管しているものや、

totalやaverageのように処理(関数)を保管しているものがあります。

値を保管しているもののことを『プロパティ』

処理を保管しているもののことを『メソッド』と呼びます。

オブジェクトは、このプロパティとメソッドを用意して作っていくと考えるとよいでしょう。

コンストラクタ関数って何?

new Objectで関数を作り、これにいろいろな値を組み込んでいきましたが、

『コンストラクタ関数』というものを使うと、

もっとシンプルにオブジェクトを作ることができます。

コンストラクタ関数は、オブジェクトを作るための専用関数です。

これは、関数の中で、thisを使ってプロパティやメソッドを組込んで行きます。

コンストラクタの基本形
function 関数名 ( 引数 ) {
  this.propaty = 値;
  this.method = function () {...}

このようにコンストラクタ関数を用意しておくと、

これを使って簡単にオブジェクトを作ることができます。

コンストラクタ関数の使い方
var 変数 = new コンストラクタ関数( 引数 );

関数ですが、「new 関数」というように実行すると、

その関数を元にオブジェクトを作成することができます。

オブジェクトを作成した際に、その関数に書かれた処理が実行されるので、

自動的にプロパティやメソッドも組み込まれる、というわけです。

コンストラクタ関数を使ってみる

では、実際にコンストラクタ関数を使ってみましょう。

先程のsubjectオブジェクトを、コンストラクタ関数で作成するように書き換えてみましょう。

function Subject(name, data) {
  this.name = name;
  this.data = data;

  this.count = function () {
    let n = 0;
    for (let key in this.data) { n++; }
    return n;
  }

  this.total = function () {
    let total = 0;
    for (let key in this.data) {
      total += this.data[key];
    }
    return total;
  }

  this.average = function () {
    return this.total() / this.count();
  }

  this.print = function () {
    document.write('<h2>' + this.name +  の成績'</h2>');
    document.write('<ol>');
    for (let key in this.data) {
      document.write('<li>' + key + ' : ' +this.data[key]+ '点</li>' );
    }
    document.write('</ol>');
    document.write('<p>合計:' + this.total() + '<br>');
    document.write('平均点' + this.average() + '</p>');
  }
}

let nobi = new Suject('のび父', { '国語': 80, '数学': 99, '理科': 97, '社会': 89, '英語': 45 });
taro.print();

let gera = new Suject('げら母', { '国語': 100, '数学': 60, '理科': 70, '社会': 75, '英語': 100 });
sachiko.print();

 

Webブラウザで表示を確認してみましょう。

「のび父」と「げら母」の2人の成績データが表示されます。

コンストラクタ関数を使うと、同じオブジェクトをいくらでも作れるようになります。

Webページのオブジェクト

駆け足で進めてきましたが、何がなんだか訳が分からなくなってしまったかもしれません。

実際は何回も書いて読んでを繰り返さないと簡単に染み付くようなものでもないので

今は頭の片隅においておくだけで構いません。

オブジェクトはどういうもので、propatyやmethodが何か、そしてどう使うのか、

基本的なことが分かれば十分です。

なぜオブジェクトが重要なのかというと、

JSではオブジェクトを使わないと何もできないからです。

WebブラウザでJSを利用するときもそうですし、

Node.jsもオブジェクトが多用されています。

なのでオブジェクトの使い方を知っておかないと何もわからなくなるのです。

documentオブジェクトについて

オブジェクトは、様々なところで使われています。

例えば、ここでいろいろなプログラムを作って来ましたが、

それらの中で決まって使われていたのが、

document.write(...);

 

こういうものでした。これもオブジェクトなのです。

「document」というのが、

Webページに表示されているドキュメントを扱うためのオブジェクトで、

「write」はそこに値を書き出すメソッドっだたのです。

WebページでJSを使う場合は、

このdocumentオブジェクトの中に用意されているさまざまなメソッドを使って

各種の操作を行います。

ですから、「オブジェクトの使い方」は、JSを利用する上で必須なものなのです。

Webページを操作してみよう

では、実際にWebページに用意されているオブジェクトを使った例を見てみましょう。

JavaScript超入門その1のindex.thmlとscript.jsを修正します。
まずはindex.htmlからです。

html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>HELLO</title>
    <script src="script.js"></script>
  </head>

  <body onload="initial();">
    <h1>Hello</h1>
    <p id="msg"></p>
    <input type="text" id="input">
    <input type="button" value="送信" onclick="doclick();">
  </body>
</html>

ここでは、<body>のなかに<p id=”msg”><input type=”text” id=”input”>

というタグが用意されています。

この2つのタグをJSで利用し、かんたんなプログラムを動かしてみます。

また<input type=”button” value=”Click” onclick=”doclick();”>という属性が

用意してあります。

これはボタンをクリックしたらdoclick関数を実行する、という意味です。

<body>にあるonload=”initial();”というのも<body>を完全にリロードしたら

initial関数を実行する、という意味になります。

このonclickやonloadといった属性は、

「イベント」という機能を利用するためのものです。

イベントは、様々な操作や動作に応じて何かの処理を実行するのに使います。

HTMLのタグには多数のイベント用の属性が用意されていて、

それらを利用して各種の処理が自動的に実行されるように設定できているのです。

script.jsの修正

続いてscript.jsの修正を行います。

index.htmlではinitialとdoclickという関数が、

イベントで呼び出されるようになっていましたから、

これらの関数を用意しておかないといけません。以下のように書き換えてください。

let msg;
let input;

function initial () {
  msg = document.getElementById('msg');
  input = document.getElementById('input');
  msg.textContent = '※何か書いて下さい。';
}

function doclick (e) {
  msg.textContent = '「' + input.value + '」と書きました。';
}

 

Webブラウザで表示すると、入力フィールドとボタンが現れます。

ここに何かテキストを書いてボタンを押すと、

そのテキストを使ったメッセージが画面に表示されます。

initialとdoclickの動き

ここでどんなことをしてるのか、簡単に説明しておきます。まずはinitial関数からです。

id=”msg”とid=”input”のオブジェクトを取り出す
  msg = document.getElementById('msg');
  input = document.getElementById('input');

 

documentオブジェクトの『getElementById』というのは、

引数に指定したIDのタグを操作するオブジェクトを取り出すものです。

getElementById(‘msg’)なら、<p id=”msg”>タグを操作するオブジェクトを取り出します。

id=”msg”の表示テキストを変更する
msg.textContent = '※何か書いて下さい。';

 

取り出したオブジェクトの「textContent」プロパティにテキストを設定しています。

このtextContentは、

そのオブジェクトが操作するタグに表示しているテキストを示すプロパティです。

このtextContentの値を変更すると、そのタグに表示されているテキストが変わります。

もう1つのdoclick関数でも、このtextContentを使っています。

id=”msg”に入力したテキストを使ったメッセージを表示する
msg.textContent = '「' + input.value + '」と書きました。';

 

input.valueというのは、

id=”input”の<input>タグのvalue属性(ユーザーが入力したテキストが設定されている)です。

つまり、これで、入力したテキストを取り出していたのです。

これを使ってid=”msg”のtextContentにテキストを設定して表示を変更していたのです。

後は応用次第?

ここではgetElementByIdメソッドとvalueプロパティを使ってみました。

この2つだけでも分かれば、

『ユーザーから何かを入力してもらい、表示を変更する』という

基本的なことができるようになります。

これだけでもちょっとしたプログラムは作れるようになります。

script.jsを書き換えてみましょう。

let msg;
let input;

function initial() {
  msg = document.getElementById('msg');
  input = document.getElementById('input');
  msg.textContent = '※本体価格を入力:';
}

function doclick(e) {
  let price = input.value * 1;
  let price2 = price * 1.10;
  msg.textContent = price + '円の税込み価格:' + price2 + '円';
}

 

これは消費税計算のサンプルです。

入力フィールドに金額を書いてボタンを押すと、税込み価格が表示されます。

これもgetElementByIdとvalueだけでできています。

先ほどのサンプルをちょっとアレンジしただけで、こんなものも作れるのです。

まとめ

簡単にですが3回に渡ってJSの基本的な文法について説明しました。

オブジェクトに関する説明は詰め込んだ形になったので、

正直理解できないかもしれません。

最初は理解できなくて良いです。コードを何度も読んで書いて下さい。

何度もそれらを繰り返していくうちに自然と読めるようになってきます。

そしてなんかモヤモヤしていたものがスッキリとするでしょう。

ここでの説明はJSの基本的な知識を幅広く身につけることができるものでは

全くありません。

JSの基本部分のごく一部と言っていいでしょう。

もしきちんとJSを使いたいならば、

入門書を読むなり、ネットで調べるなりして学ぶべきです。

ここで書いたことに興味を持って貰えれば、

さらに奥深いJSの世界を楽しくめぐることが出来ると思います。

他の言語でもやっているこは基本的に変わりません。

その言語独特の書き方の違いだけです。

なので、ここで書いてあることが理解できれば、

ある程度他の言語で書いてあることも理解できるのではないかと。

以上、JavaScript超入門でした。

😊参考書籍😊