【初心者用】JavaScriptについて少しかじってまとめてみた

公開日: 2022/8/12 更新日: 2022/8/12
タイトル通り、JavaScriptについて勉強してみて、得た知識を軽くまとめていこうと思います。

初心者用、とある通り、極力専門用語は使わないか、噛み砕いて説明していきます。

1. JavaScriptってなに?

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

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

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

2. JavaScriptってどんなところで使われるの?

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


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

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

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

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


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

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

3. Webページについて

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


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

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

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

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

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

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

  1.   
  2.     
  3.     おためし
  4.   
  5.   
  6.     

    おためしプログラム

  7.     
  8.     
  9.     

    結果表示

  10.     ここが変わります
  11.   


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


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


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

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

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


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


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

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


一緒に、先ほどのHTMLファイルに、↓の13行目の部分を足してやります(こうすることで、JavaScriptファイルを読み込んでくれるようになります)

  1.   
  2.     
  3.     おためし
  4.   
  5.   
  6.     

    おためしプログラム

  7.     
  8.     
  9.     

    結果表示

  10.     ここが変わります
  11.     
  12.   


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

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


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


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


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


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

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


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

4. JavaScriptの学び方

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

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

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

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


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

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


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

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

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


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

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

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

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

5. 最後に

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

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

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


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