ywork2020.com

Title

プログラム実行における値の記憶領域

目次 (INDEX)

変数とは

Variable
読み: バリアブル
意味: プログラムの表現でいうと値を格納しておく記憶領域

目次に戻る

配列とは

Array
読み: アレイ
意味: プログラムの表現でいうと変数が並んで整理された記憶領域

目次に戻る

変数を理解するための前知識

まず初めにWebページでプログラムを動かすのを前提にjavascriptというプログラミング言語で変数と配列について説明していきます。

基本的にjavascriptでプログラムを書くとするとHTML文書内に配置した<script> ~ </script>のタグの中に書くか、 別のテキストファイル(拡張子は [ .js ])を作成して、<script src="ファイル名.js"></script>の書式で、 HTML文書内にjavascriptプログラムを読み込んで実行させるかの2択になります。

これに関して解らないという方は、先に HTMLの基本的なタグ構成 を一度見ていただけると助かります。

目次に戻る

変数についての解説

それでは、まず変数についてのお話しです。

プログラミングの書籍などにもよく書かれている表現になりますが、 変数とは値を入れる箱のイメージとなります。値とは数値であったり、文字であったりします。他の値もありますが、ここでは 値とは数値や文字であるとしておくことにします。

では、なぜ、値を入れる箱が必要なのでしょうか。

ひとつ具体例を挙げるとWebページにアクセスしてくるユーザーは、いつも同じではありませんよね。 例えばユーザーが入力フォームに名前を入力したとします。それをデータベースに登録する場合に変数という箱を作り、 その箱の中に値を入れてから利用したい形に整理して登録処理をすることが考えられます。 このような使い方をするために値を一時的に記憶しておくために利用するのが変数という箱です。

また、別の例を挙げると、ゲームのロールプレイングゲームではHP(ヒットポイント)やMP(マジックポイント) などの値を一時的にメモリー上の箱に記憶しているものの一つです。

この変数と言われる箱の便利なところは、記憶している値を変化させることができるということです。

それでは、文章ばかりでは面白くないと思いますので、実際に変数をつかってみたいと思います。 ロールプレイングゲーム風に体力をHPという変数にして、魔力をMPという変数という設定で、少し遊んでみましょう。

javascriptで変数を定義するためには let か var を使用します。 両文ともに変数を宣言するために使用しますが、「スコープの仕様に違いがある」とだけ書かせていただいて、ここでは割愛させていただきます。

let HP = 1000;
let MP = 50;

上記のコードでHPとMPという変数を宣言して、HPには1000という数値を代入しました。そしてMPには50という数値を代入しました。 次は、この変数の値を実際にページに書き出すためのコードです。

document.write("体力=", HP, "<br>");
document.write("魔力=", MP);

表示結果には変数HPとMPの数値が書き出されています。 それでは、敵から攻撃を受けてダメージを200受けたという設定で変数を操作してみます。

HP = HP-200;
document.write("体力=", HP, "<br>");
document.write("魔力=", MP);

結果を見ると見事にダメージ200を受けて、体力は800になっていますね。 これは「HP = HP-200;」の部分で処理しているわけですが、左辺のHPに右辺の式の答えを代入している処理となります。 つまり言葉で表現すると「新HPの値 は 元HPの値-200ですよ」という処理をしているわけです。

この様に、事あるごとに計算処理を行いながら、値を変化させて一時的に記憶させておく箱がプログラムにおける変数と言われるものです。

目次に戻る

配列についての解説

次に配列についてですが、配列とは変数(箱)が並んで置いてあるというイメージで考えて下さい。 ただし、変数が並んでいるといっても変数を沢山作るのは大変ですので一つの変数名(配列名)に番号をつけておくものを配列と呼んでいます。

配列の利点としては、先ほども書きましたが、配列名[番号]というように番号を指定して値を書き込んだり、呼び出したりできることです。 この[番号]の部分は、インデックス番号と呼ばれ、0からスタートします。

この配列は、慣れるまでは使い方が分からないかもしれませんが、例えば「このインデックス番号を制御文に組み込んだら、一連の処理を簡単にできるかもしれないな?」 とか、色々とアイディアを思いつくようになると思います。この配列を使用するのに相性の良い制御文としては、 for制御文while制御文などが挙げられますので参考にしていただければ幸いです。

それでは少しですが、配列を使ったコードと結果をみていきましょう。 配列を宣言する場合も変数と同じく let か var を使用します。

let warrior = [1000,50];
let wizard = new Array(700,200);

上記のコードで戦士と魔術師の2つのキャラクターの体力と魔力を配列として定義しました。 配列を作成する場合は1行目のように[値,値]と記述して定義する方法と、2行目のようにArrayオブジェクトのインスタンスを生成して定義 する方法があります。ここではオブジェクトの話はしませんので下記のリンクで詳細の情報を参照していだだきたいと思います。

それでは、次が作成した戦士と魔術師の体力と魔力を表示するコードです。

document.write("戦士: 体力=", warrior[0], "/魔力=", warrior[1], "<br>");
document.write("魔術師: 体力=", wizard[0], "/魔力=", wizard[1]);

結果を見て、お分りいだだけますでしょうか。 ここで表示しているデータは以下の通りです。

  • warrior[0] が戦士の体力
  • warrior[1] が戦士の魔力
  • wizard[0] が魔術師の体力
  • wizard[1] が魔術師の魔力

次は配列データに変更を加えて表示してみますね。 魔術師の魔力を消費して、戦士の体力を回復させるようにしてみようと思います。

wizard[1] = wizard[1] - 20;
warrior[0] = warrior[0] + 200;
document.write("戦士: 体力=", warrior[0], "/魔力=", warrior[1], "<br>");
document.write("魔術師: 体力=", wizard[0], "/魔力=", wizard[1]);

はい、見事に魔術師の魔力が20減って、戦士の体力が200増えていますね。 このように配列は大カッコ[]の中の番号で変数を利用できるものだということが、お分かりいただけたのではないでしょうか。

目次に戻る

変数や配列の値に文字を入れた場合

変数や配列については、これまでの説明でお分かりいただけたと思いますが、 値に数値を使用しての説明をしてきましたので、ここでは文字データのことにも少し触れておこうと思います。

変数に文字を代入する場合には文字データを「"」ダブルクォーテーションか「'」シングルクォーテーションで挟みます。 さっそくコードを書いてみますね。

let suuji_A = 200;
let suuji_B = 100;
let moji_A = "200";
let moji_B = '100';

上記のコード4つの変数を定義してみました。 1,2行目は今までと同じく数値を代入しています。そして3,4行目が文字としてのデータを代入したものとなります。 これを計算をさせてみると、意味がよくわかりますので検証してみますね。

document.write(suuji_A + suuji_B, "<br>");
document.write(moji_A + moji_B);

どうでしょうか。1行目の数字を計算させたら、普通に足し算した結果が表示されていますが、 2行目の文字を足し算したら、計算結果ではなくて文字を結合した結果が表示されていますね。 つまり、数値は足し算できるけども、文字データは結合できるということが分かります。

文字データを取り扱う際はシングルクォーテーションかダブルクォーテーションを使って両ばさみする ことは分かっていただけたと思います。

どちらのクォーテーションを使えばいいかの判断については、どちらでも構いません。 ですが次のような英文の場合には、どちらを使うかが決まりますので、参考として書いておきます。 ちなみに私は英語が苦手ですので、間違っていたら、ごめんなさい。

例えばですが、英語で「I am not teachers」を「I'm not teachers」と書く場合に文書中にシングルクォーテーションが 使われています。このような場合には文字列をダブルクォーテーションで挟むことになるはずです。

document.write("I'm not teachers");

上記のような使い方ですね。 しかし、シングルクォーテーションで挟んでも次のような方法で回避することもできます。

document.write('I\'m not teachers');

文字列中のシングルクォーテーションやダブルクォーテーションの前にバックスラッシュを置くとエスケープという 方法で問題なく表示できます。

エスケープという方法は各プログラム言語にあるのですが、この方法はjavascriptでのお話しで 言語によってはシングルクォーテーション内でのみ、エスケープが使えるとかの決まりが違いますので、その辺りは注意してください。

最後は話が変数や配列から脱線してしまいましたが、遠からず文字データの使い方で勉強することになるので少しだけ、 お話しさせていただきました。

それでは変数と配列の基礎知識的な部分のお話しは終りにします。 ありがとうございました。

目次に戻る

関連のあるページ