メモです
筆者は、底辺エンジニアであり、
窓際エンジニアでございます。
なので間違え、誤記等があるかもしれません。
あらかじめご了承ください。
ご指摘、編集リクエストの方をよろしくお願いします。
目的
暇つぶしを兼ねてJavaScriptの再入門でもしようかと思い執筆しました。
では初めに
JavaScriptは、オブジェクト指向のプロトタイプベースのスクリプト言語としてその歴史をスタートしました。
昨今、フロントエンド界隈では、非常に多くのJavaScriptのライブラリ、フレームワーク等が存在し、群雄割拠な言語となってます。
流行り廃りあれどJavaScriptの根本的な部分は変わらないと思います。ES2015、すでに2016、2017とプロジェクトは動いている、そんな中、本来クラスという概念を持たないJavaScriptにクラス構文なるものが導入されました。
※alt.jsなどでJavaScriptの構文に変換する必要があります。
バックエンドエンジニアの人にはとても敷居が低くなったのではないでしょうか?
筆者は、Ruby、PHPをメインに開発に従事しています。
そんな中改めてJavaScriptの基礎について理解を深めたいと思い、自分なりの解釈、理解を進めています。
なのでこの記事は、気づきがある際は、随時更新していこうと思います。
もちろん本来フロントエンジニアではない、人間が書いてますので間違い等が存在するかと思います。なのでその際は、なんなりとご指摘、編集リクエストをくださいますようよろしくお願いします。
独自解釈を始めます。
その前にオブジェクトとは、何か?
単純にこの世に存在する物すべてがオブジェクトです。
そうです。道行く車、通勤に使う電車、バス、改札を通るために使うスイカこれらすべてがオブジェクトです。
ではオブジェクト指向とは何ぞやって話です。
大雑把にざっくり言うとオブジェクトを現実世界から仮想世界(PC)へ具現化しよう(PCが理解できるように)という考えだと思っています。
先に述べたようにJavaScriptはプロトタイプベースといいました。では違うものも存在するのか?
答えは、存在します。それがクラスベースです。
いきなり難しい話になってきましたが、この話を深くするには、筆者は理解が乏しいため今は、一旦置いときましょう。
整理をしてみる
試しにclassを作成し税込み価格を出すclassを作成してみます。
PHP、Ruby、JavaScriptの順に作成をしてみます。
class Test{
public $num;
public function __construct($num){
$this->num = $num;
}
public function sample(){
echo $this->num * 1.08;
}
}
$test = new Test(100);
$test->sample();
/*
=> 108
*/
/*クラスのインスタンス化*/
$test = new Test();
#通常
class Hoge
#初期化
def initialize( num )
@num = num
end
def sample
#何か
p @num * 1.08
end
end
hoge = Hoge.new(100)
hoge.sample()
#=>108.0
#以下selfメソッドを使用した方法
class Hoge
def self.sample( num )
num * 1.08
end
end
hoge = Hoge.sample(100).floor
p hoge
#=>108
#クラスのインスタンス化
test = Test.new()
ではJSのクラスの作成方法とは?
var Fuga = function (arg) {};
//クラスのインスタンス化
var fuga1 = new Fuga();
となります。
んー?上2つと異なりますね。
それもそのはず、JSは、あくまでクラスっぽいに過ぎない。
一応クラス定義となっているが、カスタムオブジェクトと呼ばれる。
※これは関数式と呼ばれています。関数宣言とは、違うので注意が必要です。
上記2種類の言語に関しては、新たに何かしらの処理を付け加えたい場合は、class内にメソッド、関数を追加すればいいのですがJSでは、少し異なります。
※メソッドと関数は、classに属するオブジェクト=これがクラスベースという考え、設計指向になると思います。
※phpの場合原則として、class内にあるものをメソッド、外にあるものを関数と認識してます。
JSに関して、メソッドの定義は以下の様にします。
//消費税の計算とする
//クラスを作成
var Fuga = function (num) {
this.num = num;
};
//メソッドの定義
//メソッドの定義は関数の定義と同じように書く
Fuga.prototype.sum = function(){
console.log(this.num * 1.08);
};
//クラスのインスタンス
var fuga = new Fuga(100);
fuga.sum();
//=>108
//以下自分的な書き方※関数宣言でありクラス定義ではないです。
function sum(num){
//関数は、returnを付けるのが原則
return console.log(num * 1.08);
}
sum(100);
//=>108
自分的には、最後の書き方がしっくりきます。
クラス定義ではなく関数宣言になっているので
他の言語と目的が異なりますが・・・・
フロントエンジニアとして業務をしたことがないのでどのタイミングでどのようなときに使うべきなのかはわからないですが
今後は、設計を頭で描き、仕様を具現化できるようになりたいと思います。
上記ソースコードは、検証済みです。
一旦終わり
再度PHP、Rubyについての復習にもなって結果一石三鳥くらいになってhappyです
実感したのは、やはり知ったつもりになっている箇所が多いのと理解度がやはり薄いことに気づかされました。