初心者向け「JavaScript」のわかりやすい解説

「JavaScript」って何？という初心者に向けた分かりやすい記事です。

JavaScriptって何？ Webサイトで何ができるの？【第8回】

CSSはデザインの専門家という話をしました。パソコン用のデザインやスマホ用のデザインをCSSで作っています。
では、誰が「これはパソコンだ」「このアクセスはスマホからだ」と判断して切り替えてるでしょうか？
今や欠かせない機能を担当しているのが、HTMLからリンクされているファイル「JavaScript（ジャバスクリプト）」です。

「JavaScript」の記述

ブラウザには表示されないと（ヘッダー）の間に、

<script type="text/javascript" src="./test.js"></script>

とありました。これがHTMLからJavaScriptファイルへのリンクです。「test.js」というファイルにリンクがはってあります。

さて、「こんにちは！」という文章を表示する部分ですが、HTMLのbodyに書いてあった3行の呪文です。

<script type="text/javascript">
document.write(A);
</script>

上下の2行は、ここからここまでがJavaScriptです、という意味です。

※ここでも終了タグをお忘れなく。

肝心なのはこの1行、

document.write(A);

です。ドキュメント・ライト(document.write)つまり、「これを書け」というJavaScriptの指令です。書く内容は「A」。ブラウザはこの指定に従ってAを表示しているだけなのです。

HTMLの中にリンクされた「test.js」の中に「A」が書いてあって、その内容が「こんにちは！」なわけです。これが表示されているのですね。

var A="こんにちは！"

これだけです！ アホみたいですね。ここには、「『A』という変数（var）は、"こんにちは！"です」と書いてあるだけです。

どこにでもニュースを表示できるのです。全ページにニュースを表示しても、「test2.js」さえ書き直せば、一瞬で全ページのニュース内容を更新することができます。

なぜこの機能をご紹介したかと言うと、今のWebサイトでは、トップページからやってくる人は15％程度です。あとの85％の人はトップ以外のページから横入りしてきます。トップにだけ書かれたニュースには、誰も気づいてくれないのですね。

こうした方法で多くのページにニュースを入れておけば、他のページから訪れた人にもニュースを伝えることができます。JavaScriptファイル1つを書き直すだけで全ページのニュースを更新できるとしたらめちゃくちゃ便利だと思いませんか？

ただ、スクリプトで書いた内容は、Googleは重視してくれませんので、この方法で全ページにリンクを入れてもSEO上は役に立ちませんからご注意を。

それでも85％の人にニュースを伝えたい、と考えたらこんな便利な方法があるということを覚えておいてください。

「JavaScript」の例

たとえば、Q&Aのページで、最初は質問文だけが並んでいて、それをクリックすると回答が表示される。「閉じる」というボタンを押すと回答が消える、というよく見る動作もJavaScriptによるものです。

また、トップページのイメージ画像が何秒かごとに別のものに変わったり、商品画像をクリックしたら拡大画像がページの上に表示されたりする仕組みもあります。

カーソルが来るとボタンが凹むというアクションもJavaScriptによって行われています。

入力フォームの記入漏れチェックもJavaScriptでやっていることもあり、今のWebにはなくてはならない機能を提供してくれています。

SEOコンサルタントのまとめ

とてもわかりやすい記事です。
また、SEOの為に強化したいテキストなどは「JavaScript」の部分ではなく、
HTMLに記述するようにしてください。