【初心者】JavaScript
JavaScriptとは、動的なWebページを作るためのプログラミング言語の一つです。
代表的な機能は、ボタンを押すと画面に別ウィンドウが開く「ポップアップウィンドウ」や、画像が自動送りされる「スライドショー（スライダー）」などの多様なアニメーションです。
その他、システムやアプリ開発などのバックエンドでも用いられています。
1. JavaScriptの特徴
JavaScriptの特徴は、ブラウザだけで動作する点です。
このようにサーバーを介さずにブラウザで動作する言語を、クライアントサイドスクリプトとも言います。
また、汎用性が高く、Webページの表現に関わるフロントサイドと、データベース管理などを行うサーバーサイドの両方で使用できます。
2. JavaScriptとJavaの違い
JavaScriptとJavaは名称こそ似ていますが、用途・開発者・動作環境が異なります。
JavaScriptがWebページの見栄えを向上させる目的で取り入れる言語であるのに対して、JavaはWebページに限らず、アプリケーションや業務システム開発にも用いられます。
動作環境に関しては、JavaScriptはブラウザだけで動作しますが、Javaはコンピュータ処理のためにコンパイルと呼ばれる翻訳作業を行ったあと、Java仮想マシンというソフトウェア上で実行する必要があります。
3. JavaScriptでできること
JavaScriptを取り入れると、Webページにアニメーションなどの動きを付けられます。
また、検索や拡大表示といった機能面でもできることが多くあります。
・ポップアップウィンドウの表示
JavaScriptを学ぶうえで最もスタンダードな処理ともいえるのが、ポップアップウィンドウの表示です。
ボタンをクリックした際や、何らかのエラーが発生した際に、ポップアップを表示させます。
・文字や画像などのアニメーション
JavaScriptを使うと、文字や画像にアニメーションが付けられます。
例えば、「文字を浮かび上がらせる」「色が変わる」「タイピング表示させる」といった表示方法です。
また、画像や背景などに動作を自由に加えられます。
一部の文字にアニメーションを加えたい場合など、手軽に取り入れられるのも魅力です。
・自動スクロール／スライダー
自動スクロールは、画面の下部にある「上矢印」ボタンを押すと上部へ自動でスクロールする機能です。
これもJavaScriptによる処理で行われています。
仕組みとしては、縦長のWebページのある点を絶対位置として指定し、そこからどれだけスクロールしたかをピクセル単位で判断します。
Webサイトのトップページでよく見かける、画像が横方向に自動で切り替わる「スライドショー（スライダー）」も、JavaScriptで実装できます。
こちらはタイマーのように、一定時間ごとに特定の処理が行われるよう指示を出すことで動作しています。
・検索機能・ソート機能の設置
膨大なデータを扱うWebサイトで取り入れると便利なのが、JavaScriptによる検索機能やソート機能です。
検索機能は特定のワードで絞り込みができ、ソート機能は並べ替えに役立ちます。
どちらも指定した領域内に特定のワードがあるかどうかを判断し、一致したリストを取得して処理を行います。
JavaScriptだけでは処理が煩雑なため、「DataTables（データテーブル）」など、JavaScriptをより簡単に記述するためのjQueryライブラリを使う方法もあります。
・アコーディオンの設定
ボタンを押したときに隠れていたメニューが表示される機能を「アコーディオン」と呼び、こちらもJavaScriptで設定できます。
Webサイトの「FAQ（よくある質問）」などで、利用されることが多い機能です。
通常は非表示に設定されており、クリックという操作が加わることで非表示が解除される仕組みです。
・Ajax
JavaScriptとXMLと呼ばれる、文章の見た目を整えるためのプログラミング言語を用いて非同期通信を行う手法を「Ajax」と言います。
Ajaxは「Asynchronous（非同期）＋ JavaScript ＋ XML」の略称です。
非同期通信とは、サーバー側にデータを要求している間でも、ブラウザの操作ができることです。
Ajaxを使用すると、Google Mapで拡大・縮小や移動をした際に画面が真っ白になる状態を回避できます。
◆Ajaxとは
Ajax（エイジャックス）とは、WebページにJavaScriptを使って、ページ全体をリロードすることなくサーバーとデータをやり取りする技術のことを言います。
例として、Webメールを利用しているときに、受信箱を開いている状態で新しいメールが届いたら、ページをリロードせずに新しいメールが表示されるようになっています。
このように、ページの一部だけを更新できるのがAjaxの機能です。
従来のWebアプリケーションでは、ページ間の移動やデータの送受信のたびにページ全体を再読み込みしていました。
すると表示のたびに白紙の画面が表示されるため、処理に時間を要してしまうことがありました。
AjaxではJavaScriptを使ってページの一部だけを書き換えることができるので、サーバーとのデータ通信を行う間も画
4. JavaScriptの書き方の基本
JavaScriptには2種類の書き方があります。
それぞれ、基本の記述方法について解説します。
・JavaScriptの書き方は2種類
JavaScriptの書き方には、JavaScript用のファイルを用意して外部から読み込む方法と、HTML内に<script>というタグを直接書き込む方法の2種類があります。
それぞれの記述方法と、使用するメリット・デメリットは次のとおりです。
4-1. 外部から読み込ませる
外部定義とも呼ばれるこの方法は、JavaScriptの主流の書き方となっています。
HTMLファイルと別に「.js」の拡張子のファイルを作成し、その中にJavaScriptの命令を記述します。
HTMLの<body>タグ内に以下を記述し、「sample.js」のファイルを読み込む指示を出すことで動作します。
<body>
<script src="js/sample.js"></script>
</body>外部定義のメリットは、一度書けば全ページに流用できて手間がかからず、HTMLと別ファイルで更新できるため管理しやすい点です。
他の人から見ても構造が理解しやすく、修正や管理が行いやすいため、複数人で開発をする際などに適した方法です。
デメリットは、数が増えるとページの読み込みが遅くなることがある点です。
4-2. HTML内に直接書き込む
HTMLファイルの<body>タグ内へ、<script>タグで囲んだ命令を直接書き込んでいきます。
例えば、以下のように記述します。
<body>
<script>
document.write("サンプル");
</script>
</body>直接定義のメリットは、読み込みが早いことです。
デメリットとしては、HTMLコードとJavaScriptコードが一つのファイル内に混在するため、管理が煩雑になってしまう点があげられます。
そのため、他の人と共有せずに一人で開発を進める場合や、動作テストを行う際などに利用できる書き方です。