JavaScriptでswitch文を使わずに文字列で条件分岐する方法

1,056 views
Skip to first unread message

萩原崇之

unread,
Nov 29, 2009, 9:42:48 PM11/29/09
to html5-dev...@googlegroups.com
 萩原です。
 JavaScriptでSwitch文を使わずに文字列で条件分岐する方法をブログに書きました。非同期処理が前提のHTML5では、かなり役に立つと思います。

http://d.hatena.ne.jp/kagigotonet/20091130/1259547474

 JavaScriptって妙な言語なので、こんなことが出来ちゃうんですよね。

----^----^--------------------------------------
萩原崇之@自宅警備員.com

はてな:http://d.hatena.ne.jp/kagigotonet/
twitter:takayuki_h
livernal.net:http://livernal.net

KOMATSU Kensaku

unread,
Nov 29, 2009, 11:31:45 PM11/29/09
to html5-dev...@googlegroups.com
小松です。

素晴らしいですね!!勉強になります。
 #今度使ってみます。

一点だけコメントです。
最後のクロージャの部分ですが、
if(key==undefined || switchbox[key]==undefined){

=>

if(!(key==undefined || switchbox[key]==undefined)){

ですよね?


2009年11月30日11:42 萩原崇之 <hagiwara...@gmail.com>:

M.Terada

unread,
Nov 29, 2009, 11:44:32 PM11/29/09
to html5-dev...@googlegroups.com
こんにちは、teramakoです。

どうせなら

if(key in switchbox){
// ...
}
の方がすっきりしていて良いかなと思います。

あと、本ページで気になったのですが、インデントを
もう少し一般的な法則にして頂けると読み易いかなと思いました。

----
teramako
http://d.hatena.ne.jp/teramako/




2009年11月30日13:31 KOMATSU Kensaku <kensaku...@gmail.com>:

Shumpei Shiraishi

unread,
Nov 30, 2009, 12:03:43 AM11/30/09
to html5-dev...@googlegroups.com
白石です。

例えばJavaだったら全ての分岐処理をクラスにしてポリモーフィズムで実現するかもしれないところですが、JavaScriptだと関数(クロージャ)でできちゃうので猛烈に楽ですよね。
GoFデザインパターンのJavaScript版とかあったら、全然様相が異なる事でしょうね。


2009/11/30 M.Terada <tera...@gmail.com>:

Toshiro Takahashi

unread,
Nov 30, 2009, 2:11:39 AM11/30/09
to html5-dev...@googlegroups.com
萩原さん,白石さん
はじめまして@高橋登史朗です
mlは、いつも楽しく読ませていただいてます。


面白いですね。JavaScriptのプロパティは奥が深いんですよ(笑?

私も以前、プロパティの存在有無で分岐するこんなの↓をぼんやりと考えたりし
てたんですけれど、、、
http://jsgt.org/mt/archives/01/001904.html

萩原さんのみて、ああ、自分のももっとそれっぽい使い方があるよなぁ、と思っ
てこんなの試してみました。(いきなりダイアログが4つ出ます。)
http://jsgt.org/mt/01/test/1904/test1.htm

これも条件「文」ではなくて条件「object」?になってます。使い道は、考えず
にとりあえず試しただけですけれどf^^;

<script>

//条件object
var myswt={
a : function (){ alert('it is a') },
b : function (){ alert('it is b') },
c : function (){ alert('it is c') },
dafault : function (){ alert('it is etc') }
}

//swt関数
function swt(cs){
if(cs in myswt)
return myswt[cs]();
else
return myswt['dafault']();
}

//テスト
swt('zaaaa') //it is etc
swt('a') //it is a
swt('b') //it is b
swt('c') //it is c

</script>
--
Toshiro Takahashi
高橋登史朗
http://jsgt.org/mt/01/

萩原崇之

unread,
Nov 30, 2009, 5:45:37 AM11/30/09
to html5-dev...@googlegroups.com
 ご指摘のあった部分を修正しました。皆様ありがとうございます。

 JavaScriptはクロージャのおかけで、オブジェクト指向的な書き方よりも手続き言語的な書き方をした方がかえってシンプルかつ拡張性に富むというのが面白いところですね。特に非同期な処理の連携にはクロージャと関数オブジェクトがかなり強力な武器になります。

rokujyouhitoma

unread,
Nov 30, 2009, 5:38:00 AM11/30/09
to html5-developers-jp
はじめまして池徹@id:rokujyouhitomaです。
MLを拝見し楽しく学ばせていただいております。

ブラウザに実装されたSQLite3ですが、これはHTML5の仕様として明文化されてるのでしょうか?


html5-developersのホームにある下記リンクを流し読みしたのですが、
特にみあたらないのでご存知でしたらお教え下さい。

Web Database仕様[http://dev.w3.org/html5/webdatabase/]
Web Storage仕様[http://dev.w3.org/html5/webstorage/]


to 高橋登史朗さん
連想配列や配列に関数を束縛すれば条件分岐は綺麗ですねー。

今回の投稿のおかげで、
XMLHttpRequestのradyState値ごとに条件分岐するコードがすっきり書けました!

池徹
id:rokujyouhitoma
twitter:rokujyouhitoma

On 11月30日, 午後4:11, Toshiro Takahashi <t...@game.gr.jp> wrote:
> 萩原さん,白石さん
> はじめまして@高橋登史朗です
> mlは、いつも楽しく読ませていただいてます。
>
> 面白いですね。JavaScriptのプロパティは奥が深いんですよ(笑?
>
> 私も以前、プロパティの存在有無で分岐するこんなの↓をぼんやりと考えたりし
> てたんですけれど、、、http://jsgt.org/mt/archives/01/001904.html
>
> 萩原さんのみて、ああ、自分のももっとそれっぽい使い方があるよなぁ、と思っ
> てこんなの試してみました。(いきなりダイアログが4つ出ます。)http://jsgt.org/mt/01/test/1904/test1.htm

萩原崇之

unread,
Nov 30, 2009, 9:55:20 PM11/30/09
to html5-dev...@googlegroups.com
萩原です。

> GoFデザインパターンのJavaScript版とかあったら、全然様相が異なる事でしょうね。

 簡単なものですが、JavaScript特有の仕様とクロージャを前提としたデザインパターンの使い方について書いてみました。参考になれば幸いです

 http://d.hatena.ne.jp/kagigotonet/20091201/1259635740


--^----^--------------------------------------

萩原崇之

unread,
Nov 30, 2009, 10:07:43 PM11/30/09
to html5-dev...@googlegroups.com
萩原です。

 エントリー拝見しましたが、すごくすっきりと書かれてしまって驚きました。

 この方法が実際に使われている場合ですが、私が知っているのはjqurery-flipというjqueryのプラグインでパラメーターに応じて動作を切り替えるのに使われている例があります。
 あと、今サンプル作成中のイベント管理ライブラリでは、これを発展というかややこしくした方法を使っています(笑)

2009年11月30日16:11 Toshiro Takahashi <ta...@game.gr.jp>:
--

Toshiro Takahashi

unread,
Dec 1, 2009, 6:27:10 AM12/1/09
to html5-dev...@googlegroups.com
池徹さんはじめまして
高橋登史朗です

On Mon, 30 Nov 2009 02:38:00 -0800 (PST)
rokujyouhitoma <rokujyou...@gmail.com>さん wrote:

> to 高橋登史朗さん
> 連想配列や配列に関数を束縛すれば条件分岐は綺麗ですねー。
>
> 今回の投稿のおかげで、
> XMLHttpRequestのradyState値ごとに条件分岐するコードがすっきり書けました!

連想配列で分岐する手口そのものは結構レガシーなテクニックですけど、switch
を装う(笑;と、思ったより読み易くなったので、使い道も意外にあるかもしれま
せんね。

そういえば最近は、各種ライブラリのおかげで、radyState値あたりから作業す
る苦労をあまりしてないなぁf^^;;。
--
Toshiro Takahashi <ta...@game.gr.jp>
高橋登史朗
http://allabout.co.jp/internet/javascript/profile/mbiopage.htm
http://jsgt.org/mt/01/

Toshiro Takahashi

unread,
Dec 1, 2009, 7:21:36 AM12/1/09
to html5-dev...@googlegroups.com
萩原さんこんばんは
高橋登史朗@送ったつもりが行方不明?で再です

On Tue, 1 Dec 2009 12:07:43 +0900
萩原崇之 <hagiwara...@gmail.com>さん wrote:

>
> 萩原です。
>
>  エントリー拝見しましたが、すごくすっきりと書かれてしまって驚きました。
>
>  この方法が実際に使われている場合ですが、私が知っているのはjqurery-flipというjqueryのプラグインでパラメーターに応じて動作を切り替えるのに使われている例があります。
>  あと、今サンプル作成中のイベント管理ライブラリでは、これを発展というかややこしくした方法を使っています(笑)

jqurery-flip見ました、switchも使ってますがその後の動作の分岐で効果的に切
り替えてますね。イベント管理に使うのは面白いかもしれません(^^)。

プロパティ名による分岐は、switch文そのものと違って条件を動的に追加削除で
きたりもしますし。まぁ、それがJavaScriptのプロパティですがf^^;いろいろい
じると、いじっただけ面白いことができそうなところがやはり魅力ですね。

HTML5でも、JavaScriptは一部分ですけれど、積極的に利用することを考慮され
いますので、どうなるのか楽しみです。

IVI ∧ I< I

unread,
Dec 3, 2009, 1:16:08 AM12/3/09
to html5-developers-jp
 はじめまして,牧です.

 遅レスで恐縮ですが,

> if(key in switchbox){

 in ではなくて hasOwnProperty を使ったほうが安全だと思いますよ.
 in はプロトタイプ継承も考慮してしまうので,toString などの名前は常にひっかかってしまいます.

 どういうことかというと,

if ( "toString" in {} ) {
alert("true");
} else {
alert("false");
}

 は「true」と表示しますが,

if ( {}.hasOwnProperty("toString") ) {
alert("true");
} else {
alert("false");
}

 は「false」と表示するということです.

 細かくてスミマセンっ・・・

----
From : MAKI, Daisuke
E-mail: ma...@coma-systems.com


On 11月30日, 午後1:44, "M.Terada" <teram...@gmail.com> wrote:
> こんにちは、teramakoです。
>
> どうせなら
>
> if(key in switchbox){
> // ...}
>
> の方がすっきりしていて良いかなと思います。
>
> あと、本ページで気になったのですが、インデントを
> もう少し一般的な法則にして頂けると読み易いかなと思いました。
>
> ----
> teramakohttp://d.hatena.ne.jp/teramako/
>
> 2009年11月30日13:31 KOMATSU Kensaku <kensaku.koma...@gmail.com>:
>
>
>
>
>
> > 小松です。
>
> > 素晴らしいですね!!勉強になります。
> > #今度使ってみます。
>
> > 一点だけコメントです。
> > 最後のクロージャの部分ですが、
> > if(key==undefined || switchbox[key]==undefined){
>
> > =>
>
> > if(!(key==undefined || switchbox[key]==undefined)){
>
> > ですよね?
>
> > 2009年11月30日11:42 萩原崇之 <hagiwaratakay...@gmail.com>:

Toshiro Takahashi

unread,
Dec 3, 2009, 10:04:07 AM12/3/09
to html5-dev...@googlegroups.com
牧さんはじめまして
高橋登史朗です


On Wed, 2 Dec 2009 22:16:08 -0800 (PST)
IVI ∧ I< I <ma...@coma-systems.com>さん wrote:

>
>  はじめまして,牧です.
>
>  遅レスで恐縮ですが,
>
> > if(key in switchbox){
>
>  in ではなくて hasOwnProperty を使ったほうが安全だと思いますよ.
>  in はプロトタイプ継承も考慮してしまうので,toString などの名前は常にひっかかってしまいます.

ああ、そうですね。有難うございます。私のも修正しないとダメです(汗;;。
ということで、急いで、そのままhasOwnPropertyに置き換えるとこんな感じ

//条件object
var myswt={
a : function (){ alert('it is a') },
b : function (){ alert('it is b') },
c : function (){ alert('it is c') },
dafault : function (){ alert('it is etc') }
}

//swt関数
function swt(cs){
if(myswt.hasOwnProperty(cs))
return myswt[cs]();
else
return myswt['dafault']();
}

//テスト
swt('zaaaa') //it is etc
swt('a') //it is a
swt('b') //it is b
swt('c') //it is c
swt('toString') //it is etc

</script>

一応、"toString" を in によるあの分岐へ与えた時に実際に何が起きるかテス
ト。
http://jsgt.org/mt/01/test/1904/test1-2.htm
何も起こらない、という現象が起きます(笑)

修正版は
http://jsgt.org/mt/01/test/1904/test1-1.htm
今度は"toString"で"it is etc"になります。
Reply all
Reply to author
Forward
0 new messages