【コラム】

そろそろきっちりJavaScript

1 "Firebug"の導入~関数リテラルとは?

 
  • <<
  • <

1/11

多彩な演出効果をカンタンに導入できる事で脚光を浴びたprototype.jsの登場を皮切りに、インターネットで公開されているJavaScriptライブラリの数は、この一年で急激に増加した。何かやりたいことがあったときはWebで検索すれば、大抵、どこかにライブラリが転がっている。便利な世の中になったものだ。

一方、Webを通じて提供されるサービスは多様化の一途を辿っている。JavaScriptライブラリは整ってきたが、当然、置くだけでは機能しない。ライブラリのサポートページには簡単なサンプルが載っているものの、サンプルがそのまま適用できるケースはごくわずかだ。しかたなく、他の誰かが似たような事をやっていないかとWeb検索するはめになる。

思えば、これまでJavaScriptを言語としてとらえ、きっちり向き合う機会は少なかったのではないだろうか。

1995年の終わり、Netscape Navigator 2.0にJavaScript実行環境が実装されて以来、JavaScriptは数々のWebページを彩ってきた。

プログラミング言語というよりは「Webページをちょっと使いやすくする/演出するツール」というような位置付けで普及し、言語仕様や言語そのものの解説よりも「誰かが作ったちょっとしたツールのサンプル」がインターネットに溢れていった。Webページの制作者は、使えそうなソースをhtml中にコピー&ペーストすれば、大抵の事は実現できた。

さて、ニーズもライブラリも多様化した今日、細かい使いかたをWeb検索してもなかなか見付からなくなった。ネットで話題のWebサイトではJavaScriptでのユーザビリティアップが当たり前。開発プロジェクトメンバと行くランチでは、JavaScriptの話題が事欠かない。

そろそろ、本気でJavaScriptと向き合わないといけない時期がやってきた。

JavaScriptは、きちんと学べばなかなか面白い言語だ。実行の手軽さも魅力のひとつ。ブラウザひとつあれば、インターネット接続環境がなくても実行できるし、難しいIDE(統合開発環境)の使いかたを覚える必要もない。

本連載では、JavaScriptの言語仕様/特徴にフォーカスし、簡単なサンプルを交えながら基礎的なトピックを紹介していく。実際に手を動かしてみることで「ちょっと書いてすぐ動かす」醍醐味を味わいつつ、JavaScriptの面白さに触れてみてほしい。

まずは開発環境を用意

先に書いた通り、開発環境を用意せずとも、すぐに始められるのがJavaScriptの面白いところだ。Windowsであれば、メモ帳(Notepad)とInternet Explorerがあれば良い。しかし、より楽しくJavaScriptを体感できる開発環境として、本連載ではFirebugをオススメする。FirebugはFirefoxで動作する開発者向けエクステンションだ。

インストールができたら、Firefoxで空白ページを開き、右下にある緑色のチェックマークが入ったアイコンからFirebugを起動する。Consoleタブを選択して準備完了だ。ブラウザ下部に >>> とプロンプトが表示される。プロンプトにdocument.write("Hello, Firebug!")と打ち込んでみるなど、動作を確認してみよう。なお、Firebugインストールや起動方法についての詳細は、別掲の紹介記事を参考にして欲しい。

関数リテラルを体感する

連載第1回の今回は関数リテラルを紹介する。関数リテラルが何の事か説明する前に、まずは、Firebugのプロンプトで以下のコマンドを実行してみよう。

function mtof(x) { return x*3.2808399 }
mtof(3)

9.8425197 と実行結果が表示されただろうか。ここで定義した関数mtofは、入力されたメートル値をフィート換算(1メートル=3.2808399フィート)するものである。実行結果が確認できたら、続いて以下のコマンドを実行してみよう。

var mtof = function(x) { return x*3.2808399 }
mtof(3)

同じく 9.8425197 と実行結果が表示される。「なんだ、同じじゃないか」と思われるかもしれない。その通り、実行結果は同じだ。しかし、ここで後者の記法に注目してほしい。

var mtof = function(x) { return x*3.2808399 }

この書き方こそ、昨今のJavaScriptライブラリで散見される記法にして、「関数リテラル」と呼ばれるものに他ならない。記法に注目しよう。前者の書き方はfunction mtof(x)として関数mtofを定義しているのに対し、後者ではfunction(x)と名前の無い関数を定義し、これを変数mtofに代入している。function(x)が作成された時点では無名であることから、これを「無名関数」と呼ぶことも多い。より丁寧に上記のコマンドを読み下すなら「リテラル(文字)mtofに無名関数function(x) ... をバインドする」ということになる。

関数リテラルは、慣れないうちはなかなか読み下せないものだ。しかしながら、この記法が昨今のライブラリで散見されるのには、それなりの理由がある。なぜ、このような書き方をするのか。次回以降で解説していこう。

  • <<
  • <

1/11

インデックス

連載目次
第11回 prototype.jsを読む(5)
第10回 prototype.jsを読む(4)
第9回 prototype.jsを読む(3)
第8回 prototype.jsを読む(2)
第7回 prototype.jsを読む(1)
第6回 プロトタイプチェーン(2)
第5回 プロトタイプチェーン
第4回 クラスベースとプロトタイプベースの違い
第3回 プロトタイプオブジェクトについて考える
第2回 無名関数についてもう少し考える
第1回 "Firebug"の導入~関数リテラルとは?

もっと見る



転職ノウハウ

あなたが本領発揮できる仕事を診断
あなたの仕事適性診断

シゴト性格・弱点が20の質問でサクッと分かる!

「仕事辞めたい……」その理由は?
「仕事辞めたい……」その理由は?

71%の人が仕事を辞めたいと思った経験あり。その理由と対処法は?

3年後の年収どうなる? 年収予報
3年後の年収どうなる? 年収予報

今の年収は適正? 3年後は? あなたの年収をデータに基づき予報します。

激務な職場を辞めたいが、美女が邪魔して辞められない
激務な職場を辞めたいが、美女が邪魔して辞められない

美人上司と可愛い過ぎる後輩に挟まれるエンジニアの悩み

人気記事

一覧

イチオシ記事

新着記事

プリンスの自宅ツアー、10月から開始予定
[11:12 8/27] エンタメ
森保一、意外な育成術が明らかに『プロフェッショナル』が密着
[11:00 8/27] エンタメ
[深水元基]「真田丸」“猛将”福島正則役 素顔は「酒に弱く」小日向文世に本気ビビり
[11:00 8/27] エンタメ
CEDEC 2016 - トップCGアーティストが華麗な実践テクニックを披露
[11:00 8/27] パソコン
イチから復習! iPhone/iPadで活用したいビジネスアプリ 第50回 必要な機能だけ追加できる高機能レコーダー「ディクタフォン」
[11:00 8/27] 企業IT

求人情報