JavaScript変数 変数名 代入宣言スペースなど

JavaScriptで使う変数は「var」と「let」です。変数とは「入れ物」「箱」といったイメージです、小学校や中学校で習った「x」とか「y」と同じです。学校では数字を変数に入れてましたがプログラミングでは数字の他に文字列や画像パスなどなんでも格納することができます。

変数の宣言とは

学校では「x=」とノートに記入した時点で変数の宣言をしたことになります。プログラミングでもそれとほぼ同じです。

変数を記入してみよう

下記は変数を記入した例です。記入したことを宣言といいます。

 <script>
var x;
var y = 1;
var z = "田中";
var w = 1 + 5;
</script>

2行目は現状だと変数の値がありません。3行目は変数「y」に1を代入しています。4行目は変数に「田中」という文字列を代入しています。5行目は「w」に「1+5」という式を代入しています。どれも先頭に「var」が付いています、これは「変数ですよ~」とコンピューターに指示するものですまさに宣言ですよ。ここでは「var」をつかいましたが「let」も変数の宣言に使います。違いについては後ほど記述します。

変数には数字文字列の他に画像のファイルパスなどもいれることができます。

C#やjavaと違ってなんでも「var」と「let」で宣言します、型はありません。

変数名

変数名の取り決めは下記のようになります。

変数名は予約語(documentなど)以外はなんでも大丈夫ですが大文字と小文字は区別されます

最初の1文字目に数字をつかってはいません

日本語を利用することもできます、あまり使わない

わかりやすいなまえにするといいですよ

//変数名の例
let name;
let _neme;
let hennsuu1;

変数をセミコロンでつなげて一行にする方法もあります

//変数をセミコロンでつなげた例
let name; _neme; hennsuu1;

変数を使ってみよう

足し算掛け算割り算など

htmlファイルのbody内に下記のコードを記入してブラウザで表示してみてください。

<script>
let tg = "<br>";
let num1 = 3;
let num2 = 5;
document.write(num1 + num2 + tg);
document.write(num1 - num2 + tg);
document.write(num1 * num2);
</script>

サンプル(別窓)

順番に「8」「-2」「15」と表示されます。変数「tg」は改行のタグが入っています。プログラムではこうやって必ず変数で計算していきます。いきなり「3+5」「3-5+”<br>”」「3*5+”<br>”」とはしません。プログラムでは数値の値がいつも変更になるため定数にすると全部の箇所を修正しなければならないからです。変数にしておけば「num1」と「num2」の値1箇所を変更すればすべての部分が修正されます。この考え方は非常に重要です。

各記号の意味

+足し算
引き算
*掛け算
/割り算
%割り算のあまり

文字列をつなげてみよう

文字列を格納した変数は「+」でつなげます。htmlファイルのbodyに下記のコードを記入してブラウザで表示してみてください。

<script>
let age = 30;
let str1 = "年齢は";
let str2 = "才です。";
document.write(str1 + age + str2); 
</script>

サンプル(別窓)

「年齢は30才です。」と表示されます。

スペース

注意:単語と単語の間は半角スペースを入れます。


 

エディタにVSCodeを使っている場合は画面上で右クリックすると「ドキュメントのフォーマット」がありますのでそれを選択すると自動で整形されます。


 

変数の扱い方を大まかに記述しましたが、詳細な部分についてはある程度学習が進んでから調べれば大丈夫です。今はプログラムになれるようにしてもらえればうれしいです。

 

今回はこれで終了です。

お疲れ様でした!

前のページ  INDEX  次のページ