先日、会社の新人の方向けの学習素材として「JavaScript 超初心者」なるものを作成しました！筆者自身もJS勉強中の身ではありますが、何かの参考になればという事でこちらにも記載させていただきました。
このJavaScript 超初心者ガイドでは、そもそもJavaScriptとは何なのか、またJavaScriptを使った簡単なコーディングが出来るように解説をしていきたいと思います。（一応本ガイドを書いている私自身、まだまだJavaScript勉強中の身でありますので「ここの解釈おかしいよ」、「ここ間違ってるよ」等あれば随時ご指摘いただけますと幸いです！）
##JavaScriptってそもそも何？？
さっそくですが「JavaScriptってそもそも何なの？」という部分からお話をさせてください。JavaScriptって、単体でそれがなんなのか説明がしづらいので以下では一旦その他のHTMLやCSSが担っている役割などと合わせて解説してみます。
###HTML、CSS、JavaScriptを人の体に置き換えて考えてみよう！
HTMLやCSS、JavaScriptがそれぞれどんなものか考えるとき、個人的にはそれぞれ人の体のパーツにあてはめて考えるとすごくイメージがしやすいと思っています。具体的には以下の図のような関係性になっています。
そもそもHTMLやCSSはWebサイトを作るときに使う言語なのですが、JavaScriptもそれらと同様に「Webサイトを作る際に使用する言語」だと考えてもらえればOKです！
当然ですがそれぞれの言語にはそれぞれの役割があり、そちらに関しては↑のイラストで示した通りとなっています。
HTML：Webサイトの骨組み、骨格を作る役割をになっています。
CSS：Webサイトの見た目を決める役割を担っています。
では肝心の、**「じゃあJavaScriptは人の体で表すとどうなるの？？」**という部分ですが、
JavaScriptは「しゃべる、歩く、食べる」など動作を付与する役割を担っています。
いまいちイメージしづらいようであれば「JavaScriptはWebサイトに動きを付けてあげる役割」をしていると覚えてあげてください。
##実際にJavaScriptを使ってWebサイトに動きを付けてみよう！
いきなり！？と思うかもしれませんが、百聞は一見にしかずということですごく簡単な機能をJavaScriptを使って作ってみましょう！
以下今回つくってみる機能の説明から順序立てて説明をしていきます。
###1. 今回作る機能 ー ボタンをクリックすると背景色を変更できるようにしよう！ ー
今回はJavaScriptを使って、ページ内のボタンをクリックするとページ全体の背景色が変わるような機能を作ってみたいと思います。（完成品はこちら https://jsfiddle.net/6jf1qwxs/2/ ）
「Click Here!」をクリックすると、、
一瞬で背景色が変わりました！
###2. 作る前の下準備
上記で説明したようなページを作るにはテキストエディタ（VSCode、Sublime etc...）が必要となりますが、制作環境が手元にない方は以下のようなウェブ上でコーディングができるサービスを利用しましょう！
このガイドでも実際に以下のJSFiddleを利用することを想定して解説を進めていきます。
- JSFiddle(オススメ！) - https://jsfiddle.net/
- Codepen - https://codepen.io/
####HTMLとCSSをコピペ
本ガイドではJavaScriptの解説を中心に進めていきますので、一旦HTML、CSSについては解説は行いません。まだHTML、CSSの理解がまだちょっと、、という方も今回は一旦以下の手順に従ってHTMLとCSSはコピペして作業をすすめましょう。
今回使用するHTML、CSSは以下の通りです。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body class="bg">
<p class="button">
Click Here!
</p>
</body>
</html>
.bg {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}
.button {
display: inline-block;
padding: 10px 20px;
color: #fff;
font-weight: 700;
background: #369cd6;
border-radius: 100px;
}
JSFiddleにアクセスすると、HTML、CSS、JavaScriptを記入できるページが立ち上がるので、上記のコードを以下の図の通り、それぞれHTML、CSSの記入欄にコピペをしてみてください！
コピペが完了したらCntrl＋Sを押して保存してみましょう。すると以下のようにボタンを含んだページが完成します。
###3. 実際にJavaScriptを書いてみよう！
さぁ準備は整いました！あとは実際にJavaScriptを記述してきましょう！
ここではまず前段として、JSFiddleのようなオンラインのテキストエディタを使わずに実際の案件などでJavaScriptを記述するときの記載方法をご紹介します。そしてその後基本的な文法などの解説を進めていきます。
####実際の案件ではJavaScriptはどこにどうやって書くの？？
お気づきかもしれませんが、当然上記でご紹介したJSFiddleのようなサービスは実際の案件で使うことができません。
では実際の案件ではJavaScriptはどこに、どうやって記述をするのでしょうか。
#####1. HTMLファイル内に直接記述する
JavaScriptを記述する方法の1つは、HTMLファイルに直接記述するという方法です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body class="bg">
<p class="button">
Click Here!
</p>
<script>
/* HTMファイルの中にJavaScriptを記述するときは、このようにScriptタグの間に書いてあげましょう！ */
</script>
</body>
</html>
上記のコードをみるとわかるかと思いますが、HTMLファイルに直接JavaScriptを書く際は必ず**「ここからJavaScriptの記述が始まるよ！」という目印のため（scriptタグ）の間にコードを記述します。**また記述場所についてはHTMLファイル内のbody要素の一番下に記載をしましょう。
記述方法：scriptタグの間にコードを記述
記述場所：bodyタグの一番下
#####2. JavaScriptファイルを作成しHTMLファイル内で読み込む
JavaScriptを記述する方法の2つ目は、外部で作成したJavaScriptファイルをHTMLファイル内で読み込むというもので一般的にはこの方法が一番メジャーな方法かと思います。
外部のCSSファイルを読み込むのと同様で、HTMLファイル内に読み込みたいJavaScriptファイルのパスを記載した記述を追加します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body class="bg">
<p class="button">
Click Here!
</p>
<script src="ファイルのパスを記述します"></script>
</body>
</html>
上記のコードを参照すると、1で紹介した方法と同じくscriptタグを使用することがわかると思います。ただ、外部ファイルを読み込む際は、src="●●"部分に読み込みたいJavaScriptファイルのパスを記入する必要があります。
記述方法：scriptタグ src部分にファイルパスをいれて記述
記述場所：bodyタグの一番下
以上実際の案件などでJavaScriptを使用する際の記述方法をご紹介しました。
本ガイドではJSFiddleのJavaScript記入欄にコードを記入する形で作業を進めていくため、実際に外部ファイルを用意したり、HTML部分にscriptタグを使って記述を追加する必要はありませんのでご安心ください！
####JavaScriptの文法
本ガイドで最も重要といってもいいパートに入ってきました。文法と聞くと途端に「うっ..」と感じられる人もいるかもしれませんが、大丈夫ですそこまで複雑な内容ではありません！
ではまず文法とは？というところからですが、
本ガイド冒頭でもご紹介したようにJavaScriptは**「Webサイトを作る際に使用する言語」です。言語ということは、日本語や英語と同じように文法という一定のルールが存在します。**
ではこれから作る機能を使って実際にJavaScriptの文法がどのような構造になっているのか見てみましょう。
やばいですね。めっちゃむずそうです。
このよくわからない英語の羅列だと途方に暮れちゃうので、それぞれがどんな役割をしているかをまず見てみましょう！
すごく難しそうに見えたコードですが、実際に書いているのは「何を・どうすると・どうなる」という一連の動作を書いているだけなんです。上記のコードをこの構造に従ってさらにシンプルに直したものが以下のものです。
すごく見やすくなりましたね。
ではここで次のステップに進む前に一度要点をまとめます！
－－－－－－－－－－【まとめ】－－－－－－－－－－
どんなに難しく見えるコードも基本的な構造は上記の「何を・どうすると・どうなる」であることに変わりはありません！
実際に自分でコードを記述する際は、作ろうとしている機能を一旦上記3つのパーツに分解してみましょう。そうすることで各パーツごとにどういう記述をする必要があるのかが明確になり混乱するのを防いでくれます。
－－－－－－－－－－－－－－－－－－－－－－－－－
では次に各パーツ（何を・どうすると・どうなる）についてより突っ込んでみていきましょう！
#####1. 何を
今一度作成する機能がなんだったか思い出してみましょう。
今回作ろうとしているのは「ボタンをクリックすると背景色を変更できるようにしよう！」という機能でしたね。
もう気が付いた方もいるかもしれませんが、この「何を」の部分には動作の対象になる要素を入れてあげる決まりとなっています。
今回の例でいうと「クリックする」という動作の対象は当然ボタンですよね。そのためここにはボタンを指す「.button」という記述をいれています。
ただここで**「ちょっとまって！もともとのコードにあった、document.querySelector～みたいな訳の分からない記述はなんなの？！」**という疑問が出てくるかと思います。
たしかに意味わかんないですよね、順を追ってご説明します。
まず初めに「document.querySelector('.button')」が何を意味しているかについてお話しすると、このコードでは「何を」にあたるHTMLファイル内のボタン部分を、コンピューターが理解できる形で記述をしてあげているんです。
コンピューターは私たちとは違って日本語や、英語ではない別の言語をしゃべっている人だと思ってあげてください。その人に「ボタン」とか「Button」という私たちの言葉で指示を出してもわからないですよね。（下のイメージみたいな状況）
なのでここではコンピューターでも理解できるJavaScriptで以下のような指示を出しています。
そうです、ここでは単純に**「HTMLファイルの中から、『.button』というクラス名の要素を探してきて！」**という命令をだしているんです。
（「.button？クラス名？」となった方も安心してください、基本的なCSSの内容がわかればすぐに意味は理解できるので読み終わってからGoogleで「CSS、クラス名」とかで検索してみてください）
実際に序盤でコピーしてもらったHTMLのボタン部分を見てもらうと、
<p class="button">
Click Here!
</p>
HTMLの記述の中に「class="button"」という、クラス名を付けてあげる記述があるのがわかります。
JavaScriptで「何を」を指定する際には、今ご紹介したようにクラス名などの何か目印となるものをHTMLファイルから探してという命令をコンピューターに出すという方法で指定を行います。
そうすることで以下のイメージのようにコンピューターは私たちが何に対してアクションをかけようとしているのか理解できるようになります。
この「コンピューターが理解できるような形で記述」をするという考え方は結構大事で、一見ややこしそうに見える記述でも「コンピューターに読みとってもらえるようにこうやって書いてるんだな」と考えるだけで納得しやすくなったりします。ぜひ頭の片隅に置いておいてくださいね。
－－－－－－－－－－【まとめ】－－－－－－－－－－
- 「何を」では、アクションを起こす対象について記述します。（例：ボタンをクリックすると背景色が変わる機能 → ボタンを）
- 対象について記述する際は、何を指しているかコンピューターにもわかるよう、document.querySelector（'CSSのクラス名'）といった書き方をします。
document.querySelector('CSSのクラス名')
－－－－－－－－－－－－－－－－－－－－－－－－－
#####2. どうすると
「どうすると」についても、基本的な考え方は同じでここも「クリックすると」という部分をコンピューターが理解できるように記述しています。
「addEventListener」という英語の羅列だと難しく感じるかもしれませんが、要はコンピューターに「Event（クリックとか、スクロールとかの動作）をListen（感知する、注意を払っておく）しろよ！」と指示をだしているだけなんです。
でもコンピューターからすると「EventをListenするのは分かったけど、どのイベントをListenするの？」という感じなので、上記のイメージで記載したように「click」等イベントの種類をしっかりと指定してあげる必要があります。
で、このaddEventListenerのすごいところはただイベントを感知しろ！と命令するだけでなく、「そのイベントが起こったら、あらかじめ伝えておいた処理をかけろ！」というところまで指示することができるんです。
そしてこの「処理」こそが次のステップで説明する「どうなる」にあたる部分で、これについてはfunction以降の｛｝内に記述をする決まりとなっています。
－－－－－－－－－－【まとめ】－－－－－－－－－－
- 「どうすると」では、「何を」で指定した要素に対して起こすアクションについて記載します。（例：ボタンをクリックすると背景色が変わる機能 → クリックする）
- アクションの内容を記述する際は、以下のように addEventListener(' ',function( ){ }) という書き方をし、「アクションの内容」の部分にclickといった対象のアクションを記述します。
addEventListener('アクションの内容',function(){})
－－－－－－－－－－－－－－－－－－－－－－－－－
#####3. どうなる
さぁここまできたらもう一息です！
最後のパーツ「どうなる」の部分では「ボタンを（何を）クリックすると（どうすると）」に続く、クリックされたときに起こしたい処理の内容を記述しています。
ちなみに処理の内容は以下のようなものでした。
「背景色が変わる」
ただこれだけだと、ちょっと処理としておおざっぱすぎるのでもう少し細かく指定をしてあげましょう。
- どこの背景色を変えるの？ → HTMLファイル内、body要素の背景色を変えたい
- 具体的に何色？ → 「#f1bf22」という色に変えたい
いい感じですね。では上記を踏まえてもう一度処理の内容をまとめると
「HTMLファイル内、body要素の背景色が #f1bf22 に変わる」
という内容になります。
もうおなじみの流れになってきたのでなんとなく想像した方もいるかもしれませんが、あとは上記の処理内容をコンピューターが理解できるよう以下のような記述にしてあげれば完成です！
また「document.body.style.backgroundColor」という長いブロックが出てきてしまったので分解しながら考えましょう。
まず「document.body」ですが、見覚えがありませんか？？
そうです、「何を」ところで出てきたHTMLファイルの中から対象とする要素を指定するあの表現です！今回の場合はHTMLファイルのbody要素を指定するのでdocument.bodyと直接つなげて記述をしています。
※補足※ なぜ「document.querySelector()」ではなく「document.body」なの？？
たしかに「何を」の部分で登場したコードでは、ボタン部分を指定するのに「document.querySelector('.button')」という書き方をしていましたね。
これには理由があるのですが、ここでは便宜上以下のように考えるとわかりやすいかもしれません。
まず「document.querySelector('.button')」、「document.body」どちらもHTMLの要素を選択しようとしている点に違いはありません。
ただ対象となるHTMLの要素は違うはずです。
- document.querySelector('.button') → HTML内のpタグが対象
- document.body → HTML内のbodyタグが対象
そしてこのpタグとbodyタグ、HTMLのルール上大きな違いがあり、
bodyタグは各HTMLに１つしか存在できない一方、pタグは何度でもHTMLファイル内で使用ができます。
ここで考えてみてほしいのが、そもそもpタグにbuttonというクラス名を付けてあげたのはなぜでしょうか？？
それはボタン部分以外にもpタグが登場した時ごちゃまぜにならないよう目印をつけてあげる必要があるからです。
そう考えると、HTMLファイルに１つしか存在しないbodyには特に目印をつける必要ってないですよね。
そしてquerySelector()という書き方は「指定したクラス名の要素をさがして！」という意味の記述でした。
そもそもクラス名という目印をつける必要のないbodyタグを指定するのであれば、あまり適切ではないですよね。
そのため、HTML内に１つしか存在できないbodyタグについてはquerySelectorなどの指示を出さずにdocument.bodyと記載するだけで指定ができてしまうんです。
「ちょっとややこしいなぁ、、」と思った方は、
- bodyを指定したい！ → document.body
- それ以外の要素を指定したい！ → document.querySelector()
と暗記してしまうのも全然ありだと思います！
ではその後の「style.backgroundColor」について考えましょう。
背景色や文字の大きさ、幅etcなどCSSで調整をする部分に変更を加える場合は、まず「CSSに関して変更をかけますよ！」という目印の「style」と記述を行います。そのうえで具体的にCSSの何を修正するのか項目名をstyleに続けて記述を行う決まりとなっています。
今回は背景色（CSSではbackground-colorと呼ばれる部分）を変更を行うんでしたね。そのためstyle以降にはbackgroundColorと記載をしてあげましょう。
残る記述はいたってシンプルで、上記で指定した「HTMLファイル内のbody要素のbackgroundColor」を#f1bf22と設定するだけなので、続けて = '#f1bf22' と記述をおこないます。
長かったですがJavaScriptの記述は以上で終了となります！おつかれさまでした。
ではここでまた要点をまとめておきます。
－－－－－－－－－－【まとめ】－－－－－－－－－－
-
「どうなる」では、「どうすると」で指定したアクションが起きた後の処理や動作について記述します。（例：ボタンをクリックすると背景色が変わる機能 → 背景色が変わる）
-
処理の内容は、「どうすると」で記述した以下の addEventListener(' ',function( ){ }) 内、「処理の内容」部分に記述を行います。
addEventListener('click',function( ){ 処理の内容 })
－－－－－－－－－－－－－－－－－－－－－－－－－
##まとめ
かけあしではありましたが、初歩的なJavaScriptの内容についてご説明をさせていただきました！
今回流れの中で説明を省略してしまった部分等もあるので、そちらについては後日補足ページを作成予定ですのでそちらについても併せてご参照ください。
また個人的にはJavaScriptにしてもなんにしてもコードを書いてなんぼだと思うので、これからも「一緒にこの機能をつくってみよう！」という解説ページをいくつかアップできればと思いますので、ぜひ興味のある方はそちらもお暇なときに見ていただけるとより理解が深まるかと思います！