JavaScriptとは？　主な特徴と「できること」を分かりやすく解説

JavaScriptはWebブラウザに搭載された、ブラウザ自身やWebページの表示を操作するための言語です。「ブラウザ本体を操作する」「Webページを操作する」とはどういうことなのでしょうか？　具体例を挙げながら説明します。

» 2025年09月16日 05時00分公開

※本稿は、SBクリエイティブ発行の書籍『これからのJavaScriptの教科書（2024年6月10日発行）』の中から、アイティメディアが出版社の許可を得て一部編集の上、転載したものです。

　JavaScriptはWebブラウザに搭載された、ブラウザ自身やWebページの表示を操作するための言語として1995年に登場しました。それから30年が経ち、いまではPC上で自動化処理をするためにも使われたり、デスクトップアプリの開発にも使われたりと、活躍の範囲を広げています。

JavaScriptとは？

　JavaScriptは、Webブラウザに搭載された、ブラウザ本体を操作する、またはWebページを操作するために生まれたプログラミング言語です。現在ではNode.jsという、ブラウザではなくPC上で動作するJavaScript実行環境もありますが、基本的にはブラウザ本体や表示されているWebページを操作するための言語と考えてよいでしょう。

JavaScriptでできること

　JavaScriptでできることを見てみましょう。「ブラウザ本体を操作する」というのは、ブラウザウィンドウや閲覧履歴などにアクセス・制御することです。例えば、いま開いているウィンドウサイズを調べたり、アラートダイアログを出したりすることができます。

ウィンドウサイズを調べる、アラートダイアログを出す

　それでは「Webページを操作する」とはどういうことなのでしょう？　JavaScriptはブラウザに表示されているページのHTMLを操作して、書き換えることができます。しかも、JavaScriptからHTMLを操作して書き換えると、ブラウザの再読み込みをしなくてもその場でページの表示が変わります。どうやってWebページの表示を変化させるのか、もう少し具体的に見ていきましょう。

　WebページのHTMLにはたいていの場合、複数の要素が含まれています。要素とは、タグと、タグに囲まれ実際にページに表示されるテキストなどのコンテンツをひとまとめにしたものを指します。次図でHTMLの要素と各部の名称を確認しておきましょう。

HTMLの要素と各部名称。タグとコンテンツを合わせたものが「要素」

　JavaScriptによって、プログラミングで要素のコンテンツや属性を書き換えることができます。また、要素を指定した場所に挿入したり、すでにある要素を削除したりすることもできます。

要素のコンテンツを書き換える

属性を書き換える

要素を指定した場所に挿入する

　こうした操作をすることで、実際には何ができるのでしょう？　具体例を見てみます。

JavaScriptによって要素のコンテンツを書き換える

　要素のコンテンツを書き換えると、ページに表示されるテキストを変えることができます。それにより、例えば、通販サイトの商品ページでよく見かけるような、数量を入力するとその場で合計金額を計算して表示させる機能を実現できます。

合計金額を表示させることができる

JavaScriptによって属性の値を書き換える

　属性の値を書き換えると、ページの表示を大きく変えることができます。例えばclass属性の値を書き換えれば、その要素に適用されるCSSを切り替えられます。スマートフォンサイトでよく見かけるハンバーガーメニューは、JavaScriptで要素のclass属性の値を書き換えて、適用されるCSSを切り替える方法で実現できます。

要素のclass属性を書き換えて、適用されるCSSを切り替える

JavaScriptによって要素を挿入する・削除する

　要素の挿入・削除ができると、ページにコンテンツを追加したり、表示されているコンテンツの一部を入れ替えたりできます。例えばブラウザのスクロールに従ってコンテンツを追加することもできるので、SNSのような無限スクロールの動作も実現できます。

スクロールに従ってコンテンツを追加する

　ここまで見てきたHTMLを操作するテクニックはDOM操作と呼ばれています。DOM操作はWebページにコンテンツを追加したり、すでに表示されているものを書き換えたり、プログラムを実行して、その結果を画面に“出力する”操作の1つです。

　ブラウザで動作するJavaScriptには、結果を出力できる場所が大きく分けて3カ所あります。

JavaScriptの結果を出力できる場所

HTMLを操作してWebページを書き換える（DOM操作）
コンソールに表示する
ダイアログを出す

出力する前に、表示するコンテンツを用意する必要がある

　ここまで、JavaScriptでHTMLを書き換えることができ、それによってWebページの表示が再読み込みせずに瞬時に変わること、HTMLの書き換えはプログラムを実行した結果を“出力”する操作であることを見てきました。

　紹介した例のうち、数量を入力すると合計金額を表示する機能を実現するには、商品単価と数量を掛けて合計金額を算出する処理が必要になるはずです。コンテンツをページに表示するためには、事前にデータ（商品単価、数量、ログイン名など）をさまざまに処理・加工する必要が出てきます。

Webページに表示する前のデータの加工処理の例

　こうした処理は全てJavaScriptプログラムで行います。JavaScriptにはそのための機能がたくさん用意されていて、それらの機能を組み合わせてたくさんの処理を実現します。JavaScriptで行う処理や加工を全て挙げたらキリがありませんが、代表的なものをいくつか挙げておきます。

JavaScriptで行う処理や加工の例

数値を計算する
テキスト（文字列）を操作して新たなテキストを作る・検索置換する
データから必要な部分を抜き出す
データを更新する・書き換える
WebサーバやほかのWebサイトから必要なデータを取得する
フォームに入力した内容をWebサーバへ送信する

加工するためには元になるデータが必要

　JavaScriptでプログラムを作る大きな目的は、最終的にHTMLを書き換えるなどの“出力”をすることであり、何かを出力するためにはその前に、出力するためのコンテンツなどを処理・加工する必要があることを見てきました。ここでもう一度、数量を変えたら合計金額を再計算するプログラムを考えてみましょう。再計算をするためのプロセスは次図のような流れになるでしょうか。