2021年9月15日現場Rails Chapter8-1 JavaScriptでページに変化をつける

ページが読み込まれてからJavaScriptを実行する方法

ページが読み込まれてからJavaScriptを実行する方法は、2種類存在します。Turbolinks機能を有効にしていない場合と、有効にしている場合です。以下に、Turbolinks機能を有効にしていない場合のコードを記載します。

assets/javascripts/task.js

window.onload = function() {
  document.querySelectorAll('td').forEach(function(td) {
    td.addEventListener('mouseover', function(e)
# function(e)の引数eは、eventの「e」です。
# mouseoverはマウスポインタが乗ったときの処理です。
      e.currentTarget.style.backgroundColor = '#eff';
    });

    td.addEventListener('mouseout', function(e) {
      e.currentTarget.style.backgroundColor = '';
    });
  });
});

Turbolinks機能を有効にしている場合、一番上の行を下記に書き換える必要があります。

document.addEventListener('turbolinks:load', function() {

いずれも「ページの読み込みが完了したタイミング」で処理を開始するという意味です。これがない場合、ページの読み込みよりも早い「JavaScriptが読み込まれたタイミング」で処理が実行されますが、ページの読み込みが完了するタイミングでないと　イベントハンドラの定義先となる要素がDOM上に存在せず、期待した挙動が実現しない場合があります。

addEventListenerメソッド

addEventListenerメソッドは、特定のイベントが対象に配信されるたびに呼び出される関数を設定します。下記はaddEventListenerの一般的な構文です。

対象要素.addEventListener(種類, function() {
  
  //ここに処理を記述する
}, false);

上記のjavascriptはDOMを使って、HTMLを操作しています。具体的には、タスクのtd要素にmouseover(マウスを乗せている間)というイベントに対応するイベントハンドラを登録し、その中で、背景色を変更する処理を記述しています。

Javascriptでイベントハンドラを用いることで、ページの遷移なしに画面を動的に変更することが出来るのです。(非同期通信)

DOMとは？

DOMは「Document Object Model」の略。「ドキュメントを物として扱うモデル」。プログラムからHTMLやXMLを自由に操作するための仕組み。

例えばブラウザに表示される文字の色を変更したり、大きくしたりと、Webページの見た目をプログラムで処理をしたい場合があるだろう、しかし何もしていない状態のHTMLファイルではJavaScriptから手を出す事が出来ない。そこでファイルの特定の部分に目印を付けて「この部分」に「こういう事をしたい」という処理を可能にするための取り決めがDOMである。

DOMの特徴

ツリー構造とも呼ばれる階層構造を取る
それぞれノードという言葉で説明される
WEBページとJavaScriptなどのプログラミング言語とを繋ぐ

[画像引用]

CoffeeScriptとは

JavaScriptのコードを生成するためのスクリプト言語です(高級言語）。 Rubyの文法に似ているのが特徴です。

RailsではAsset Pipelineを利用して、CoffeeScriptを自動的にコンパイルしてくれますので、特にコンパイル作業を意識する必要はありません。拡張子を「〇〇.js.coffee」とし、/app/assets/javascriptsフォルダに配置するだけで利用できます。JavaScript に変換されることを前提としています。CoffeeScript を書き、それをコンパイル（変換）したら、JavaScript ファイルができます。

ECMAScript2015(ES2015)という仕様以降、Javascriptでもクラス構文やアロー関数が導入されました。そのため、CoffeeScriptを導入するメリットは以前よりも少なくなりました。

高級言語とは

機械語に近い言語で記述を行う低級言語に対し、高級言語は言語の理解がしやすく、汎用性が高いという利点があります。

Ajaxとは

Asynchronous JavaScript AndXMLの頭文字をとった言葉で、Webブラウザ上で非同期通信を行い、ページの再読み込みなしでページを更新するためのJavaScriptのプログラミング手法です。

rails-ujsとは

Ajaxの送信の部分を JavaScript で実装せずに、よしなにやってくれるJavaScriptのライブラリです。 Rails 5.0 までは jquery-rails を使ってフォームやリンクの Ajax 通信を可能にしていましたが、Rails 5.1 からは rails-ujs として切り出され、jQueryに依存しなくなりました。

Rails 5.1 ではデフォルトで rails-ujs が入っているので、require するだけです。

# app/assets/javascripts/application.js
//= require rails-ujs

これで読み込みが完了します。

JS形式のリクエストとHTML形式のリクエストの違い

[pikawaka 引用]

↑ 上記はremote:trueを指定しているかしていないかの違いです。remote:trueと記述することで、Ajax通信のリクエストをサーバーに送ることができます。つまり、remote:trueオプションをつけることで、サーバーとのやりとりを非同期で行うAjax通信が実行できます。ただし、更新された画面を表示するのはjsで更新する必要があるので、別途記述が必要です。

更新された画面を表示する方法は2通りあり、1つはコントローラーで、head :no_contentと記述することで、HTTPレスポンスを返すとともに、削除成功のajax:successイベント呼び出し、そのイベント内で、DBで削除済みのタスクを表示上でも削除が反映されるような処理を記述します。もう1つは、ビューファイルのjs.erbファイル内で、更新された画面を表示する処理を記述しており、そのファイルに処理が移ることで、新しいビューが表示されます。