HTMLコーディングに必要なJacaScript入門｜何から学び始めればいい？

HTMLのコーディング作業を行うのにJavaScriptの勉強をした方がいいらしいんだけど何から始めればいいんだろう？そもそもなぜJavaScriptが必要なんだろう

なぜJavaScriptが必要なのか？

もちろんJavaScript無しにもWebサイトの作成は可能です。しかし最近のWebサイトではJavaScriptが使われていないサイトの方が少ないでしょう。

JavaScriptの利点は色々ありますが、HTMLコーディングの作業を行う上での利点はズバリ「動きのあるWebサイトを作れる」という点だと言えるでしょう。

具体的な実例

では簡単な実例を見ていきましょう。まずはHTMLで以下の記述を行い表示を確認してみてください。

まだHTMLの勉強をしていないというかたは【全部無料】HTML&CSSの学習方法（入門編）を試してみた【初心者向】や1冊ですべて身につくHTML&CSSとWebデザイン入門講座を学習してみたを参考にしてみてください。

※記述をわかりやすくするためにCSSはインラインでまとめて記述しちゃいます

HTML

<div style="background-color: #CC0000; width:200px; height:200px;"></div>

すると以下の画像のようなただの赤いボックスが表示されるはずです。

これだけではただの赤いボックスなので、HTMLのコードを以下の様に変更します。「onmouseover」と「onmouseout」の部分がJavaScriptの記述になります。

HTML

<div style="background-color: #CC0000; width:200px; height:200px;" onmouseover="this.style.backgroundColor = '#0000CC';" onmouseout="this.style.backgroundColor = '#CC0000';"></div>

こうするとボックスの中にマウスカーソルが入るとボックスが青に、マウスカーソルが出ると赤に戻る動きになります。

このようにJavaScriptを使うとユーザーの行動に合わせて色々な動きのあるWebサイトが作成できるということになります。

何から始めればいいか？

JavaScriptで出来ることをおおまかに把握したら、次は実際に何から始めればいいか？ということですが、まずはJavaScriptが扱える要素について把握しましょう。

上記の例でいうと<div>に対し、「onmouseover」と「onmouseout」を設定し、その<div>の中にマウスが入ってきた時と出て行った時の挙動をしてしました。

そしてこれは<div>にかぎらず<p>や<a>などあらゆるタグに対して設定可能になっています。

つまり動きの起点になる部分のタグはどのタグにでも設定できるということになります。

要素を利用した具体例

文字だと何をいっているのかわかりづらい状態かと思うので実際にコードを書いてみます。

まずはpタグで文字を書いている部分。元々黒い文字の部分にマウスカーソルを合わせると文字色が赤くなる例です。

<p onmouseover="this.style.color = '#CC0000';" onmouseout="this.style.color = '#333333';">ダミーテキストダミーテキストダミーテキスト</p>

次はaタグでリンクがクリックされたらリンク先に遷移する前に遷移するということを知らせるアラートを出す例です。

<a href="#" onclick="alert('リンク先に遷移します')">リンク先遷移テスト</a>

このようにあらゆるタグにJavaScriptで動きを持たせることができるということをまずは理解すると良いでしょう。

何ができるのかを把握する

どんな要素に対して動作を指定できるのかを見てきました。次はそれらの要素に対してどのような操作が可能なのかを見ていきましょう。

まずは要素に対してどんな操作が行われたら処理を実行するかのトリガーになる部分、主な例は以下です。

これで全部ではないんですが、概ねこれで主なやりたいことは可能かなと思います。

実行可能な処理

つぎは実際に実行可能な処理の部分ですが、これはJavaScriptで出来ることは無数にあるので、すべてを知りたいという場合はリファレンス本を眺めてみるのが良いでしょう。

「JavaScript コードレシピ集」が良いと思います。古い本は現在推奨されない「var」による変数宣言がされているため、新しめの本の中で評価の高いものを選ぶと良いでしょう。

CSSで指定できることはJavaScriptでも変更可能な為、CSSで指定できるようなことはほぼすべて対応可能と考えて大丈夫です。

例えば上記の例では「background-color」で背景色を動的に変更しました。これはメニューなどでカーソルが合うとその部分の背景色が変わる場合などに使えます。

またCSSの「display」要素に「none」や「block」を指定することで特定要素を非表示にしたり表示したりできます。

これはレスポンシブデザインの際に使われることが多いです。PC用のメニューはスマホでは非表示にする、といった使い方ですね。

実際のコーディングで使うもの

実際にHTMLコーディングで使うもので、最近の例で言えば以下の様な物を作る時にJavaScriptが必要になります。

実はこれらの要素を作成する時は一から自分で作るというよりは実例を検索して見つけてアレンジするという使い方が多いです。

なのでJavaScriptはどんな時に実行できるのか、何ができるのか、という基本をおさえたら勉強としてはひとまず終了でOKです。

次は実例で作りたいものの作り方を検索し、真似てみて動きを理解していきましょう。

そうすると次はjQueryというものにぶつかるはずです。jQueryについてはまた別途記事にしていきますね。