[javscript]なぜjQuery();と$()は同じなのか。

Written by uechoco 1月 30
この記事を読む時間:242くらい

jQueryの資料を漁っていると、「$はjQueryのエイリアスです」といったことが書かれているのを見かけるんですが、どうして$とjQueryが一緒なのか、ちょっと気になったので調べてみました。

前提知識

ブラウザ環境において、JavaScriptのグローバル変数は、windowオブジェクトの変数と捉えても差支えがないです。例えば以下の例では、alert()文は意図したとおりに3回呼ばれます(HTML上に<script>タグを書いてその中に記述してください)。
[jscode]
window.a = “a is ok”;
var b = “b is ok”;
c = “c is ok”;
alert(a);
alert(window.b);
alert(window.c);
[/jscode]
ブラウザ環境においてはトップレベルオブジェクトはwindowオブジェクトであり、省略することが可能です。「window.a」は省略せずに書いていますが、「var b」はその時点でのローカル変数を定義しています。ただしその時点はwindowオブジェクト下ですので、実質「window.b」と同意義になります。「c」はwindowオブジェクトの指定を省略しただけですので「window.c」と等価です。

jQuery変数と$変数

jQueryのソースコードを見てみます。非圧縮版のソースコードであるjquery-1.4.4.jsを開いてみます。20行目の「var jQuery = (function() {」から910行目の「})();」までがjQueryの定義です。この変数は16行目の「(function( window, undefined ) {」から7179行目の「})(window);」までの関数の中で定義されています。
jQuery変数と$変数の定義は908行目の「return (window.jQuery = window.$ = jQuery);」にあります。window.jQueryすなわちグローバル変数jQueryがwindow.$すなわちグローバル変数$と同一の参照オブジェクトになっています。

※なお、noConflict指定を行った場合は上記と少し違った動きになるかも知れません(使ったことないのでわかりません)

まとめ

結構簡単したね。上記解説は細かいところで”意訳”になっているかも知れませんが、開発中に不都合になるわけでもないと思います。そのうちjQuery読破してみたい^^;

[JavaScript]再入門

Written by uechoco 1月 30
この記事を読む時間:821くらい

昔からHTMLのお供に何気なく使ってきたJavaScriptな訳ですが、最近はjQueryばかり使っていて、JavaScriptの素晴らしさがいまいち分かっていません。いやjQueryであんなことやこんなことがWebページで出来るようなったことはとても素晴らしいのですが、言語自体の素晴らしさがわからないということです。

手元にあった「新人プログラマのためのjQuery Webアプリケーション開発講座」を読んで、入門だけやり直しておきます。下記コードは自分なりに咀嚼して新たに考えたものですので、本の中に載っているものではないです。

制御構文

if-else, switch, while, do-while, for, for-in, try-catch-finally

[jscode]
// do-while
var c = 0;
do {
c++;
} while (c < 10); // for-in var total = 0; var arr = new Array(1,2,3); for (var i in arr) { total += arr[i]; } [/jscode]

配列定義

[jscode]
// create new array variable
var arr1 = [1,2,3,4]; // create new array which has 4 elements: 1, 2, 3 and 4
var arr2 = new Array(); // create new array which is empty
var arr3 = new Array(5); // create new array which has 5 elements
var arr4 = new Array(1,2); // create new array which has 2 elements: 1 and 2
// create new associative array
var arr5 = {1:”one”, 2:”Two”, “a”: “Three”}; // create new associative array which has 3 elements;
[/jscode]

クラスの宣言

JavaScriptではすべてのものがオブジェクトである。JavaScript 1.xには言語上にクラスという概念はないが、他のプログラミング言語でいう”いわゆるクラス”は存在する。
コンストラクタ関数を定義し、それをnewすることでいわゆるクラスが作られる。以降、”いわゆるクラス”をクラスと呼ぶ。

[jscode]
function Dog(name) {
this.name = name;
this.bark = function() {
return this.name+” barked!”;
}
}
var d1 = new Dog(“pochi”);
alert(d1.bark());
var d2 = new Dog(“taro”);
alert(d2.bark());
[/jscode]

public/private field/method

クラスにthisで変数や関数を定義するとプロパティ/メソッドとしてクラス外部からアクセス可能な状態となる。
thisではなくvarで変数として定義すると、クラス外部からアクセス不可能な内部プロパティ・内部メソッドとなる。
※関数であれば、普通にfunctionで定義すればよい。

[jscode]
function Dog(name,age) {
this.name = name;
var age = age;
this.bark = function() {
return this.name+”(“+getNextAge()+”) bark!”;
}
function getNextAge() {
return age+1;
}
}
var d1 = new Dog(“pochi”,5);
alert(d1.bark());
var d2 = new Dog(“taro”,10);
alert(d2.bark());
[/jscode]

クラスの拡張

インスタンスにプロパティやメソッドを追加することは簡単だが、クラス全体にプロパティやメソッドを追加することも簡単である。
前者は何も考えずに新しい変数に代入すればよいが、後者はprototypeプロパティを用いる。

[jscode]
function Dog(name) {
this.name = name;
this.bark = function() {
return this.name+” bark!”;
}
}
var d1 = new Dog(“pochi”,5);
alert(d1.bark());
var d2 = new Dog(“taro”,10);
alert(d2.bark());

Dog.prototype.getName = function() {
return this.name;
}
alert(d1.getName());
alert(d2.getName());
[/jscode]

クラスの継承

既存のクラスを継承して新しいクラスを作成することが出来る。

[jscode]
function Dog(name) {
this.name = name;
this.bark = function() {
return this.name+” bark!”;
}
}
function Bulldog(name) {
Dog.call(this, name); // thisで実行されているかのようにDogのコンストラクタ関数を呼び出している
this.bark = function() {
return this.name+” loudly bark!”;
}
}
var d1 = new Dog(“pochi”,5);
var d2 = new Bulldog(“jiro”,5);
alert(d1.bark());
alert(d2.bark());
[/jscode]

staticなプロパティ・メソッド

staticなプロパティやメソッド(クラスプロパティやクラスメソッドとも)を作るにはthisではなくクラス名に直接関数を定義する。

[jscode]
function Dog(name,age) {
this.name = name;
this.age = age;
this.bark = function() {
return this.name+” bark!”;
}
}
Dog.calcNextAge = function(age) {
return age+1;
}
var d1 = new Dog(“pochi”,5);
alert(d1.bark());
alert(Dog.calcNextAge(d1.age));
[/jscode]

まとめ

コンストラクタ関数を定義することでクラスを作成したり、クラス自体を後から拡張したりなど、他の言語にはない面白い概念がありますよね。もちろん上にあげたものは”入門”ですので、JavaScriptのマニアックな部分にはまだ触れていないのでしょう。ここからさきのマニアックな部分はどんな面白い概念が出てきますかね!

[考え事]初めてのLTを自分なりに振り返ってみて

Written by uechoco 1月 30
この記事を読む時間:348くらい

先日の第2回Symfony勉強会では、生まれて初めてLTをやりました(その時の資料は[勉強会]第2回 Symfony2勉強会に参加してきました : うえちょこ@ぼろぐにアップしています)。発表の仕方とか内容とか、いろいろと至らないところがあるんだろうと思っていますが、個人的には60点として一応合格点を自分につけたいと思います。なぜなら、しどろもどろにならずに最後までやり遂げることができたからです。甘いですかね?^^;

今回のLTに臨むにあたって2つの問題を抱えていたと思います。そしてLT初心者の私が最後まで無事にやり遂げたのには1つのテクニックが功を奏したのではないかと思っています。

まずは2つの問題点から。

  1. 1つ目は私は壇上に上がるとアガってしまう典型的な素人で、人前で発表することに全然慣れていない事です。正直言って、とっても緊張しました。たった5分くらいの発表だったかも知れませんが、心臓バクバクでした。
  2. 2つ目はLTの準備を全くしていなかったことです。今回はLTタイムになる直前に飛び入りで参加をしたので、事前準備など一切していませんでした。幸いにも話すネタだけはありました。(さすがにネタがなければ立候補はしませんよね^^;)。

2つ目の問題は普通の人には起こりえないかもしれませんが、1つ目の問題は結構みんなが抱えているんじゃないかと思っています。そこで、LTがうまくいくか心配な私は、他の人のLTを聞きながらプレゼン資料をKeynoteで作成した後、適当な裏紙に以下のようなものを書きました(今回作成したものをそのまま載せます、画像をクリックすると大きなサイズで閲覧できます)。

これはLT資料を簡潔にまとめたトークスクリプトです。私にとっては魔法の紙です。LT資料を暗記するのではなく、このトークスクリプト1枚だけを暗記することで、スライドの流れ、抑揚をすべて把握できるんです。実際に私はコレをチラチラ見ながらLTしていました。このトークスクリプトを書くというアイデアは、私がちょうど1年前、大学の卒論発表会のためのプレゼン練習をしていたときに初めて使いました。

スライドの電子ファイルは、発表中は1度に1ページしか見ることができないため、緊張していると次のスライドが何なのかも忘れて余計にパニックに陥ってしまいがちです。またスライドが枚数が多いと全ての内容を暗記することは厳しいため、ストーリーすらもこんがらがってしまいがちです。そこでトークスクリプトの出番です。スライドのストーリーを1枚に凝縮し、自分がストーリーを思い出すのに最低限必要なマークだけを強調して書き込んでおくだけでいいんです。上の画像で言えば、「そして」「☆」「But」「というわけで」「例」といった文字です。あとは発表中にトークスクリプトを見るだけで、自分がつけたマークがトリガーとなって頭の中にストーリーが再現されるわけです。

というわけで、私なりのLTのやり方を書いてみました。万人に効果的な方法ではないかも知れませんが、アガリ症のプレゼン初心者の方は試してみる価値があると思っています。今回は触れませんでしたが、できればリハーサルをやっておいたほうがいいです。スティーブ・ジョブズだって入念なリハーサルは欠かさないらしいですから。

まだまだLTを1回やっただけの新米君が言うのもおこがましいですが、今までLTをやったことない人がどんどんLTをやっていけば業界がきっと盛り上がっていくと思うんです。その人自信が成長するきっかけにもなると思います。ぜひともみなさんにもトライして頂きたい!

[勉強会]CakePHP新春勉強会に参加してきました

Written by uechoco 1月 20
この記事を読む時間:147くらい

少し日がたってしまいましたが、2011/01/17(月)に、CakePHP新春勉強会 東京に参加してきました。会場は、二日前にも勉強会でお邪魔させて頂いたジンガジャパンさんです。毎度、会場提供ありがとうございます!今回は20分の発表x2と、LTたくさんという形式でやりました。福岡にもサテライト会場があり、福岡からのLTもあったりしました。

CakePHP 2.0の話はなかなか魅力的でした。互換性を極力意識しつつもphp 5系に特化することで様々な改良点を加えているそうです。リリース予定は未定ですが、期待できそうです。

livlisのCakePHPの話もいいですね。どちらかというとAmazonのクラウドサービスに依存しまくっているインフラ周りのほうが皆さんの興味を惹いていたようです。

福岡のサテライト会場からのLTでは、ZENPREというスライドとUstreamを融合させたプレゼン用のWebサービスを使って行われました。これにはみなさんビックリでしたね。東京会場の方でもBasterCMSやアクション毎にModelをつくる話など、みなさんの知恵がすごく詰まった面白いLTがありました。

会場の都合により時間が限られていたために、LT枠が減らされてしまっていましたが、CakeLiveというオンラインLT大会の告知もあり、そちらで発表してねという流れになりました。

CakePHP関連の勉強会は久しぶりなので楽しかったですね。やっぱりSymfony2の勉強会とはエンジニアの層が違うので、お話しするときも話題がちょっとライトな感じがしました。

当日の詳細は・・・どっかにまとまってるのかな?w

[勉強会]第2回 Symfony2勉強会に参加してきました

Written by uechoco 1月 20
この記事を読む時間:137くらい

少し日が経ってしまいましたが、先日2011/01/15(土)に第2回 Symfony2勉強会に参加してきました。会場はZynga Japanさんです。前回に引き続き、今回もワークショップ形式での勉強会です。今回はDoctrine2+MySQLでFormのCRUDを学ぶことがメインでした。

私は前回も今回も1週間前から事前に予習を兼ねてSymfony2を触って勉強会に備えていたので、結構すんなりワークショップの課題を終えることができました。勉強会のために勉強するってすごく理解度が深まるからおすすめですよ!(もちろん、独習するだけど技量と根性と時間を必要としますw)

今回、ワークショップの後にLT大会も行われたのですが、私はその場で飛び入りでLTをすることにしました。題材としては、予習中に作りかけていたSymfony2プロジェクトの紹介です。下部にスライドを貼り付けておきます。

LTってやっぱり緊張しますね。尋常じゃなく緊張しますね。アガリ症な私には大変です。人生初LTをノー準備でやってしまいました(汗。事前準備はしっかりした方がいいですね。そういえば、今年の抱負にLTやるって書いたばかりなので、いい出だしです。今後もLTやあるいはもっと腕を上げてロングトークもやってみたいですね。