JavaScriptでのイベントドリブン
JavaScriptの基本
JavaScriptとRubyの違い
[プログラムが動く場所]
・JavaScriptは、ブラウザ上で動く(サーバー上で動くものもある)
エラー内容は、開発者ツールなどから探す(ログの画面には、エラー内容は出てこない)
・Rubyは、サーバーサイド側で動く
エラー内容は、ログの画面などから探
[JavaScriptの役割とRubyの役割]
・JavaScriptは、DOMをいじって画面を装飾する(ブラウザが全てを行っている。)
※DOM:Document Object Modelの略。(JavaScriptからHTMLの要素にアクセスするためのもの。)
・Rubyは、クライアントからのリクエストをもとにクライアントが求めている情報を提供する(サーバーが全てを行っている)
[JavaScriptの基本操作手順]
①DOMを操作するには、HTMLの要素に[id]や[class]を付与する必要がある。
↓
②DOMの取得コマンドは、以下のようになる。
document.getElementById("id名")
①と②の手順の具体例は、以下のようになる。
<button id="button-delete">削除ボタン</button> <button id="button-update">更新ボタン</button>
document.getElementById("button-delete")
上記コマンドを実行すると以下のようにDOMが取得できる
<button id="button-delete">削除ボタン</button>
以下のようなコマンドを実行すると、取得したDOMを変数に入れて、その変数からテキストを取り出せる。
const buttonDelete = document.getElementById("button-delete")
buttonDelete.innerText
=> "削除ボタン"
以下のようなコマンドを実行すると、画面上の表記を変える事ができる。
const buttonDelete = document.getElementById("button-delete")
buttonDelete.innerText = "デリートボタン"
[イベントドリブンの基本操作手順]
①DOMに対してaddEventListenerを設定することでイベントを設定できる。
addEventListenerの使い方は、以下のようになる。
(取得したDOM).addEventListener('イベントの種類(クリックやホバーなど)',() => {
alert("削除") # ここには、実際の処理内容を記載する
})
具体例は、以下のようになる
<button id="button-delete">削除ボタン</button> <button id="button-update">更新ボタン</button>
document.addEventListener('DOMContentLoaded', () => {
console.log("DOMContentLoaded")
// 削除ボタンのDOMを取得
const buttonDelete = document.getElementById("button-delete")
// 更新ボタンのDOMを取得
const buttonUpdate = document.getElementById("button-update")
// 削除ボタンにクリックイベントを仕掛ける
buttonDelete.addEventListener('click', () => {
// クリックされた時に動く処理
alert("削除！")
})
// 更新ボタンにクリックイベントを仕掛ける
buttonUpdate.addEventListener('click', () => {
// クリックされた時に動く処理
alert("更新！")
})
});
<textarea id="textarea"></textarea> <button id="button">アラート</button>
const buttonAlert = document.getElementById("button")
const textarea = document.getElementById("textarea")
buttonAlert.addEventListener("click",() => {
alert(textarea.value)
})
上記のように[value]を使うと、テキストボックスの要素を取得して、その要素のvalueプロパティを参照すると、テキストボックスの値が取得できる。
[value]は、文字列として取得してくるため数値に変えたい場合は、[parseInt(jsAmount.value)]のようにする。
※[ document.addEventListener('DOMContentLoaded', () => {}) ]もイベントの1つでイベントの設定処理になる。(ブラウザがDOMの解析が終わったらみたいなイメージ。この記述がないとDOMの解析が終わる前に削除ボタンのDOMを取得しようとしてうまく動かなくなる。)
[addEventListenerのアロー関数の引数のeとは？]
下記のような画像アップロード時のプレビューコードがあった時に、
[ビューファイル] = f.file_field :cooking_memory_image, class: 'form-control', id: 'js-cooking-memory-image' - if @cooking_memory.cooking_memory_image.attached? = image_tag @cooking_memory.cooking_memory_image.variant(resize: '350'), id: 'preview' - else = image_tag 'cooking_memory/default.png', id: 'preview'
[javascriptファイル]
document.addEventListener('DOMContentLoaded', () => {
function previewImage(e) {
const file = e.target.files[0]; ①
const reader = new FileReader(); ②
reader.onloadend = function () { ③
const preview = document.querySelector("#preview")
if(preview) {
preview.src = reader.result; ④
}
}
if (file) {
reader.readAsDataURL(file); ⑤
}
}
const cookingMemoryImage = document.getElementById('js-cooking-memory-image');
cookingMemoryImage.addEventListener('change', (e) => {
previewImage(e);
})
});
アロー関数の第一引数には、そのイベントのあらゆる情報（何の要素に・何をきっかけにetc）が入っている
「イベントオブジェクト」なるものが代入されます。
つまり(e) => {のeには、イベントオブジェクトが入っている。
イベントオブジェクトのtargetの値にDOMの中の取得したい値が入っているので、DOMの中の値を取得したい場合は、targetで取得する。
ちなみに、画像アップロード時のコードの意味は以下のようになる。
①は、アップロードした画像のファイルを取得してfileという変数に格納
②は、new FileReaderとする事でFileReaderのインスタンスを作成(このインスタンスは、HTML上でローカルにアップロードされたファイルを読み込むことができる)
③は、FileReaderの読み込みが完了した時にイベントが発生
④は、アップロードしたファイルをエンコードしてプレビューのsrc属性に付与している
※エンコードというのは、アップロードしたファイルをWEBページ上で使えるようにしている
⑤でアップロードされた画像を読み込んでいる
参考記事: JavaScriptのテキストボックスから値を取得する方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン
【JavaScript】addEventListenerの使い方 - Qiita
【10分でマスター】onChangeでフォームの項目をコントロールしよう | 侍エンジニアブログ
【JavaScript】イベントリスナーの引数(e)～トラブル回避の備忘録～ | Logical Studio Blog
