javascriptで文字列を扱う場合のまとめ

・単一引用符(シングルクォート)で囲む
・二重引用符(ダブルクォート)で囲む
・複数の行をまたいで記述可能
・複数行に分割する場合は「\」を使う
・文字列中に改行を含める場合は「\n」を使う
・単一引用符内の文字列にシングルクォートを含める場合は、エスケープ処理が必要。エスケープ処理は「\」を使う

また、javascriptはバックスラッシュについては、特別な意味を持ちます。
バックスラッシュの直後に特定の文字を記述すると、特定の制御コードを表します。

一例を挙げると「\n」は改行を表します(これは使用頻度が高いです)
また、以下にエスケープシーケンスの例を抜粋します。

//NULL文字
\0

//バックスペース
\b

//タブ
\t

//改行
\n

//垂直タブ
\v

//改頁
\f

//復帰
\r

//二重引用符
\"

//単一引用符
\'

//バックスラッシュ
\\

//2桁の16進数(XX)で指定するLatin-1文字
\xXX

//4桁の16進数(XXXX)で指定するUnicode文字
\uXXXX

上記の例がバックスラッシュの後に有効な制御コードになります。
この文字列以外の文字を指定すると、バックスラッシュが無視され、バックスラッシュの後の文字列が解釈されます。

javascriptで日付と時刻を表すにはDate()コンストラクタを使います。

具体的には、下記のような書き方をします。(一例です)

//指定の日時
var date1 = new Date(2018, 5, 5);
var date2 = new Date(2018, 6, 5, 19, 15, 20);
console.log(date1); //Date 2018-06-04T15:00:00.000Z
console.log(date2); //Date 2018-07-05T10:15:20.000Z

//現在の日時
var date3 = new Date();
console.log(date3);

//各種、値の取得
console.log(date3.getFullYear());
console.log(date3.getMonth());
console.log(date3.getDate());
console.log(date3.getDay());
console.log(date3.getUTCHours());
console.log(date3.toString());
console.log(date3.toUTCString());
console.log(date3.toLocaleDateString());
console.log(date3.toLocaleTimeString());
console.log(date3.toISOString());

また、出力される値は型に注意して実装する必要があります。
見た目が数字なので全て数値型であるとは限らない為です。

上記の後半部分の実行結果はそれぞれ以下のように出力されます。

2018
6
5
4
8
Thu Jul 05 2018 17:54:46 GMT+0900
Thu, 05 Jul 2018 08:54:46 GMT
2018/7/5
17:54:46
2018-07-05T08:54:46.762Z

javascriptの算術演算は次の演算があります

加算+
減算-
乗算*
除算/
剰余%

また、算術演算の他に、数学演算を行うMathというオブジェクトが標準で利用できます。

下記に一例を記載します。

console.log(Math.pow(3, 8)); //3の8乗
console.log(Math.round(0.7));
console.log(Math.ceil(0.7)); //整数に切り上げ
console.log(Math.floor(0.7)); //整数に切り捨て
console.log(Math.abs(-10)); //絶対値
console.log(Math.max(10, 15, 20)); //最大値
console.log(Math.min(10, 15, 20)); //最小値
console.log(Math.random()); //ランダムな数値を返す
console.log(Math.PI); //円周率
console.log(Math.E); //自然対数の底

/*
実行結果はそれぞれ以下のようになる
6561
1
1
0
10
20
10
0.9465591205735182
3.141592653589793
2.718281828459045
*/

javascriptでは、算術演算に以下のような特徴があります。

・オーバーフロー、アンダーフローが発生した場合にエラーにならない
・0で割った場合にもエラーにならない
・演算結果が最大値より大きくなった場合は無限大(Infinity)という値になる
・負の絶対値が最大を超えた場合、無限大負値になる(-Infinity)
・0を0で割ると、not-a-numberという「NaN」という出力になる
・無限大を無限大で割った場合もNaNになる
・InifinityとNaNはグローバル変数として定義される
・NaNの比較をすると、全ての値と等しくないという判定になる
・NaNとNaNを比較しても、等しくないという判定になる

プログラムを書いて実行した際に、コンソールログを確認してNaNやIntinityの表示が出てきた場合、上記のような算術演算の仕様を再確認することが重要になってきます。

数値を扱うプログラムが中心の場合は特に注意が必要になります。

実数を記述する時には浮動小数点リテラルを使います。

浮動小数点リテラルでは、小数や指数も使用できます。

先頭が「整数部」、次に「小数点」、その後に「小数部」という形式になります。

以下、整数部+小数点+小数部の記述例です。

100.5
123.8
.005

次に、指数の記述例です。

7.2e5

これは7.2×10の5乗を表しています。

指数の書き方は「e」または「E」という形で記述します。
どちらでも同じ処理がされます。

そのe(またはE)の後に、プラス「+」かマイナス「-」を記述します。

例えば次のような場合もあります。

3.84e-15

この場合は3.84×10のマイナス15乗ということになります。

javascriptのプログラム内で数値を表す場合は、10進整数で書きます。

10進整数の例

1
5
10
500

また、16進数(先頭が0xか0Xとして、その後に16進数)で指定することも可能です。

16進整数の例

コメント部分は10進数の値
0xf //15
0xff //255
0xC //12
0x7B //123
0x4D2 //1234
0x3039 //12345

16進数の詳しい説明はこちらのwiki(https://ja.wikipedia.org/wiki/%E5%8D%81%E5%85%AD%E9%80%B2%E6%B3%95)が参考になります

javascriptは8進数には対応していないので、10進数、16進数を使うようにします。(処理系によってはサポートしているが統一されていないのでNGと考えたほうがいいです)

javascriptでの数値の扱いについてまとめ

• 整数と浮動小数点は区別しない
• 全ての数値を浮動小数点として扱う
• 最大値は±1.7976931348623157ｘ10の308乗
• 小値は±5ｘ10のマイナス324乗
• 数値形式は-9007199254740992(－2の53乗)～9007199254740992(2の53乗)の整数
  (この範囲を超えると、精度が損なわれる)

javascriptの型について、簡単にまとめます。

型は大きく分けて2種類
基本型とオブジェクト型

基本型は、数値、文字列、論理値(真偽)、null、undefinedがある
オブジェクト型は、数値、文字列、論理値、null、undefined以外のjavascriptの値を示す

オブジェクトはプロパティの集合体
プロパティは名前と値の組み合わせを持つ

グローバルオブジェクトは特殊なオブジェクト
関数もオブジェクトとして扱う場合がある
コンストラクタの概念アリ。new演算子でオブジェクトを生成する際に初期化する時に使う関数

クラスはオブジェクト型の派生型にあたるもの
Arrayクラス、Functionクラス、Dateクラス、RegExpクラス、Errorクラスがある

javascriptにはガーベジコレクション機能がある
メモリの開放は自動的にされる

関数(メソッド)はオブジェクトに対して持つ
null、undefinedにはメソッドを呼び出すことはできない

値を変更できる型＝オブジェクト(プロパティ)、配列(要素)
値を変更できない型＝数値、文字列、論理値、null、undefined

変数には型の概念がない
どの型も代入可能
一度、代入した後に、違う型の変数を代入可能

変数はvarで宣言
構文スコープにより、関数外で宣言した変数はグローバル変数として、関数内と関数外からアクセス可能
関数内で宣言した変数は、関数スコープとなり関数内で利用可能

javascriptの行末はセミコロンを記述して、次のプログラムの先頭と明示的に分ける書き方が一般的です。

var a = 100;

ただし、セミコロンは必ず書かなければエラーになるという仕様ではありません。

例えば、下記のようなプログラムの場合、

var a = 100;
var b = 200;

console.log(a); //100
console.log(b); //200

変数aとbにはそれぞれ100と200が代入され、console.logに出力されますが、
次のように、変数aの最後のセミコロンを省いて書いたとしても、エラーにならずに実行されます。

セミコロンを省いた場合、改行が行末(プログラムの区切り)として処理されます。

var a = 100
var b = 200;

console.log(a); //100
console.log(b); //200

また、セミコロンを明示して、次のように1行に複数の命令を書くこともできます。

var a = 100; var b = 200;
console.log(a); //100
console.log(b); //200

ここまでで注意が必要な点は、改行が全て行末として解釈されるわけではないという点です。
次のような例は、処理のされ方がこれまでとは違います。

var a = 700
var b
c
=
800

console.log(a); //700
console.log(b); //undefined
console.log(c); //800

2行目、3行目で改行されていますが、変数bと変数cは別々のものとして解釈されています。
決して変数bcという単位で代入がされるわけではないです。

javascriptとして解釈されるには変数bが一旦、その行で終わったことになり、改めて変数cの暗黙的な定義がされた後に、値が代入されています。

このとき、変数cの行末は改行されていますが、セミコロンとしての解釈ではなく、次の2行の変数の代入までをひとつの命令として解釈しています。

改行がセミコロンとして解釈されない例があります。
下記の命令の場合は、処理に注意する必要があります。

//制御文の場合
return
break
continue

//インクリメント、デクリメント演算子
++
--

ポイントとなる点は、前者は制御文の直後に改行を行わないことと、
後者はインクリメントしたい変数と同じ行に演算子を書くことになります。

javascriptで変数や関数の名前を指定する際に使う名前を識別子といいます。

識別子は次のように書くルールがあります。

・先頭の文字はunicode文字、アンダーバー、$、とする
・数字は不可
・一般的にはASCII文字を使用する
・unicodeで表現できる文字も使用は可能(実際はあまり使われない)

動的に型が決まるjavascriptは変数を宣言する時、型の指定がありません。

プログラムの実行時には、文字列、数値、真偽値、null、undefined等の値の型が決定づけられます。

また、データ型はプリミティブ型とオブジェクトに分けられます。

プリミティブ型は基本型と呼ばれています。
オブジェクト型は参照型と呼ばれます。

上記のプリミティブ型は、値を指定すると変更できない性質をもち、
オブジェクト型は値を指定した後に、値自体を変更できる性質があります。

プログラム内に直接記述して表現する値をリテラルと呼びます。
実行時にもプログラムに書いた値がそのままの意味を持ちます。

下記に例を書きます。

10
1.0
"リテラル"
'リテラル'
true
false
null
undefined

上記は実行してもプログラム上の処理はなにもされません。

次のような例もあります

var a = 'test';
console.log(a);

この場合の変数aに代入した「test」もリテラル(文字列)で表現されたものと呼べます。
「test」と一度代入されたものは、プログラム実行中は変更しない(変数自体は書き換えられることがあっても)ので、プリミティブ型の値と呼ぶことができます。

また、オブジェクトリテラル、配列リテラル、関数リテラル、正規表現、などもあります。

{a:5, b:6}
[3, 4, 5, 6]

上記はそのまま記述するとエラーになります。

javascriptは基本的にunicodeで記述します。
実行環境がunicodeをサポートしていない場合、エスケープシーケンスを使って表現することができます。

エスケープシーケンスは「\u」を先頭に下記、その後に4文字のASCII文字を記述して表します。

例えば

という文字を扱う場合は、エスケープシーケンス\uの後に「0151」という4文字の16進数を記述します。

\u0151

エスケープシーケンス後のunicode文字列の一覧については、こちらのwiki(https://ja.wikipedia.org/wiki/Unicode%E4%B8%80%E8%A6%A7_0000-0FFF)に詳しくまとめられています。

特殊な文字列を取り扱う必要がある場合は、上記のサイトを参考にしてプログラムを書きます。

前回の記事はHTMLソース内にjavascriptを書く方法と、外部ファイルにjavascriptを書く方法を試してみました。

また、HTMLソース内にjavascriptを書く方法は、HTMLソースのタグ内に書く方法もあります。

簡単なサンプルを書いてみました。

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script>
//サンプル用関数(ボタン)
function alert_button()
{
	alert('test BUTTON!');
}

//サンプル用関数(リンク)
function alert_link()
{
	alert('test LINK !');
}
</script>

</head>
<body>

<button onclick="alert('test');">タグ内に直接書く</button>
<button onclick="alert_button();">タグ内から関数を呼ぶ</button>
<div onclick="alert_link();">文字に対してクリックイベントを付与</div>

</body>
</html>

ボタンが2個表示あり、HTMLソース内の button に対して、onclickイベントを付与しています。
このイベントはボタンを押したタイミングで発動されるもので、ユーザの動作に応じて命令が実行されます。
(他にもイベントの種類は多数あるので、別途まとめる予定です)

1つ目のボタンにでjavascriptのalert関数をそのまま呼び出していますが、2つ目のボタンには、HTMLのhead内に記述した独自の関数を呼び出しています。

また、ボタンの下の文字列に対しても、クリックした独自の関数を呼ぶようにイベントを付与しています。

どの方法でも動作には変わりはないですが、実装する場面で書き分けてプログラムします。

javascriptを書く場所は、クライアントサイドでプログラムを動作する場合は、ブラウザ内に直接記述するか、別ファイルとしてjavascriptを記述して読み込む方法があります。

HTMLソース内に直接記述する場合の例です。

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>

HTMLソース内に直接記述する場合

<script type="text/javascript">
//ここに書いた命令がそのまま実行される
alert("クライアントサイドjs");
</script>

</body>
</html>

次の例はHTMLソース内から別ファイル(main.js)として記述したjsファイルを読み込んでいる例です。

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./main.js"></script>
</head>
<body>

HTMLソースから別ファイルを読み込む場合

</body>
</html>

どちらも実行されますが、比較的、外部ファイルとして読み込む場合が多く利用されています。
その場合は、読み込み順によってプログラムの実行結果に影響する場合があるので、注意します。

javascriptの条件分岐を書きます。
他の言語と同様に条件分岐も一通りあります。

ただ、注意が必要なのは変数の型が明示的ではないので、条件の判定のされ方については、注意を払って書く必要があります。

var a = 3;

//値を条件により判別して分岐
if (a >= 4) {
	//3を超える場合
	console.log("3 over");
} else {
	//3以下の場合
	console.log("3 under");
}


//条件が真の場合、ループ処理し続ける
while (a < 6) {
	a++;
	console.log(a); //4 5 6 と出力
}


//条件が真の場合、ループ処理し続ける
for (var i = 0; i < 5; i++) {
	console.log(i); //1 2 3 4 と出力
}

また、オブジェクトを生成した後、オブジェクトに対してメソッドを追加する方法もあります。

その場合、インスタンスを生成した後にメソッドを追加しても、その生成したインスタンスからメソッドを呼ぶことができます。

下記、サンプルとして動作検証した結果です。

//オブジェクトを生成して、メソッドを追加

//コンストラクタ関数を定義する
function sampleobj(x, y) {
	this.x = x;
	this.y = y;
}

//インスタンスを生成する。newキーワードを使ってコンストラクタ関数を呼ぶ
var p = new sampleobj(3, 3);

//sampleobjオブジェクトのプロトタイプオブジェクトに関数を代入することで
//新規メソッドを定義する(例として、平方根を返すメソッドを追加)
sampleobj.prototype.r = function() {
	return Math.sqrt(
		this.x * this.x + this.y * this.y
	);
};

//sampleobjオブジェクトに対し、rというメソッドが使えるので、
//インスタンス経由でメソッドをコールする
console.log(p.r());

//最終的に「4.242640687119285」という出力がされる

javascriptの関数は、一般的なプログラム言語と同様の書き方はもちろん、関数そのものを変数に代入する書き方もあります。

また、配列や値を複数持つ配列をオブジェクトとみなし、オブジェクトに対しての関数をメソッドという名で呼び出して使うことができます。

メソッドについては、独自のメソッドを定義し、オブジェクトに付与して呼び出すこともできます。

下記の一連のプログラムは、実際に書いて動作させてみた結果です。

//関数の定義
function sample(a) {
	return a + 1;
}
//関数のコールと結果
console.log(sample(5)); //6



//関数の定義を変数に代入する方法
var sample_func = function(a) {
	return a + 2;
};
//関数のコールと結果
console.log(sample_func(7)); //9



//関数をオブジェクトと組み合わせる

//空配列を作成する
var a = [];

//配列に値を代入する
a.push(5, 6, 7);

//aをオブジェクトとしてみなすと、オブジェクトに対しての
//関数「メソッド」が使用できる

console.log(a); //Array[5, 6, 7]と表示される

a.reverse();

console.log(a); //Array[7, 6, 5]と表示される





//別々のオブジェクトを持つ配列を宣言する
var testarray2 = [
	{a:0, b:0},
	{a:2, b:2}
];

//配列に対し、独自メソッドを追加する
testarray2.dist = function() {

	var p1 = this[0]; //{a:0, b:0}の値のことを示す
	var p2 = this[1]; //{a:2, b:2}の値のことを示す
	
	//2つのオブジェクトの値(0:0)、(1:1)の平方根を求めて返す
	var a = p2.a - p1.a;
	var b = p2.b - p1.b;
	
	return Math.sqrt(a*a + b*b);
};

//別々のオブジェクトの平方根を求めた結果
console.log(testarray2.dist()); //2.8284271247461903

演算子については他の言語と同様の演算子があります。
console.logで出力を確認して一通りの結果をチェックしました。(コメントアウトしている部分が出力結果)

//四則演算
console.log(5 + 2); //7
console.log(5 - 2); //3
console.log(5 * 2); //10
console.log(5 / 2); //2.5
console.log("5" + "2"); //52(文字列として出力されている)


//基準となる変数を用意
var a = 1;

//インクリメント
console.log(a++); //1

//デクリメント
console.log(a--); //2

//加算して代入
a += 2;
console.log(a); //3

//乗算して代入
a *= 2;
console.log(a); //6


//等値演算子
var b = 5;
var c = 8;

console.log(b == c);  //false
console.log(b != c);  //true
console.log(b < c);   //true
console.log(b <= c);  //true
console.log(b > c);   //false
console.log(b >= c);  //false


//文字列同士の比較
console.log("b" == "c");  //false

//文字列(アルファベット順で判定する
console.log("b" > "c");  //false
console.log("b" < "c");  //true


//論理演算子
console.log((b == 5) && (c == 8));  //true
console.log((b > 6) || (c < 9));    //false

javascriptは型の概念がありますが、プログラム内では明確に宣言をしない為、演算結果に注意してプログラムする必要があります。

javascriptを使って開発する場合、動きが派手な演出ができたり、ネットワーク経由で様々なデータのやりとりが出来ますが、まずは地道に基本的な部分から進めます。

基本

javascriptはUnicode文字コードを使って書きます。
プログラム内のキーワード、変数、関数、識別子で大文字と小文字は区別されます。

また、プログラム内で注意が必要な点は以下になります。
・空白は無視される
・改行も無視される(行末が指定されていない場合)
・スペース文字、タブ、垂直タブ、改ページ、ノーブレークスペース、バイトオーダーマーク等も空白として処理される
・行末は、改行、復帰、ラインセパレータ、パラグラフセパレータとする

コメント、変数宣言、型について

具体的なコメント、変数宣言、型の基本的な書き方は次のようになります。

//コメント

/*
複数行コメント
*/

//変数の宣言
var a;

//変数への代入
a = 1;

//型
//数値
a = 1;
//数値
a = 0.1;
a = "文字列";
a = '文字列';

//真(boolean)
a = true;
//偽(boolean)
a = false;

//NULL
a = null;

//undefined
a = undefined;

オブジェクトについて

次に、オブジェクトについて。
「console.log」については、ブラウザがサポートしていれば動作のログとして確認可能(ここでは主に確認用に使用します)

//オブジェクト
var testobject = {
	aaa: "test1",
	bbb: "test2",
	ccc: true
};

//オブジェクトへのアクセス(方法1)
console.log(testobject.aaa);
console.log(testobject.bbb);
console.log(testobject.ccc);

//オブジェクトへのアクセス(方法2)
console.log(testobject["aaa"]);
console.log(testobject["bbb"]);
console.log(testobject["ccc"]);

//オブジェクトに新規プロパティ作成後、値を代入する
testobject.ddd = "test3";

//空オブジェクトを作成
testobject.eee = {};

配列について

次に配列の書き方です。

//配列
var testarray = [1, 2, 3, 4];

//最初の一つ目を表す
testarray[0];

//配列の要素数
testarray.length;

//配列に新たに要素を追加する
testarray[4] = 5;

//既存の値を更新する
testarray[4] = 6;

//空の配列を作成する
var testarrayempty = [];


//配列内に、別のオブジェクトを格納する
var testarray2 = [
	{a:0, b:0},
	{a:1, b:1}
];

//配列内に、別のオブジェクトを格納する
var testarray3 = {
	data1: [[1, 2], [8, 9]],
	data2: [[2, 3], [6, 7]]
};

基本的な変数、型、配列、オブジェクトの使い方は以上です。

javascriptについて進める前に、どれくらいの粒度で開発を進めていくのかを決めます。

細かく言語仕様をイチからなぞっていくと、リファレンスを紐解くことと同じになってしまい、いたずらに時間だけが過ぎてしまうことになりそうです。

そこで、本ブログでは、次のような粒度で記事化しようと思います。

1. 言語仕様については、開発時に調査が必要になった場合に掘り下げる
2. javascriptの概要から始まり、基本的な部分の理解からweb開発に必要なノウハウを蓄積する内容を書く
3. 実際に開発して動作したコードを、可能な範囲で公開する

粒度がバラバラになるかもしれませんが、javascriptの一通りの範囲を網羅できるように進めていきます。

当ブログではこれまでjavascriptについて触れてきませんでした。
時代の流れと共に、javascriptはweb技術の一つとして切り離せない位置になっています。

サーバサイドのプログラム言語を一通り習得した後は、クライアントサイドのプログラム言語に移るか、別なサーバサイドの言語を習得するか、はたまた別方向な技術を習得していくか、分かれ道になることが多いですが、当サイトではjavascript、python等のweb開発関連で目にする頻度が多い言語をやります。

もちろん、日々の開発内容によってphpを使ったフレームワーク、wordpress等の技術習得も並行していくので、今後は順不動でブログにアップしていく流れになる予定です。

あと、基本的な数学的な力や、英語ドキュメントの読解力など、技術習得のハードルを数え上げればキリがないのですが、地道に進めます。