iPentec.com / Document / カテゴリ: TypeScript / タグ: TypeScript

変数の宣言、変数への代入、変数の参照

書式

変数の宣言

変数の宣言は下記の書式を利用します。

let

let 変数名:型名;

同一の型で複数の変数を宣言する場合は下記の書式が利用できます。

let 変数名1, 変数名2, ... 変数名n:型名;

異なる型の変数を複数宣言する場合は下記の書式が利用できます。

let 変数名1:型名, 変数名2:型名, ... 変数名n:型名;

また、型は省略できるため、下記の書式も利用できます。

let 変数名;

メモ

varとletの動作の違いはこちらの記事を参照してください。

var

var 変数名:型名;

同一の型で複数の変数を宣言する場合は下記の書式が利用できます。

var 変数名1, 変数名2, ... 変数名n:型名;

異なる型の変数を複数宣言する場合は下記の書式が利用できます。

var 変数名1:型名, 変数名2:型名, ... 変数名n:型名;

また、型は省略できるため、下記の書式も利用できます。

var 変数名;

代入

変数への値の代入は下記の書式を利用します。
代入は"="演算子を利用します。左辺に代入される変数名、右辺に代入する値を記述します。

変数名 = 代入値;

変数宣言時の代入

変数の宣言時に代入することもできます。

var 変数名:型名 = 代入値;

型名は省略した場合は下記の書式となります。

var 変数名 = 代入値;

参照

参照は変数名を記述します。

変数名

型

変数の型は以下が利用できます。

number
boolean
string

また、上記の型以外にオブジェクト型が利用できます。

補足

型(プリミティブ型)には,number boolean string void null undefined がありますが、変数で利用できるのは上記の3つの型とオブジェクト型です。

プログラム例

コード

下記のコードを記述します。

variable.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script type="text/javascript" src="variable.js"></script>
</head>
<body onload="calc();">
  <div id="output"></div>
</body>
</html>

variable.ts

function calc() {
    var a, b, c: number;
    var elem: HTMLElement;

    a = 6;
    b = 3;
    c = a + b;
    elem = document.getElementById("output");
    elem.innerHTML=c.toString();
}

解説

下記のコードで変数を宣言しています。a,b,c3つの数値型の変数と、HTMLElementオブジェクトの変数elemを宣言しています。

    var a, b, c: number;
    var elem: HTMLElement;

変数 a,bに数値の値を代入し、変数cに変数aとbの和を代入しています。

    a = 6;
    b = 3;
    c = a + b;

getElementById()メソッドを呼び出し、outputのIDを持つ要素を取得します。取得した要素のinnerHTMLプロパティに変数cの値を代入し、画面に変数cの値を表示します。

    elem = document.getElementById("output");
    elem.innerHTML=c.toString();

実行結果

上記のプロジェクトを実行します。variable.htmlファイルをWebブラウザで表示します。
下図の画面が表示されます。変数aとbの和の値が画面に表示されます。
変数の宣言、変数への代入、変数の参照:画像1

著者

Penta

iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用

作成日: 2018-03-13

目次

変数の宣言、変数への代入、変数の参照

目次

書式

変数の宣言

let

var

代入

変数宣言時の代入

参照

型

プログラム例

コード

解説

実行結果

関連するページ