JavaScript入門

立山秀利：｢入門者のJavaScript〜作りながら学ぶWebプログラミング〜｣、講談社Blue Backs、'14を読む。当Webサイトの歴史は長いが、河西朝雄、河西雄一：「やさしいホームページの作り方シリーズ〜HTML〜」、ナツメ社、'97が唯一の参考書の、至って簡単なHTML文だけで記述されている。私の｢戯言（たわごと）」上梓が目的だからといつも己に弁解はしていたが、事業目的などのWebサイトを見ると、それはそれは体裁優れ、使い勝手のいい構成になっているので、体裁はともかく使い勝手（私の場合は読み勝手）はもっと改良せねばならないと何年も思っていた。

さし当たっての我がWebサイトに対する改良点は、マウスオーバー時の説明文の挿入とプルダウンメニューによる利便性の向上である。Webサイトの内容が膨大（現時点で約1500項目）になったので、すでに設置してある検索窓とは別に、副次的な目次をプルダウンメニューに入れてみたい。JavaScript以外にもやり方はあるようだが、これだとより簡単に作れるのではないかという期待がある。傘寿に手が届く年齢になって今更とも思うが、新書版の本書は手頃とも思えたので読むことにした。

本書は｢簡易画像ビューワ｣という作例を中心に話が進む。ボタンをクリックすると次々に予め仕込んでおいた写真が現れる仕掛けである。私のWebサイトでは、プロバイダー（So-net)の無料貸し出し記憶容量が小さいため、大量の写真や動画は載せられない。JavaScriptを使ってもこの制限からは逃げられない。だから残念ながら著者の意図したメリットはこのWebサイトでは実現出来ない。現実には無料貸し出し容量の大きなBlogとか、GoogleドライブやYouTubeに載せておいて、それをWebサイトから引用するようにしている。苦肉の策だが、プロバイダーに無駄な費用を払いたくない。しかしWebサイトは複雑になり取り扱いはやっかいだ。問題は先送りである。Blogは記事丸ごと、Googleドライブは写真または動画、YouTubeは動画またはスライドショー用に使っている。YouTubeのスライドショーは、バックミュージックのサービスまで付いていて、使い勝手抜群であった（当Webサイト：「HP? BLOG? YouTube?」（'13））。

コンピュータ言語は「習うより慣れろ」で、せめてテキストの例題ぐらいは自分でいじくって体感する必要がある。入門書は抽象的で難解な専門用語の学習に大半のページを割くのが普通だ。本書もその範疇にある。専門家になるつもりはなく、プログラムを見てびっくりしない程度になればいい人は、｢慣れろ｣優先姿勢が大切である。判っておりながら、ついつい初歩の初歩をサボって「慣れろ｣を本の真ん中あたりから始めたら、全くプログラムが動かないので仰天。1字間違い、1字抜かし、記号取り違え、などを修正している内に何とか動き出した。はじめから忠実に本の内容をPCでトレースすべきであった。

私にとってスタイルシート言語CSSは目新しかった。CSS記述が無くても、煩雑さを厭わなければ同じ機能を作れるが、HTML文の中の同じ位置で、データだけを取り替えて表示するのに、いたって便利な言語である。データの取り替えに変数という概念を使う。変数に、データに割り振られた数字を代入することで、コードの煩雑化を防ぐ。他のコンピュータ言語と同様にif文とかswitch文によって変数〜比較演算子〜条件に従って機能の条件分岐を行う。配列と繰り返しをfor文に納めることにより処理の記述は簡素化できる。for文でデータ､例えば画像ファイルをループ化して読み込むのだから、画像ファイルは連番にしておく必要がある。

ここまで読むと、JavaScriptはHTML＋CSS文を、例えばC言語のようにダイナミックに操作する道具だとわかる。最終章はHTML文からJavaScript文を完全に分離し、出来上がったプログラムを見栄え良く整理し、将来の改良にも便利な形に仕上げる。そのために関数の関数といった高級手法も使われる。プロのWebページを見ても驚かない心準備をさせてくれるものだ。

読み終わってすぐにできる応用は、手動のスライドショーである。でも今の私のWebサイトでは、上述の通りYouTubeの自動スライドショーの利用で十分満足しているから、不要である。「おわりに」にポイントを重ねると表示されるドロップダウンメニューなどは、jQueryにあると書いてある。jQueryとはJavaScriptのライブラリーの一種で、複数のプログラムのの部品を纏めたものと紹介してある。

ポイントを重ねるというイベントのイベント名はonmouseoverである。本書のイベントはクリック（onclick）だけなので、これと取り替える実験をしてみた。window.alertで文字を出す操作では、button要素の後でもimg要素の後に置いても同じ働きをする。次に仕上がった本書の例題プログラムの全体の置換をやった。マウスポインターをボタンに載せるだけで、映像も字スタイルが以前と同じように変化した。

そこで「iQueryプルダウンメニュー」で検索。いろいろ発表されている。「jQueryでプルダウンメニュー（たった5行で！）」（www.finefinefine.jp/web/kiji1581/）というページがある。そこのJavaScriptは確かに5行だ。サンプル画面も付いている。このプログラムの肝はHTML文のli要素の中にul要素を入れ子にし、JavaScript文にhoverイベントを使い、mouseoverとmouseout時の処理を同時に設定できる点という。まずメニューにカーソルが当たったら子要素のul（プルダウンメニュー）を表示する。次にメニューからカーソルがはずれたら子要素のulを非表示にする。これはli要素の中にul要素を入れ子にしたおかげであると作者は解説している。

素直に本書に従って、HTML文のhead要素の中に外部ファイルのCSS文とJS文を使うと宣言し、それぞれをHTML文と同じフォルダーに置いた。文の内容は上記ページのものそのままである。ところがHTML文から呼び出せたのはメインメニューだけで、サブメニューはプルダウンできなかった。作例はGoogleのjQueryに依存していて、適切なverの呼び出しが必要なことは後で知った。散々いじくった後、元のサンプル画面の｢ソースの表示｣を行った。Webページに載っていないコードがたくさんあった。そのコピーを別の既成のファイルに貼り付けてみた。もっとも手軽な方法である。原文がそうなっているので、CSS文もJS文も内部ファイルになった。くっついてきた広告文とかロゴマークを外すと、あとはそこそこの手直しで使えそうになった。でも簡単でない。意味不明のマークが出たり、色が勝手に変わったり。Webサイトに作例のstyleの引用原本があって、それを利用する形になっているが、それはブラックボックスなのである。本稿はここまで。後の利用を考えれば、CSSもJSも外部ファイル化したい。機会ができたら、その実験結果をそのときに報告しましょう。

「iQuery　サンプル」でインターネット検索をすると、商用のWebページではよくお目に掛かる、目に華やかな提示法が、数多く並んでいた。

('14/3/22)

（追記）　本Webページ：「おんな太閤記（後編）」にプルダウン・メニュー試作品を付けてみた。表題をクリックすれば出るようになっている。お試し下さい。

('14/4/21)