JavaScript①・変数とデータ型

Image from Gyazo

JavaScriptとは

JavaScript は1995年に開発されたブラウザで動作するプログラミング言語です. JavaScriptとJavaは名前が似ていますが,全く関係のないプログラミング言語なので気をつけましょう.

1990年代後半はWebページの動的なコンテンツを実装するために幅広く利用されていました. しかし,クロスブラウザの問題(ブラウザによって振る舞いが異なる問題)や, JavaScriptに関係するブラウザのセキュリティホールなどが発見された影響で,JavaScriptの人気は大きく低下してしまいます.

その後,2005年に Ajax (非同期通信でWebページを書き換える技術)が登場し,再びJavaScriptに光が当たります. 当時,Google マップがAjaxを採用したことで大きな話題になりました. 加えて,2000年代後半にはHTML5が登場し,Webページをアプリとして実装するための機能が強化されました.

この授業では,標準化団体のECMA Internationalによって, 標準化された ECMAScript 2015(ES6) を対象に解説をします. 従来のJavaScriptに比べ,ES6は便利な機能や構文が追加され,より簡潔なコーディングが可能になりました. 最新のJavaScriptを学び,Webページを自由自在に実装できるようになることを目指しましょう.

CodePenの準備

CodePenにアクセスして,Penを作成し,タイトルを設定しましょう. Penのタイトルは「Chapter3」に設定しましょう.

https://codepen.io/

Image from Gyazo

変数

変数の宣言

変数 とはデータを記憶しておく入れ物です. また,変数にデータを記憶させることを 代入 といいます. 従来はvarで変数を宣言していましたが, ES6から変数を宣言するためのletが追加されました. varと比べて,letには下記の特徴があります. より安全な利用が可能なletをこの授業では使います.

変数を宣言するには,letの後ろにスペースを空けて変数名を記述します. 行末には;を付けて,命令の区切りであることを表します. また,変数に値を代入するには,変数名の後に=と代入したいを記述します. 値は整数,実数,文字列などを対象にすることができます.

結果を出力するためにdocument.writeを使用します. 括弧内にある+は文字列を連結する演算子です(演算子の詳細は後述).

let 変数名;
変数名 = 代入する値;
let x; //変数xを宣言
x = 2; //変数xに整数2を代入
document.write("<p>x=" + x + "</p>");
let y = 3; //変数yを宣言し,整数3を代入
document.write("<p>y=" + y + "</p>");

Image from Gyazo

定数の宣言

変数に代入された値は,他の値で上書きすることが可能です. 一方で,値の上書きを禁止したい場合は,定数 を利用します. 定数を宣言するには,constの後ろにスペースを空けて定数名を記述します.

x = 4; //変数xを整数4で上書き
document.write("<p>x=" + x + "</p>");
const z = 5; //定数zを宣言し,整数5を代入
document.write("<p>z=" + z + "</p>");
z = 6; //定数zを整数6で上書き(エラーになる)
document.write("<p>z=" + z + "</p>");

Image from Gyazo

データ型

一般に,プログラミング言語では,整数,実数,文字列など データの型 を意識する必要があります. JavaScriptでは変数の宣言時にデータ型を意識する必要はありませんが,内部的にはデータ型は区別されています. JavaScriptで利用可能な主なデータ型を覚えておきましょう.

データ型

データ型 概要
number 数値(整数&実数) 1, 10, 0.1, 1.1
string 文字列 a, abc, A, ABC
boolean 真理値 true, false
symbol シンボル 特定のシンボル

変数abcを宣言し,10"abc"trueを代入しましょう. 文字列は"",または,''で括る必要があることに注意してください. typeofで変数の型を調べることができます. それぞれ,numberstringboolean であることがわかります.

let a = 10;
let b = "abc";
let c = true;
document.write("<p>" + typeof(a) + "</p>"); // number
document.write("<p>" + typeof(b) + "</p>"); // string
document.write("<p>" + typeof(c) + "</p>"); // boolean

Image from Gyazo

ES6から新たに symbol が利用可能になりました. symbolを利用すると特定の変数を一つの値とみなすことができます. 通常の文字列とは異なることに注意してください(列挙型と同じような使い方をします). ここでは,appleという名前でsymbolを作成し,fruitに代入しています. この変数の型を調べると,symbolであることがわかります.

let apple = Symbol(); // symbolを作成
let fruit = apple;
document.write("<p>" + typeof(fruit) + "</p>");

Image from Gyazo

テンプレート文字列

ES6からテンプレート文字列という便利な表現が可能になりました. これまでは,文字列と変数を連結するときは,+ を用いていました. テンプレート文字列を使うと,${変数名} で文字列中に変数を埋め込むことができます. テンプレート文字列はバッククォート `` で括って表現します. ここでは,nameに代入された値を,テンプレート文字列であるhelloに埋め込んでいます.

let name = "Naoto"; // 変数を宣言して,文字列を代入
let hello = `<p>Hello! ${name}</p>`; // テンプレート文字列
document.write(hello);

Image from Gyazo

算術演算子

算術演算子

四則演算(加算,減算,乗算,除算)をはじめとして,数値を対象とした算術演算が可能です. 乗算や除算など普段使い慣れている演算子$\times$,$\div$とは異なることに注意してください.

演算子 概要
+ 加算 1 + 2 -> 3
- 減算 2 - 1 -> 1
* 乗算 2 * 3 -> 6
/ 除算 5 / 2 -> 2.5
% 剰余 5 % 2 -> 1
** 累乗 5 ** 2 -> 25
document.write(`<p>1+2=${1+2}</p>`);
document.write(`<p>2-1=${2-1}</p>`);
document.write(`<p>2*3=${2*3}</p>`);
document.write(`<p>5/2=${5/2}</p>`);
document.write(`<p>5%2=${5%2}</p>`);
document.write(`<p>5**2=${5**2}</p>`);

Image from Gyazo

数式

算術演算子を組み合わせて数式を計算し, その結果を変数に代入することができます. ここでは,100円の商品の税率10%の税込価格を計算しています.

let price = 100;
let tax = price * 0.1;
let total = price + tax;
document.write(`<p>price=${total}</p>`);

Image from Gyazo

アプリの確認

See the Pen Project3 by Naoto Mukai (@nmukai) on CodePen.

課題

下記の二次方程式を解の公式を用いて解いてください. 平方根はMath.sqrtを用いて算出することができます.

$$ x^2 + x - 6 = 0 $$

課題を完成させたら,Penの ZIPファイルリンク を提出してください. 提出方法は初回のWebアプリの開発を参考にしてください.

参考書籍

愛知県名古屋市にある椙山女学園大学 文化情報学部 向研究室の公式サイトです. 専門は情報科学であり,人工知能やデータベースなどの技術要素を指導しています. この公式サイトでは,授業で使用している教材を公開すると共に, ベールに包まれた女子大教員のミステリアスな日常を4コマ漫画でお伝えしていきます. サイトに関するご意見やご質問はFacebookまたはTwitterでお問い合わせください.