とりあえず難しいことは抜きにしてJavascriptっていったい何なの?




「WebサイトとかWebページはHTMLファイルがブラウザに表示されているんだよね」ってところまでは理解しているけど、Javascriptっていうのも何かWebに関係しているようだけど何だか良くわからないなーという人向けに簡単に説明してみます。

HTMLもよくわからないんだけどという方はこちらを読んでからのほうが理解できると思います。→「WebサーバとかHTTPとかわからない人のためにWebのしくみを超カンタンに説明してみる

まずはHTMLについて

HTMLファイルはブラウザ上に表示したい文字や画像・動画などを書式指定付きで書かれた文書ファイルです。「書式指定付き」というのは、段落や文字の位置や大きさ、色、装飾などを指定して書かれているという意味です。具体的には「あいうえお」という文字を太字で表示したい場合はHTML書式に従って書くと「<strong>あいうえお</strong>」とか「<b>あいうえお</b>」となります。このような<>で囲まれたものがHTMLタグと呼ばれています。HTMLタグはものすごいたくさん種類があって文章や文字、画像などブラウザ上に表示したいものに対してさまざまな効果を与えることができます。「HTMLタグ」でGoogle検索などをしてみるとHTMLタグの一覧サイトなどがたくさん出てきます。(参考:HTMLクイックリファレンス http://www.htmq.com/html/)

これらのHTMLタグを駆使して書かれた文書ファイルがHTMLファイルです。ブラウザはこのHTMLタグを適切に解釈することができるように作られているため、ブラウザ上でHTMLファイルを表示させると見た目が整ったきれいなページが表示できるということになります。HTMLファイルは、(ちょっと乱暴に)言い換えればWord(ワープロソフト)とかでキレイに装飾された文書ファイルみたいなものと対して変わりません。

[HTMLファイル]
スクリーンショット 2015-11-12 18.46.34

↓↓↓

[ブラウザで表示すると]
スクリーンショット 2015-11-12 18.47.33

動きのあるページと動きのないページ

インターネット上にあるWebページの中にはユーザのクリックなどによって、ページ内の文字の色や大きさが変わったり、背景が動いたりなど「動きのあるページ」が多く存在します。逆に文章がズラッとひたすら書いてあるだけの「動きのないページ」もあります。「動きのあるページ」を動的コンテンツ(動的ページ)、「動きのないページ」を静的コンテンツ(静的ページ)と呼びます。
HTMLは基本的に「動きのない」静的コンテンツしか記述することができません。(厳密にはHTMLは進化し続けていて、ある程度であれば動的なページを作ることも可能ですがまだ発展途上の状態です)そこで登場するのがJavascriptということになります。Javascriptを使うと「動きのある」動的コンテンツを作ることができます。

Javascriptとは

難しいことは置いておいて、簡単に言うとJavascriptはプログラム言語の1つで、HTMLと非常に親和性の高い(組み合わせて使いやすい)プログラム言語です。プログラム言語なので、プログラムの文法に従って記述する必要がありますが、プログラム自体はHTMLファイルの中に直接書くことができます。(HTMLファイルとJavascriptファイルに分けて書くこともできます)以下がJavascriptが書かれたHTMLファイルです。

[Javascriptが書かれたHTMLファイル]
スクリーンショット_2015-11-13_10_49_59

↓↓↓

[ブラウザで表示するとJavascriptが実行されてダイアログウインドウが表示される]
スクリーンショット_2015-11-13_10_53_54

ここでは、ページが表示されるとウインドウが開いて「Hello!」という文字を表示させているだけですが、Javascriptを使うとWebページにさまざまな効果を与えることができます。

Javascriptが動くのもブラウザのおかげ

ブラウザはHTMLタグを解釈してWebページを表示していますが、Javascriptというプログラムが動作してページに効果を与えることができるのもブラウザがJavascriptを解釈して動作させているからです。つまりブラウザはHTMLタグを理解し、Javascriptというプログラムも理解できるように作られているということになります。

現在、ブラウザにはIE,Chrome,Safari,Firefoxなど種類がいくつかありますがこれらのブラウザは全てHTMLとJavascriptをきちんと理解できるようになっています。ただブラウザによってはHTMLとJavascriptの解釈のしかたが異なる場合があって、文字は太くなるけれど太さが異なる、解釈できないHTMLタグがある等、ブラウザ間で表示されたページが異なって見えたりする場合があります。最近ではこのようなケースはあまり発生しなくなりましたが、数年前までは各ブラウザ間での表示や動作の違いに開発者が悩まされていました。特にJavascriptに関する動作の違いが顕著で、一時期はWebページを作る際にはJavascriptは使わないほうが望ましいという時期があったぐらいです。現在でも特定のブラウザでしか解釈できないHTMLタグやJavascriptのプログラム命令が存在しますが、開発者はそういうものは極力使用しないことで、どのブラウザでもきちんと表示・動作するWebページを作り上げています。

さいごに

JavascriptはHTMLでは実現できない効果をWebページに与えることができるプログラム言語ということが理解できるように記事を書いてみました。難しいことはとりあえず抜きにしてまずはどんなイメージなのかということが伝われば幸いです。

シェアして頂けると嬉しいです

















チャーム本店



価格.com ブロードバンド

価格.com 自動車保険









■コメントはお気軽にどうぞ