パソコン工房の蔵出し・アウトレットパソコン

2008.02.06 改

変数ってなに?
プログラムに触れると必ず変数と言う言葉が出てきます。 初めての方は『なんだろ?』と思われるかもしれません。 知らない事が出てくると『 難しい 』とすぐ思ってしまいがちですが大間違い。

さて<変数とはなんでしょう?
プログラム内では、さまざまな方法や形、場所でデータをやり取りして、 そのデータの値を処理し変化させたりします。 そのデータを格納しておく場所が変数です。変化するから変数です。変わらないものは定数と言います。 色々なデータを入れる為のだと思って下さい。
データは1つとは限りません、色々扱いますね? ですから、も 必要な数だけ用意しなければなりません。 どのかを区別をする為に変数には名前をつけます。

◆ちょっと数学ではなく算数? として捕らえてみましょう。
時間を 分 に直すと言う、単位の計算式があるとします。
式で表すと 時間 × 60分 = 分 と言う事になり
x × 60 = yと言う式なり、yの値が答えです。
2時間を分に直すと、 5時間を分に直すと・・・・など、分に直したい部分は 応用できるように未定です。1時間は60分ですから 60 は どんな状況でも固定です。
この時に x には 直したい時間を好きに入力できるようなになっています。 また、yもxの値によって中身が変わるです。 この様に状況によって中身が変化する事のできるようにしてある変数と言う事になります。 答えは 計算後に y と言う箱に入っている値を答える。となります。
このような式では実際に掛け算 されているのは箱の名前ではなくちゃんと中身が計算されていますね。 つまりこの箱の名前は中身そのものを指しています。 プログラムの中では、変数の名前は、その中身そのものを指しているのと同じ事であると思って下さい。 変数の名前は、中身そのものを指す代名詞とも言えますね。
算数でxやyと言う何を入れるかわからない、または変化する数がはいる物がそのまま変数と言う事になります。


変数の名前の付け方

top
・1文字以上の半角英数字、とアンダーバー( _ )、ドル記号($)を使用できます。
良例:$、_、_data、$name、list_item、age 等
悪例:age、name&mail
//全角文字、アンバサンド(&) は使えません。

・先頭文字は 数字以外の半角英文字、アンダーバー、ドル記号のみになります。
悪例:1999y //数字を先頭にするのは駄目

・大文字小文字は別物扱い
例:NAME、name、Name // それぞれが別の変数として解釈
(でも勘違いや記述ミスを考えると同じ名前は基本的に使わない)

・予約語は駄目
ここで言う予約語とは、基本的にjavascript自体で既に使われている言葉です。
break、false、in、this、null、var、if、else その他まだまだありますが javascript自体ですでに意味を持っている言葉を使う事ができません。

また自分で作った関数名なども駄目です。
グローバルであればwindowのプロパティとして用意されている名前も駄目です。

色々わかってくるまでは、予約語がわからないなど色々あります(笑) ですから、先頭に $ をつけてみてはどうでしょう?(perlスクリプトの真似) このページの最後に、私のよく使う自分だけの名前の付け方の規則を 参考例として書いておきます。
が、PerlやPHP内にJavaScriptを記述する時に間違えやすいので私はやめました(^^;
HTML内だけなら、見分けやすくて良いです。


変数の宣言

top
よくあるプログラムの基本では変数の宣言と言う物があります。
この宣言とは、これは変数です。という変数に使う名前を はっきりプログラムに教えてあげると言う物です。
しかしjavascriptでは特別な場合を除いて宣言は省いても構いません。 初心者は基本にのっとって書いて欲しいので両方のパターンの宣言の仕方を書いておきます。

◆変数の宣言
変数の宣言には varステートメント(実行文)と言う物を使います。
宣言は変数の名前だけでも構いませんし、変数の値(初期値)等が決まっている場合は 代入も同時にしてもかまいません。宣言を実行してみましょう。
<script type="text/javascript">
//varステートメントによる 変数の宣言
var $name = "ARTEMIS";
var $age =30;
var $mail,$url,$mes;
var country = "japan",$city;

//varを使わない暗黙の宣言
$img1 = "./images/on.gif";
ptc1 = "http://"; ptc2 = "ftp://";
</script>
1つのvarステートメントで複数の変数を宣言してもかまいません。 この時はそれぞれの変数(=値)をカンマ( , )で区切ります。
宣言時に値を代入されていない変数は、空の箱であり、後からいつでも代入する事ができますが 代入されるまでは未定義undefined として扱われます。
変数の宣言をしていない物も未定義と言えますが、undefinedは未定義と言う情報を持つ変数と言う事になります。 つまり中身がまだ決められていない 空の箱 と言う事になります。

プログラム中で変数に代入を行う事で暗黙の宣言(varを使わないで済ます)事もできます。
ステートメント(実行文)は1行に書く物ですが、ステートメントの末尾にセミコロン(;) をつける事で、1行に複数記述する事も可能です。

さて、この様にスクリプト内にむき出し(関数外)で書かれた変数の場合、この変数は、 スクリプト内のどこからでも参照(読み書き)できます。
この様な変数を グローバル変数と言います。

◆特別な場合 = ローカル変数の宣言

<script type="text/javascript">
var aaa;                 //変数の宣言

function dochange(){
    aaa = "あいうえお";      //宣言された変数への代入
    bbb = "かきくけこ";      //暗黙の宣言
    var ccc = "さしすせそ";  // var を使った宣言
}

</script>
		
さて、まだ説明していませんが javascript内では ある処理をまとめてある処理群にした物を 関数と言います。
赤い部分が関数というもので、その括弧 { }の中に処理群を書き込みます。 ここでは処理と言うよりは、宣言だけをしています(緑色の部分)。
関数は、呼出される(処理を渡される)事により、その中に記述されているステートメントを実行します。 この関数の中でvarによる宣言を使うと特別な意味になります。
さて、3つの方法の変数への宣言・代入を見比べてみて下さい。
変数 aaa
関数外で宣言されていますので、グローバル変数です。
変数 bbb
関数内ですがvarを使っていません。この場合グローバル変数となります。
変数 ccc
関数内でvarを使っています。この場合ローカル変数になります。

ローカル変数とは、ローカルな範囲でのみ有効な変数で、 この関数の中でのみ有効な、一時的な変数になります。 この関数以外の場所からこの変数を参照する事ができません。 参照しようとしてもエラーが出ます。 わざわざローカル変数にする必要があるか?と言う問題ですが、それは今後のあなた次第です。 全ての変数をグローバル変数にしてしまえば、余計な気遣いも要りませんけど、関数内だけで一時的に使い捨てにしたい場合などには有効です。
また全ての変数をグローバルにしてしまうと、グローバル領域が変数名であふれ返ってしまいます。 その場合の対処方法もありますが、それはまた別で。

さて、宣言のまとめとしては
varステートメントを使わない場合は 全てがグローバル変数になる。
varステートメントは関数内で使うとローカル変数宣言になる。

ちょっとした注意:
まだこの時点で説明していませんが、注意しなければならない変数名があります。
例えば よく使われるミスで name と言う変数名を使う時。
name = "artemis";
こうやってグローバルに変数nameに artemisと言う値を入れてしまうと、 実は、window.name と言うプロパティの書き換えを行ってしまう事になります。
windowオブジェクトと言うのは省略できるので name は ウィンドウオブジェクトのプロパティ名と一致してしまうのです。 なのでwindow.nameに値を入れている事になるだけです。 window.nameとは フレームなどでのtarget属性として指定されるフレームウィンドウの名前の事です。
ですから、使えることは使えますがwindow.nameを付けている場合はname = "artemis"; などは使うべきではないです。 変数名として扱う場合等は要注意です。 関数中でローカル変数として var name = "artemis";の様に使うのは問題ないです。

ちょっとついでの話(初心者向けじゃないかも?)
グローバルで宣言された変数は、すべてwindowオブジェクトの子(プロパティ)である。と言えます。 従って変数はwindow.変数名、self.変数名 と書く事が可能です(普段は不要です)。グローバル領域ではthis.変数名でもOKです。
例えばまだ宣言さえされていない変数を

if(変数){ }

の様に利用しようとすると、存在しない物(定義無し not defined)を利用する為にエラーが出ます。
通常は最低限未定義として var 変数;のように先に宣言しておく必要があります。

が、javascriptでは既に存在するオブジェクトのプロパティがあるかないか?を調べる時は、無ければエラーではなくundefinedを返してくれます。 よく見かけると思いますがif(ducument.all){ }のような書き方です。

と言う事で、まだ宣言もされていないグローバル変数やグローバル関数は宣言しておかなくても

if(self.変数){ }

の様に直接変数を調べずに、存在する親オブジェクトから記述する事で、存在するself(自windowオブジェクトの事)のプロパティとして調べる事ができます。
グローバル変数に関してはこの方法で事前のグローバル変数宣言を先に行っておく手間(記述)を省けるケースもあります。
製作時はエラーがでた方が良いケースも有ります。 定義していないのか?それとも未定義の変数なのか?などの違いも把握しながらコーディングする必要があるケースも有ります。 従って、self.変数で済ませてしまうことが『最良』ではありません。


変数 代入と値

top
◆代入演算子
先のサンプルでなんとなくわかったと思いますが、変数に値を入れる場合は代入演算子( = )を使って代入します。 プログラムの規則として代入演算子( = )で結ばれる場合は必ず 右側の値を、左側へ・・・・と言う解釈がされます。 逆にしてはいけません。 代入演算子( = )は、数式で使うイコールとは違います。代入です。

◆文字列の取り扱い
もう一つ大事な事として、プログラム内で扱われる 文字列 は 必ず、ダブルまたは、シングルクォーテーションで囲みます。 逆に言えば、これで囲んだ物は文字列であるとも言えます。 文字列がどちらかのクォーテーションを含んでいる場合は、残りの方を使って書きます。
$value = 'このサイトの名前は"ARTEMIS"です';
この$value の値は このサイトの名前は"artemis"ですとなります。
数値に関しては、クォーテーションでで囲む必要はありません、逆に言えば数値を囲んでしまうと 数値ではなく数字と言う文字列として扱われます。これはあとで説明する 変数の型でもう少し詳しく説明します。

◆代入される値
ここまでのサンプルでは、変数には直接 文字や数値を代入演算子で代入しています。 これだと、スクリプトを記述した時点で決まった値が入る事になりますが 実際のプログラムでは、これ以外に状況によって変化する値を代入したりします。 変数から代入したり、オブジェクトから代入したり、また右に計算式を持ってくる事で その計算の結果を代入します。

<script type="text/javascript">
var point = 0, oldpoint;	//変数の宣言

function addpoints(){
    oldpoint = point;	//pointの値をoldpointに代入
    point = point + 10;	//pointに10足してpointに代入
}
</script>
このサンプルでは、point の初期値が 0 です。関数addpoints()が呼出されると その関数の中で現在の pointの値を oldpointと言う変数に代入しています。 次に自分自身(point)の持っている値に、0を足した物を、新たな自分(point)の値として代入します。 もう一度、この関数addpoint()が呼出されると、現在の point を oldpointに代入しますので oldpointが10、pointが20 と言う値を持っていると言う事がなんとなくわかりますか? また、変数(箱)は 新たな値が代入されると完全に上書きされ それまで持っていた値は消えてなくなります。
usrinput = document.forms[0].elements[0].value;
これは、フォームのエレメント(テキストボックス等)の値を usrinputと言う変数に代入しています。 javascriptではフォームと連携して、ビジターの入力する値を受け取って利用する事も よく使われる目的の1つです。

point = oldpoint = total = 0;
複数の変数(単純)に同じ値が入る場合等には、この様に並べて書いてしまっても構いません。 初期が0でその初期に戻すようなリセット処理をする時などもこのように指定すると便利です。

注意:
ある変数の値を別の変数に代入する時などに、間違って ダブルクォーテーションなどをつけないでください。 oldpoint = "point"; のように書くとこれは oldpoint と言う変数に point と言う文字列を入れる事になってしまいます。 また、オブジェクトプロパティ等からの代入も usrinput = "document.forms[0].elements[0].value"; と書くと、その文字列を入れると言う事になってしまいます。


変数の型

top
変数にはデータ型と言う物があります。 あまり気にする事も無い場合も多いですが、データ型というものがあり それはそのまま『型オブジェクト』でもあると言う事を理解しておくと オブジェクトと言う物に対しても理解が深まりますので、 プログラミングをしながら意識できるようになって下さい。

型を簡単に言うと、引越しの時のダンボール箱が変数だとすると、 『割れ物注意』『食料品要冷蔵』『衣類』『貴重品天地無用』 等と書きますね? これと型が同じです、この表示(型)がある事によって取り扱い方が違ってきます。 ですから、あなたがプログラムを書く時に間違った取り扱いをしない様にして下さい。

変数はそのまま処理対象になるので、オブジェクトでもあります。 従って、変数の型と言う呼び方とオブジェクトの型が一致する事になるようです。

-------------------------------------------------------------
文字列型
文字列型とはその変数の値が文字列である場合を指します。 文字列が代入されれば文字列型になると言う事にもなります。 先ほどの代入で文字列の扱いを少し書きましたが、javascript内では 文字列はダブルまたはシングルクォーテーションをつけて取り扱います。
var $name = "artemis";
この様に文字列が代入された変数を文字列型(string)と言います。 この変数は処理される時には文字列として扱われます。つまり前ページで説明した コアオブジェクトの文字列(string)オブジェクトと言う事になるわけです。 従って文字列(string)オブジェクトに用意されている、 プロパティとメソッドを使える事になりますので あなたは、そういう取り扱いをする事を考えれば良い事になります。

さて、何も代入をせずに変数だけを宣言する時にはその変数は undefined(未定義)と言う状態になります。 後で利用する時にこの変数が文字列型として扱われるようにすると便利な場合があります。 値を代入せずに文字列型変数を宣言するには
var $name = "";
とかきます。これによって、後で参照するとこの変数の値は undefinedではなく空白になります。 見てみますか?
javascriptではHTMLエレメントから取るデータは文字列型が基本になります。
オブジェクトやそのプロパティなどは基本的に文字列型で、その値を代入した変数は 文字列型になります。javascriptではユーザー入力を受け取る際にフォームなどをよく使いますが このフォームの値を受け取った時も数字であっても初期値は文字列型として扱われます。
$xxx = docudment.forms[0].elements[0].value;
この状態では フォームエレメントに 100 と言う数字が入力されていたとしても $xxxに代入される値は 100 (いちゼロゼロ) と言う文字列となります。
-------------------------------------------------------------

数値型
数値型とはその変数の値が 加減乗除などの計算式に使える数値である場合を指します。 宣言時等に数値を代入すればそのまま数値型になります。
この様に数値の代入された変数を数値型といいます。 数値型は数値として処理される事になりますので数値(number)オブジェクト と言う事になり、数値(number)オブジェクトに用意されているメソッド・プロパティや算術演算子が有効になります。

数値型の変数は特別な値を持つ事があります。(n4/ie4 以上)
NaNinfinityです。 NaNはNot a Numberの略で、『数値ではない』という意味です。 処理の途中で数値型変数の値が 数値として解釈できなってしまう場合等この値が入ります。 例えば 数値に文字列を掛けた場合などです。infinityは javascriptで処理できる桁数を超えてしまった場合この値が入ります。

var $age1 = 30; // 30と言う数値を値に持つ数値型変数です
var $age2 = "30"; // 30と言う数字の文字列を値に持つ文字列型変数です
$age1ではそのまま数値を代入しています、javascript内では数値は半角の数字として むき出しのまま扱います。$age2では数値を ダブルクォーテーションで囲む事によって 文字として代入しています。従ってこれは数値ではなく 30(さん・ゼロ)と言う文字列になります。 文字列になると四則計算等の数値として通常の取り扱いはできなくなります。 次のボタンは型のタイプをアラート表示します。
-------------------------------------------------------------
ブール型
処理の中では、「真」か「偽」か? と言う評価によって処理を分ける事がよくあります。 また、評価の結果を真か偽で変えるような式を作る場合もあります。 この 「真」か「偽」か? を値として持たせた変数をブール型変数と言います。
ブール型の値は決まっていて、true(真) と false(偽) の2つに限定されています。
この2つの値にはダブルクォーテーションなどを付けないでくださいね? つけると単なる『 true 』という文字になってしまいます。 ブール型は、ブール型としてのみ処理されるブール(boolean)オブジェクトと言う事になり ブールオブジェクトに用意されているメソッド・プロパティなどが使える事になります。

処理の中で $switch = true;と言う ブール型変数を作り、条件が整わなかった場合は false を代入するようにします。 あとは、この $switch の値によって処理を分ける、と言う方法を取ったりします。 これはソース上に書き込む手動的な手法です。

次の場合は処理(式の評価)によって、自動的に変数の値が決まる場合です。
$navi = (navigator.userAgent.indexOf('MSIE') >= 0);
右の式は、navigatorオブジェクトの、userAgentプロパティの値(である文字列)が indexof('指定文字')メソッド、指定文字を含んでる?・・・・・・。と言う意味になります。 大文字小文字も重要です。indexof と書くとエラーになります。 MSIEの場合は MSIEと言う文字を含んでいるのでtrue、netscape等のブラウザではfalseが自動的に $navi と言う変数に代入されます。$naviはブール型変数です。
ついでに
ステートメントや、今後の説明の中でも出てきますが、変数の型ではありませんが。 例えば、変数a に 数値が入っているとします。 この場合この変数を評価する場合に 0の場合は false、1の場合は true として扱われます。 変数a が文字列型の場合は、1文字以上の値があれば true、値が空なら false となります。 ブール型とは少し意味が違いますがこの様に他の型でも評価されるばいに、0やUndefined、nullであれば ブール型の評価と同じように扱われる場合があるので書いておきます。。
-------------------------------------------------------------
オブジェクト型
変数の値がオブジェクトである場合、オブジェクト型変数となります。 詳しく説明できるか心配なので、例を出しますのでなんとなく理解して下さい。

$list = new array();
$listは 配列(array)オブジェクトになります。$listは配列なので複数の値を配列のメンバー(要素)として格納できます。
$now = new date():
これは日付を取得して、日付(date)オブジェクトになります。$nowには この式が実行された時点での時間が dateオブジェクトと言う特別な値で格納されています。
$win = window.oepn()
これはウィンドウを作ります。この新たに生成したウィンドウに指示を出す時は、この変数を windowその物と見立てて操作を行います。

この様に、新たに生成した操作対象(オブジェクト)を代名詞として変数に格納して その変数はオブジェクト型変数となります。

$img = new image();
例えばこれですが、一般的にイメージオブジェクトとは html文書内にある imgタグの事です。しかしこれは、javascript内でのみ利用できるようにした特殊なオブジェクトです。 普通であれば イメージタグの名前を指定して、そのプロパティなどを読み込んだり 書き換えたりしますが、この イメージオブジェクトの場合は 代名詞である 変数名をつかって $img.src = "./images/file.gif"; の様に書きます。 こう書く事で表示はされませんが、javascriptにはこの画像自体が読み込まれている事になります。 この $imgは オブジェクト型変数と言う事になります。
$img自体が画像タグと同じ『物』を意味してる状態になっています。
ちなみに、通常の変数代入で $img = "./images/file.gif"; と書いた場合には この $imgと言う変数は 画像のパスを文字列として格納しているだけで画像を読み込んでいるわけではありあません。 うまく説明できなくてごめんなさい。m(__)m


-------------------------------------------------------------
javascriptで明確に定義されているのかわかりませんが、 一応JScript(MSIE)では 次の2つも型であると説明されていたので、型として書いておきます。 型であるないにかかわらず、javascriptで使われる変数の特殊な値です。

undefined型
変数を宣言する時に代入を行わなかった場合や、 ある処理の結果が不明なまま、変数に代入された場合、その変数は undefiend (未定義)と言う特殊な値を持ちます。 この状態の変数をundefined型変数と言います。
var $name; //代入が無く、値はundefined で undefined型
基本的に出力(表示)などする時は空白として出力される事が多いです。(ケースによる)

-------------------------------------------------------------
null型
変数の値が 『 無 』である時この null型変数となります。 一般的には変数の値にこの nullを使って、変数を奇麗に掃除した時にこの状態になります。 この状態は、undefined(未定義)ではなく、何も無い状態 をさします。 変数の初期値を与えずに nullを与えたり、処理の途中で変数を奇麗にしたい時にこの null を値として 指定します。
$point = null;
先ほどまで$pointの持っている値は消去され、何も無い状態になります。

null型は 型を調べる演算子でチェックすると、オブジェクト型と言う答えが戻ってきます。 従って、javascriptではnullと言う特殊なオブジェクト状態であると思って良いのかもしれません。
これもブラウザによって違う場合があるのですが、JavaScriptとして出力するとnullと言う文字が出てしまう場合があります。

-------------------------------------------------------------
◆関数型
この他に型を調べる演算子で function と言う答えが戻ってくる物があります。 これはオブジェクト型で、そのタイプがfunciton(関数)オブジェクトであると言う事と思ってください。
関数は
var add = function();
と書く事もできますし、 function add(x,y){
return x+y;
}
と書く事もできます。
どちらも add は 関数○○を指すオブジェクト型変数と言えます。
変数の方としてはオブジェクト型、オブジェクトのタイプとしては関数 と言うのが正しいのかな?
関数はちょっと微妙ですね。単体でfunction型が返ってくるので関数型といって良いのかな?と思いますが。。。 オブジェクト型にはArray Object、Function Object、Object Objtect などがあります。

変数の型(データ型)
文字列型 (string)
数値型 (number)
ブール型 (boolean)
オブジェクト型 (object)
△関数型 (function) (オブジェクト型)

undefined型 (undefined)
△null型 (null)(オブジェクト型)

-------------------------------------------------------------
変数の型を調べる
型を調べる方法があります。 演算子なので演算子のページでも書きますが、 この次で説明する型の変換などでも使いますので先に書いておきます。

型を調べるにはtypeof(
変数や式)を使います。
変数や式を括弧に入れる事でその結果の型を文字列として返してきます。 値は次の6つ「string」「number」「boolean」「object」「undefined」「function」 です。前にも書いてありますが nullは オブジェクト型と言う答えが返ってきます。
functionは変数と言うよりは、関数オブジェクトの時に戻る値です。

プログラム中で型を調べる時は、調べたい場所に
alert(typeof(変数・関数名や式)); と書きます。
これでその時点での型がアラート表示されます。
結果を変数に入れるのであれば
$type1 = typeof(変数・関数名や式); にすれば、
$type1 に 文字列として型の名前が入ります。


型の自動変換

top
変数の型は必要に応じて返る事ができます。 また状況により自動的に変わってしまう事もあります。その規則について書いておきます。

◆型の自動変換 ( 連結編 )
違う型同士の変数と変数を連結する場合にこれが起こります。
( + や += )で結ばれる物の中に文字列型が含まれると 結果的に( + や += )は加算(足算)演算子ではなく、連結(結合)演算子として解釈され 全体が文字列として扱われて、文字列の結合になります。 例を出しながら説明して行きます。
<script langauge="javascript">
var aaa = 30;     //数値型
var bbb = 0;      //数値型
var ccc = "10";   //文字列型
var yyy;          //未定義
var xxx = "";     //文字列型 (空)

$ans1 = aaa + bbb;  // 両方数値型 → 加算で30(数値)になります
$ans2 = aaa + ccc:  // 数値+文字 → 連結 3010(文字列)になります
$ans3 = aaa + xxx;  // 数値+文字 → 連結 30(文字列)になります
$ans4 = aaa + yyy;  // 数値+未定義 → nan(数値)になってしまいます

$ans1 += xxx;	// 数値 に 文字列を追加加算  30(文字列)になります
</script>
この例で注目してもらいたいのは xxx を 代入なしの宣言ではなく xxx = ""; と言う 値を入れない状態での文字列型変数宣言をしている所です。 $ans3では 数値にこの 空文字列変数を連結する事によって、値を変えないまま 変数の型だけ変更している事になります。 $ans4では 文字列型ではなく未定義のままの yyy なので nan(数値ではない) と言う、エラーに近い答えになっています。 また、最終行のでも同じように 数値型に 空文字列変数を追加加算(+=) する事で $ans1の型を文字列型に変えてしまっています。
この様に、文字列型が混ざると結果が文字列型になりますので 気をつけると共に、逆にそれを利用して型変換する事もできます。

◆型の自動変換 ( 乗算編 )
変数の値が、数値として読み取る事が可能な時に乗算を行うと それらの変数は数値として扱われ、数値型に変換されて結果を返します。
■サンプルフォーム ( document.forms[0]とします) (elements[0]) (elements[1])
<script langauge="javascript"> var aaa = document.forms[0].elements[0].value; //文字列型 値は30 var bbb = document.fomrs[0].elements[1].value; //文字列型 値は5 $ans1 = aaa + bbb; // 連結 文字列型 値は 305 になります $ans2 = aaa * bbb; // 乗算 数値型 値は 150 になります $ans3 = aaa * 100; // 乗算 数値型 値は 3000 になります </script>
これらは演算子の特徴として演算子で解説するべきかもしれませんが この様に、文字列型であるにもかかわらず、その値が 数値として認識できる値である場合 乗算する場合は数値として認識して数値型として処理され、結果も数値型になります。 しかし、加算(+)をしようとしても、この場合は連結(+)になりますので無理です。 ですから(ちょっと邪道ですが)フォームのなどの場合、値(数字)に 1 を掛ければ その値は数値型になります。 また、0を引いても 数値型になります。そのあとでなら加算(+)ができるようになります。 値が数字でなく、英文字などの場合は乗算すると nanをかえしますので気をつけて。 この様に、同じ値でも、処理の仕方によっては別の型として振る舞ってくれる場合もあります 偶然の結果をあてにせずに、こういう処理だからこうなっていると言う点を意識して プログラムを書き上げて下さい。


関数、メソッドによる 型の変換

top
前説明で、演算子の特性による型の自動変換を説明しました。 自動変換は自動変換として、とても都合の良い使い方はできますが 明確に型を変更する必要がある場合に型を変える方法があります。

◆文字列型への変換
toStringメソッド
変換と言うとその変数(箱)を変換すると思われるかもしれませんがそうではなくて その変数のを文字列に変換した物を返す、と言う事になります。
toStringはメソッドですので、次のオブジェクトに用意されています。
array オブジェクト
boolean オブジェクト
function オブジェクト
number オブジェクト
(string オブジェクト)

var $aaa = new array("赤","青","黄","緑");    //array
var $bbb = true;                              //boolean
var $ccc = new function("x","y","return x+y");//function
var $ddd = 100;                               //number

次の $aaa2〜$ddd2 は 文字列型となり
上の4つ、それぞれの値を文字列にした物を値として持ちます。
var $aaa2 = $aaa.tostring();
//赤,青,黄,緑 要素をカンマ区切られた状態
var $bbb2 = $bbb.tostring();
// true という文字
var $ccc2 = $ccc.tostring();
// function anonymous(x, y) { return x+y } と言う関数記述
var $ddd2 = $ddd.tostring();
// 100 と言う数値文字



自分自身(箱)ごと型変換するには
$aaa = $aaa.tostring()
と自分に代入すれば、
文字列型に変換された値を持つ文字列型の変数となります。
これで文字列型に変換できますから、文字列として取り扱えますね。

◆数値型への変換
整数値parseInt()及び 含小数parseFloat()
これも変数自体(箱)を変換するのではなく、 その値を数値型に変換した値を返します。 先頭から数値として認識できる値(半角数字)があれば、それを取り出して値として返します。 先頭にない場合や、認識できる数値を含まない場合は 数値型に変換されるものの 値は NaN (数値ではない) を返してきます。
この2つは ビルトイン関数(jscriptではグローバルオブジェクト用メソッド) で javascriptに最初から組み込まれている関数(ある処理をする物)です。 使い方は 括弧内に変換する文字列(または、変数)を入れて使います。
parseInt("3.05") 或いは 変数を入れて parseInt(num) の様に。 では例を。
//変換用に 次の4タイプの数字を含む文字列を用意しました
var $aaa = "4.51";;
var $bbb = "netscape4.51";
var $ccc = "4.51beta3";

/* $aaa = parseInt($aaa) として、自分自身に戻す形で
上の3つの変数に対して行った数値型変換後の値を書きます。 */

$aaa の値:4    // 整数値のみ取り出し
$bbb の値:NaN  // 数字で始まっていないので認識できず
$ccc の値:4    // 始りの数字のみを整数値に変換

/* $aaa = parseFloat($aaa) として、自分自身に戻す形で
先の3つの変数に対して行った数値型変換後の値を書きます。 */

$aaa の値:4.51  // 小数点以下を含む数値を変換
$bbb の値:NaN   // 数字で始まっていないので認識できず
$ccc の値:4.51  // 始りの数字のみを整数値に変換

/* フォームなどで受け取った値を、すぐに加算する時等は
確実に数値にする為にこれを使って変数に代入すると確実です*/
$point = parseInt(document.forms[0].elements[0].value);
この様に数値に変換する、または数値を取り出しくれて変換してくれます。 2つの違いをどう使い分けるかはその時の処理によりますし この2つがある事を考えてプログラムを組みたてればよいと思います。

parseInt() に関しては 数値を10進数、16進数、2進数等として読み取って10進数の値を返す機能もあります。 誤った結果を出さない為には、明示的に10進数としてparseInt(変数,10) と書く事を薦めます。

以上で変数の説明を終わります。この下はちょっとしたアドバイス?

artemis式 変数名の付け方

top
まだ説明していない言葉もありますが、参考までに書いておきます。
この規則は、正しいとか正しくないとか言う物ではなく 自分があとでスクリプトを見返す時に、自分がわかりやすくするように付けています。 また、テキストエディタで検索や置換えをする時に容易に発見できるので。
(今は別の方法を使っています)

1.グローバル変数
変数の頭を ドル記号 ( $ )で始めます。
$name、$value、$age 等
$sitename = "artemis";

2.引数とローカル変数
変数の先頭を アンダーバー ( _ ) で始めます。
_i、_a、_b、_times 等
for(_i=0; _i<10; _i++){}

3.配列変数(配列オブジェクト)
変数が配列の場合は アンダーバー ( _ )で繋ぐような形を取ります
list_name、$date_ary等

この他に、例えば画像を指す変数であれば imgmenu imgmarkの様に その性質を表す小文字を付け加えると言う工夫などをして 変数を見やすくする場合もあります。

少し長めのスクリプトや、数ヶ月立ってから見直す時などに 自分なりの規則を用いて記述する事により、自分にとってとてもわかりやすい物になります。 私の規則を使う必要はありませんが、自分なりに考えてみましょう。

注意: IE向けにJavascriptとVBscriptで変数や関数を共有させたりする場合に ドル記号は使えません、アンダーバーは先頭に使えません。 共有を考えてプログラミングする場合は、また自分なりの法則を考えて下さい。

Microsoftのサンプルの名付け規則
MicrosoftのDeveloperCenterなどでは、型を示す文字をつけている事が多いです。
oTD (object型)、sVals (string型)、isIE (boolean型)など。

これを書き直してる現在、優秀ならリブラリなども増えてる時代です。
ライブラリの利用、逆にライブラリの配布なども考えていくとオブジェクト指向の流れを受けて変数名も整理する必要が多くなりました。
このページでも触れていますが、グローバル変数は全て最上層のwindowオブジェクトの子(プロパティ)であると言えます。 従って次から次へと変数や関数をグローバルで作ってしまうと、思わぬ所で変数名がぶつかってしまう場合があります。 自分で作っていれば気をつければ良いだけですが、プログラムが大きくなったり、別の人が作ったライブラリを利用する時など 『この名前は使ってよいか?』と言う事にさえ注意を払わねばなりません。

こういった場合は、グローバルであってもwindow直下のプロパティではないグローバルで使える変数を作ると言う方法があります。 簡単に言えば自分のプログラム用のグローバルで使える変数を入れ込む為の、専用オブジェクト(変数)を作成しておくと言う事です。

例:(丁寧に書きます)

var A = new Object(); //オブジェクト作成
A.xxx = '';
A.Test = function(){ };
A.ary = new Array();
まず A という変数名でオブジェクトを作成します。
これでwindow直下にはAというオブジェクト用変数名しか使いません。
あとは、すべてAのプロパティ名として変数や、関数などを定義していきます。
これを行えば、全然別のプログラムでは B というオブジェクトを作成してから 変数、関数を使っていれば、同じページに混ぜても変数名や関数名などがぶつかる事がなくなります。 つまり自分で使う変数に『苗字』を与えてあげると言う事になります。
例えば、サイト全体で使う外部ソースファイルにはグローバルとして GLB と言うオブジェクトをベースにする。 個別のページに付加するJavaScriptはむき出しのままで使う。 こんな方法を取ればぶつかる事も無く、さらにグローバルの方を取りたい場合はGLB.プロパティ名とすればとれるので 非常にコーディングしやすくなります(文字数は少し増える)。
オブジェクトにしていく方法は、こんな事の為にだけ遣うものではありませんが、 個人が書くJavaScriptと言う視点からしても、ぶつかりにくい方法はプラスな考え方です。
私は一応サンプルソース提供もしてるので、この方法に移行しつつあります。


←前 次→



専用ページから申し込むと
So-netより高い3万円CB

案ずるより産むが易し
使ってみれば疑問も解決

XREA+ (plus) 206円/月
( お試し7日間 )

CORE SERVER 428円/月
( お試し15日間 )

ロリポップ 270円/月
( お試し期間10日間 )

ヘテムル 1620円/月
( お試し期間15日間 )

さくら 129円/月
( お試し期間2週間 )

無駄な高額ドメイン管理料金払ってませんか?

バリュードメイン
ムームードメイン