# はじまり こんばんは、エンジニアのおうちでまったり、 青少後商売ラジオのニューブルです。 この番組は、エンジニアだからお伝えできることや、 響きになったことなど、楽しくITを学べるチャンネルです。 聞きに来てくださってありがとうございます。 今日は、今さら聞けないIT用語シリーズになります。 世の中のあふれているIT用語ですとか、 英語のよくわからない略称など、 難しいと思って避けてしまいがちな単語。 この放送を聞いて、皆さんがITというものを もっと身近に感じてもらえれば嬉しいです。 また、本シリーズではハッシュタグがありますので、 そちらからこのシリーズの放送も 聞いていただければと思っております。 ということで、今日は前回のところでも ちょっと触れたんですけど、 JavaScriptについてお話しさせていただこうと思っております。 皆さんが普段利用されているウェブサイトですね。 そこのいろんな動きを司っている、 その部分のプログラミング言語が JavaScriptで大体できているという お話をさせていただいたんですけど、 本当にJavaScript、結構ウェブ業界されている方は、 結構じゃないな、ウェブ業界されている方は、 ほぼ100%ぐらいで名前は聞いたことある方は 多いのかなと思っています。 JavaScriptというだけであって、 Javaというプログラミング言語もあるんですけど、 それとの違いは何が違うのみたいなのも、 ちょっとだけ触れようかなと思って、 どうでもいいって言ったらどうでもいいんですけど、 そういう話をちょっとお話ししていこうかなと 思っております。 # JavaScriptって何？ まずはJavaScriptって何?というところから 始めていきたいと思います。 JavaScriptは一言で言うと、 先ほども言いましたとおり、 ウェブブラウザ上でいろんなものを動かすための プログラミング言語になるかなと思います。 こうやって私たちがウェブサイトを見るときに、 ウェブブラウザというのはHTMLとCSSのお話をさせていただいたときに、 確かにHTMLは骨組みで、 CSSは見た目を整える言語という形で、 ちょっと説明させていただいたのかなと思うんですけど、 この2つを使ってウェブページが表示されています。 ただ、この2つのHTMLとCSSだけだと、 CSS最近、HTMLもですけど、 結構本当に機能が追加されていて、 ボタンを押したらいろいろアニメーションじゃないですか、 動きがするみたいなのも、 この2つの言語で実現できたりもするんですけど、 そういうので、JavaScriptが結構そういうボタンを押したら、 画面をセンしたりとか、いろんな何か反応するですとか、 画像がスライドショーで表示されるように、 これも本当にCSSとかだけでできちゃうんですけど、 それとかフォームの入力地のチェック、 これも最近本当にHTMLが良くなっていて、 HTMLだけでエラーチェックをしたりとかするんですけど、 そういうのをJavaScript、インタラクティブな動きってよく言いますけど、 そういう部分を実現できなかったんですけど、 今はできますけど、 そういうところで登場したのがJavaScriptという形になっています。 なので、そのHTMLとCSSで作られたウェブサイトに、 動きとか対話的な機能ですかね、 そういうのを追加する役割をJavaScriptは担っていますと。 例えるならばというと、本当に先ほど言ったように、 HTMLは家の骨組みで、 CSSがその家の見た目とか装飾をする部分で、 JavaScriptはそこの家の仕掛けをいろいろ、 スイッチを押したら電気が点いたりですとか、 インターホンを押したらピンポンという音が鳴ったりとか、 そういうちょっとした仕掛けを追加するみたいな、 この3つでウェブサイトは出来上がっていると考えていただければいいのかなと思います。 このJavaScriptというのは100%じゃないので、 ほぼほぼ全てのと言いますけど、 そのほぼほぼ全てのウェブブラウザに、 標準で搭載というか動くようになっています。 ですので、そのウェブサイト側からJavaScriptが提供されてきて、 これもHTMLとCSSと一緒なんですけど、 その3つのファイルが提供されて、 それをブラウザが解釈して動くという形になっています。 なので、ユーザーさんは、 皆さんは特別なソフトをインストールする必要なく、 ブラウザだけインストールされて、 最初からされているものもあったりしますけど、 そのブラウザをインストールするだけで、 このJavaScriptの機能を利用できているという形になります。 # JavaScriptでできることの具体例 ということで、JavaScriptでできることの具体例を ちょっと説明しようとは思うんですけど、 JavaScriptがなければ今のウェブサイトは 考えられないというか、ないというウェブサービスで いろいろ使われてはいるんですけど、 JavaScriptがなくてもできる部分もあったりとか、 今の本当に先ほども言いましたとおり、 HTMLとCSSが発展しすぎているので、 本当にすごくなっているんですけどね。 そんな感じで、JavaScriptで 昔からできたことになるのかな。 そんなのをちょっとだけお話ししようかなと思います。 まず一つ目は先ほど言ったとおり、 ウェブサイトでの動きをつけることができます。 例えばで言うと、マウスをある画像に持っていったら その画像が変わったりですとか、 いろいろ拡大縮小とかも操作できたりとか、 そういうのもあったりするかなと思います。 あとは、ウェブサイトでいろいろスクロールしたら いきなりふわっと画像が出てきたりですとか、 あとは、ヘッダーが、昔はヘッダーが固定だったりとか、 ヘッダーを振った固定したりとか、 JavaScript、今だったらもうCSSでできちゃいますけど、 JavaScriptでそういうのをやってたりとか、 あとは、次はフォームの入力チェックも、 これもHTMLで今はできますけど、 メールアドレスの欄にメールアドレスの形式に 合わないものとか、 アットマークは絶対メールアドレスできますし、 メールアドレスっていろいろ、 アットマークの前と後ろにいろいろルールがあって、 それのチェックをしたりとか、 それによって入力に合わないものは、 ルールに合わないものは、形式が違いますよ、 みたいなエラーメッセージを表示させたりですとか、 っていうのも、入力欄の下に エラーメッセージ出したりですとか、 ポップアップでエラーメッセージ 表示したり出したりとか、 そういうのができるようになっています。 あとは、パスワード入力欄が、 パスワードの、これもルールですけど、 そのサービスによってルールはいろいろ あるかとは思うんですけど、 その入力のルールに合わないものは、 ちゃんと入力系のパスワードのルールにあったものを 入力してください、みたいな エラーメッセージを表示させたりとか、 そういうのもJavaScriptを使って できるようになっています。 そのパターンはあんまり良くない っていうのが良くないんですけど、 その入力ルールをウェブサイトに持たせる っていうのをあんまりJavaScriptでチェックするって、 あんまり良くないのは良くないんですけど、 ちょっとこれ進んだ話になっちゃいますけど、 入力チェックはどうしてもJavaScriptで 一回チェックするんですけど、 そのJavaScriptって無理やり 通過させることができるんですよね。 これも開発者ツールの、 ちょっとお話しさせていただくときに もしかしたらまたやろうかなとは 思うんですけど、 JavaScriptのデータの操作は全部、 開発者ツールなりいろんなツールを使うことによって 通過することができるので、 そういう入力チェック系はサーバー側に データがやってきてからチェックするっていうのが 当たり前というか、 そういう形にはなっているので、 そのあたりはちょっと余談というか 脱線しましたけど、そんな感じになってます。 続いてが、対話的な機能が 追加できるようになるってことで、 対話的なウェブサービスというか、 そういうのができるようになってます。 対話的っていうと、お話をするんではなくて、 実際にユーザーさんが使っている方が こういう操作をすることによって、 操作をすることか操作をしないことかな、 そういういろんなトリガーによって、 ウェブサイトが変わっていくっていうのを イメージしてもらえばいいかなと思います。 例えば、Googleマップとか、地図をドラッグとかしたら、 拡大しとか縮小とかしたりとか、 あとはスクロールみたいな感じで動かしていけば、 これはドラッグ&ドロップ的な感じかな。 そんな感じすると、地図がどんどん 進んでいったりとかすると思うんですけど、 あの辺もこのJavaScriptを裏で動いてて、 動いたときにJavaScriptが感知して、 動いた先の新しいデータを取りに行く みたいなことをJavaScriptがやってます。 あとは、Twitterとか、TwitterのXとか、 Facebookとか、SNS系ですかね。 ああいうのって、ページを更新しなくても、 新しい広告、広告じゃないな。 新しい投稿がどんどんリアルタイムの部分に 表示されたりとか、 更新しないと出てこないときもありますけど、 そういうある一定期間、一定時間が経てば、 新しい情報を勝手に取りに行って更新する みたいなこともJavaScriptが自動でやってる、 みたいなことになってたりもします。 で、あともう一つは、ウェブアプリケーション 的なものも作れるようになってます。 これ最近で言うと、GmailとかGoogleのサービスって、 ウェブブラウザ上で動くと思うんですけど、 本当にそういったパソコン上のソフトのような、 ああいったもの、そういう高級な機能ですかね、 高機能的なサービスっていうのも、 そのJavaScriptが進化したことによって、 ブラウザ上で動くものが実現できるようになってるのも、 本当にJavaScriptの便利機能というか、 この辺りは一般の方は使わないと思うんですけど、 そういうのが進化したことによって、 いろんなことができるようになっていってる という形になります。 # Javaとの違い ここで冒頭にもちょっと言ったんですけど、 Javaっていうプログラミング言語があります。 これJavaScriptとよく似た名前の プログラミング言語になるんですけど、 実はこの2つ全くの別の言語になる プログラミング言語になります。 これ本当にいろんなところで ネタにされててあれなんですけど、 本当に全く別のものだと思ってもらったらいいです。 これJavaはパソコンとかウェブ系も 使われるんですけど、 デスクトップのソフトで動いたりですとか、 結構昔からあるので、 シェアとしては結構多いのかなと思うんですけど、 本当に幅広い用途で使われる、 その汎用的なプログラミング言語になってます。 JavaScriptは先ほど今まで説明させていただいたとおり、 ウェブ上のブラウザ上で動く スクリプト言語というか形になってます。 本当に名前が似てるだけで、 開発された経緯とか、 本当に文法は英語がベースというか、 プログラミング言語なので、 一緒の部分もありますけど、 ちょっと違いますという形で 覚えていただければと思います。 あとは本当に得意なジャンルも、 先ほどJavaとは全く別の部分に 使われている形にはなっています。 なので本当に例えるならばで言うと、 結構いろんな例えがされることは多いんですけど、 本当にゴルフボールとソフトボールとか、 野球のボールとかソフトボール、 それはちょっと近すぎるかな。 本当にゴルフボールとソフトボール ぐらいの違いと思ってもらったら、 適当に覚えてもらえればいいのかなと思います。 本当にJavaとJavaScriptって、 本当に名前が似てるのって、 いろいろ諸説あるのかもしれないですけど、 本当にJavaScriptができたときに、 マーケティング的な考え方で、 Javaってその当時めっちゃ流行ってたので、 これいいなっていうので、 流行ってるJavaを使おうみたいな、 名前を借りようみたいな感じで、 Javaを使ってJavaScriptって形になっただけらしいです。 なので本当に当時それだけの理由で、 それだけでマーケティングの理由なので、 結構あるのかもしれない。 それがこうそうしてというか、 今だったら本当にJavaScriptは すごい言語になっているので、 今JavaScriptが一歩進んで、 TypeScriptとかそういうのに変わっていってはいますけど、 まだまだJavaScriptが結構多いので、 この最初のマーケティングの理由で、 Javaっていうのを使ったのも、 もしかしたら流行る理由になったのかなと、 機能的な問題だとは思うんですけど、 そういうのもあったのかなと思っております。 # まとめ はい、ということでまとめに入っていきます。 JavaScriptは先ほど説明させていただいた通り、 ウェブサイトに動きですとか、対話的な機能を 追加するためのプログラミング言語になります。 ウェブサイトの見た目を動的に変更させたりですとか、 ユーザーの入力に応じて反応したり、 ページのあとはコンテンツをリアルタイムで 自動で更新したりとか、 本当に私たちのブラウザを使った ウェブのネットサーフィンというか、 ウェブ体験を支える、本当になくてはならない 存在になっているのかなと思います。 あとはちょっとお話しした通り、 Javaというプログラミング言語とは 全くの別物というのを別の言語になりますので、 混同しないようにというか、 そういうのがあっても、 ああ、そんなのあるんだなという感じで 聞いていただければと思っております。 はい、ということで、暇さら聞けないIT用語、 本日はJavaScriptについて解説させていただきました。 今回のこの解説というか説明で、 皆さんのIT用語が、 IT用語の知識がまた一つ深まったなら 嬉しいと思っております。 それでは今日も適当にまったりお過ごしください。 ありがとうございました。