デザイナーだって「動くもの」を作りたい！

デザイナーでもコーディングをすることが多くなってきている昨今ですが、やっぱり、JavaScriptとなるといまいち手が出せない…なんていうデザイナーの人は多いのではないでしょうか。
HTMLだったら、入れ子にしてクラス名もそれっぽくつけていけばかけるし、CSSもdisplay:flexやtransition、animationの登場でだいぶレスポンシブかつインタラクティブなウェブサイトが作れるようになってきています。
しかし、やっぱりHTMLとCSSだけだと「クリックしたら○○にする」というようなものを作ろうとすると範囲が限られてきて、「JavaScriptってのが書ければ、私にも超オシャなウェブサイト作れるのに…」と感じているデザイナーは多いのだろうなと感じています。
なので、今回は大体の人が習ってきている「数学」を使って、JavaScript（プログラム）を書く上で必要な基盤となる知識を説明していきたいと思います。

いやいや、「数学」が苦手だったからプログラミングにも拒否反応があるのよ

わかるーーーーー
数学とか算数ってすぐたかし君を池の周りを歩かせたり、クラスのみんなでみかん分けたりとかして、日常生活に全くマッチしない問題ばかり出て嫌気が指しますよね。
ただ、プログラミングをしていく中でネットの記事を漁っていくと、「あれ、この単語、なんか聞いたことある…」という既視感を覚えることがよくあります。
おそらく、その既視感は「数学」から来るものだと私は思っています。

意を決して、数学に向き合ってみましょう！

みなさん、以下の単元名を覚えているでしょうか…

「1次関数」

ひええええええ
テストで全然点を取れなかった記憶が蘇ってくる方が多いのではないでしょうか！

わかる！
私も点数取れなかった！

ただ、この**「1次関数」**は、結構JavaScriptを学ぶ上で参考になるので、もし、もうちょっと読んでみよう！と思った方はお付き合いいただけると嬉しいです！

「1次関数」を少し思い出してみましょう

1次関数をやる上で、絶対に教わる公式がありました。

出典：https://dekiyo.exblog.jp/24257238/

かわいい字ですね。
これが、中学生のときに学ぶ1次関数の公式です。

ただ、これだとちょっと説明しづらいので、高校生まで時を進めたいと思います。

高校生になると、以下のような表記になって、「は？」って思った方は多いのではないでしょうか。

y = f(x)

f(x) = ax + b

高校生だったときの私は当然ながら「は？」と思いました。そして、「まぁこういうの覚えなきゃいけないのね…」と諦めた記憶があります。

辛い記憶を蘇らせてしまい恐縮ですが、数学を思い出すのはここまでで大丈夫です！

ここからは、この2つの式の謎を解いていきながら、JavaScript（プログラミング）のいろはをまとめていきたいと思います。

`f(x)`の`f`って何よ？

まずはf(x)から説明していきたいと思います。
誰しもが「は？」と思ったこのf(x)ですが、どこからfが来たのかが全くわからないですよね。
ただ、英語圏の人は、数学が苦手でも結構すんなり受け入れられるのではないかなーとTOEICの点数がめちゃくそ低い私は思います。
なぜならこのfは、

function

の**「f」**だからです。

functionは、まんま**「関数」という意味です。
なので、「f(x)」の「f」は関数を意味しているのです！！！**
簡単でした！

「関数」ってなんだよ！！！！

そうなんですよ。**「関数」**が意味わからないんですよね！
調べました。

与えられた文字や数値に対し、定められた処理を行って結果を返す機能のこと。

引用元：https://kotobank.jp/word/%E9%96%A2%E6%95%B0-2523

いやーわからない。
ので、以下のようなイメージを持つと良いのではないかと私は思います。

「好きな指示を登録できる箱」

もうちょっと詳しく説明します。

日常から「関数」を紐解く

みなさんは「家事」は得意でしょうか。
私は著しく家事が苦手です。
家事が好きな方はあまり思わないかもしれませんが、料理をして、おいしく食べて、それを台所に下げて、その台所を見たときに、こんなことを思う方は少なくないのではないでしょうか？

「あー、皿洗いめんどくせー」

本当にめんどくさいですよね！！
手荒れるし！！

ただ、人類は素晴らしい生き物です。
この思いを晴らすべく生み出された、世紀の大発明品がありますよね。それは、、、

**「食洗機」**です！！

食洗機に食器を入れると、洗われて、かつ乾燥された状態で食器が出てきますよね？
最強の家電です。本当にすごい。素敵。画期的。好き。

この食洗機が、我々の敵である「皿洗い」を解決してくれるのには理由があります。
この食洗機に、、、

「入れられた皿を洗ったあとに乾かせ」

という指示が入っているからです！
ちょっと強引ですが、そういう指示が箱に登録されているから、期待通りの結果が出てくるわけです。

なので、すっごく雑な、数学っぽい式に直すと以下のようになります。

f(x) = xを洗って乾かせ

これは、そのままですが、f(x)という箱はxを洗って乾かせという指示が入っているものですよということになります。
これをもうちょっと数学に置き換えてみましょう。

例えば、、、まぁ、本当に例えばですが、、、

「あーーー私、日常的に「2倍してから5を足す」のに、毎回やるのめんどくさいなーーー！」

と思っていたとしたら、

「あ、食洗機みたいに、「2倍してから5を足す箱」を作ればいいのかー！」

となりますよね！！！！！！！
なります！！！！！！！

なので、、、

f(x) = xを2倍して5を足す

という風にすればよいのですが、xを2倍して5を足すなんて日本語でわざわざ言う必要がないので

f(x) = 2x + 5

となるわけです。

これが、関数というものです！
関数は、いろいろな指示を自分なりに登録できるものなのです！

「箱」の入り口

上記の式で、まだ説明していないことがあります。
疑問に思われた方もいるかと思いますが、

f(x) = xを洗って乾かせ

という式を見たときに、「xってなんだよ」という話だと思います。

このxは、タイトルの通り、「箱の入り口」になります。

食洗機に入れる「洗う前の皿」は、レトルトのカレーを食べる場合は「大皿」だったり、スーパーの惣菜で寿司を買ったときなんかは、しょうゆを入れるための「小皿」だったりすると思います。
つまり、どんな皿が来るかがわからないわけです。

なので、xという入り口を作って、皿を引き渡す場所を作ってあげないと、食洗機の利便性は上がりませんよね。

関数にはちゃんとそういう入り口が用意されていて、この入り口のことを**「引数」**と言います。
その引数の名前を、便宜上xという適当な名前をつけてあげていたので、

f(x) = xを洗って乾かせ

という式になったというわけです。

「箱」の出口

上記で、「関数」というものの大枠を掴んでいただけたら大変うれしいのですがいかがだったでしょうか。
もし、うん！なんとなくわかった！と思った方は、こんな疑問を抱いてもらえると嬉しいです。

「洗われた皿はどうなるの…」

そうなんです。
「洗う前の皿」は、「引数」によって入り口ができていたのですが、「じゃあ出口は！？」となると思います。
今度は**「出口」**についてお話していきたいと思います。

「箱に登録した指示」を振り返る

今一度、「食洗機」というものがどういう振る舞いをするのか振り返りたいと思います。

食洗機は、皿を入れてスイッチをピッとすると「洗って乾かせ」という指示を忠実に守ります。
問題はその後です。

洗い終わったあと、その皿に対する指示は存在しないですよね？

なので、洗い終わったあとは、自分で皿を出して、自分で食器棚へしまわなければなりません。。。
ここの指示まで食洗機に登録できたら、どれだけ楽なことか…
ただ、私の知る限り、食洗機には「食器棚へしまう」という機能はついていないので、出口の説明をするにはちょっと難しいです。

なので、ここで新たな家電を登場させようと思います。
夏を乗り切るために人類が生み出した画期的な家電。

「エアコン」

みなさんも使っていますよね？夏だけでなく冬にも重宝される、これも画期的な家電です！

この「エアコン」の**「冷房」という機能**を、数学っぽく、超ざっくりと書くとこんな指示になります。

f(x) = xを冷たくして吐き出せ

※「冷房」においてのxは「空気」とします。

今回例にあげた「冷房」と「食洗機」との大きいな指示の違いは**「吐き出せ」**の有無です。

「冷房」の場合は、「吐き出せ」の指示に対して出てくるものは、**「冷たくなった空気」ですよね。
この「冷たくなった空気」のことを、「戻り値」または「返り値」**と言います。

なので、**「『冷房』は『冷たい空気』を返す」**なんて言い方をします。

つまり、今回の例においての「食洗機」は、返り値がないことになります。
（「終了したら『ピー』って音鳴るし、洗ったあとの水も出るじゃん！」とも言えるのですが、ちょっとややこしくなるので今回はあえて触れないようにしています！）

f(x) = 2x + 5については、例えばxに2とかが入ってくると9という結果を吐き出すところまでできてしまうので、これも返り値がある関数となります。
なので、xが「2」だったとすると、返り値は「9」ということなります！

返り値の行方は…

もう一度「冷房」の式を見てみてください。

f(x) = xを冷たくして吐き出せ

これを見ると、「冷たくなった空気」の存在が宙に浮いてしまっていませんか？
f(x)というものは、あくまでも「指示が登録された箱」なので、返り値はどうなってしまうのかが不明瞭ですよね！
せっかく冷たい空気が生み出されたのだから、それを無駄にはしたくない…

ここで、最初に紹介した式が登場します！

y = f(x)

これは、**f(x)の中の指示によって得られた返り値は、yですよ！**という意味になります。
これで冷気を逃さずに済みました！

「関数」のまとめ

ここで一回、関数についてまとめておきたいと思います！
つまり、f(x) = ax + bとy = f(x)はこんな説明になるのかなと思います！
（あくまでも個人の見解なので、指摘があればおっしゃってください＞＜）

f(x) = ax + bは、f(x)という箱に指示を登録している式
y = f(x)は、f(x)の指示を実行した結果が何者であるかを示す式

ただ、結局=なので、y = f(x) = ax + bと表現できて、中学生のときには何らかの理由で省略してy = ax + bと教えられていたのかな？と個人的には思っています。
（数学の学習指導要領を読めばわかるものなのですかね…？）

「`y`」という箱の登場

先ほど、y = f(x)は、f(x)の指示を実行した結果が何者であるかを示す式なんてことを書きました。

これは、プログラミングっぽく言うと**「f(x)の返り値をyに代入する」**というような言い回しをします。

**「代入」**という言葉は、数学でも聞き覚えのある言葉ではないでしょうか？
さらに、こんな言葉を数学の先生から聞いたことある人もいるのではないでしょうか？

「変数に代入してから計算しなさい」

そう、このyというものは、プログラミングにおいても**「変数」**と言います。

「変数」ってなんだっけ？

「変数」とは、その名の通り**「変わる数」**です。

数学でこんな問題があったとします。

「f(x)=5x+3のときに、f(3)を求めなさい」

高校生のときだったら拒絶反応を示しているところですが、今だったらこんなことを思うと思います。

「xを3にして計算すればいいんだなー」

なので、f(3)の答えは、18となるわけです。

この**「xを3にする」という行為が、代入です。
また、xは、f(3)だったら3、f(5)だったら5なので、xは変数**ということになります。
※つまり、xは変数であり、引数でもあるということになります。

また、y=f(3)だった場合は**yは18で、y=f(5)だった場合はyは28となるので、yも変数**ということになります。

なので、「関数」は指示を保存する場所で、「変数」は値を保存する場所ということになります。
プログラミングにおいて、この2つの「箱」はとても重要な役割を果たします！

ようやくJavaScriptの話！

さて、「関数」と「変数」についてしこたま説明したので、表題の通り「JavaScript」の話をしていきたいと思います。

JavaScriptにおいての「関数」

JavaScriptで関数はどうやって書けばいいのかを記していきます。
まずは手始めに、**「2倍してから5を足す」**をJavaScriptで書いてみます。


function f(x) {
  return 2 * x + 5;
}

上記の関数のポイントを抑えたいと思います。

JavaScriptでは、「関数を書くよ！」という意味で、最初にfunctionと書きます。
f(x)のfは好きな名前をつけることができます。本来であれば、どんな指示（処理）が書いてあるかが想起しやすい名前をつけます。
f(x)のxも好きな名前をつけることができます。本来であれば、どういう引数なのかが想起しやすい名前をつけます。
*は掛け算、+は足し算です。ちなみに引き算は-、割り算は/で表します。
returnは、これまでの言葉を借りると「出口」になります。「この関数は計算した結果を返しますよ」というのを明示してあげる必要があります。

JavaScriptではこのように「指示の箱」を書いていきます！
ちょっと数学より書くことが多いですが、functionやreturnとか書くので、「関数」や「返り値」を想起しやすくなったのではないでしょうか？

JavaScriptにおいての「変数」

せっかくf(x)という関数を作ったので、これの返り値をしっかりと受け取りたいですよね？
次は「変数」をどのように書いていけばいいのかを記していきます。（例えば、xを3にした場合）


var y;

y = f(3);

上記の処理のポイントを押さえていきます。

JavaScriptでは、「変数を用意するよ！」という意味で、varというのを書きます。variableの略です。
y = f(3)という式で、f(3)の戻り値をyに代入することができます。

なので、今このyには11という数字が代入されていることになります。

JavaScriptならではの関数を書いてみる

せっかくだから、やっぱりウェブで使えるような関数も見てみたいですよね！
ただ、JavaScriptでやりたいことといえば、以下のようなことだと思います。

ボタンをクリックしたらポップアップを出したい
タブをクリックしたら、そのタブが選択された状態になってほしい

などなど、夢は広がるばかりだと思います。

例えば、「ボタンをクリックしたらポップアップを出したい」というのを実現するためには以下のようなことをしなければなりません。

HTML上のどの「ボタン」かを特定する
特定したボタンが「クリックされた」という状態を取得できるようにする
ポップアップを出す

どれもめちゃくちゃ難しそうですよね！？
できる気がしないですよね！？

しかし、世の中は案外優しいもので
これらが簡単にできるようにJavaScriptが関数をあらかじめ用意してくれています！！

JavaScriptが用意してくれている関数

全部の関数を紹介することはあまりにも多くてとてもできないので、「ボタンをクリックしたらポップアップを出したい」という処理にだけ必要な関数をお教えしたいと思います。

ボタンを取得する関数

特にボタンに限らないのですが、HTML上の取得したい要素を取得できる関数が用意されています。
例えば以下のボタンを取得したいとします。

<button class="popupButton">ポップアップ出すよ</button>

この場合は以下のようにします。

var button = document.querySelector('.popupButton');

これで、buttonの中に、<button class="popupButton">を代入できました！
簡単！

ポップアップを出す

超簡易的なポップアップを出すには以下の関数を実行するだけで出すことができます。

alert('出したい文字をここに打ちます');

鬼簡単！

「クリックされたら」を実現する

これはちょっと難しいです。
まず「buttonがクリックされたら」を途中まで書いてみます。

button.addEventListener('click');

これで、「ボタンがクリックされたら」が実現できます。
javascriptがaddEventListenerという関数を用意してくれているので、これだけで済みます。

addEventListenerは、引数に'click'というのを入れると、「クリックしたときに処理すればいいんだね！」と認識するような指示が入っている箱になります。

ただ、本来やりたいことは「ボタンがクリックされたら、ポップアップを出す」なので、「ポップアップを出す」を書いていきます。

function popup() {
  alert('ポップアップだよ');
}

button.addEventListener('click', popup);

これで実現することができます。
何をしているかといいますと、、、

最初に「ポップアップを出すという指示を書いた関数」を用意します
- この関数は「ポップアップを出す」という指示だけあればいいので、返り値は特に必要ありません。食洗機の「洗って乾かせ」と同じです。
addEventListenerの'click'の後ろに、「クリックされたらどういう指示を出せばいいか」を登録します。指示を登録するので、ここには「関数」を入れる必要があります。
- プログラミングに限らず数学もですが、関数は引数を複数個用意することができます
  - addEventListenerは「3つ」引数が用意されています。今回は2つ目まで入れれば動くので、3つ目は省略しています。
    - 「引数」には「関数」を入れることもできます。
- addEventListenerは、ボタンのクリックが行われるたびに、popupという指示を都度実行してくれます

このように、JavaScriptを書くときには、JavaScriptが用意してくれた関数を駆使して、実現したい指示を書いていくことになります！

どういう関数があるか、その関数がどういうことができるかを知りたい場合は、
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference
こういうリファレンスを見ると良いです！

プログラムを書くには「関数」と「変数」は必須！

今回は、JSの書き方というよりかは「関数」と「変数」にフォーカスしたので、「どう書くか？」についてはあまり触れなかったので、あれ？と思う方が多いのかなと思いながら書きました。
しかし、ここが理解できると、世の中の記事を読むときに理解度が上がるのではないかなと思い、この記事を書いていました。

やはりこの「関数」と「変数」を理解していないと、「document.querySelector('要素名')で要素を取得してね」なんて言われても、「え？」となってしまうと思いますが、
「あー！これは、JavaScriptが要素を取得するために用意した関数なんだね！」と理解しているだけで、だいぶ理解するスピードが早くなるのではないかと思います。

どのプログラミングでも、絶対に「関数」も「変数」も使いますし、しかも言語に用意されている関数なんかは「よくわからないけど、こう書けばいいのね！」みたいな感じで使う方も多いかと思いますので、この記事で少しでも理解が促進されたらめちゃくちゃ嬉しいです！

最後に

私は特に数学者ではないので、関数や変数の説明で言葉回しがあまりにも変だ！という箇所が多くあると思います。
意図としては「JavaScriptの最初の一歩」を少しでも多くの人に踏み出してもらえたらなと思って書きましたが、説明にブレがあるのも良くないと思うので、修正したほうが良いところがあればご意見ください！

おまけ「jQueryについて」

JavaScriptを初めて書く際に、よく「jQuery」を使う方も多いかと思いますので、「関数」「変数」という観点に沿って、説明しておきます。

読み込むだけで手に入れられる「超便利な関数群」

jQueryは、JavaScriptで書くよりもさらに簡単に色々なことができるように作られたものです。
例えばJavaScriptで

document.querySelectorAll('.hoge')

と書かなければいけないところを、

$('.hoge')

と書けば、「.hogeを取得する」という同じ指示を出すことができます。

これは魔法の呪文ではなく**$()というjQueryが用意した関数を使用しているから実現できています。
つまり$**という名前の関数をjQueryが作っているんですね。

そして、**$()の引数に'.hoge'というような、クラス名などの要素を特定できる文字列を入れて実行すると、$**という指示書の中にdocument.querySelectorAll()などのJavaScriptの関数を使って、要素を取得しているというわけです。（すっごく大雑把に説明しています。本当はもっと複雑な処理が書かれているはずです。）

さらに、**$**で取得した要素は、さらにjQueryが用意した関数を使うことができます。
例えば、$('.hoge').addClass('fuga')とやれば、fugaというクラス名を追加することができます。
もしJavaScriptのみでこの処理を書くとなると、、、

document.querySelectorAll('.hoge').each(function(current) {
  current.classList.add('fuga');
});

と書かなければならなくて、初めての人だとさらに拒絶反応が出てしまうと思います。。。
（これでも前に比べたらJSだけなのにかなり簡単に書けるようになりました…）

なので、本当に初めてJavaScriptやるぞ！という方は、試しにjQueryを使って練習してみると良いかもしれません！