JavaScriptの実用例(1)

JavaScript(ジャバスクリプト)についての入門的記事はたくさんあるけど、どんなところに使うと手っとり早く実用的なのか、という点をメインに据えてるやつは見つけられなかったので、そんな視点で何か書いてみようかなと思いました。僕自身がそんなにJavaScriptがうまいわけでもないんですが、こんな風に使うだけでもいいんじゃないすか、くらいの気持ちで。

自分がJavaScriptを使う場面は、既存のWebコンテンツにちょっとした工夫を加えたいときがほとんどです。ゼロから何か設計して云々、というのは、必要ならやるかもしれませんが、少なくとも、そんなにしょっちゅうのことではないです。

なぜWebコンテンツのためにJavaScriptを使うかというと、JavaScriptはWebブラウザの上で主に動くものだからです。それ以外でも動く場面は増えてきているらしいんですが、今のところは話題にしません。

最近は、ほとんどどんなWebブラウザの上でもJavaScriptがちゃんと動くと期待していいでしょう。そういうのが動かない設定にしている人もときどきはいるでしょうが、きょうび、これなしではロクなWeb利用はできなくなってきていますから、最初は度外視しておくことにします。

Webブラウザの上で表示される色々は、ほとんどの場合、HTMLでできています。HTMLってのはそれ自身は単なるテキスト情報(装飾のない文字情報)なんですが、そこに記されたタグなどの目印に反応して、Webブラウザ上ではきれいにフォーマットされて表示できる、便利なものです。

f:id:yamatt2:20131021192148j:plain

で、そのHTMLは、つくった人がWebサーバーというコンピュータの上にセットしておいて、それにみんながアクセスして、めいめい必要なHTMLを取っていって、自分とこのWebブラウザに整形させて眺める、というのが、普段のWeb利用の姿です。HTMLだけだとあまり面白くならないので、それとは別に画像なんかもサーバーからもらってきて、組み合わせて表示したりしています。

f:id:yamatt2:20131021192232j:plain

で、JavaScriptの働きどころのひとつは、WebブラウザがHTMLを実際にに眺めるための画面に整形しているというその時点です。HTMLの中にJavaScriptを混ぜておくと、この部分が表示のかわりに「実行」されるというわけです。で、実行の結果が「何かの表示」に相当するものだったら、それがHTMLの中に混ぜ込まれて表示に加わります。例をひとつ、下のリンクから見てみましょう。

(サンプル)

実際の表示内容と、それに相当する「ページのソース」みたいなやつも見てください。Firefoxなら、Ctrl+Uでソース表示ができますよ。整形する前の、HTMLそのものの姿が見られます。他のWebブラウザは、すぐには分からないですが、たぶん画面上で右クリックすれば似たような機能が見つかるでしょう。

下のようなものが見られましたか。

<html>
<body>
hello
<script>
document.write('world');
</script>
how do yo do
</body>
</html>

この例は、なるべく単純に見せるためにあえてマナー違反している部分が多くて、本番で使うには不適切なんですけど、たぶん動くと思います。

注目すべきは、HTMLの中に記した<script>タグと、そのタグで囲まれた一行のJavaScriptです。document.writeという命令が記されていて、その中に ‘world’ っていう文字(文字列ともいいます)が指定されています。これは、簡単に言うと、その場で「world」って表示しなさいよってことです。JavaScriptの文法にはまだ立ち入りませんが。

これで、実際の表示画面では、前後の文章にJavaScriptの実行結果が加わって、「hello world how do you do」となった、というわけです。

ここまで見て、多分「それってPHPと似てるんじゃない」と思いついた方がいらっしゃるかも知れません。PHPなら、上のサンプルと同じようなものが、下のように書けるでしょうね。

<html>
<body>
hello
<?php echo('world'); ?>
how do yo do
</body>
</html>

JavaScriptで書いた例とPHPで書いた例の違いは、プログラムがどの時点で実行されて結果がHTMLに混ぜ合わされるか、という点です。PHPは、Webサーバーの上で実行されて、クライアント(個々のWebブラウザ)には生成結果のHTMLのみが帰ってきます。どんなPHPプログラムが動いたのか、通常、我々が知ることはできません。一方、この例でのJavaScriptは、サーバーから丸ごとクライアントに渡されて、実行もこちらにみんな任されます。もちろんスクリプト本体も見放題。ここらへんを表す言葉として、「PHPはサーバーサイドで実行され、JavaScriptはクライアントサイドで実行される」といったりするときがあります。

f:id:yamatt2:20131021192302j:plain

JavaScript型とPHP型のどちらを使うのが適切かは、状況によって違いますので、ここでは別に論じません。とはいえ、JavaScript型のいいところは、Webサーバーに特段の設定がいらないところかなと思います。PHPを使わせてくれない(セキュリティ上の配慮とか、理由はいろいろあります)Webサーバーの上では、当然PHP製のものは動かすことができません。JavaScriptは、そういうサーバー設定上の制限はなく、それどころか、サーバーをわざわざ経由させなくても、PCの上で作ったHTMLとJavaScriptのままでも動作を試すことができます。

(つづく)