はじめに

JSを使った非同期処理を簡単に書いてみます。
関連事項を次の記事に書いています。

前提

使用するのは、
Ruby on rails
Haml
jQuery
です。
CSSは特に指定しません。

次のファイルを用意します。

Gemfile

gem 'jquery-rails'

これを記述して、bundle installします。
（ディレクトリが、アプリのディレクトリになっている事を確認。pwdというコマンドで確認可能）

application.js

//= require jquery

この記述を忘れるとエラーになります（$とは何ですか？という感じのエラー）

sample.haml.html

= form_with model:@sample, local: true do |f|
  = f.text_area :name, placeholder: "サンプル", class: "sample-form"

.add-text

これがビューデータとなります。

sample.js

$(function(){
 $(".sample-form").on("change" functon(){
   var sampletext = $(this).val;
   $(".add-text").text(sampletext):
 })
});

これが非同期処理の中身になります。

これで、テキストエリアに文章を入力すれば、同じ文章が.add-textの部分に表示されます。

※随時更新します