Objective Front-End JavaScript
-
Upload
muyuu-fujita -
Category
Technology
-
view
3.802 -
download
0
Transcript of Objective Front-End JavaScript
![Page 1: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/1.jpg)
ObjectiveFront-EndJavaScript
![Page 2: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/2.jpg)
自己紹介me = { name: "muyuu", twitter: "@anticyborg", belongs: "freelance", job: "Web Front-End Engineer"};
![Page 3: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/3.jpg)
jQuery plugin
![Page 4: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/4.jpg)
GOOD• 早い• 簡単• 何だったらJS書けなくても何とかなる
![Page 5: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/5.jpg)
BAD• 変更に弱い• プラグインにない機能を求められると詰む• いつまで経ってもJS覚えられない割と辛い思いをすることも多い
![Page 6: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/6.jpg)
自分で作る
![Page 7: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/7.jpg)
BAD• 面倒• 果たして望む機能を作れるのか• プラグインみたいにすげーの作れるのか
![Page 8: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/8.jpg)
GOOD• すげーのはいらない。必要な機能だけあれば良い• 追加機能が欲しくなったらその時足せば良い• 変更時も理解しやすい(理解しやすいように書けば)
![Page 9: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/9.jpg)
GOOD• すげーのはいらない。必要な機能だけあれば良い• 追加機能が欲しくなったらその時足せば良い• 変更時も理解しやすい(理解しやすいように書けば)
JSの理解も深まるよ!
![Page 10: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/10.jpg)
いいことだらけ
![Page 11: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/11.jpg)
さぁ作ろういま作ろう
![Page 12: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/12.jpg)
今回作るもの
![Page 13: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/13.jpg)
Tab
![Page 14: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/14.jpg)
何も考えずにタブを実装
![Page 15: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/15.jpg)
$(function() { // 最初の要素以外は非表示 $(".body li").not(":first").hide();
$(".tab a").click(function(){ // 表示するコンテンツのIDを取得 var target = $(this).attr("href").replace("#", "");
// コンテンツ部分を全部隠す $(".body li").hide();
// クリックしたタブのhretと同じIDを持つ箇所だけを表示する $(".body").find('#' + target).show(); return false; });});
![Page 16: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/16.jpg)
problemas
![Page 17: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/17.jpg)
パターンが増える度にコードが倍増
![Page 18: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/18.jpg)
$(function() { // アニメーションするパターン $(".body2 li").not(":first").hide(); $(".tab2 a").click(function(){ var target = $(this).attr("href").replace("#", ""); $(".body2 li").hide('slow'); $(".body2").find('#' + target).show('slow'); return false;});
// ページ表示時は2つ目が開いてるパターン $(".body3 li").not(":first").hide(); $(".tab3 a").click(function(){ var target = $(this).attr("href").replace("#", ""); $(".body3 li").hide('slow'); $(".body3").find('#' + target).show('slow'); return false; });});
![Page 19: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/19.jpg)
solution
![Page 20: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/20.jpg)
解決法• タブの原型となるオブジェクトを作る• 原型を元に実体を生成する• 実体はパターン毎に生成する
![Page 21: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/21.jpg)
object
![Page 22: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/22.jpg)
オブジェクトとは、名前と値を持つプロパティを格納するコンテナにすぎ
ない— 開眼!JavaScript
![Page 23: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/23.jpg)
object sample// コンストラクタ関数を使用して僕オブジェクトを生成var muyuu = new Object();
//僕オブジェクトにプロパティを追加muyuu.name = "muyuu";muyuu.age = 33;muyuu.gender = "male";
console.log(muyuu.age); // 33 と表示される
![Page 24: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/24.jpg)
object sample//オブジェクトに関数を追加するmuyuu.hello = function(){ console.log("Hello! I'm " + muyuu.name);};
muyuu.hello();// "Hello! I'm muyuu" と表示される• プロパティが関数の場合は「メソッド」とも呼ばれる
![Page 25: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/25.jpg)
コンストラクタ関数?
![Page 26: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/26.jpg)
コンストラクタ関数コンストラクタ関数とは、あらかじめ決められたオブジェクトを生成するテンプレート、クッキーの抜き型のようなものだと思ってください— 開眼!JavaScript
![Page 27: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/27.jpg)
コンストラクタ関数var obj = new Object(); // オブジェクトを変数objに生成var num = new Number(123); // 数値オブジェクトを変数numに生成var str = new String('aaa'); // 文字列オブジェクトを変数strに生成
![Page 28: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/28.jpg)
コンストラクタ関数こんな感じのが実装されているObject = function(){ //新しいオブジェクトを作るための処理};
![Page 29: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/29.jpg)
コンストラクタ関数で独自オブジェクトを作る
![Page 30: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/30.jpg)
コンストラクタ関数僕オブジェクトのテンプレートとして人コンストラクタを作るvar Human = function(name, age, gender){ this.name = name; this.age = age; this.gender = gender; this.hello = function (){ console.log("Hello! I'm " + this.name); };};
![Page 31: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/31.jpg)
コンストラクタ関数人コンストラクタで僕オブジェクトを作成// Humanコンストラクタを使用して僕オブジェクトを生成// 生成する際に僕のデータを引数で渡してあげれば// コンストラクタの設定通りに生成されるvar muyuu = new Human("muyuu", 33, "male");
// 挨拶をするmuyuu.hello(); // Hello! I'm muyuu と表示される
![Page 32: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/32.jpg)
ちょっと寄り道しても1歩深く
![Page 33: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/33.jpg)
通常の関数の挙動• 関数は通常、何かしらの処理をして何かしらの値を返す• 何もreturnしない場合はfalse相当の値を返す
![Page 34: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/34.jpg)
//return がある関数function add(a,b){ return a + b;}console.log(add(1, 2)); // 3
// return がない関数function alertAdd(a, b){ var add = a + b;}console.log(alertAdd()); // undefined
![Page 35: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/35.jpg)
コンストラクタ関数の挙動• オブジェクトを返しているvar muyuu = new Human("muyuu", 33, "male");console.log(muyuu);// {// name:"muyuu",// age:33,// gender: "male",// hello: function// }
![Page 36: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/36.jpg)
Why?
![Page 37: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/37.jpg)
new 演算子• 関数はnew演算子を使って呼び出された場合、コンストラクタ関数のthisの値として、生成されたオブジェクトとして設定する
• new演算子を使って呼び出された場合にreturnを宣言していない場合は通常falseを返すところを新たに生成されるオブジェクト(this)を返すようになる
![Page 38: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/38.jpg)
new 演算子var Human = function(name, age, gender){ //new演算子で呼び出した場合、実はこの処理が入っている // var this = new Object(); this.name = name; this.age = age; ... //new演算子で呼び出し、returnを行っていない場合 //実はthisを返している //return this;};
![Page 39: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/39.jpg)
閑話休題
![Page 40: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/40.jpg)
タブコンストラクタ作ってパターン毎に生成するぜ!
![Page 41: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/41.jpg)
タブの実装に必要な機能コンストラクタ呼び出し時に以下を指定• タブのルートのクラス• タブ部分のクラス• コンテンツ部分のクラス
![Page 42: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/42.jpg)
タブの実装に必要な機能必要な機能*今表示している要素の番号(何番目)*今表示している要素が何番目かを知る機能*タブを切り替える機能*タブ切り替え時にクラスを付与する機能
![Page 43: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/43.jpg)
コンストラクタを作成// constructorvar Tab = function(param){};
Tabコンストラクタを作成
![Page 44: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/44.jpg)
コンストラクタ呼び出し時var tab1 = new Tab({ root: ".tab", // タブのルート要素を指定 item: ".tabHead li", // タブ部分の他所を指定 body: ".tabBody li" // コンテンツ部分の他所を指定});
コンストラクタ関数呼び出し時に、実際ページあるタブの要素を新たに作るオブジェクトに設定するため、オプションとしてオブジェクトを渡す。
![Page 45: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/45.jpg)
コンストラクタを作成var Tab = function(param){ this.$root = $(param.root); this.$item = this.$root.find(param.item); this.$body = this.$root.find(param.body); ...};
コンストラクタ実行時に渡された引数からjQueryオブジェクトを保存
![Page 46: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/46.jpg)
コンストラクタを作成var Tab = function(param){ ... //カレントのタブとコンテンツに付与するclassを設定 this.adClass = 'current'; // カレントのコンテンツが何番目かを保存する変数を作成 this.currentIndex; ...};
![Page 47: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/47.jpg)
コンストラクタを作成var Tab = function(param){ this.param = param // オプションを追加 ...};
![Page 48: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/48.jpg)
コンストラクタを作成var Tab = function(param){ ... this.init(); //ページ表示時に実行した処理を実行
//タブをクリックした際の挙動を設定 var self = this; // alias this.$item.on("click", "a", function(){ self.setCurrent(this); // カレントをセット self.change(); // タブを切り替え });};
![Page 49: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/49.jpg)
コンストラクタを作成// constructorvar Tab = function(param){ this.param = param; this.$root = $(param.root); this.$item = this.$root.find(param.item); this.$body = this.$root.find(param.body); this.adClass = 'current'; // class this.currentIndex = 0; // current tab index this.init(); // 初期化 var self = this; // alias this.$item.on("click", "a", function(){ // evnet self.setCurrent(this); self.change(); });};
![Page 50: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/50.jpg)
必要な機能をコンストラクタに追加ページ表示時に実行する関数 Tab.prototype.init = function(){ this.setCurrent(); // カレントをセット this.change(); // タブを切り替え };
![Page 51: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/51.jpg)
必要な機能をコンストラクタに追加カレントが何番目かを取得する関数Tab.prototype.setCurrent = function(ele){ this.currentIndex = 0; if (ele){ // 引数がタブの何番目の要素かを取得 var index = $(ele).parent().index(); // オブジェクト変数にセット this.currentIndex = index; }};
![Page 52: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/52.jpg)
必要な機能をコンストラクタに追加タブを切り替える関数 Tab.prototype.change = function(){ this.changeTab(); // タブ部分を変更 this.changeBody(); // コンテンツ部分を変更 };
![Page 53: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/53.jpg)
必要な機能をコンストラクタに追加タブ部分の変更処理をまとめた関数 Tab.prototype.changeTab = function(){ this.$item .removeClass(this.adClass) // 全部のタブからクラスを外して .eq(this.currentIndex) // カレントのタブのみ .addClass(this.adClass); // クラスを付与する };
![Page 54: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/54.jpg)
必要な機能をコンストラクタに追加コンテンツ部分の変更処理をまとめた関数 Tab.prototype.changeBody = function(){ this.$body .removeClass(this.adClass) // 全部のコンテンツからクラスを外して .hide() // 非表示にして .eq(this.currentIndex) // カレントのコンテンツのみ .addClass(this.adClass) // クラスを付与して .show(); // 表示する };
![Page 55: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/55.jpg)
完成
![Page 56: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/56.jpg)
後は必要な機能を必要になったら足すだけ
![Page 57: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/57.jpg)
コンテンツの表示でアニメーション足したい
![Page 58: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/58.jpg)
該当関数を変更するだけ Tab.prototype.changeBody = function(){ this.$body .removeClass(this.adClass) // 全部のコンテンツからクラスを外して .hide('slow') // 非表示にして .eq(this.currentIndex) // カレントのコンテンツのみ .addClass(this.adClass) // クラスを付与して .show('slow'); // 表示する };
![Page 59: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/59.jpg)
アニメーションはオプションにしたい
![Page 60: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/60.jpg)
呼び出し時にオプションを追加var tab1 = new Tab({ root: ".tab", // タブのルート要素を指定 item: ".tabHead li", // タブ部分の他所を指定 body: ".tabBody li", // コンテンツ部分の他所を指定 duration: true // アニメーションの指定});
![Page 61: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/61.jpg)
オプションによって挙動を変える Tab.prototype.changeBody = function(){ this.$body .removeClass(this.adClass) // 全部のコンテンツからクラスを外して .hide(param.duration) // 非表示にして .eq(this.currentIndex) // カレントのコンテンツのみ .addClass(this.adClass) // クラスを付与して .show(param.duration); // 表示する };
![Page 62: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/62.jpg)
呼び出しvar tab1 = new Tab({ root: ".tab", // タブのルート要素を指定 item: ".tabHead li", // タブ部分の他所を指定 body: ".tabBody li", // コンテンツ部分の他所を指定});var tab2 = new Tab({ root: ".otherTab", // タブのルート要素を指定 item: ".otherTabHead .tab", // タブ部分の他所を指定 body: ".otherTabBody .content", // コンテンツ部分の他所を指定 duration: 400});
![Page 63: Objective Front-End JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a58b681a28ab48488b4586/html5/thumbnails/63.jpg)
ステキ