じょんの美ライフ

じょんのび~新潟の方言で「のんびり、ゆったり」~

【わかりやすく解説】そもそもJavaScriptってどんなプログラミング言語?

f:id:RakuRakuOwl:20210416210033j:plain

いつも購読いただき、ありがとうございます。

先日、iPadJavaScriptの学習環境を整えて勉強を始めてみたが

JavaScriptってどんなプログラミング言語なのか?」
JavaScriptでどんなことができるのか?」

といった疑問に対する自分なりの答えを出したから記事に残していく。

結論からまとめると、

 

  • JavaScriptはWebページに「動き」をつけるプログラミング言語
  • 「動き」とはHTMLとCSSのリアルタイム編集
  • プログラミングの編集とは「入力→加工→出力」を繰り返すこと

 

といった内容。

 

ウェブサイトに「動き」をつける

「確かな力が身につくJavaScript「超」入門」のイントロダクションを読んで筆者なりにまとめると、

JavaScriptとは「Webページに「動き」をつけるプログラミング言語

となる。

ちなみに「確かな力が身につくJavaScript「超」入門」では以下のようにまとめられている。

 いきなり結論からいきましょう。JavaScript

 ブラウザを操作するためのプログラミング言語

で、

 HTMLやCSSだけではできないことをする

ためにつかいます。

(出典:確かな力が身につくJavaScript「超」入門 第2版)

確かな力が身につくJavaScript「超」入門 第2版

確かな力が身につくJavaScript「超」入門 第2版

  • 作者:狩野 祐東
  • 発売日: 2019/09/21
  • メディア: 単行本
 

 

例えば以下のような機能はすべてJavaScriptのプログラムでできている。

 

  • ドロップダウンリストやサイドバー
  • スライドショー(写真の自動切替)
  • 読み込み中の表示

 

1つのWebページ上で表示内容を変化させたり、新しい表示を生成するような機能はJavaScriptが実現している。

f:id:RakuRakuOwl:20210416134556j:plain

ドロップダウンリスト(出典:pixabay)

f:id:RakuRakuOwl:20210416134734j:plain

画像が左右に切り替わるスライドショー(出典:楽天市場

f:id:RakuRakuOwl:20210416134921j:plain

読み込み中の表示(出典:JavaScript Anywhere)

ほかにもTwitterFacebookの無限にスクロールできるページや検索結果のリアルタイム表示もJavaScriptでつくられている。

こうしてみると、Webページ上で当たり前のように使っている機能の至るところにJavaScriptが使われているのがわかる。

f:id:RakuRakuOwl:20210416135258p:plain

Twitterの無限スクロール機能はJavaScriptでつくられている

多機能化した最近のWebページには必ずJavaScriptが使われているといっても過言ではない。

 

「動き」とはHTMLやCSSが書きかわること

「じゃあ、具体的にどうやってWebページに「動き」をつけているの?」ってことになる。

結論から書くと、

「リアルタイムでHTMLとCSSを編集して「動き」をつけている」

 

f:id:RakuRakuOwl:20210416133513j:plain

HTML・CSSはWebページを記述するプログラミング言語で、あらゆるWebページはHTMLとCSSからつくられている。

それぞれの機能をざっくり説明すると、

  • HTML→ページのコンテンツ(文字、画像など)を記述
  • CSS→ページのレイアウト・デザイン(背景の色など)を記述

といった感じ。

HTMLとCSSはWebページ上で「何を」「どこに」「どのような配置で」を決めている。

つまり、

JavaScriptでHTML・CSSをリアルタイムで編集する」とは、

「Webページの表示内容をリアルタイムで変化させる」

という意味にほかならない。

このような表示内容の切り替えが画面上の「動き」としてユーザー側に認識されている。

f:id:RakuRakuOwl:20210416142400p:plain

 

「入力→加工→出力」がプログラミングの基本動作

ここまで説明したとおり、JavaScriptはHTMLとCSSを書きかえることでリアルタイムでWebページの表示内容を変化させている。

ここから「HTMLとCSSを書きかえる」という部分をさらに細かい作業に分割していく。

一言で「書きかえる」といってもJavaScriptでつくられたプログラムから見れば以下のような手順でHTMLやCSSの編集を行なっている。

 

  1. HTML・CSSの編集したい部分を読み込む(入力)
  2. 読み込んだ部分を編集する(加工)
  3. 書きかえた部分をHTML・CSSへ書き込む(出力)

 

JavaScriptに限らずプログラミングにおける基本動作は、

入力(インプット)→加工(演算)→出力(アウトプット)

の繰り返しで行われている。

f:id:RakuRakuOwl:20210416230122p:plain

ショッピングサイトの支払いページで数量と商品の金額から請求額を自動計算するプログラムを例にすると、

 

  1. ページ上の数量と商品金額のデータ値をHTMLから取り込む(入力)
  2. 数量×商品金額×消費税の値を計算する(加工)
  3. 請求額を表示するHTML上のデータに計算値を書き込む(出力)

 

という処理が行われている。

まとめ

f:id:RakuRakuOwl:20210412191044j:plain

今回の記事をまとめると、

  • JavaScriptはWebページに「動き」をつける
  • HTMLとCSSの書きかえが表示内容を変化させる
  • 表示内容の変化は「動き」として認識される
  • プログラムの基本動作は「入力→加工→出力」


といった感じ。

今回紹介した以外にもJavaScriptでは色々なことができて、今後JavaScriptの学習をすすめていくうちに紹介予定。

ということで、これからも「じょんのび」とブログ更新していくので、また次の記事でお会いしましょう。最後まで購読いただき、ありがとうございます。