前回、「次回こそjQueryに入る」と書いたな。
…申し訳ない、更に追加することがあった。しかも3項目ほど。タイトルに入りきらないのでいろいろとしてしまった。
うち1つ目のエスケープシーケンスだけかなり重要で、他2つほど(コンストラクタ、可変長引数)はオマケくらいのつもりでいい。
では、早速見ていこう。
前回の復習
前回は、オブジェクトという複数の値を持つ大きな箱と、変数は実際どんな動き方をしているかを解説した。
今回の内容には、コンストラクタというやつの部分でオブジェクトの考え方を使う。不安な方は復習しておこう。
エスケープシーケンス
エスケープシーケンスとは？
いきなり横文字で「？」となっているかもしれない。
先に言葉の説明をしてしまうと、エスケープシーケンスとは、「特殊な文字を書くための記述方法」だ。
あると何が嬉しいの？
例えばだが、JavaScriptで文字リテラルを使用する場合、ダブルクォーテーションで囲っていたのを覚えているだろうか。
コンソールで「文字列出力」と表示する場合、以下のように書いていた。
console.log("文字列出力");さて、では一つ質問をしよう。
この出力する文字列に「”」が入っていたらどうすればいいだろうか。例えば、「この文章には”エスケープシーケンス”を使っている」というものだ。
これを、そのまま書くとどうなるか。実際に書いてみよう、こんな感じになる。
console.log("この文章には"エスケープシーケンス"を使っている");これを実行するとどうなるかだが…エラーで実行できない。
なぜかというと、引数として渡している部分に、ダブルクォーテーションが入っているので、そこで文字列が終了していることになるのだ。
え、じゃあ「”」を出力したいときどうすればいいの？となりそうだ。そこで、このエスケープシーケンスというやつの出番だ。
エスケープシーケンスの使い方
エスケープシーケンスは、特殊な文字…今回で言えば、文字列を囲むという意味を持つ「”」を、その意味を消して普通の文字にさせることができる。
方法は簡単。この普通にしたい文字の直前に半角￥マーク、あるいはバックスラッシュを入れるだけ。これらは環境によってどっちかが表示されているはず。
これを使って上の出力を直すと…
console.log("この文章には\"エスケープシーケンス\"を使っている");こうなる。出力も、しっかりダブルクォーテーションつきで表示されているはずだ。
これ以外にも、シングルクォーテーション、改行、タブスペース、さらにはこの半角￥マーク(バックスラッシュ)自体なども表示できるようになる。
全量を挙げるとキリがないので、思ったように上手く表示されなかったら、こいつを疑ってみよう。
もう一つ、使った例を出すとこんな感じだ。
console.log("文字列表示で\"を表示させたい場合は、\\\"と書きます");一つ目の部分は単純にダブルクォーテーションを表示、二つ目はまず半角￥マーク自体を表示し、その後にダブルクォーテーションを表示、となっている。
どう書けばどう表示されるか、という対応に気を付けておこう。
コンストラクタ
コンストラクタとは？
また横文字だ。これは、上にも書いた通りオブジェクトの話に関連してくる。
さて、前回オブジェクトを解説したのだが…あれ、毎回全部の内容を書くのも面倒だろう。
それに、例えば「メソッドを追加したい」となったら、その定義部分全てに追加しなければいけなくなって非常に大変だ。
そこで、「決まった形で、中身の違うオブジェクトを簡単に作れるようにしよう」ということをする。この形を書き、オブジェクトを作るために呼び出すものが、コンストラクタだ。
コンストラクタの使い方
さて、これは実例で見ていこう。
前回やったbookオブジェクトを、このコンストラクタで作れるようにしていきたい。
というわけで、前回のオブジェクトをもう一回出そう。
var book = {
title: "本のタイトル",
author: {
name: "作者名",
birth: "誕生日"
},
price: 1000,
showAllData: function(){
console.log("タイトル : " + this.title);
console.log("作者名 : " + this.author.name);
console.log("値段 : " + this.price + "円");
}
};これを、Bookオブジェクトとして作れるようにしていく。また、作者のところもオブジェクトになっているので、そこも別で作ってしまおう。
で、実態は関数だ。先に完成した例をお見せしよう。
function Book(title, author_name, author_birth, price){
this.title = title;
this.author = new Author(author_name, author_birth);
this.price = price;
}
Book.prototype.showAllData = function(){
console.log("タイトル : " + this.title);
console.log("作者名 : " + this.author.name);
console.log("値段 : " + this.price + "円");
}
function Author(name, birth){
this.name = name;
this.birth = birth;
}さて、順番が前後してしまうが、先に作者から見ていく。三つ目の塊を見て欲しい。
ここでは、Authorという関数を定義して、二つ引数を取ってきている。
中の処理は、this…つまり、自分のnameとbirthに、それぞれ引数で持ってきたものを代入している。これだけだ。
このように、オブジェクトで定義していたプロパティを、this.プロパティとして変数のように書き、そこに実際に値を入れる。
こうすることで、そのプロパティを持つオブジェクトになる。ちなみに、return文はいらない。
これが、コンストラクタだ。
で、これを使っているのは、一つ目の塊内のnewがついている部分だ。
このnewをつけて関数を呼び出すことで、結果としてそのオブジェクトを持ってくることができる。
つまり、ここでは名前と誕生日情報を持ったAuthorというオブジェクトを作り、それをBookオブジェクト内のauthorプロパティにセットしている。
ここまでは大丈夫だろうか。大丈夫なら、最後に二つ目の塊を見よう。
ここでは、メソッドを定義している。やり方は、コンストラクタ名.prototype.メソッド名でメソッド名を決める。
で、それに関数を代入するようなイメージになる。中身は、元のオブジェクトと同じにしてある。
これを実際に使った例も出しておこう。
function Book(title, author_name, author_birth, price){
this.title = title;
this.author = new Author(author_name, author_birth);
this.price = price;
}
Book.prototype.showAllData = function(){
console.log("タイトル : " + this.title);
console.log("作者名 : " + this.author.name);
console.log("値段 : " + this.price + "円");
}
function Author(name, birth){
this.name = name;
this.birth = birth;
}
var book = new Book("本のタイトル", "作者名", "誕生日", 1000);
book.showAllData();下の方に2行ほど追加した。
まず、bookという変数に、Bookコンストラクタでオブジェクトを生成し、代入。
そして、その下でこのオブジェクトのメソッドを実行している。
これで、実際に使用することができる。
実は…
さて、コンストラクタというものを解説してきた…のだが、実はもっと便利なものがある。
それが、クラスという考え方だ。
そもそも、コンストラクタではその中の変数とメソッドを別々で定義していた。
これをやっていると、同じオブジェクトの定義なのに、別のところで定義することになってしまう。後でメンテナンスするときなどにちょっと困るのだ。
そこで、クラスはこれらをまとめて定義できるようになっている。上のBookとAuthorをクラスとして定義してみよう。
class Book {
constructor(title, author_name, author_birth, price){
this.title = title;
this.author = new Author(author_name, author_birth);
this.price = price;
}
showAllData(){
console.log("タイトル : " + this.title);
console.log("作者名 : " + this.author.name);
console.log("値段 : " + this.price + "円");
}
}
class Author {
constructor(name, birth){
this.name = name;
this.birth = birth;
}
}
var book = new Book("本のタイトル", "作者名", "誕生日", 1000);
book.showAllData();こんな感じだ。使い方は全く同じ。定義方法について、コンストラクタはそのままconstructorという名前のメソッドを作る。
で、メソッドを定義する場合はfunctionを付けずにそのまま書き始めればいい。
これで、メソッドまで一つにまとめて定義することができた。
なお、他にも色々解説しだすと、できることや気を付けることがたくさんある。
それをやりだすとそれだけで1講座分くらい出来上がってしまうので、また別の機会にしよう。
可変長引数
可変長引数とは？
まあ、読んで字のごとくなのだが…関数やメソッドで、自由な長さの引数を持ってこれる。
可変長引数の使い方
先にやりたいことを決めてしまおう。数字を1個以上受け取り、それらの合計を返す関数を作りたいとする。
これは以下のようなコードになる。
function sumAll(...num){
var res = 0;
for(var i = 0; i < num.length; i++){
res += num[i];
}
return res;
}引数がよく分からないことになっている。ドット3つで、numと。
これが、可変長引数の定義方法だ。ドット3つで、そこから可変長引数が始まるよというのを表し、その直後にそれを配列として保持する変数名を書く。
そうすると、その関数内で、受け取ったものを配列として扱える。あとはfor文でゴリゴリ回して足してあげよう。
使う部分では、sumAll(1, 2, 3)でも、sumAll(2, 4, 6, 8, 10)でも、全部足したものが返ってくる。
おわりに
二回連続でやる内容を変更して申し訳なかった。
今回は、エスケープシーケンス、コンストラクタとクラス、可変長引数を扱った。
特に、エスケープシーケンスは覚えておかないと誤動作の元になる。しっかり確認しておこう。
さて、次回だが、今度こそjQueryをやる。三度目の正直なるか。
とはいえ、他に必要なことがあれば随時追加もしていく。また同じようなことがあっても許してほしい。
更新情報はTwitterでも垂れ流している。ページ下部のTwitterアイコンから覗いていってほしい。
それでは。
コメント