JavaScript について知ろう

このレッスンでは、JavaScript の基本的な概念と、押さえておく JavaScript 関連の知識について学習していきます。

このレッスンの目標

• JavaScript の基本的な概念を理解している
• ライブラリとは何か、jQuery とは何かを理解している
• JavaScript で動作する Bootstrap コンポーネントを知っている

JavaScript の基本を理解しよう

まず、JavaScript の要点をまとめると、以下のようになります。

• JavaScript は、ブラウザを操作するためのプログラム言語である。
• JavaScript は、HTML や CSS だけでは出来ないことをする。

それでは、詳しく解説していきます。

「ブラウザを操作する」とは、どういうことか？

JavaScript は、一般的なブラウザである、Chrome、Firefox、Edge、Safari などで実行できるプログラム言語です。JavaScript でなにかしらプログラムを書いておけば、ブラウザはその命令どおりの処理をしてくれます。

ここで少し、ブラウザの機能について確認しておきましょう。

ブラウザの最も重要な役割は、Web ページを表示することです。Web ページは、HTML や CSS、それからいくつかの画像ファイルなどで作られています。（下記イメージ図）

HTML はページのコンテンツ（表示するテキストや画像）を記述するものであり、CSS はその HTML にスタイル情報を提供してレイアウトやデザインを決めるものでした。

この HTML と CSS には重要な特徴があります。それは「一度ブラウザに読み込まれたら変化しない」ということです。

つまり、次のページに行こうとしないかぎり、基本的にブラウザは同じものをずっと表示し続けます。

そのため、HTML と CSS は一度読み込むと変化しない、静止したデータといえます。

反面、JavaScript を使うことによって、これらの静止したデータである HTML や CSS を、その場でリアルタイムに書き換えて、一部のコンテンツを入れ替えたり、デザインを変更して見た目を変化させることが可能になります。

例えば、マナジョブのログイン画面で誤った ID/PW を入力すると、エラーメッセージが表示されるようになっています。（下記イメージ図）

このように、JavaScript を利用すると、Web ページの情報をリアルタイムに書き換えることが可能になっています。

「HTML や CSS だけではできないことをする」とは、どういうことか？

先程は、JavaScript を使うことによって静的なデータを書き換えることができることを説明しました。

次に、JavaScript にしかできない例を紹介します。

【JavaScript のアウトプット処理】

Web サイトを見ていると、ときどき小さなウィンドウが開くことがあります。これは「ダイアログボックス」と呼ばれており、これも JavaScript を使って表示しています。

HTML や CSS を書き換えたり、ダイアログボックスを出したりするのは、JavaScript を使って何らからの情報を Web ページに出力・表示する「アウトプット」の処理になります。

【JavaScript のインプット処理】

アウトプットの処理とは別に、JavaScript で HTML から情報を読取ることもできます。

例えば、JavaScript を使って、フォームに入力された内容や、あるタグに囲まれたテキストを読み取ることなどです。これらは、Web ページから情報を取得する「インプット」の処理といえます。

ここまでのまとめ

ここまでの話をまとめると、JavaScript で重要な役割は次の 2 つです。

• ブラウザに表示されている HTML や CSS を書き換える
• ブラウザに表示されている HTML から情報を読取る

この 2 つの役割（ブラウザを操作する機能）は、HTML や CSS だけでは実現できないため、JavaScript の大きな特徴といえます。

これで、JavaScriptの基本的な解説は以上です。

それでは次に、JavaScriptの周辺知識について確認していきます。

ライブラリや jQuery について理解しよう

Bootstrap の JavaScript 機能は jQuery というライブラリを使って動作しているため、ここでは、ライブラリと jQuery の概要について解説します。

ライブラリとは？

JavaScript でプログラムを書いていると、定型的でよく出てくる処理なのに、コーディングするのが面倒な処理があったりします。

よく利用する定型的な処理なのに、毎回同じようなコードをゼロから書いていくのはとても手間です。

ライブラリとは、そうした定型的な処理を肩代わりしてくれる、プログラミングの便利ツールのようなものです。

例えば、JavaScript で日付を扱うサンプルコードを見てみましょう。

純粋な JavaScript で、今日の日付を表示しようとすると以下のようなコードを記述する必要があります。

const d = new Date(); //Dateオブジェクトを取得する

const year = d.getFullYear(); //西暦を取得する
const month = d.getMonth() + 1; //月を取得する
const day = d.getDate(); //日を取得する

このような面倒な処理を毎回書かなくても済むように、JavaScript では日付操作用のライブラリである Moment.js があります。

• 参考：Moment.js

このライブラリを使えば、先程の面倒なコードも、たった 1 行で同じことが実現できます。

const day = moment().format("YYYY-MM-DD");

このように、本来書くべきコードよりも短くやりたいことが実現でき、直感的にコードの意味が理解しやすいのもライブラリの特徴です。

jQuery とは？

jQuery は、JavaScript のプログラミングでよく行われる HTML や CSS の書き換え、また、イベントの設定や DOM 操作を簡単にできるようにしたライブラリです。

ここで出た「イベント」や「DOM 操作」は、HTML や CSS には存在しない、JavaScript 特有の概念です。

【用語解説 ①：イベント】

イベントは、リンクやボタンをクリックしたり、キーボード操作をしたり、また、ページの読み込みが完了したときや次のページに行く直前など、ブラウザ上で発生する様々なタイミングのことです。

• 参考：MDN - イベントへの入門

【用語解説 ②：DOM 操作】

DOM 操作は、タグに囲まれたテキストや属性を書き換えたり、HTML に要素を追加・削除したり、あるいは CSS を操作したりといった、HTML や CSS を書き換える処理のことです。

• 参考：MDN - ドキュメントの操作

JavaScriptの周辺知識として知っておくべき、ライブラリと jQuery の解説は以上です。

Bootstrap の JavaScript コンポーネントを知ろう

それでは最後に、JavaScript で動作する Bootstrap の機能について確認してみましょう。

Bootstrap では、主に以下の機能が JavaScript で動作するようになっています。

【JavaScript で動作する Bootstrap の機能一覧】

前章までは意識せずに使っていた Bootstrap のナビゲーションバーも、実は JavaScript で動作するコンポーネントでした。

ナビゲーションバーを実装すると、スマホ表示ではハンバーガーメニューが表示され、ボタンをタップするとメニューが開閉しますが、これも JavaScript で動作しています。

【ハンバーガーメニューの開閉イメージ（閉じた状態）】

【ハンバーガーメニューの開閉イメージ（開いた状態）】

次のレッスンからは、この JavaScript 機能の中から「カルーセル」という機能を使って、画像が自動で切り替わるスライドショーの実装方法について解説していきます。

まとめ

このレッスンでは Bootstrap の JavaScript 機能を理解するために、JavaScript の基本と jQuery ライブラリの概要について解説しました。

ここで、もう一度レッスンの目標を提示しますので、目標達成できたかセルフチェックしておきましょう。

• JavaScript の基本的な概念を理解している
• ライブラリとは何か、jQuery とは何かを理解している
• JavaScript で動作する Bootstrap コンポーネントを知っている

また、このレッスンで提示した参考リンクまとめておきますので、レッスン内容を復習する際には、以下のリンク先も参考にしてください。

【参考情報】

• Moment.js
• MDN - イベントへの入門
• MDN - ドキュメントの操作
• Bootstrap 公式リファレンス - JavaScript