【初心者用】JavaScriptについて少しかじってまとめてみた
公開日: 2022/8/12
更新日: 2022/8/12
タイトル通り、JavaScriptについて勉強してみて、得た知識を軽くまとめていこうと思います。
初心者用、とある通り、極力専門用語は使わないか、噛み砕いて説明していきます。
初心者用、とある通り、極力専門用語は使わないか、噛み砕いて説明していきます。
1. JavaScriptってなに?
JavaScriptとは、プログラミング言語の一種です。
よく言われますが、Javaとは全くの別物です。
名前だけなら似ていますが、派生言語とか、そういうものでもないです。念のため。
よく言われますが、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アプリ内での話を広げていこうと思います。
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ページは表示されます。
-
-
-
おためし
-
-
-
おためしプログラム
-
-
-
結果表示
-
ここが変わります
-
↑こんな感じで書いたHTMLを読み込ませると、
↑こんな感じに表示されるようになります。
しかし、マークアップ言語であるHTMLのみだと、これだけです。
入力バーに何を入力しても、「実行」ボタンを何度押しても、何も起きません。
あくまで「構造」を設定し、表示させただけなのですから、当然ですね。
そこで必要になってくるのが、JavaScript等のプログラミング言語です。
例えば、JavaScriptで↓のようなプログラムを書きます。
- let ipt = document.querySelector('input');
- let btn = document.querySelector('button');
- let elem = document.querySelector('p1');
- btn.addEventListener('click',() => {
- elem.innerText = ipt.value;
- });
一緒に、先ほどのHTMLファイルに、↓の13行目の部分を足してやります(こうすることで、JavaScriptファイルを読み込んでくれるようになります)
-
-
-
おためし
-
-
-
おためしプログラム
-
-
-
結果表示
-
ここが変わります
-
-
さて、やってみましょう。
まず、ページを表示させて、
「あかさたな」と入力して、「実行」ボタンをクリック。すると……
「ここが変わります」の部分が、入力した「あかさたな」に!
……という感じの一例になります。
今回は「実行」ボタンをクリックした際の動作のみでしたが、他にも色々な動的支持をWebページに与えることができます。
要するに、「Webページに動きを与える」ことを可能にしているのが、JavaScriptなのですね。
この他に、Webページ内の文字のフォントの色や背景を設定できるCSS等の言語を合わせたり、他のプログラミング言語を合わせたりすることで、普段私たちが見るWebページができてくるわけです。
4. JavaScriptの学び方
勉強方法についてですが、今のご時世、ネットにも様々な学習サイトがあります。
まず、基礎については、有料のものも無料のものも含めて数多くあります。
基礎概念や文法に始まり、簡単な動作の勉強をし、実際にプログラムを書いていけば、「これを実装したい」と思うことも在るでしょう。
そのように目的を絞り込めるのでしたら、単語をいくつか打ち込んで検索すれば、それについて解説しているブログ記事も多く見つかるはずです。
また、参考書を買って勉強するのもいいでしょう。
ネットで簡単に検索できるのに、わざわざ本なんて……と思われるかもしれませんが、本は本で利点があります。
ちなみに著者は、後者で勉強しました。
購入した本は、↓になります。
スラスラ読めるJavaScript ふりがなプログラミング
こちらは、タイトルにある通り、例文にふりがなが振ってあり、極めて分かりやすく解説されてあります。
ある程度プログラミングに慣れた方には少々回りくどく、物足りなく感じられるかもしれませんが、自信がなくて1からじっくり学びたい方にはぜひともおすすめした本です。
(全くプログラム経験皆無の知人に勧めたところ、「とてもわかりやすかった」との感想をいただきました)
「究極のやさしさ」はハリボテじゃありませんでしたね。
まず、基礎については、有料のものも無料のものも含めて数多くあります。
基礎概念や文法に始まり、簡単な動作の勉強をし、実際にプログラムを書いていけば、「これを実装したい」と思うことも在るでしょう。
そのように目的を絞り込めるのでしたら、単語をいくつか打ち込んで検索すれば、それについて解説しているブログ記事も多く見つかるはずです。
また、参考書を買って勉強するのもいいでしょう。
ネットで簡単に検索できるのに、わざわざ本なんて……と思われるかもしれませんが、本は本で利点があります。
ちなみに著者は、後者で勉強しました。
購入した本は、↓になります。
スラスラ読めるJavaScript ふりがなプログラミング
こちらは、タイトルにある通り、例文にふりがなが振ってあり、極めて分かりやすく解説されてあります。
ある程度プログラミングに慣れた方には少々回りくどく、物足りなく感じられるかもしれませんが、自信がなくて1からじっくり学びたい方にはぜひともおすすめした本です。
(全くプログラム経験皆無の知人に勧めたところ、「とてもわかりやすかった」との感想をいただきました)
「究極のやさしさ」はハリボテじゃありませんでしたね。
5. 最後に
以上、JavaScriptに関する説明でした。
誕生したのは1990年初めと古いですが、度々新バージョンがリリースされ、まだまだ需要の高い言語です。
初心者にとって学びやすいプログラミング言語でもあるので、学ぶ価値は十二分にあります。
もし、本記事で学ぶきっかけを作れたなら、もしくはその一歩への力添えができたなら、嬉しいです。
誕生したのは1990年初めと古いですが、度々新バージョンがリリースされ、まだまだ需要の高い言語です。
初心者にとって学びやすいプログラミング言語でもあるので、学ぶ価値は十二分にあります。
もし、本記事で学ぶきっかけを作れたなら、もしくはその一歩への力添えができたなら、嬉しいです。