勉強日記

チラ裏

【Emacs】skewer-modeを入れた話

Emacs HTML CSS JavaScript 開発環境

skewer-modeを入れた話

  • Vue.jsの勉強中、エディタ-ブラウザ間のマウス往復にウンザリして導入した
    • webpackのHMR使えという話なのですが、入門書の進行上、そうもいかなかったのです

環境

skewer-modeってなに

skewer-mode

  • HTML,CSS,JSについて、emacs-lisp-modeと同じ使用感でバッファをevalできる
    • リロードレスで変更反映・JS実行を行える
  • JSのREPLも提供
    • REPL:Read-Eval-Print Loop
    • まんまブラウザのDevToolsのコンソールみたいな感じ

セットアップ

  1. M-x package-install RET
  2. skewer-modeをインストール

つかう

アタッチ

  1. 例えば、~/vue/chapter1/index.html を編集し、リロードレスで反映したいとする
  2. M-x httpd-serve-directory ~/vue RET
  3. M-x run-skewer RET
  4. ブラウザが立ち上がり、http://localhost:8080/skewer/demo が開く
    (browse-urlに依存しているらしい)
    • すでに8080が使用されていたら8081が使われたりする
  5. http://localhost:8080 には、先ほどhttpd-serve-directoryで設定した~/vueがマッピングされている
  6. ~/vue/chapter1/index.htmlを編集したいので、
    ブラウザのアドレスバーにhttp://localhost:8080/chapter1/index.html を入力

リロードレス編集

  1. emacs上で、~/vue/chapter1/index.htmlのバッファに移動
  2. M-x skewer-html-mode で skewer-html-modeマイナーモードをenabledに
  3. index.htmlに変更を加える
  4. ブラウザへの変更反映はタグ単位で行う。
    反映したいタグにカーソルを移動し、C-M-x (skewer-html-eval-tag)
    • 「body全体」は変更反映できないので注意

JS実行

skewer-repl

M-x skewer-repl RET でJSのREPL(Read-Eval-Print Loop) のバッファが起動する
入力途中なのにEvalされたりしてイマイチ使い勝手が良くなかった

*scratch*

  1. C-x b *scratch*
    • もちろんちゃんとしたバッファを作ってもいい
  2. M-x js2-mode RET
  3. M-x skewer-mode RET
  4. JS書く
    • 例えば、location.reload();
  5. 行末でC-x C-e (skewer-eval-last-expression)
  6. いちいちマウスに手を伸ばさずにページをリロードできる
  7. 複数行実行したければ、ブロックで囲むとよさげ
{
    console.log(1);
    console.log(2);
    console.log(3);
}

原理

WebSocketではない

skewer.js

function skewer() {
    function callback(request) {
        var result = skewer.fn[request.type](request);
        if (result) {
            result = skewer.extend({
                id: request.id,
                type: request.type,
                status: 'success',
                value: ''
            }, result);
            skewer.postJSON(skewer.host + "/skewer/post", result, callback);
        } else {
            skewer.getJSON(skewer.host + "/skewer/get", callback);  // 5.
        }
    };
    skewer.getJSON(skewer.host + "/skewer/get", callback);  // 1.
}

古き善きXHRを使ったポーリングですね

2018年12月13日追記
Cometっていうみたいですね

処理の流れ

  1. client (ブラウザ、skewer.js) は、server (Emacsのhttpサーバー)にGETリクエストを送る
  2. serverは、レスポンスを保留する (pending)
  3. Emacs上で下記のいずれかを行うと、serverはレスポンスを返す
    • skewer系modeのバッファ上でevalする
    • skewer-replになんか入力する
      • RETせず、1文字単位で入力するだけでも
  4. clientは、serverからレスポンスが返ってきたら、これをevalする
  5. clientは、eval結果をserverにPOSTする
  6. serverはレスポンスを保留する(pending)
  7. 以下同様

どっかでタイムアウトか何かで切れたら、client側でskewer()を呼び出して起こしてやる

所感

<button>等の操作はマウスを触らざるを得ないが、
作業の大半をキーボードから手を離さずにできるようになったのはgood