DESIGNMAP

  1. TOP
  2. 公開講座
  3. ゼロから始めるJavaScript入門
  4. 変数 ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.1】

変数 ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.1】

これからプログラミング言語のJavaScriptの学習をおこなっていきます。プログラミングが初めての方を対象とします。

JavaScriptは言語開発者の想定を超えて大きく使われるようになった言語です。2015年にECMAScript 2015の仕様が策定され、言語として本格的な仕様に進化しました。本講座ではこの新仕様も含めて解説していきます。

まずは環境構築をおこなっていきます。JavaScriptを動かす環境は複数のやり方があります。本講座では最もお手軽なWebブラウザを実行環境として使います。Webブラウザは「Google Chrome」をつかいます。

Google Chromeのインストール

「Google Chrome」のインストールは、ブログの過去記事をご覧ください。

Atomのインストール

次にテキストエディタを用意します。
本講座では「Atom」を使います。Windows版、Mac版ともあり、フリーで提供されています。
「Atom」のインストールは、ブログの過去記事をご覧ください。

テキストエディタに関しては他のものでも構いません。その場合、ファイルを保存する場合は文字コードを「UTF-8」(BOMなし)で保存してください。「Atom」以外ですと、「Brackets」もおすすめです。Web制作にフォーカスしたテキストエディタで、デフォルトが「UTF-8」です。

WebブラウザからJavaScriptを実行する方法は2つある

WebブラウザからJavaScriptを実行する方法は2つあります。
1つはWebブラウザに内蔵されているJavaScriptコンソールに直接JavaScriptのコードを打ち込む方法です。対話実行モードと呼ばれ、短いコードをすぐに試したいときに重宝します。

もう一つは、テキストエディタにHTMLを書き、HTMLの中にJavaScriptを書いて、HTMLをWebブラウザで開いて実行させる方法です。

講座ではこの2つの方法を内容に応じて使い分けていきます。

JavaScriptコンソールを起動する

Google Chromeを起動します。[表示]メニューから[開発/管理]→[JavaScriptコンソール]をクリックします。
コンソール画面が表示されます。ショートカットキー「option」 + 「Ctrl(Macはcmd)」 + 「J」でも起動できます。
もしくは、Google Chromeのウインドウ内を右クリック→[検証]、[Console]タブをクリックでも可能です。

すでにコンソールに何行か出力されてしまっている場合もあります。その場合はそのままで大丈夫です。コンソールの一番下に>が見えて、カーソルが点滅しています。

コンソール画面が表示される位置は変更できます。コンソールを別ウインドウにすることもできます。お好みに応じて変更してください。

変数の宣言

実際にJavaScriptのコードを書いて実行してみましょう。

>」のあとに、var name;と入力します。>は入力する必要はありません。

> var name;

[Enter]キーを押しますと、下記のようにundefinedが出力されます。>は入力欄、<-は出力結果を表しています。

> var name;
<- undefined

コンソールは、対話実行モードと呼ばれ、変数を書いただけで中のデータがコンソールに出力されます。undefinedは未定義を表すデータです。まだデータが代入されていないことを表します。

nameは変数です。varは変数の宣言で最初に変数を定義するときに使います。変数の宣言には、varletがあります。使い分けは「変数のスコープ、varとletの違い、巻き上げ、定数 ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.10】」で解説します。

変数には任意の名前が使えます。
ただし以下のルールがあります。

  • 変数の先頭は半角アルファベット文字かアンダースコア、$記号でなければいけません。変数の先頭に数字は使えません。
  • 2文字目以降は、半角アルファベット文字と数字、アンダースコアが使えます。
  • 大文字、小文字は区別されます。
  • JavaScriptの予約語は使えません。

JavaScriptの予約語は「予約語 - JavaScript | MDN」をご覧ください。

スポンサーリンク

変数へ値を代入する

データやオブジェクトに名前をつけるのが変数の役目です。オブジェクトは「オブジェクト ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.12】」で説明します。

name = "田中太郎";と書いて、[Enter]キーを押します。田中太郎が出力されます。

> name = "田中太郎";
<- "田中太郎"

=は代入演算子といわれ、"田中太郎"というデータをnameに代入しています。このコードは"田中太郎"というデータにnameという名前をつけていると理解してください。

name → "田中太郎"

というイメージです。代入と逆の向きのイメージでとらえます。

"田中太郎"は文字列型と呼ばれるデータです。データには種類があり、データ型と呼ばれます。文字列は文字列の前後にダブルクオテーションかシングルクオテーションをつけます。

データの型を調べることもできます。typeof()を使うと調べられます。

> typeof("田中太郎")
<- "string"

"string"は文字列型を表しています。文字列型は「文字列型 ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.2】」で解説します。

データ型は、「データ型(基本型) ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.3】」で学びます。

変数から変数へ値を渡す

変数から別の変数に値を渡すことができます。

> name2 = name;
<- "田中太郎"
> name2
<- "田中太郎"

文字列の場合は、変数から別の変数に値を渡した場合、データがコピーされます。name変数に代入されている"田中太郎"は、コピーされてname2変数に代入されます。

name → "田中太郎"
name2 → "田中太郎"

という状態です。データがコピーされるので、2つの同じ名前の文字列データが別々に存在することになります。

下記のようにname変数に別な値を代入しても、name2変数には影響がありません。

> name = "田中二郎"
<- "田中二郎"
> name2
<- "田中太郎"

今回コピーされるパターンを紹介しましたが、そうでないパターンもあります。
オブジェクトを変数に代入した場合は、コピーされません。
これは「コンストラクタ、オブジェクトを参照する変数 ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.13】」で解説します。

変数には様々なデータ型を代入できる

JavaScriptの変数には様々なデータ型を代入できます。
以下のようなコードを書いてもエラーになりません。

name = 10と入力して[Enter]キーを押します。

> name = 10
<- 10

10は数値型です。このように型が異なるデータを変数に再代入ができます。
typeof(10)で調べると、"number"と出力されます。

> typeof(10)
<- "number"

変数には「スコープ」「重複定義」「巻き上げ」という重要なポイントがあります。
これらは「変数のスコープ、varletの違い、巻き上げ、定数 ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.10】」で解説します。

今回はここまでとします。

スポンサーリンク

関連記事

プロフィール

DESIGNMAP
ディレクター・Web制作者
ON VISITINGを制作・運営。
お問い合わせ