JavaScriptとは、プログラミング言語の一種です。

よく言われますが、Javaとは全くの別物です。

名前だけなら似ていますが、派生言語とか、そういうものでもないです。念のため。

JavaScriptはWebブラウザ上で動くプログラミング言語です。


Webブラウザとは、主にWebサイトを閲覧するために使われるソフトのことです。（閲覧以外にも用いられますが）

今、あなたがこの記事を見るために使っているソフトもWebブラウザです。

有名どころですと、最近サポートが終了した「Internet Explorer」をはじめとして、「Microsoft Edge」「Google Chrome」「Safari」「Fire Fox」なんかがあります。

IT方面に詳しくない方でしたら、ざっくり「インターネットを見る時に使うソフト」という認識でもいいでしょう。


そんなWebブラウザで、ユーザーが操作できるWebページを「Webアプリ」「Webサービス」なんて言われたりしますが、その中でJavaScriptは、ユーザーが直接操作する部分（ユーザーインタフェース、略してUIとも言います）を作るために、主に使われています。

近年は他の言語と組み合わせてWebアプリ以外の分野でも活躍していますが、今回は主にWebアプリ内での話を広げていこうと思います。

先ほど、JavaScriptはWebブラウザのUI方面で主に使われる、と書きましたが、そもそもWebページはどういった仕組みになっているのか、そこを説明していきたいと思います。

表示されている項目について

Webページには、色々な情報が載っています。

例えば文字であったり、ボタンであったり。

それらは、HTMLというマークアップ言語で構成されています。

マークアップ言語というのは、実際に処理を行っているプログラミング言語とは異なり、画面上の文字やボタンなどの構造を構築するものです。

これをWebブラウザが読み込み、解釈することで、Webページは表示されます。

3.   
4.     
5.     
6.   
7.   
8.     

   おためしプログラム

9.     
10.     実行
11.     

    結果表示

12.     ここが変わります
13.   

↑こんな感じで書いたHTMLを読み込ませると、


↑こんな感じに表示されるようになります。


しかし、マークアップ言語であるＨＴＭＬのみだと、これだけです。

入力バーに何を入力しても、「実行」ボタンを何度押しても、何も起きません。

あくまで「構造」を設定し、表示させただけなのですから、当然ですね。


そこで必要になってくるのが、JavaScript等のプログラミング言語です。


例えば、JavaScriptで↓のようなプログラムを書きます。

1. let ipt = document.querySelector('input');
2. let btn = document.querySelector('button');
3. let elem = document.querySelector('p1');
5. btn.addEventListener('click',() => {
6.   elem.innerText = ipt.value;
7. });

一緒に、先ほどのＨＴＭＬファイルに、↓の１３行目の部分を足してやります（こうすることで、JavaScriptファイルを読み込んでくれるようになります）

3.   
4.     
5.     
6.   
7.   
8.     

   おためしプログラム

9.     
10.     実行
11.     

    結果表示

12.     ここが変わります
13.     
14.   

さて、やってみましょう。

まず、ページを表示させて、


「あかさたな」と入力して、「実行」ボタンをクリック。すると……


「ここが変わります」の部分が、入力した「あかさたな」に！


……という感じの一例になります。


今回は「実行」ボタンをクリックした際の動作のみでしたが、他にも色々な動的支持をＷｅｂページに与えることができます。

要するに、「Webページに動きを与える」ことを可能にしているのが、JavaScriptなのですね。


この他に、Ｗｅｂページ内の文字のフォントの色や背景を設定できるＣＳＳ等の言語を合わせたり、他のプログラミング言語を合わせたりすることで、普段私たちが見るWebページができてくるわけです。

勉強方法についてですが、今のご時世、ネットにも様々な学習サイトがあります。

まず、基礎については、有料のものも無料のものも含めて数多くあります。

基礎概念や文法に始まり、簡単な動作の勉強をし、実際にプログラムを書いていけば、「これを実装したい」と思うことも在るでしょう。

そのように目的を絞り込めるのでしたら、単語をいくつか打ち込んで検索すれば、それについて解説しているブログ記事も多く見つかるはずです。


また、参考書を買って勉強するのもいいでしょう。

ネットで簡単に検索できるのに、わざわざ本なんて……と思われるかもしれませんが、本は本で利点があります。


ちなみに著者は、後者で勉強しました。

購入した本は、↓になります。

スラスラ読めるJavaScript ふりがなプログラミング


こちらは、タイトルにある通り、例文にふりがなが振ってあり、極めて分かりやすく解説されてあります。

ある程度プログラミングに慣れた方には少々回りくどく、物足りなく感じられるかもしれませんが、自信がなくて１からじっくり学びたい方にはぜひともおすすめした本です。

（全くプログラム経験皆無の知人に勧めたところ、「とてもわかりやすかった」との感想をいただきました）

「究極のやさしさ」はハリボテじゃありませんでしたね。

以上、JavaScriptに関する説明でした。

誕生したのは１９９０年初めと古いですが、度々新バージョンがリリースされ、まだまだ需要の高い言語です。

初心者にとって学びやすいプログラミング言語でもあるので、学ぶ価値は十二分にあります。


もし、本記事で学ぶきっかけを作れたなら、もしくはその一歩への力添えができたなら、嬉しいです。