横浜駅周辺で激辛料理が食べたくなった時の為のまとめ 2017

kimizuka.hatenablog.com

こんな記事 を書くぐらいには辛い物好きな私としましては、
横浜に「 蒙古タンメン中本 」がやってきたのが嬉しくてしょうが無いわけです。

www.moukotanmen-nakamoto.com

ここで3年ぶりに、横浜辛いものまとめを更新しておきたいと思います。
今回は若干関内方面もはいってます。

---

奴が愛したタンタンメン メーギ・テントーチ

奴が愛したタンタンメン メーギ・テントーチ - Google 検索

いきなり関内方面のお店です。
まず、世の中には「担々麺」と「タンタンメン」があります。
「担々麺」とは、胡麻の風味とラー油の辛さが特徴のラーメン。
「たんたんめん」という音を聞いたときに多くの人はこちらを想像すると思います。

個人的には「担々麺」といったら「四川翔」の「担々麺」がいちばん好きです。
大垣（岐阜）の店ですが。

四川翔 - Google 検索

一方、「タンタンメン」とは、にんにく、ラー油の辛さと溶き卵の甘さが特徴のラーメン。
「元祖ニュータンタンメン本舗」が有名です。

newtantan.com

そう。一口に「たんたんめん」といっても、
同音異義語で2種類のラーメンがある。僕はそう思っておりました。

で、「奴が愛したタンタンメン メーギ・テントーチ」はどちらの「たんたんめん」なのかといいますと、
文字のごとく「タンタンメン」に近いのですが、また全然違ったラーメンに仕上がっているのです。
ラーメンというか、あんかけラーメンのようなドロドロさなんですね。
辛さも申し分なく、個人的にはとても好きなお店です。
個人的おすすめメニューは「えび＆チーズタンタンメンの辛さ4」です。

---

べいらっきょ

Soup Curry べいらっきょ

つぎも関内方面のお店です。
辛いスープカレーといえば、 マジックスパイス が有名ですが、

www.magicspice.net

個人的には、辛さの中に甘みがほしいので、 イエローカンパニー の「豚角煮の辛さ圏外」がとても好きだったんです。
都内に住んでいる時は毎週通っていました。

www.yellowcompany.jp

しかし、いまは横浜住まい。
横浜でイエローカンパニーっぽいスープカレーが食べたかったら、
迷わずべいらっきょだと思います。

個人的おすすめメニューは「広島産カキカレーのレベル6」です。

---

元祖カレータンタン麺 征虎 総本店

元祖カレータンタン麺 征虎 総本店 - Google 検索

横浜駅でもなければ関内駅でもなくなりました。
最寄り駅は黄金町です。

まず、世の中には「担々麺」と「タンタンメン」がありまして、
デジャビュなんで違いの説明は省略しますね。

で、こちらの「たんたんめん」は「タンタンメン」です。
カレーがかかってます。

ただ、個人的にカレー×麺に関しては、
「麺屋 波 wave」の「カレーつけ麺の敦盛、激辛、麺少なめ」が最強だと思っているので。
鎌倉の店なんですけどね。

麺屋 波 wave - Google 検索

カレータンタン麺を頂きました。レベル7でも大丈夫でした。

---

蒙古タンメン中本 横浜

www.moukotanmen-nakamoto.com

11月1日にオープンしてから何回か見に行っているのですが、
まだまだ行列がすごく、諦めて帰ってくる日々でした。
40分ぐらい並んだら入ることができたのですが、
そこでわかったことは、行列は店の外だけではないということ。
店内にも10人ぐらい並んでいました。
個人的には冷やし味噌ラーメン一択です。

---

鶴一家

www.dandan.cc

ようやく横浜駅周辺のお店です。
家系ラーメンを順当に辛くした感じのラーメンです。
「地獄ラーメンの激辛」を頂きました。辛さ的には余裕でした。

---

横濱ハイハイ樓 横浜西口店

鶴一家 - Google 検索

こちらも横浜西口のお店です。
メニューに「ハイカラ麺」という。ピリ辛のラーメンはあるものの、実はラーメン自体はあんまり辛くありません。
ただ、テーブルの上に生唐辛子がおいてありまして、それをがんがん入れることでそれなりの辛さのラーメンを生成することができるのです。

---

大勝軒 横浜西口店

www.tai-sho-ken.com

横濱ハイハイ樓のほぼ正面にあるお店です。
「激辛そば」を頂きました。
辛辛魚 + 台湾ラーメン のような感じでした。
横濱ハイハイ樓の「ハイカラ麺」よりは辛いですが、まだまだ余裕の辛さでした。

今回は以上です。
ちょっと遠いんですが、
「奴が愛したタンタンメン メーギ・テントーチ」 の 「えび＆チーズタンタンメンの辛さ4」と、
「べいらっきょ」の「広島産カキカレーのレベル6」はとてもおすすめですよ。

横浜駅周辺ですませたい時は、しばらくは「蒙古タンメン中本」の「冷やし味噌ラーメン」を食べようと思います。

delegateを仕上げよう 2017

ライブラリは、jQuery、Vue、React、PixiJSなどなど、
タスクランナーは、Grunt、Gulp、webpackなどなど、
これまで、いろんなものをつかってウェブフロントの開発を行ってきましたが、

最近Noライブラリ、Noタスクランナーで、
普通にJavaScriptを書くことが増えております。（余談ですがCSSは面倒すぎるのでCompassをつかっています）

で、先日、生のJavaScriptを書いていたとき、
「ここはデリゲートで処理しよう」と思ったの瞬間があったですが、
ふと、昔自作したデリゲート関数の存在を思い出しました。

kimizuka.hatenablog.com

kimizuka.hatenablog.com

kimizuka.hatenablog.com

(function(win, doc) {
    
    "use strict";
    
    var room = doc.querySelector("#room");
    
    delegate(room, "click", ".member", function() {
        alert(this.id);
    });
    
    function delegate(parent, eventName, selector, callback) {        
        parent.addEventListener(eventName, function(evt) {
           
            (function checkTarget(target) {
                if (target.matches(selector, parent)) {
                    callback.call(target);
                } else {
                    if (target === parent) {
                        return;
                    } else {
                        checkTarget(target.parentNode);
                    }
                }
            })(evt.target);

        }, false);
    }
    
})(this, document);

こちらが3年前につくったデリゲートの最終版のようだったので、
早速つかってみたのですが、

愕然としました。

おいおい。3年前の自分はこれで満足していたのかと。

そう。このコードには大きな問題点が隠されていたのです。

問題点1 targetにdocumentを渡すと、エラーを吐く

jQueryでいうところのlive的な処理を書くとエラーを吐きます。

 if (target.matches(selector, parent)) {

この部分、targetがmatchesを持っていることが期待されていますが、
documentはmatchesを持っていないからです。

解決策

 if (target.matches && target.matches(selector, parent)) {

という感じで、
targetがmatchesを持っていることを確認してから叩くというように改修しました。

問題点2 結局どの要素でイベントが発火したのかがわからない

evt.targetにはtargetで渡したDOMが入るので、結局どの要素でイベントが発火したのかがわからず困りました。

解決策

evt.delegateTarget = target;

evtにdelegateTargetというキーを追加して、イベントが発火したDOMを特定できるように改修しました。

問題点3 インデントがスペース4つ

時代を感じました。
3年前の僕はスペース4つ派だったようです。

解決策

いまの僕はスペース2つ派なので、インデントをスペース2つにしました。

完成したデリゲート関数

function delegate(parent, eventName, selector, callback) {
  parent.addEventListener(eventName, function(evt) {
    (function checkTarget(target) {
      evt.delegateTarget = target;

      if (target.matches && target.matches(selector, parent)) {
        callback.call(target, evt);
      } else {
        if (target === parent) {
          return;
        } else {
          checkTarget(target.parentNode);
        }
      }
    })(evt.target);
  }, false);
}

いかがでしょう。
自分で使うぶんには困ることがなくなりました。
3年後にまた確認してみようと思います。

JavaScriptでクラス定数を継承したいという想い

いままでクラス定数は static と get をつかって書いていました。

class Klass {
  static get CONST() {
    return {
      HOGE : 1,
      FUGA : 2,
      PIYO : 3
    };
  }
}

console.log(Klass.CONST.HOGE); // => 1

なんとなくCONSTというオブジェクトの中に定数を入れるという書き方をしていたのですが、
継承すると親クラスのものを辿れなくなるという問題点がありました。

class SuperKlass {
  static get CONST() {
    return {
      HOGE : 1,
      FUGA : 2,
      PIYO : 3
    };
  }
}

class SubKlass extends SuperKlass {
  static get CONST() {
    return {
        PIYO : 4,
        PON : 5
    };
  }
}

console.log(SubKlass.CONST.PIYO); // => 4
console.log(SubKlass.CONST.PON); // => 5
console.log(SubKlass.CONST.HOGE); // => undefined 1が出て欲しい！

今回はこれの解決策を考えます。

解決策1 CONSTオブジェクトを廃止する

class SuperKlass {
  static get HOGE() {
    return 1;
  }

  static get FUGA() {
    return 2;
  }

  static get PIYO() {
    return 3;
  }
}

class SubKlass extends SuperKlass {
  static get PIYO() {
    return 4;
  }

  static get PON() {
    return 5;
  }
}

console.log(SubKlass.PIYO); // => 4
console.log(SubKlass.PON); // => 5
console.log(SubKlass.HOGE); // => 1

ものすごく簡単に解決します。
が。個人的にはCONSTオブジェクトでまとめたい。
深い意味はないんですがCONSTオブジェクトでまとめたいのです。

解決策2 親のCONSTオブジェクトにマージしてリターンする

class SuperKlass {
    static get CONST() {
        return Object.assign(super.CONST || {}, {
            HOGE : 1,
            FUGA : 2,
            PIYO : 3
        });
    }
}

class SubKlass extends SuperKlass {
    static get CONST() {
        return Object.assign(super.CONST || {}, {
            PIYO : 4,
            PON : 5
        });
    }
}

console.log(SubKlass.CONST.PON); // => 5
console.log(SubKlass.CONST.PIYO); // => 4
console.log(SubKlass.CONST.HOGE); // => 1

Objectアサインをつかえば解決できます。
確実に親クラスが存在し、かつ親クラスがスタティックなCONSTオブジェクトを持っているのであれば、単純にマージすればよいのですが、そうとは限らないので、super.CONSTがFalsyな値の場合は空のオブジェクトを使うようにしています。

ここまでして、クラス定数をCONSTオブジェクトにまとめたいかと言われれば謎です。