html5shim vs html5shiv

JavaScript Advent Calendar 2011 (オレ標準コース) 12日目の id:t32k です。去年も参加しましたがなんでもありと聞いて今年も懲りずに参加!

Don’t lose any more time. html5shim and html5shiv are exactly the same thing.

はじめに言っておきますが、html5shimもhtml5shivどっちもまったく同じです。違いなんて無いので、こんなことに頭を悩ませる暇があったらさっさとコードでも書いてろ!以上!うんこ(・∀・)!

そんなこと言っても世の中結果じゃない、過程が大切だと思うんだ先生!ってことで今回は調べてみます。

html5shi(m|v)、めんどくさいので以下html5.jsは”HTML5 IE enabling script”の名の通り、IE8以下でarticleなどの新要素が正しく認識されずスタイル(CSS)がうまく適用されない問題を解決しそれらのブラウザでも利用可能にしてくれます。

document.createElement("article");

こんな感じにDOMで要素を生成すると、IEでもHTML5の要素にスタイルを効くようになります。実際のhtml5.jsはもっと複雑だけど基本的にはこんなことをやってます。詳しいことは下記スライド参照で。

What’s the difference?

そろそろHTML5でサイト作ってみっかーということでいろいろググってたら前述の問題に引っかかり、さらにググってみると同じ機能なのに名前が違う2つのスクリプトがあることを認識たのが今回の経緯です。

Google Codeにホスティングされている2つのコードを見比べても全く同じです。謎です。

Common question: what’s the difference between the html5shim and the html5shiv? Answer: nothing, one has an m and one has a v - that’s it.

と思ったら、似たような疑問を持つ人も多いのかよくある質問が用意されていました。

”違いなんて無いよ!片方はmで、片方がvなだけ。それだけ!”

<!--[if lt IE 9]>
 <script src="/common/js/html5shiv.js"></script>
<![endif]-->

※最近ではGoogle Codeにホスティングされているものを参照するのではなく、自鯖に落としてきて使用することが推奨されています

お… また敷かれたレールを疑問も持たずに走ってればいいんだよ的な回答ですね。そんなの求めていないんだ!僕は!じゃーなぜ2つあるんだよ!どっち使えばいいんだよ!と遅れてきた反抗期によって僕はあきらめません。

まずは単語の意味から…

【名詞】【可算名詞】 (ものを水平にしたり,すき間などに入れる)詰め木[金] shimの意味 - 英和辞典 Weblio辞書 

【名詞】【可算名詞】 《米俗》 (ジャック)ナイフ shivの意味 - 英和辞典 Weblio辞書 

ふむふむ、”shim” の方は詰め木ということで足りない機能を補完(カバー)する意味合いでも取れて、polyfillみたいな感じですかね?。”shiv” はナイフ…どーゆこっちゃ><

The Story of the HTML5 Shiv

行き詰まり感たっぷりだったところに、Modernizr の開発者でも有名なPaul Irishさんが、The Story of the HTML5 Shiv というドンピシャなタイトルの記事をあげていました。

この記事の前半部分をざっくりまとめてみると、

2007年くらい ■ developers: 新要素にCSS効かなくね?やばくねw?あれれww?

2008年
Sjoerd Visscher(初めてこのテクニックを披露した人): createElementしたらええで〜www

Ian Hickson(HTML5のエライ人): これマジパネェwwwこれ使ったらIE7の互換shim簡単に作れるわーwwww

John Resig(jQuery作った人): CSS効かせる方法、HTML5 Shivって名前つけたわーww(shimだけど)

2009年 Remy Sharp(初めてhtml5.jsをディストリビュートした人): HTML5 ShivのやつGoogle Codeにホスティングしといたわーww

2010年Remy Sharp: html5shimでミラー作っておいたわーwww

だいたいこんな感じですな。

Shiv?

ここで問題なのは、なんでRemy Sharpさんあとからhtml5shimのミラーを 公開したのか?ということですね。

“shiv” って単語がコンピューター用語で言う互換性のため回避策といった意味が一般認識されていなかったのではないかという仮説が僕の中で湧いてきました。

試しにGitHub“shiv” で レポジトリ検索をしてみると17件、“shim”で検索すると93件ヒットしました。”shiv” に関してはhtml5shivに関しての内容ばかりで、他のものも新しいライブラリです。

2008年のJohn Resig氏のエントリのコメントにおいても、「shimじゃなくてshiv?」といった内容が見受けられます。

しかし、WikipediaのShim (computing)の項目には、”a shim (from shim) or shiv is a small library which…“とまぁなんか互換性のため回避策の意味として記述されています…

え、そうなの?なんでじゃ!ということで、例によって反抗期の僕にはwikiの変更履歴を見てみるとありました。21:20, 16 November 2011‎ までは Shim (computing)の項目に ”shiv” って単語はなかった。なんだ最近、追記されてんじゃん!

まぁ少なくとも2008年のJohn Resigが書いたエントリの時点では “shiv” に「互換性のため回避策」といった意味がなかったのではないかと推測できます。

Conclusion

で結局、ここからは妄想になるんだけど、

2008年John Resig(jQuery作った人): CSS効かせる方法、HTML5 Shivって名前つけたわーww やってることはshimだけど、shivの方が武器っぽくって強そうじゃんwwwドヤww

■ developers1: shivじゃなくてshimだろwwワロスwww

■ developers2: html5shivいいねwwwwwイカスwwwww

2010年 ■ Remy Sharp: html5shivでホスティングしたったーけどwwww html5shimの方が意味的に分かりやすいし一応こっちも作っとくかーww

そんな経緯ですかね…”なぜ”そうしたのかって部分が言及されて(見つから)なかったので、あくまで上記は僕の妄想ですからあしからず。知ってる人いたら教えてください。

てか、Modernizrにバンドリングされてるし、そっち使ったらいいんじゃないっすかねー(by @5509

参考