公開日2020.10.23

最終更新日2022.10.04

働く女性の未経験エンジニア道♯5～JavaScriptのaddEventListenerで扉を開く編～

こんにちわ。
春の緊急事態宣言以降、テレワーク 勤務が続き家にこもることが多いもふもふです。
早いもので春から夏へ、そして今は夏から秋への扉が開きかけています。
せっかくなので、自分の興味がある扉も開いてみることにしました。
HTMLとCSSの勉強を細々と続けCSSでのアニメーションなどにも挑戦してみましたが、もう少し動きをつけたい！
そこで、以前から名前だけは聞いたことがあるJavaScript（ジャバ　スクリプト） 挑戦してみることにしました。本来はちゃんと基礎から学ぶべきなのですが、初心者でもつぎはぎの知識をつなぎ自分の中の新たな扉を開くことができるはず！・・・ということで、

今回のテーマはaddEventListener（アドイベントリスナー） で「サイトTOPページの扉を開く」動作を作ろう！です。

※前回同様、ピンクのマーカー部分の言葉は最後の「おさらいワード」で補足説明があるのでそちらもご参照ください。それでは始めます。

「JavaScriptの役割＝動きをつける」

まずJavaScriptとは？どういうことができるのか等、詳細についてはBREEZE内に詳細な解説記事もございますので、是非そちらもご参照ください。

さて、これまで私の記事ではサイトを人間に例えて説明をしていたので、ここでもざっくりとイメージ的な説明をさせていただきます。

まず復習となりますが・・
HTML（エイチティーエムエル）はWEBページの枠組みなどをつくるもの。
その中にある大きな２つのタグを人間で例えると、

head（ヘッド）タグは脳の中身＝外からは見えない（画面には表示されない）、司令を出す重要な部分。

body（ボディ）タグは目に見える体の各部位＝頭・手・胴体・足の様に他人から見える（画面上に表示される）部分を作ってます。

そしてCSSは例えるなら装飾品やお化粧。
ワンポイントでリップを赤くする、メインの顔を白くする、服全体を黒くする…etc。

こうして、様々な個性のある１つ１つのページが出来上がります。
しかしこのままでは動きがなく、じっとしている状態で絵や写真と同じ。
そこで、今回登場するJavaScriptで動きをつけます。
動きとは、カーソルを合わせるとメニューを表示したり、スライドショーを流したりHTMLのタグにアクセスしてタグの追加や削除・CSSの追加を行うことができます
その他にもJavaScriptではカウントダウンタイマーを作ったり、Webでゲーム作ることもできます。
沢山の可能性を秘めている言語ですが今回は簡単とてもな動作、アラジンが「開けゴマ」と唱えると扉が開くように、画面を“クリックすると画面上の扉が開く動作”を作ります。

「JavaScriptに必要なもの」

JavaScriptのプログラムを作るために必要なものは、プログラムを書くテキストエディタと、動作確認をするためのブラウザ。
つまり、HTMLやCSSと全く同じ環境で作ることができます。
そして、ソースコードは<script>と</script>で囲んだ中に命令を書いていくので、HTMLとルールが似ていますし、CSSと同じように直接HTML内に書き込むことも、別ファイルで作成しHTMLファイルのheadタグでファイルを読み込むこともできます。

HTMLとCSSを足したような書き方なので、この２つを理解していれば比較的チャレンジしやすい言語だと思います。
逆に言えば、HTMLとCSSをある程度理解してから学んだ方が理解しやすいと思うので、いきなり始めるよりもHTML＆CSS⇒次にJavaScriptの順で学習することを個人的にはおすすめします。

「JavaScriptのイベントについて」

さて、実際にコードを書いていきたいのですが今回はclickイベントというものを使います。
イベント とはブラウザ上でユーザが行う様々な動作のことで、clickイベントとはマウスをクリックした時をきっかけに、処理を実行させるいうことです。
このようにイベントの発生をきっかけにして、何かの処理を実行することをイベントハンドラ といいます。

イベントハンドラの使い方
①どの要素に？
②どのイベントが発生した時に？
③どのイベントハンドラを実行するか？

つまり今回の場合は・・・

①画面に表示されている扉の画像に対し（要素）
②メニューボタンをクリックした時だけ（イベント）
③扉を開いて中のコンテンツを表示させる（イベントハンドラ）

この様になります。

①「対象要素の準備」　

まず、ペイントのトリミング編集などで１枚の扉の画像を左半分と右半分に加工し２枚の画像に分割しました。
そしてHTMLファイル内で id名を”top_left” と”top_right” と名付けます。
画像の幅はCSSでwidth: 50%ずつで指定。

<menu class="header_menu">　<!-- TOPのメニューリスト -->
<li id="myopen1">温泉ｎａｖｉ</li>
<li id="myopen2">イタリアン店アクセス</li>
<li id="myopen3">しゃぶしゃぶ店トップ</li>
<li id="myopen4">道の駅スタンプ集</li>
</menu>
<main
<img id="top_left" class="pc_l" src="img/top_left.jpg" alt="扉左">
<img id="top_right" class="pc_r" src="img/top_right.jpg" alt="扉右">
<iframe name="main" frameborder="0"> </iframe>
</main>

これは、イベントが発生したら左の扉を左にスライドさせ、右の扉を右にスライドさせるという感じに、それぞれ違った動きをさせるため別のid名をつけています。
（下から上や左から右など一方方向に幕が開くような感じであれば、画像もイベント処理も1つでOKです。）

そして、先ほどつけたid属性値で要素を取得するために、scliptタグ内でdocumentオブジェクトのgetElementById(‘ID属性の値’)を使用します。

<script>
'use script';
const target1 =document.getElementById('top_left'),
　　　target2 =document.getElementById('top_right');
</script>

これで、idの値が「top_left」の要素、つまり扉の左半分の画像が「target1」にオブジェクトとして代入されます。
同様に、「top_right」の要素が「target2」に代入されます。

表面的には1枚の画像に見えますが、実は2枚の画像が組み合わさっており、それぞれが別々でイベントハンドラ待ちの状態となります。

②「clickイベント」

今回はあるボタンを押したときにclickイベントを実行しますが、そのボタンについても②と同様に要素を取得します。

<script>
'use script';
const target1 =document.getElementById('top_left'),
　　　 target2 =document.getElementById('top_right');
 const myopen1 =document.getElementById('myopen1');
</script>

これで、idの値が「myopen1」の要素（header_menuのリストにある温泉ｎａｖｉ）が、「myopen1」にオブジェクトとして代入されます。

次にクリックイベントの書き方ですが、左の扉と右の扉2つの画像それぞれに別の動きをつけます。
この様に、1つのイベントに複数のイベントハンドラを設定するには、
addEventListene()メソッドを使います。書き方は、

要素.addEventListener(イベントのタイプ, 関数, オプション);
今回は先ほど取得した要素myopen1（ヘッダーメニューの温泉ｎａｖｉの文字）をクリックした時に動作するclickイベントを使用するので、
myopen1.addEventListener(‘click‘,関数, オプション);
となります。

③「イベントハンドラの実行」

最後の仕上げ、扉を開いて中のコンテンツを表示させるです。
イベントが発生した際に実行する関数を指定します。
実行したいこと＝今回は扉の画像を左右に開き新たなページの読み込み。

さて、現在扉の画像は左右それぞれクラス名をpc_lとpc_rとしwidth: 50%;の割合で横幅いっぱいに指定しています。
これを、クリックしたらゆっくりと左側は画面から見えなくなるまで左端に移動、右側は右端に移動する動きを作りたいので、扉の移動後の状態をopen_left、open_rigthというクラス名をつけCSSでtransform: translateX とtransition を使い作成しておきます。

.pc_l{
width: 50%;
float: left; /左扉の画像なので左に寄せる/　
height: 98%;
}
.pc_r{
width: 50%;
height: 98%;
clear: both;
}
.open_left{
transform: translateX(-102%);/X方向にマイナス102％＝左に102％移動/
transition: 2.0s;　/変化が始まって終わるまでの時間２秒/
}
.open_rigth{
transform: translateX(102%);/X方向に102％＝右に102％移動/
transition: 2.0s;　/変化が始まって終わるまでの時間２秒/
}

そして、myopen1の要素をクリックしたら、target1の画像をopen_leftの状態に切り替え、target2の画像をopen_rigthの状態に切り替えるようにclassList.add で指定します。
最後に、扉を開いた後に表示したいページと場所を指定。
今回は、「onsen.html」というHTMLファイルをmainタグ内に表示するように指定しています。

myopen1.addEventListener('click',()=>{
target1.classList.add('open_left');
target2.classList.add('open_rigth');
open("onsen.html","main");
 });

Header部分の「温泉ｎａｖｉ」を押すと、扉がゆっくりと左右に開きます。

左：transform: translateX(-102%)
右：transform: translateX(102%)

扉の中には、onsen.htmlが表示されています。

「タグまとめ」

今回JavaScriptはHTMLの中に書き込んでいますが、HTML内の内容をまとめるとこの様になります。

<menu class="header_menu">
<li id="myopen1">温泉ｎａｖｉ</li>
</menu>
<main>
<img id="top_left" class="pc_l" src="img/top_left.jpg" alt="扉左">
<img id="top_right" class="pc_r" src="img/top_right.jpg" alt="扉右">
<iframe name="main" frameborder="0"> </iframe>
</main>

<script>
'use script';
const target1 =document.getElementById('top_left'),
　　   target2 =document.getElementById('top_right');
const myopen1 =document.getElementById('myopen1'),
 　　 myopen1.addEventListener('click',()=>{
　　　target1.classList.add('open_left');
　　　target2.classList.add('open_rigth');
open("onsen.html","main");
});
</script>

見よう見まねで、いじくりながらでも何となくそれらしいものができました。
やはり扉が開くのをただまっているだけではダメ！失敗しながら何度も開けてみることが大切なのだと感じた、もふもふでした。

「今回のおさらいワード」

◆テレワーク勤務：好きな服やメイクで仕事をしても怒られない、もふもふが転職を決めたきっかけでもあった憧れの働き方。
◆JavaScript：Javaと名前は似ているが別物。「メロン」と「メロンパン」くらいに違うらしい。JavaScriptはWEBページに動きをつけるプログラミング言語。
◆addEventListener：よく使用される主要なイベントの種類では、「load」「click」「scroll」「mousemove」などがある。
◆イベント：JavaScriptではブラウザ上でユーザが行う様々な動作のこと。現実世界でのイベントといえば夏の花火やお祭りだが今年はコロナの影響で中止が多かった。
◆イベントハンドラ：JavaScriptではイベントの発生を受けて処理を実行すること。現実世界ではイベント中止により今年の夏は屋台や出店もなく静かだった（変化がなかった）。
◆transform: translateX：横軸の移動。数が大きくなると右側に、マイナスになると左側になる。transform: translateYになると縦軸での移動になる。
◆transition：直訳では変化だが、変化するまでの時間を設定するタグ。値は秒数かミリ秒で指定。
◆classList.add：classListをadd（追加する）。他にremove（クラスの削除）、contains（クラスが含まれているかの確認）、toggle（クラスが含まれていたら削除、なければ追加）などの機能が指定ができる。