技術 technology

javascriptってなんですか?

javascriptってなんですか?

大山先生

大山先生

「僕にとってWebは遊びみたいなものです」が口癖。
好きな言葉は「天才とは努力を努力と思わない才能」。Webチーム制作部門 の要にして最後の砦。XYZ…(後がない)どこかで聞いたことがあるそんな言葉を呟けば、大山先生が登場し問題を綺麗に片づけてくれるためチームメイトは彼のことをスイーパー(始末屋)と呼ぶ。ハードボイルドを愛し、一見不愛想に思われがちな大山先生だが、いつも快く問題を片づけてくれることから、その心は意外にも「エンジェルハート」だとか。

小野さん

小野

デザインをはじめ様々なことをこなす、自称ゼネラリスト。強面であるが笑うと、実は八重歯が可愛いかったりすることは本人も自覚しているらしい。Web制作チームの中では、まさに”ピカイチ”なITリテラシーの低さで、リテラシーという言葉を聞いて「大正だっけ?」とわけの分からないことを言った過去があるとかないとか。(デモクラシーです。それは)加えて年も年であるため、物忘れ>(大なり小なり)物覚えなのが現状。 この人のWeb知識を高めれば、きっとよりよいデザインが生まれるに違いない、そう考えたエンジェルハートな大山先生。Webについて「ピカピカの1年生」でも分かるように分かりやすく説明してくれます。

 

大山先生

大山 こんにちわ。HTMLとCSS、そしてjavascriptがWebサイトを構成する上で重要という話は、前回までに何度かしてきましたね。今日は最後の砦、Javascriptについて説明いたします。

小野 おっうわさではさぞ難しいと聞くjavascript・・・

javascriptとは・・・

大山 Javascriptとは何か。Web上で動きを表現する為に開発されたオブジェクト指向のスクリプト言語(簡易プログラミング言語)です。

小野 でた!CSSの時と同じで質問を避けようと、難しい言語ばっかり並べるやつ!

大山 今回は小野さんでも分かるレベルに噛み砕いたので、小野さんから来る質問ならば、ほぼ答えますよ!

小野 何と!大山先生さすがです・・・。では、質問。オブジェクト指向とは何ですか?

大山 やはりきましたね。ではオブジェクト指向について説明しましょう。 オブジェクトとは「物」ですね。Javascriptにおける「物」とは何か・・。 それはブラウザそのものや、各要素、タグなどを指します。

小野 オブジェクト=もの か。そのままだね!

大山 以前webページはHTMLで構成され、CSSで色づけされているという話をしましたね。WebサイトはHTMLとCSSだけで成立はします。 しかし、それだけではまったく動きのない、ポスターや説明書を画面で見ているのと変わりません。 そこで登場するのがjavascriptです。

小野 なるほど。 WEBサイトが動くための心臓的なものなのね。小野さん

大山 小野さんにしてはいい解釈ですね。 そんなイメージです。

javascriptでできること

Javascriptを使って何ができるかというと、身近なところで言うと、ロールオーバーとかですね。

小野 ロールオーバーはわかるよ! 体育授業で、何度も練習したからね!
背面跳びよりかっこいいし、女の子にもモテそうだし!
こういうやつでしょ!小野さん

大山先生

大山 小野さん・・・高跳びの跳び方ではないです。 WEBサイトにおけるロールオーバーは、マウスを載せたら色が変わったり、画像が切り替わるやつです。

小野 あ、はい。覚えます。

大山 他にもクリックしたら矢印の向きが変わるアクション、画像のスライド、トップに戻るボタンに出現など、 最近のサイトにはほぼjavascriptは組み込まれていますね。

小野 そうなんだ。スライドショーとかは、最近のサイトは入ってること多いよね!

大山 ええ、あと、ちょっと動きとは違いますが、グーグルマップの埋め込みなどができます。

小野 あれもそうなの?画像として貼り付けているだけじゃないんだねぇ・・・

大山 画像として貼り付けたら、スクロールとかできませんよね。

小野 確かに!何でもできるんだねえ。 じゃあfacebookとかがサイトに表示されてるのもjavascript?大山先生

大山 小野さん、まさにその通りです!あれもjavascriptを組み込んでいます。すごいですね!

小野 いやいやいや♪小野さん

スクリプト言語?

大山 話を戻します。先ほどの続きですが、スクリプト言語について説明しますね。
スクリプト言語とは、コンピュータに指示をするためのルールをまとめたものであり、 そのルールに従って記述された命令のことです。
スクリプトの働きは、プログラムに近いものがありますが、 プログラムよりも簡易化され、仕組みが単純になっています。
とはいえ、さすがに初心者には難しいですが・・・。大山先生

小野 ふぁっ?!わ、分かりやすくお願いします・・・小野さん

大山 例えば、外国人と会話をするとき、日本語で話しても通じませんよね。 英語なら大体通じます。 それと同じように、コンピューターにもコンピューター語で指示しなければスムーズに動いてくれません。大山先生

小野 ふむふむ。人語じゃなくてコンピュータ語みたいなものか。

大山 ええ。そのコンピューター語を簡略化したものが、スクリプト言語です。

小野 ああ、なるほど。今の説明でだいたいわかったよ。

大山 今までのことをほんとにざっくり説明します。 Hタグ(オブジェクト)のもつ色(情報)を変更したり、 Divタグ(オブジェクト)の位置(情報)を動かしたりすることができます。 情報を伝える書き方がスクリプト言語です。

小野ふむふむ。小野さん

大山 ちなみにプログラミング言語でJavaという言語がありますが、これとjavascriptは違います。

小野 どれくらい違うの?

大山 そこはさらっと流すはずのところなのですが・・・
どれくらい違うかですか・・? いい例えか分かりませんが、メロンとメロンパンくらい違います。 メロン(java)に見えるから、メロンは入ってないけどメロンパン(javascript)って名前にしようぜ!みたいなニュアンスです。

大山先生

小野 それってニセモノってこと?

大山 いいえ、違います。
どちらかというと、便乗に近いです。
Javaは、Sun Microsystems社が作ったプログラミング言語です。
一方JavaScriptは、Netscape Communications社によって開発されたスクリプト言語です。
JavaScriptは「LiveScript」と呼ばれていましたが、当時はJava言語が注目されており、Netscape Communications社とSun Microsystems社が業務提携していたこともあり、「JavaScript」という名前に変更したようです。
轆轤を回す大山先生

小野 またよくわかんない横文字いっぱい出てきたね。まあいいや。
メロンとメロンパンくらい違うって覚えとくよ。小野さん

大山 ひとまず、そうしてください。

javascriptの普及

大山 先ほど説明したとおり、現在ではJavascriptが使われていないページを探すのが困難なほど普及しました。

小野 うんうん。でも何でそんなに急激に普及したの?てか何でそんなに評価されたの?

大山 Javascript普及の特徴としてはいくつかありますが、代表的な3つを挙げてみます。
javascriptに対応したブラウザさえあればスクリプトの実行が安易にできる
HTMLと同様に、大規模な設備や特別な開発環境を必要とせずにプログラミングすることができる。
スクリプト言語なのでコンパイル作業を必要としない。轆轤を回す大山先生

小野 解説お願いします。小野さん

大山 はい。それでは解説します。
1の対応ブラウザですが現在ではほとんどのパソコンに対応しているため、故意に表示していない限り実行されます。
2は先ほど説明したとおりですね。テキストエディタだけあれば、記述することができます。
3のコンパイル作業とは、簡単に言うと翻訳作業です。日本語を外国人に話しても伝わらないように、機械語のプログラムに翻訳する作業が必要な言語もあります。それが必要ないのです。轆轤を回す大山先生

小野 コンパイル作業か。初耳だね。

大山 でしょうね。まあ今回はそこまで踏み込まないので、覚えなくても結構です。

まとめ

大山 というわけで、こちらが今回のまとめですね。
今回のまとめ
1、javascriptはサイトに動きを加えるためのプログラム言語である。
2、なくてもよいものだが、最近では使われていないサイトはほとんどない。
3、開発環境に左右されずに使えるので、選ばれている。
Javascriptの概要は以上です。小野さん

小野 今回は難しかったなー。全然分からない・・・

大山 大丈夫です。たいていの人はjavascriptと最初に出会ったときは、苦戦しますよ。

小野 うん。まるで才色兼備で自分にはまったく興味のないお嬢様に恋した気分だね。 相手のことがまったく分からない・・・。 でもこういう相手って燃えるんだよね。 簡単に手に入らないからこそ、追いかけたくなり、全力で振り向かせたくなる。 たぶんちょっとした相手の笑顔や心の通じ合いがたまらなくうれしくなるんだよね。

大山 ・・・・・・・・・・・・・そうですか、ぜひがんばってください。大山先生

一覧ページへ 

Other contents
その他のコンテンツ

Go to Top

Contact
お問い合わせ

CONTACT