Lycolog

皆さんは神戸市と聞くと何を思い浮かべるだろうか？
都会、おしゃれ、洋食、港町、1000万ドルの夜景、六甲山、色々あるだろう。

実は神戸市は農林業や水産業、畜産業も盛んであり割と大抵の食材を手に入れることができる。米は勿論のこと、ゴーヤーやドラゴンフルーツさえ手に入れることが可能だ。水産品としてはわかめや海苔、瀬戸内の魚介類などもあるし、畜産としては牛肉や豚肉だってある。そういう部分もあり、神戸市は食都神戸と名乗っている。

私はここ数年、地産地消に興味があり、つい最近ほぼほぼ神戸市産素材で味噌汁が作れるのではないか？ということに気がついたのだ。

まず神戸市産の味噌、北神みそがあり、これは神戸市産の米と大豆で出来ている。流石に使われている塩は神戸市産ではないが、兵庫県にゆかりのあるものが使用されている。

以下の写真は産直市的なイベントで購入した北神みそだ。イベントで買ったのでパンフレットと謎のチラシが入っていた。

豆腐についても神戸市内の豆腐業者が兵庫県産大豆と神戸の水を使って作っているものがある。この豆腐は兵庫県が認定するひょうご推奨ブランドに指定されている。認定には兵庫県に対するこだわりが多分に求められ、審査基準は結構厳しい。

他の具材についても、わかめ、大根、サツマイモ、しいたけは神戸産があるので、これは作れそうな気がしてくる。
玉ねぎだけは淡路島が近いこともあり、見たことがないのだが、なんとこれもあるらしい。

味噌汁の出汁についてはいりこ、昆布、鰹節は恐らく神戸市産がないのでちりめんじゃこで拵えようと思う。いりこは探せば可能性はゼロではないと思うのだが、漁港の直売所で売られていたものは大分県産のカタクチイワシを神戸市でいりこに加工したものだったので、希望は薄いだろう。

以下の写真はこないだ作った神戸市度の高い味噌汁である。だしの素は使わずにいりこからだしを取って作っているのがこだわりだ。

原材料はいりこ（原産地大分県、加工地神戸市）、味噌（神戸市北区産）、葉付き大根（神戸市西区産）、さつまいも（神戸市西区産）、玉ねぎ（淡路島産）、菌床しいたけ（加古川市産）、わかめ（三重県産）と、結構神戸市産を取り入れられたと思う。そこに外れても県内産、そこを外れても何とか関西地方の品で揃えられた。

実はしいたけも前日まで神戸市北区産があったのだが、味噌汁にすることを忘れて前の夜に焼いて食べてしまい、急遽調達したので市内産が手に入らなかったのだ。それでも一応県産品には拘れたので良かったと思う。わかめについては買いに行ったら売り切れていて入手自体が叶わなかった。

因みに味噌汁を作ったりだしを取るのはこれが二度目であるが、まずまずの出来だった。初めてはこれの二日前にガザミで出汁を取って作ったが、それもまぁまぁよかった。これは二回目の味噌汁なので更に上手くできた。正直上出来といってもいいレベルだ。そんな大変美味しいわけではないが、インスタント味噌汁よりは間違いなく旨いといえる仕上がりだ。

最後に神戸市産の味噌と、豆腐について私が現地で確認した販売所を書いておく。

北神みそ 販売所

兵庫の地豆腐 販売所

神戸市産の野菜が買えるところ

ライフにもあるにはあるが、無難なのは商店街の八百屋に行くことだと思う。ただこれでも取り扱いは限られるので、色んな野菜が欲しい場合に便利なところを紹介する。

一つは先ほど紹介した道の駅 神戸フルーツ・フラワーパーク大沢なのだが、もう一か所ある。

最近ちょいちょい気になっていたのですが、WordPressでGAのURLがURLエンコードされずに生の文字列で出るようになってきています。どうもある時期から切り替わっているようで、URLエンコードされた結果は徐々に減っていて、生の文字列の結果が増えてきています。何故だろう？GAの仕様がある日を境に変わったのかなぁ？

Jestで無限ループ処理をテストするときにループから抜けられなくて困ったのでメモ。

参考までにこの記事ではイベントループのように脱出手段のある無限ループを想定しています。

確認環境

サンプルコード

テスト対象のコード

import { getHandle } from './lib/get-handle';

export const main = () => {
  for (;;) {
    const handle = getHandle();
    if (handle === 'Click') {
      console.log('click');
    } else if (handle === 'KeyDown') {
      console.log('keydown');
    } else {
      break;
    }
  }
};

テストコード

.mockReturnValue()ではなく.mockReturnValueOnce()を使うのが肝です。

.mockReturnValue()だと同じ値が毎回返るので無限ループから抜けられませんが、.mockReturnValueOnce()は一回だけなので抜けられます。チェーンすると二回目、三回目の返り値も設定できます。

なお、以下の例では.mockReturnValueOnce()をチェーンさせていますが、させなくてもテストとしては正常に動作します。指定がない場合はundefinedが返るようです。（基本的には明示的に指定しておいた方が良いと考えています。

import { main } from '.';
import * as getHndl from './lib/get-handle';

jest.mock('./lib/get-handle');

describe('main', () => {
  it('Clickイベントの分岐に入ること', () => {
    jest
      .spyOn(getHndl, 'getHandle')
      .mockReturnValueOnce('Click')
      .mockReturnValueOnce('');

    const spiedConsoleLog = jest.spyOn(console, 'log');

    main();

    expect(spiedConsoleLog).toHaveBeenCalledWith('click');
  });
});

余談

.toHaveBeenCalledWith()は.toEqual()と同じロジックで判定しているらしいので、.toStrictEqual()版もあると便利な気がしました。気が向いたらPR出してみようかな…。

参考

• mockFn.mockReturnValueOnce(value) (jestjs.io)

特急はまかぜ大阪行きは姫路駅で長時間停車を行うことがありますが、播但線ホームに停車するため停車したホームには売店がありません。しかし隣のホームには売店が見えます。

何とかして買いたいですが、播但線から出るには中間改札を抜ける必要があります。しかし中間改札を抜けると切符を取られて戻ってこられなくなりそうです。中間改札を出入りして売店を利用することはできないのかと思ったのですが、流石に事故ると怖いし、実験するのも大変なのでJR西日本に聞いてみました。

結論としては停車中に中間改札を往来することは可能ですが、ICカードで自動改札を利用するとエラーになるので駅係員に切符ないしICカードを提示して通行すれば問題ないとのことでした。切符を通した場合にどうなるのかは教えてくれなかったので謎ですが、暇な時に試してみようかとは思います。（不審者に見られそうですが…）大阪市営地下鉄の定期券みたいに出入り自由ならワンチャンある気がします。

勿論、改札通過時に駅員が別に対応をしているなどではまかぜの乗車に間に合わなかった場合は自己責任になるので、ほぼ賭けです。ぶっちゃけほとんどやる意味はないと思います。ただ香澄駅からはまかぜ6号に乗ると駅弁がないんですね。折角の特急なので食べたいじゃないですか。そもそもあの時間に駅弁売ってるかや、在来線ホームでいまだに販売があるのかが謎ですが…ｗ

タイトル通りトップページのレイアウトを変えてみました。

誰が見に来てるのか解らない部分なので変えたところでアレですが…ｗ（トップページはアクセス計測してないので。。。）

PCビュー

変更前は縦長のレイアウトだったのですが、もうちょっと余白を活かした方がいいかなと思い、横にもレイアウトしてみました。デザインセンスが皆無なのでなんか余計に微妙になった気もしますが…。

他にも表組だった場所を段落にしたり、Sponsoredのバナーを縦置きにしたり細々と変えてます。

変更前	変更後

SPビュー

経験技術のところは見やすさがマシになったと思います。余白が詰まって少し息苦しくなった気もします。

PCビューが縦長だったのはレスポンシブ対応をサボる為というのもあったので、今回はそこそこ真面目にやりました。結果、まぁまぁちゃんとレスポンシブになっているとは思います。まぁ、一応本業なので…。ブレークポイント周りの挙動は怪しい気もしてますが…（

変更前	変更後

あとがき

半ば何のためにあるかわからないトップページですが、素のHTMLを書く機会が少ないので、それを書くためだけにある節があります。それもあってJSは入れず、HTMLとCSSだけで書いてます。

一応自分なりにセマンティクスには拘って書いているつもりですが、概ね自己満足レベルな気はしています。Lighthouseの数値は悪くない気がするので、無難なところかなという気はしていますが…。

Lighthouseの結果は取り合えずぼちぼちな気はする。

まぁまた気が向いたときにいじろうと思います。この新レイアウトも8月頭に着想して原型を作って、中途半端な状態で今日まで放置してたのを直して何とか形にしたくらいなので…。

こんなんでもやってるとMedia Queries Level 4という新機能を知れたり、HTMLやCSSを書く能力が多少は鍛えられるので悪くないです。

MDNによるとMedia Queries Level 4の対応状況は「それなり」ということですが、今回使用したMedia Queries: Range Syntaxは、どのブラウザも対応してくれてそうで良かったです。MDNでも全てのブラウザがFull supportとあるので安心です。