読者です 読者をやめる 読者になる 読者になる

ハロートレーニングWebデザインの勉強 Webデザイン フェリカテクニカルアカデミーWebサイト制作科

変数

変数(variable)とは

  • 変化するもの(値が変化する器)
  • 値を直接書かずに抽象化して扱う
  • 変数はプログラム中のメモリ領域に付けた名前です
  • さまざまな値を一時的に記憶しておくために使われます
  • 言葉(文字列)や数字(数値)を一時的に保存する「箱」
  • 繰り返し使う言葉は「変数」として使う
  • 1回だけ書いてコピーするという発想
変数の名前付けルール
  • 変数宣言や型の宣言は必要ない
  • 変数名の先頭は英文字かアンダースコアであること
  • 変数名の2文字目以降は、英数字かアンダースコアであること(「- ハイフン」は不可)
  • 変数名の大文字・小文字は区別される

予約語について

  • 変数名のルールとしてもうひとつ、「予約語は使えない」というものがあります。予約語とはJavaScriptの言語自体に使われているさまざまな語句です。
  • 詳細は以下にまとまっていますのでざっと眺めておくと良いでしょう。
読みやすいコードのための名前付け
  • 変数の中身を理解しやすい
  • 長すぎたり、省略し過ぎたりしない
  • 似たような名前を付けない
  • 基本的には英単語
  • 決められた記法で統一する(キャメルケース記法、アンダースコア記法、Pascal記法)

変数の使い方

  • 変数名を付けて文字列や数値を格納する
  • 変数名は英単語で命名するのが一般的
変数宣言
  • 「宣言」とは、変数に名前をつけて利用するための準備をすることです
  • 宣言は一度だけおこないます
  • varを使って、変数であることを宣言する
  • variableの略

変数名の前に「半角スペース」を入れる

var 変数名;


f:id:web-design-lesson:20160505190348p:plain


複数の変数を宣言する場合は「カンマ」で区切る

var 変数名1, 変数名2, 変数名3, … ;

コンソールで複数行のプログラムを書く

  • コンソール内で「改行」するためには、「Shift+Enter」を行う

f:id:web-design-lesson:20160505190932p:plain

変数の利用

  • 値を代入して使う
変数への値の代入
  • 変数の中に値を入れることを代入と呼びます
  • 変数が持つことができる値は1つだけなので、代入をするたびに上書きされます

変数名 = 値 ;

※右辺を左辺に入れる


《変数への値の代入》

<script>
  var a;
  a = 10;
  a = 20;
</script>
  1. aという名前の変数がメモリに作られる
  2. 変数aの中に10が代入される
  3. 変数aの中身が20に上書きされる
変数の初期化
  • 宣言時に値を代入することを「初期化」と呼びます
  • 変数宣言のみで初期化を行わない場合、変数の中には初期値として「undefined」という特殊な値が入ります
  • 変数を計算などに利用する場合は、必ず先に値を入れておきます

var 変数名 = 値 ;

変数の表示

  • 変数の中身を表示するには、「console.log」や「alert」の丸括弧()内に変数名を指定します
  • 変数名をシングルクォートまたはダブルクォートで囲むと、囲まれた範囲は単純な文字列となり、変数名がそのまま表示されてしまいます


《変数の中身の表示》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>変数の中身の表示</title>
<script>
  var a = 10;
  console.log(a);
</script>
</head>
<body>
</body>
</html>

《実行結果》


変数名はシングルクォートまたはダブルクォートで囲まない!

データ型

  • データ型とは、変数に入っているデータの種類のことです
  • 文字列と数値とは、異なる種類のデータ型になります
  • データ型が異なると、実行できる処理内容も異なります
  • 文字列型のデータに対しては文字列の検索や置換などの処理ができます
  • 数値型のデータは計算処理に利用できます


JavaScriptのデータ型》

データ型 説明
数値 整数や実数 10

0.5
文字列 シングルクォートまたはダブルクォートで囲まれた文字の並び 'abc'

"こんにちは"
論理値

・真(条件を満たす)の意味をもつ「true」

・偽(条件を満たさない)の意味をもつ「false」

true

false
配列 複数のデータの集合体 [10, 20, 30]
連想配列

(オブジェクト)
キーと値の集合体 { width : 90,

height : 50 }
null値 オブジェクトが存在しないことを表す特殊なデータ型 null

undefined値

変数が初期化されていない、あるいはプロパティが定義されていないことを表す特殊なデータ型 undefined
NaN値 数値でないことを表す特殊なデータ型 NaN

  • JavaScriptはデータ型について厳密なチェックを行わないため、数値型の値が入っていた変数を文字列型の値で上書きすることも可能
  • スクリプト中で扱うデータは変数に入れる
  • 変数に入れるデータの種類のことをデータ型と呼ぶ
広告を非表示にする