JavaScriptとは何か 〜具体的な機能からJavaScriptでできることを知る〜
JavaScriptとは何か
こんにちは、現在、個人/企業様向けにプログラミング講師やIT研修などを行っています。
WEBサイトに関わるほとんどの人は「JavaScript」というプログラミング言語を聞いたことがあるかと思います。
ただ、
「JavaScriptは結局、何ができて、何ができないの、いまいち分からない」
という疑問を持たれている方もいるかと思います。
私も研修の中で企画営業職やディレクター、アナリストの方など、多数の方から同様の質問を受けることが多いです。
ネットで「JavaScript」と調べても概念的・抽象的な説明が多く、システムエンジニア以外の人にとってはJavaScriptで具体的にできることはいまいちイメージしづらいかと思います。
そこで、今回、「JavaScriptで作ることができる機能の実物（実際に動くもの）」をご紹介します。
これらの実物に見て触れて頂くことで、今までいまいちピンと来なかった「JavaScriptでできること」がイメージできるようになれば幸いです ^^
スポンサーリンク
JavaScriptで具体的にできることをジャンル別に紹介
以下にジャンル別にWEBサイトで「JavaScript」というプログラミングを書くことでできる機能（動き）を紹介していきます。
逆に言えば、以下の機能（動き）は「JavaScript」を書かないとできないと機能（動き）」とも言えます。
※ただし、一部の機能（動き）についてはCSSやPHPなど、他のプログラミング言語で代用できるものもありますが、今回はその点や違い、メリットデメリットなどは割愛します。
アラート
アラートはJavaScriptを書くことで実装できる機能の１つです。
JavaScriptの本（入門書）を買うと、大抵どの本も初めにこのアラートをJavaScriptで作ってみようというのが書かれているほど定番ですね。
スポンサーリンク
JavaScriptでできること ～HTML/CSS編～
HTML制御
JavaScriptを使わないWEBサイトの場合、一度表示されたWEBページの内容（文字）に対して動的（※）に以下のことをすることができせん。
- 別の文字に更新（変更）する。
- 新しい文字を追加する。
- 既にある文字を削除する。
※「動的」というのは、「WEBサイトを見ているユーザーが何かをクリックしたら」「一定時間が経過したら」上記の3点の動きを加えることを指します。
しかし、JavaScriptを使えば、以下サンプルのようにWEBページを表示した後に、ページ内の一部分の文字を変更することなどができます。
文字の追加・変更
こちらはボタンをクリックしたら、クリックしたボタンに応じてグレーの枠内に文字を追加・変更することができるJavaScriptのサンプルです。
文字変更：
文字追加：
CSS制御
上記のHTMLと同様に、JavaScriptを使えば、一度表示されたWEBページのCSS（※）を変更することができます。
※CSSはWEBページをデザイン装飾するためのプログラミング言語で、文字のサイズ・太さ・色を変えたり、背景色を変えたり、余白を調整したりなどができるものです。
文字色や背景色の変更
こちらはボタンをクリックしたら、当サイトの文字色や背景色を変えることができるJavaScriptのサンプルです。
文字色変更：
背景色変更：
JavaScriptでできること 〜フォーム制御編〜
フォーム制御
WEBサイトで会員登録やショッピング（カート）機能、お問い合わせなどを作る時には、ユーザーが入力できる仕組としてフォームを作ります。
このフォーム（の見た目）だけはHTMLで作ることができますが、このフォームに何かを入力した時（瞬間）に、入力された情報をもとに何かしらの制御（動き）を加えるためにはJavaScriptを使うことで実装できます。
選択肢によって表示する項目を変更
ラジオボタンを選択（クリック）すると、選択された項目に応じて質問内容を変えたいという要望は良くありますよね^^
これらの動きはJavaScriptでできることの1つです。
（この動きは上記で説明したCSS制御の仕組と組み合わせて実装しています。）
JavaScriptの経験はりますか？
いつからJavaScriptをはじめましたか？ 年前
JavaScriptに興味を持った理由は何ですか？
入力された内容を元に制御
ショッピングサイトなどで、ユーザーが選択した商品の「単価」と「数量」を掛け合わせて合計額をリアルタイムに計算して表示する機能もJavaScriptでできることの1つです。
商品と個数を選んで下さい
商品： 個数：
合計金額：円
入力フォームの入力内容チェック
会員登録フォームなどで、「電話番号の枠に電話番号以外（数字とハイフンの組み合わせ以外）が入力されたらエラーメッセージを表示する」といった入力内容チェック機能は、様々なWEBサイトで見かけると思います。
フォームに入力された内容をチェックするのもJavaScriptでできる機能の1つです。
なお、これらはJavaScript以外にもPHPなどのプログラミング言語を使って作ることもできますが、ユーザーがフォーム（項目）に入力した瞬間（リアルタイム）にチェックする制御はJavaScriptでしか実現することができません。
各項目に内容を入力してキーボードの「Enter」を押すか、適当な場所をマウスで右クリックしてみて下さい。内容が正しく入力されていない場合、エラーが表示されます。
入力例：氏名（かな）に平仮名以外の内容を入力
- 氏名（かな）
-
- 電話番号 (半角数字かハイフンのみ、6〜13桁)
-
- メールアドレス
-
入力文字数のカウント
テキストエリアに入力された文字数をリアルタイムにカウントして表示するのもJavaScriptでできることの1つです。
入力文字数：0
HTML制御とフォーム制御の組み合わせ
上記で解説したJavaScriptの「HTML制御」と「フォーム制御」の組み合わせです。
先ほどのHTML制御の例では、ボタンをクリックしたら、事前に決められた文字がグレーの枠内に追加・変更で表示されましたが、今回はユーザー自身がフォームに入力した内容をグレーの枠内に表示（追加・変更）する動きにしています。
入力された文字を表示（その１）
以下のテキスト枠に適当な文字を入力後、「表示（上書き）」ボタンか「表示（追記）」ボタンを押して下さい。
入力された文字を表示（その２）
こちらは左側のテキストエリアに入力された文字を、右側のテキストエリアで指定した回数、グレーの枠に表示させる例です。
左側のテキストエリアに適当な文字、右側のテキストエリアにそれを表示させる回数（数字）を指定して、「表示」ボタンを押して下さい。
を回
入力された文字をアラートで表示
用途は少ないですが、入力された文字列をアラートで表示させることもできます。
以下の枠に適当な文字を入力して「アラート」ボタンを押して下さい。入力された文字がアラート内に表示されます。
使用例の１つとしては、（上記で紹介した入力内容チェック機能の例とは別の方法として）入力された内容に不備があった場合、このアラートの中にエラー内容を表示させているWEBサイトをたまに見かけます。上記で紹介した入力内容チェックと大きく異なるのは、こちらの場合は「送信」などのボタンを押した時に一気に全ての項目をチェックして表示するということです。（上記の方はリアルタイムに随時表示）。
どういう使い方が正しい・悪いというものではないので、ユーザーニーズ・利用シーンに応じ使い分けるのが良いかと思います。
JavaScriptでできること 〜エフェクト（アニメーション）制御編〜
エフェクト（アニメーション）の制御
これらから説明する「エフェクト（アニメーション）制御」について、もしMicrosoftPowerPointのアニメーションを使った（見た）ことがある方は、PowerPointのアニメーションをイメージして頂くと分かりやすいと思います。
PoewrPointのアニメーションのように、
「マウスをクリックしたら文字や画像をフェードで表示させる」
「一定時間がたったら切り替わる」
といったような、ユーザーのアクション（マウスの操作など）に応じて、WEBページ内のオブジェクト（文字や図など）を動かす場合もJavaScriptが必要になります。
表示/非表示の切り替え（スライド）
WEBページ内の指定した領域（枠）の表示/非表示を切り替える動きはJavaScriptでできる機能の1つです。
こちらでは、スライド効果で表示/非表示を繰り返す動きをJavaScriptで表現しています。
「表示/非表示」ボタンを押すたびに、表示と非表示をスライド効果で切り替えます。
文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章
表示/非表示の切り替え（フェード）
こちらでは、フェード効果で表示/非表示を繰り返す動きをJavaScriptで表現しています。
「表示」ボタンを押すと、最大で3個の図形（四角）を表示します。表示した図形は「非表示」ボタンで1つずつ非表示にすることができます。
1
2
3
拡大・縮小
WEBページ上の指定したオブジェクト（図形など）のサイズを拡大・縮小させるのもJavaScriptでできることの1つです。
「拡大」ボタンを押すと以下の黒い四角が拡大します（1回のみ拡大）。拡大後、「縮小」ボタンを押すと縮小して同じサイズに戻ります（拡大後1回のみ縮小）。
回転
WEBページ上の指定したオブジェクト（図形など）のサイズを回転させるのもJavaScriptでできることの1つです。回転させる角度や方向（時計回り、反時計回り）など設定できます。
「回転」ボタンを押すごとに、時計回りに少しずつ回転します。
移動
WEBページ上の指定したオブジェクト（図形など）のサイズを移動させるのもJavaScriptでできることの1つです。移動方向はどんな方向でも設定させることができます。
「<<」ボタンを押すと左に、「>>」ボタンを押すと右に移動します。
JavaScriptでできるエフェクト（アニメーション）制御についていくつか事例を紹介させて頂きました。（これ以外も多数のエフェクトがあります。）
ただ、これらのエフェクト制御は、それ専用のJavaScriptのプログラムがあるわけではありません。
JavaScriptを書いたことがない方にとってイメージが湧きづらいかもしれませんが、これらのエフェクト制御は、前回（その１）で紹介した「CSS制御」を使って行っているだけです。
そのため、例えば、上記の「移動」の例の場合、「移動」用のJavaScriptが存在している訳ではなく、CSSの「position」プロパティの「left」の位置を、ボタンをクリックしたタイミングで数字を変更しているだけです。
写真制御
最近のWEBサイトでは良くトップページに写真のスライドショーが入っていますよね。
これらのスライドショーもJavaScriptを書くことで実装できる機能の1つです。
以下にスライドショー含めたいくつかの写真制御の例を紹介します。
サムネイル写真をクリック時にメイン写真を切り替え
下部のサムネイル写真（3つ）をクリックすると、上部のメイン写真を切り替えます。
スライドショー
一般的に良くWEBページで見かけるスライドショーと同じ作りです。
一定時間が経過するごとに自動的に写真がスライドで流れます。また、写真左右の矢印や写真下部の丸印をクリックすると前後の別の写真に切り替わります。
これらの写真制御も上記エフェクト制御の最後に説明したように、前回（その１）で紹介した「CSS制御」を使っているだけです。JavaScriptで写真制御用の専用のプログラムがある訳ではありません。
その他、JavaScriptで実装できる機能
WEBサイトで良く見かける以下のような機能もJavaScriptで作ることができる機能です。
フォーム制御
住所検索
会員登録フォームなどで、郵便番号を入力すると、入力された郵便番号情報をもとに「都道府県」「市区町村」の住所情報を自動で入力してくれる機能を見た（使った）ことがある方もいると思いますが、これもJavaScriptでできる機能です。
なお、PHPなどでも類似のことはできますが、ユーザーが入力した時（リアルタイム）に住所情報を表示させたい場合はJavaScriptでしか実装することができません。
漢字→カナorかな変換
こちらもよく見かける機能として、会員登録フォームなどで、「漢字氏名」項目を入力すると、同時に「かな氏名」に平仮名の内容が一緒に入力される動きがありますが、これはJavaScriptで実現できる機能です。
スクロール制御
最近のWEBサイトでは、ページのスクロールに応じてサイトに色々な制御（動き）を加えるものが多く、こらの制御にはJavaScriptが使われています。
以下、よくあるスクロール制御の機能例を紹介します。
ページ上部に戻るアイコンを表示/非表示
最近のWEBサイトではどこもよく見かけるようになりましたが、WEBページをスクロールすると画面右下にページ上部に戻るアイコンを表示して、WEBページの一番上までスクロールを戻すと非表示にする動きも、JavaScriptで実装されています。
当サイトでも実装していますが、ページを少しスクロールすると画面の右下に以下のアイコンが表示されます。
スムーススクロール
そして、上記の「ページ上部に戻るアイコン」と連動させて使うことが多い機能（動き）ですが、「スムーススクロール」というのがあります。
当サイトでも実装していますが、「ページ上部に戻るアイコン」を押すと、シューっと自動的にスクロールしながらページの上部に移動する動きのことです。これもJavaScriptで実装できる機能の1つです。
ヘッダーを表示する
また、こちらも当サイトで実装している機能（動き）ですが、スクロールを少し下げたら、ヘッダー（メニュー）を画面上部に固定して、スクロールを一番上に戻すと元の位置に戻すようにしています。これもJavaScriptで実装できる機能の1つです。
まとめ
JavaScriptでできる具体的な機能（動き）のイメージが少しでもつきましたでしょうか！？
具体例を見ることで、JavaScriptでできること（言い換えると、JavaScriptを使わないとできないこと）のイメージが少しでも湧いたのであれば幸いです。
それでは次は「JavaScriptでできる5つの概要（概念）を抑える」にて改めてJavaScriptでできることの概要・概念の解説を行います。
具体例のみだと、ここまで紹介した機能以外の「JavaScriptでできること」「JavaScriptでできないこと」の区別がつかないと思いますので、改めてJavaScriptの概要・概念を抑えることで、WEBサイト制作・開発時にJavaScriptの必要性の有無の判断ができるようになります。
次の記事は
※JavaScriptに関連する情報として以下のような記事も書いていますので良ければ併せてお読みください。
