JavaScript①・変数とデータ型

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/

変数

変数の宣言

変数 とはデータを記憶しておく入れ物です． また，変数にデータを記憶させることを 代入 といいます． 従来は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>");

定数の宣言

変数に代入された値は，他の値で上書きすることが可能です． 一方で，値の上書きを禁止したい場合は，定数 を利用します． 定数を宣言するには，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>");

データ型

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

データ型

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

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

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

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

テンプレート文字列

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

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

算術演算子

算術演算子

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

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>`);

数式

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

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

アプリの確認

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

課題

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

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

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

参考書籍