JQueryでリアルタイムプレビューっぽいものをつくる

前回の続きで、リアルタイムプレビューの理解をするため、メモを残します。
Railsでmarked.jsを使用してみる

vue.jsに関して

マークダウンのリアルタイムプレビューで参考にさせていただいた記事では、vue.jsを使用しておりました。
Railsにマークダウンのリアルタイムプレビューを実装する

私自身に知識がなかっただけなのですが、vue.jsはフレームワークでした。
他のフレームワーク（ReactやAngular）と比べ、軽量で、View層にだけ焦点を当てている分導入コストが低い、とのことです。
詳しくはドキュメントをご参照ください。
vue.jsのドキュメント

とはいえ、フレームワークであるならば、ふつうにJavaScriptやJQueryを使ってできるだろうと思い、勉強がてら作成してみました。

コード

RailsへのJQueryインストールは割愛します。
参考にさせていただいたサイトは下記になります。
jQueryで色々なフォーム入力値をリアルタイム取得する

まずはビューのHTMLです。
Railsのscaffoldで作成されるフォームを少し修正したくらいです。

<form>
  <%= form_for @post, :url => {:action => :create} do |f| %>
      <div class="form-group">
        <%= f.text_field :title , class: 'form-control', placeholder: 'タイトルを入力してください'%>
      </div>
      <div class="form-group">
        <div id='editor'>
          <textarea name="post[content]" class="form-control" rows="20"></textarea>
          <div id="marked-area"></div>
        </div>
      </div>
  <% end %>
</form>

続いて、Javascript（JQuery）側です。
最終的にはマークダウン出力したいので、関数名はreplaceMarkdownとなっています。

$(function() {
  $("#editor textarea").each(function () {
    $(this).bind('keyup', replaceMarkdown(this));
  });
  function replaceMarkdown(elm) {
    var v, old = elm.value;
    return function () {
      if (old != (v = elm.value)) {
        old = v;
        str = $(this).val();
        $("#marked-area").html(str);
      }
    }
  }
});

JSのコードに関して

まずは、対象のtextareaに関してkeyupイベントと関数をバインドさせます。
keyupはキーボードのキーが押され、上がった際に呼び出されます。
JQuery 日本語リファレンス -keyup-

keyupされたタイミングでreplaceMarkdownを呼びます。

ここで詰まったことが、この変数の宣言です。
参考にさせていただいたサイトにてこの宣言をしておりました。

var v, old = elm.value;

勝手に勘違いしておりまして、v = old = elm.valueで読み進めておりました。
JQueryでは変数をこのように宣言できます。
（どうりでページロード時にvを出力させるとundefinedになるわけです。。。）

var v;
var old = elm.value;
// ↓
var v, old = elm.value;

jQueryを読むために知っておきたい6つの知識

あとはvとoldを比較して、異なれば書き換えます。

  function replaceMarkdown(elm) {
    var v, old = elm.value;
    return function () {
      if (old != (v = elm.value)) {
        old = v;
        str = $(this).val();
        $("#marked-area").html(str);
      }
    }
  }

なお、marked.jsを使用してstrをマークダウンに変換すれば、ちゃんと出力されます。

$("#marked-area").html(marked(str));