『JavaScript』について聞いたことがあるでしょうか。JavaScriptとは主にWebブラウザの上で動かすことができるプログラミング言語です。PCやスマホには、当然ブラウザがインストールされていますから、ある意味、PCやスマホに最初から入っているプログラミング言語と言えます。本連載では、そんな身近なプログラミング言語JavaScriptを使っていろいろなプログラムを紹介していきます。
JavaScriptとは？
『JavaScript(読み方：ジャバスクリプト)』は、主にWebブラウザで動かすプログラミング言語です。最近の多くのWebサイトでは、積極的にJavaScriptが使われています。もともとWebページは、画像などのメディアは表示できるものの、ユーザーがリンクをクリックして、新規ページを開かない限り、画面上の表示内容を変更することはできませんでした。そこで、JavaScriptが登場し、画面上のコンテンツを切り替えたり、ユーザーの操作に応じて新たに情報を取得して来ることができるようになりました。
例えば、Google Mapsでは地図の描画にJavaScriptが利用されています。地図を見るときに、マウスでドラッグしたり、指でスワイプした時に、地図がスムーズにスクロールしますが、これも、JavaScriptで描画に必要な情報をサーバーから取得するので実現できることです。
-
Google MapsではJavaScriptが多用されている
JavaScriptのない世界のWebサイトは退屈
もちろん、Google Mapsだけでなく、Gmail、Twitter、Facebookなど、どんなWebサイトでも大なり小なりJavaScriptを使って様々な処理を実現しています。そのため、逆に、JavaScriptの実行をオフにしてしまうと、非常に不便になったり、サイトの閲覧自体ができなくなる場合もあります。
JavaScriptがどのように使われているのか確かめるには、JavaScriptをオフにしてみると分かります。Google Chromeの場合、設定の[詳細設定 > プライバシーとセキュリティ > JavaScript]で「許可(推奨)」をオフにすると、その実行を制限することができます。
-
JavaScriptはブラウザの設定でオフにできる
ただし、次の画面のように、大抵のWebサイトでは、JavaScriptをオフにすると、正しく表示されないという警告が表示されます。
-
JavaScriptをオフにすると正しくサイトが表示されなくなる
このように、JavaScriptをオフにしてみると、昨今のWebサービスがいかにJavaScriptに依存しているかが分かります。 JavaScriptのないWebサイトはニンニクを入れないラーメンのようです。
ですから、JavaScriptの使い方、つまり、プログラミングを覚えることで、便利なWebアプリやツールを作ることができます。
なお、JavaScriptはとても便利なプログラミング言語なので、Webブラウザだけでなく、Webアプリの開発やアプリを自動化するためのスクリプトなど、いろいろな場所で使われています。本連載でも今後、Webブラウザ上で動くものだけでなく、JavaScriptの実行環境のNode.jsなどを使ったプログラムも紹介する予定です。お楽しみに。
JavaScriptで一番簡単なプログラムを作ってみよう
それでは、これから、実際にいろいろなJavaScriptのプログラムを作ってみましょう。 以下は、Webブラウザの画面に「こんにちは」と表示するだけのプログラムです。一行だけのプログラムですが、JavaScriptの雰囲気を知ることができます。
alert('こんにちは')
このプログラムを実行するには、どうしたら良いでしょうか。
PCを使うとブラウザだけで実行できて簡単ですが、スマホやタブレットでも実行することができます。もし、スマホやタブレットでJavaScriptの開発を行う場合には、オンラインのJavaScript開発サービスを利用すると簡単です。『CodePen』や『Spck Editor』など、いろいろなサービスがあります。
今回は、簡単なオンラインのJavaScript開発サービスの『JS実行』を使ってプログラムを作ってみましょう。こちらのページにアクセスして、テキストボックス(背景が薄い黄色の部分)に、上記のプログラムを記述します。
-
JavaScriptのプログラムを書いて「実行」ボタンを押すだけ
「実行」ボタンをクリックすると、プログラムが実行されます。
-
プログラムが実行されてメッセージが表示される
どうでしょうか、正しく実行できたでしょうか。大文字でALERTと書いたり、全角文字で書くとエラーになります。JavaScriptでは大文字と小文字、全角半角の違いは別の意味になります。そして、『alert( *** )』と書くと、Webブラウザのメッセージボックスにメッセージを表示できます。
JavaScriptで簡単な計算をしてみよう
次に、簡単な計算を行うプログラムを見てみましょう。
console.log( 10 + 3 )
このプログラムを実行すると、13と表示されます。JavaScriptで「+」「-」「*(かけ算)」「/(割り算)」などの四則演算を計算することができます。
また、『console.log( xxx )』のように書くと、Webブラウザの開発用コンソールにメッセージを出力します。上記のサイトで実行した場合は、実行ボタンのすぐ下に内容が表示されますが、一般的には、開発ツールのコンソールを開くと確認できます。
ブラウザのChromeであれば、[設定 > その他のツール > デベロッパーツール]の[Console]タブを開くとこのメッセージが表示されているのが確認できます(※WindowsでのChromeの場合 [その他のツール]→[デベロッパーツール]または画面で右クリック→検証)。このコンソール画面をはじめ、デベロッパーツールはプログラムを開発するとき、強い味方になってくれます。
-
ChromeでデベロッパーツールのConsoleを開いたところ
また『let 変数名 = 初期値』のように書くと、変数を利用して計算を行うこともできます。以下は、350円のリンゴを2つ、200円のバナナを3つ買ったとき、その税金を含めた支払金額を計算するプログラムです。
let apple = 350
let banana = 200
let taxRate = 1.08
let price =(apple * 2 + banana * 3) * taxRate
console.log( price )
上記のプログラムを実行すると、次の図のように、1404が表示されます。変数を使うと計算に意味を持たせることができるので、計算式だけを記述するよりも、見やすいプログラムとなります。
まとめ
以上、今回は簡単にJavaScriptについて紹介しました。JavaScriptを使うと、みんなに使ってもらえる便利なWebサイトを作ることができます。また、身の回りの仕事を自動化することもできます。これから本連載で、共に楽しくJavaScriptを使っていきましょう。
自由型プログラマー。くじらはんどにて、プログラミングの楽しさを伝える活動をしている。代表作に、日本語プログラミング言語「なでしこ」 、テキスト音楽「サクラ」など。2001年オンラインソフト大賞入賞、2004年度未踏ユース スーパークリエータ認定、2010年 OSS貢献者章受賞。技術書も多く執筆している。
ゼロからはじめるPython 第116回 金額合計ツールでExcel要らず - 合計/整形/コピーのツールを作ろう