鶏むね肉三昧

減量中なのです。

自分は減量する際は基本的に低脂質ダイエットをするようにしているので、その間は冷蔵庫の中身は鶏むね肉でいっぱいになってしまいます。 だんだん鶏むね肉調理のレパートリー増えてきたので、いくつかこちらに残しておきたいと思います。 大事なのは栄養素と時間かけずに作れること。

チキンソテー

平たく言えば、オーブンで鶏むね肉を焼くだけ。 鶏むね肉の場合、結構分厚くて均等に火を通すのが難しいので、適当に切れ目を入れて平べったくしておくといいかと思います。

うちではテスコムコンベクションオーブンTSF601を利用しています(今はTSF61aという最新機種がありますね)。

www.tescom-japan.co.jp

  • 鶏むね肉に塩と胡椒とオレガノをまぶす
    • 塩は肉の0.8%~1%くらい、他は適当
    • 最近は塩も結構適当になってる。感覚でかけて、塩辛かったら次から減らすとか、そんなノリw
  • バットに鶏むね肉を入れて、オーブンで20分くらい焼く
    • 230℃で焼いてる。もうちょっと低くてもいいかも
    • 適当に野菜並べて一緒に焼くとよい。だいたいブロッコリー並べてる
  • 完成

キッチンにいる時間がほとんどないので、在宅勤務の合間にさっくり作れるところがいいところですね。 ちなみに減量中じゃない場合は鶏もも肉で作って、皮目を上にしてオリーブオイル塗ってから焼くといい感じです。

オーブンのいいところは、一緒に焼きたいものがあったら雑に突っ込めるところですね。 電子レンジの場合、中身増やしたらワット数とか時間とかを計算しないと仕上がりが変わっちゃうので。

鶏むね肉と白菜の電子レンジ蒸し

これはもう鍋です。

  • 白菜を適当に切って耐熱容器に入れる
    • うちはシリコンスチーマーに突っ込んでます
    • 白菜おいしいのでいっぱい入れよう
  • その上に鶏むね肉をどーんと乗せる
  • 適当に日本酒かける
  • 上記の入った耐熱容器にラップをふんわりかけて電子レンジにイン
    • 時間は量や肉の温度で変わるので適当に
    • 300gで冷蔵庫から出したばっかりの肉だったら、600W10分くらいのイメージ
  • 電子レンジ調理が終わったらポン酢かけて食べる
    • 薬味はお好みで。基本鍋なので、一味とか柚子胡椒とかいける
    • あとはネギとかゴマとかもいい感じ

電子レンジ調理は時間設定が慣れが必要で難しいのですが、シンプルに量が倍になったら時間も倍にするくらいのイメージでもだいたい問題ないかと思います。 上記のメニューはマイクロウェーブによる直接の過熱に加えて、蒸気による蒸しの過程も加わるためその分は差し引いてもいいかもしれないです。

本当においしくなるのは白菜のほうなので、白菜はいっぱい入れましょう。

チキンスープで作るサラダチキン

これも電子レンジ調理。時間調整すれば冷凍鶏むね肉から直でいけます。

  • 耐熱ボウル(そこそこ大きめ)に鶏むね肉入れる
  • 鶏スープ入れる
    • 水、鶏がらスープ、砂糖
    • スープの時点でおいしくなるようにする。水200ccに対して鶏ガラスープ大さじ1、砂糖小さじ1.5くらい?この辺も適当
    • 鶏むね肉が半分つかるくらいがよい
  • ふんわりラップかけて電子レンジに入れる
    • 600W5分
    • むね肉の大きさによって時間変える
    • 冷凍から直に行く場合は時間倍くらい
  • 取りだしたら肉を裏返してもう一度電子レンジへ
    • 600W3分
    • 肉の大きさ次第で時間調整
  • 取りだしたらボウルの上にきっちりラップして、しばし放置
    • スープの熱で火を入れる感じ
    • まあスープがほどほどに冷めたら完成
  • 肉切ってみて、ちゃんと火が通ってることを確認する
    • 火入れしすぎるとパサつくけど、火入れ足りないと最悪死ぬので、入れすぎくらいでちょうどいい
  • 完成

元レシピは以下から。家の電子レンジと減量中ということと自分の好みを加えた結果がこれ。

ameblo.jp

冷凍鶏むね肉を直接調理できる方法がないかと思ってたどり着いたのが上記のレシピです。 家のレンジでレシピ通りの時間でやったら中まで火が通りきらなかったので、この辺りは家のレンジや肉の大きさに合わせて柔軟にアレンジするといいかと思います。

鶏むね肉と余った野菜の炒め物

これはChatGPTに聞いて教えてくれたレシピ。炒め物なので多少の脂質はやむなし。

  • 鶏むね肉を一口大に切る
  • 野菜を食べやすい大きさに切る
    • しめじを適当にバラす
    • レタスとかブロッコリーとかを食べやすい大きさに切る
    • 他、なんか入れたい野菜があれば適当に食べやすい大きさに切る
  • フライパンでオリーブオイルとにんにくをいれて、ペペロンチーノを作るようににんにくに火を入れる
  • 鶏むね肉炒める
  • 野菜炒める
  • 塩と胡椒で味を調える
    • この時点でおいしく食べられる味付けを目指す
  • 全体に火が通ったら水と醤油入れて蓋して蒸し焼きに
    • 2分くらい
  • 完成

和風カレー風味のなにか

蕎麦屋のカレーとかに近い感じなんだけど、カレー部分を大幅に手抜きすることで結果的にスパイシーな一品に仕上がったやつ。

  • めんつゆ、カレー粉、水を混ぜた液体を作る
    • 好みで。3倍濃縮のめんつゆだったら50ccくらい。カレー粉は小さじ2杯くらい。多くてもいい。
    • 水は200ccくらい。肉と玉ねぎをゆでるので、それに必要な分量だけあればOK
  • 上記液体をフライパンで熱し、そこに細かく刻んだ鶏むね肉と串切りにした玉ねぎを入れて煮る
    • 玉ねぎは炒めるのが多分正しいんだけど、直接煮ると油入れなくて済む
  • 肉に火が通ったら火を止めて水溶き片栗粉でとろみをつける
    • 水溶き片栗粉入れて混ぜたら、もう一回火入れするとよい
  • 思いっきり黒コショウかける
  • ネギとか散らすとよい
  • 完成

完全にカレー。しかも15分程度でできて、脂質がほぼ無いのでがっつり食べたい気分の時にお勧めです カレー粉なければレトルトカレーを半分~1/3程度入れるとかでもいいのですが、その場合は脂質が少し増えるので要注意です。

どのメニューも基本的にたんぱく質がメインなので、炭水化物は一緒にご飯食べればいいかと思います。 脂質に関しては意識高い人はMCTオイルを各メニューにかけて採ればいいんですけど、そこまででもない人はフリースペースなんで好きなもの食べればいいかと思います。

スクラムについて人と話した

友人との飲み会の話題でスクラムについて聞かれてお話しして結構面白かったのでこちらでも。

詳しいことは全部スクラムガイドに書いてあるので、そっちを見ていただければいいかと思いますが、実際に運用してみないと肌感覚がわからないと思うので、シンプルに自分が本当に大事だと思うことだけシンプルに伝えました。

友「スクラムってどういうこと気を付けて運用すればいいの?」
俺「みんな頑張れ
友「スクラムマスターって何すればいいの?」
俺「おたすけおじさんになる。あらゆる障害を取り除くふるまいをやる」

これで納得してくれた友人、マジで本質を理解する能力高いなあと思いましたw

スクラムの前提としてはそもそも「全員が主体性をもってプロジェクトに参加し、プロダクトの完成と品質向上についてあらゆる手法を用いて貢献する」だと理解しています。プロジェクトのメンバーが全部これを理解していればスクラムは半分成功です。そのメンタルでプロジェクトに参加したうえで、それぞれのメンバーが迷子にならないようにいくつかの手法で交通整理してあげればいいかなと思います。

で、そこで大事なのがスクラムマスターで、メンバー困ってたら助けてあげるという明確な役割があります。なので自分が「おたすけおじさん」であることに自覚的になることが一番重要だと思ってます。

上記を端的に表すと「みんながんばれ」に集約されるかなと。 プロジェクトに参加する開発者がみんな上記の意識をもってること、スクラムマスターが各開発者やプロダクトオーナーのために助けになることは何でもやること、これがあればまあだいたいのプロジェクトはうまくいくんじゃないかなと。

それが理解できれば、なぜスプリントが必要なのか、なぜバックログが必要なのか、というのは目的がはっきりすると思うので、各メンバーの理解度もふかくなるんじゃないかなと。

そういう雑な話をしたという日記でした。

追記: という話を整理して社内勉強会でお話ししました。

www.slideshare.net

リモートワークに向いてる人

会社の技術ブログを立ち上げたのはまあ言ってしまえばエクストーン社が絶賛社員募集中だからであります。

自分の勤めている会社ながら、エクストーンは結構名前の通ったクライアントさんと一緒にお仕事できるし、仕事の量はかなりエンジニア側の裁量でコントロールできるし、なかなかに働くに当たっては悪くない会社なのですが、知名度がないという欠点があり、少しでも技術者界隈に向けて知名度を上げるべく、このような活動を始めたわけであります。

さて、そんな中弊社はコロナ禍の2年あまりはリモートワークの会社としてやってきました。現在は基本オフィス勤務で、仕事のしやすさや様々な事情によって在宅勤務が都度選択できるという、そういうスタイルになっています。

コロナ禍をきっかけにフルリモートのスタイルを模索したりもしたんですが、やはり社員の採用の時点でフルリモートという働き方を前提にしておらず、リモートワーク適性を評価基準に入れてなかったため、現時点でリモートワークになってもちょっと不幸になる人が出てくるかなあというところで、基本オフィス勤務に戻しつつも個人の裁量で最適な仕事場所を都度選べるというところに落ち着いています。

ここ2〜3年くらいでかなりリモートワークに向いている人向いていない人の特徴が見えてきたので、ちょっとつらつらと書き連ねて見たいと思います。

テキストによるコミュニケーション能力

この中でも特に大事だと思う能力が以下の2つです。

  • 勝手に行間を読まない
  • 行間を読まないと伝わらない文章を書かない

つまり「行間を読む」という行為を是とするような状況を作らないことですね。

具体例を一つあげると、質問されているだけなのに怒られていると感じてしまう人というのがいます。例えばコードレビューにおいて「ここなんでこうしたの?」って純粋な質問として聞いても、「すみません直します!」と返答が帰ってくるケースなどが思い当たるのでは無いかと思います。口頭でのコミュニケーションですと言い方とか言葉のキャッチボールでどうにでも出来るのですが、テキストだけのやりとりでは誤解したまま突っ走ってしまうことは多々あります。

質問する側、される側双方に歩み寄りの余地はあると思うのですが、質問する側は面倒でもその質問に至った背景をちゃんと説明すること、質問される側は謝る前に質問に文字通り答えること、これらをまずはちゃんとやれるかどうかが大事だと思います。文章に変なニュアンスを入れないこと、文章から勝手にニュアンスを感じ取らないこと。これがリモートワークにおけるテキストコミュニケーションに必要な能力であると考えています。

ちなみにこれ見てこの記事書こうと思いました。

存在のアピール

そこに人がいて活動をしている、ということを周りに感じさせる能力が大事です。これが出来ないと周りの人が勝手に「あの人忙しそう」とか「あの人何やってるか分からない」って思い、気軽に話しかけられなくなるからです。もちろん作業集中時など気軽に話しかけて欲しくないタイミングもあるかと思いますが、それも含めてちゃんとアピール出来る能力が大事だと思います。

定期的に雑談チャンネルにトピック投げるとか、作業の途中経過を細かく報告するとか、謎の存在にならないようにするための努力をしましょうというお話ですね。困ったことがあったらすぐ人に聞く、とかも類似した能力かと思います。

意識してイベントを開催する

オフラインの時は社員とのちょっとした雑談だったり、ランチだったりと、日常的に行ってきたことがかなり仕事にとってプラスになっていたことがリモートワークになり改めて気づいたことがありました。もちろん、こういったものから切り離されることがリモートワークのメリットという捉え方も出来ると思いますが、どちらかというと必要なときに必要な選択が出来ることがメリットであって、人と話したいご飯食べたいという選択肢が潰されるのはメリットではないと思います(エクストーン社では無理に上司に付き合ってご飯だ飲み会だみたいなイベントが一切発生しないため、余計にそう思っているのかもしれません)。

その中で、むりやりにでも人と話す機会を作るとか、そう言うイベントを積極的に起こせる人はリモートワークに向いていると思います。リモートワークに必要なものは昔オフラインで仕事していたときに得られていたものに対して自覚的で、それをちゃんと補おうとする行動だと思います。

まとめ

どうしても複数人でものを作る仕事をする場合、人の間での情報伝達が仕事のかなりの割合を占めてしまします。自分の存在に気づいてもらえないと情報は降ってこないし、自分の希望を伝えないと誰もそれを聞いてくれない。それがリモートワーク環境だと思います。もしかして一人っ子ってリモートワークにむいてないんじゃね?(なお筆者に兄弟はいない)

会社の技術ブログを始めました

自分が所属しているエクストーンという会社で、このたび技術ブログを始めることになりました。

https://techblog.xtone.co.jp/

現在はまだ記事が1本ですが、これからだいたい週1くらいのペースで記事を上げていくと思います。

こちらでは会社の技術ブログに載らないような小ネタだったり、ライブ参戦記みたいなものを引き続き思い出したように書いていく次第です。

シンデレラガールズ7thライブ大阪2日目に行ってきた話

抽選で外れ続け、なんとか一般販売で2日目のバルコニー席をゲットできたので、大阪まで行ってきました! あまりにも最高だったので全曲感想書いていく。ちなみに1日目のセットリストを見ないようにしたので、あらゆるところで驚いてます。

1. ガールズ・イン・ザ・フロンティア

デレステ3周年記念曲。生演奏のイントロで大爆発、全員で歌う「自分の足で歩けシンデレラ」の歌詞のエモさ。 そしてなにより、落ちサビ前の福原綾香さんの「だから拓け!」は、6thで演奏した際の松井恵理子さんのソロと競い合っているような感じがして、 まさにこの曲にぴったりだなと勝手に思って、一人泣きそうになりながら見てました。

2. Unlock Starbeat

Growing Rock用に書き下ろされた新曲。夢のスコアって5-0って意味じゃねーから! サビのハンドクラップが滅茶苦茶楽しい。

3. Lunatic Show

これも生演奏で聞きたかった曲。個性の強い声の人たちを松田颯水さんがまとめ上げていく感じがとてもよかった。

4. 美に入り彩を穿つ

生演奏超格好いい!!!羽衣小町の早くて格好いい曲なんだけど、立花理香さんルゥ・ティンさんの歌ってるときの表情が滅茶苦茶よかった。 動きも超キレキレ。あれでボーカルぶれないの本当に凄い。

5. Virgin Love

ノーティギャルズやってるときの原さんが本当に楽しそうで最高。

6. ØωØver!! -Heart Beat Version-

イントロで「Heart Beat Versionだ!」と鳥肌。ギターソロから入るイントロもいいんだが、こっちのバージョンの歌詞もいいんだよな。 「二人三脚じゃ出せない速度保って」っていう歌詞がもう本当にアスタリスクって感じで。 間奏のギターソロでギターの二人と戯れてる高森さん青木さんがとても可愛かった。

7. Nocturne

ギターリフヤバすぎ。この曲はやっぱり東山さんのボーカルが本当にあってる。 花井さんのストレートでパワーのあるボーカルもよく合ってて、この二人のボーカル相性いいなあとこの時ぼんやり思ってました。 伏線です。

8. オウムアムアに幸運を

佐倉薫さん松井恵理子さんの二人バージョン。「幸運を運んでく」のユニゾン*4がエモすぎて泣きそうになる。

9. 義勇忍侠花吹雪

オリジナルメンバーでの初披露!可惜夜月の3人はなんかこうバランスよくて見てて幸せになる3人組だなあと思った。 イントロのリフを生演奏で聞けたのが良かった。

10. Gaze and Gaze

東山奈央さん演じる川島瑞樹と花井美春さん演じる村上巴のユニット、フォーリン・シーサイドの新曲。 ディスプレイに「フォーリン・シーサイド」の文字が出た時点で超変な声出た。 ユニットとしての知名度はそんなに高くないけど、巴がアイドルに憧れたきっかけが海辺での瑞樹との出会いなんすよ!!!! 長年の積み重ねてきたストーリーのあるエモいユニットに突然歌ができたとなれば興奮せざるを得ないよね。

というわけで、Nocturneのときにこの二人のデュエット聞きたいなと漠然と思っていた俺の希望がわずか3曲後に叶ってしまうという。

11. 生存本能ヴァルキュリア

佐藤亜美菜さん洲崎綾さんというオリジナルメンバーにベルベットローズの2人での歌唱。 佐藤さんの歌う「守られるばかりのコドモじゃないもう私」というパートが印象的なこの曲なんだけど、 今回ここを佐藤さんじゃなくて佐倉さんが歌ってたのが印象的だった。 無事全員生き残れた。

12. Trust me

オリジナルメンバーの牧野由依さん三宅麻理恵さん渕上舞さん原紗友里さんに加え、朝井彩加さん青木志貴さん桜咲千依さんを加えた7人での披露。 っていうか、追加メンバーはリトルポップスか。 「今心に火をつけろ」「発火!!!」→パイロ大炎上→客席UO点火の演出がマジで凄かった。 この時点までパイロ演出があることを知らなかったので滅茶苦茶驚いた。 この曲が一気に化けた瞬間を見た(厳密には多分1日目での披露のときなんだろうけど)。

13. Voyage

ここからしばらくバンドメンバー休憩のブロック。洲崎綾さんのバラード。 シンデレラガールズのライブで見る洲崎さんは本当に気高く透き通るような、まさしくそこに新田美波がいるような感じで、 本当にひもてはうすのイベントで見た人と同一人物なのか疑わしい。

14. エヴリデイドリーム / マイ・スイート・ハネムー

スローなピアノ伴奏と牧野由依さんの圧倒的なボーカルのエヴリデイドリーム、そこからアコースティック編成でメドレーでつながるマイ・スイート・ハネムーン。 この日一番の衝撃的なパフォーマンスでしたね。5万人の観客が曲の変わり目の無音をただ息をのんで見守り、曲が終わった後にどよめきと鳴りやまない拍手。 本当に凄いものを見た感じでした。優勝。

15. 夏恋 -NATSU KOI-

初披露!オリジナルメンバーでの夏恋!千菅春香さんのソロパートが本当にいいんですよこの曲は。 サビ前ソロパート間の「おーおおおーおおおー」を会場全体で合唱できたのも気持ちよかった。バイブス感じた。バイブス記念日。

16. Great Journey

まさかのニュージェネ新曲。ニュージェネの3人がお互いを見て笑いながら歌ってるのを見るだけで涙腺が緩むんだよな。

17. Sun! High! Gold!

でーんでんでんでん「さんはい!」でーんでんでんでん「さんはい!」

ここでゲストの星希成奏さん中澤ミナさん登場。やべーよ、りあむがいるよ、雪美がいるよ。 2番からみおかれ登場!「気づいてもらえなかったどうしよう」って言ってた飯屋さん可愛い。 「ぶちあがっていくぞオタクども!!!!」(大歓声)「うるさい!!!!この後雪美ちゃんがしゃべるんだぞ!!」星希成奏さんマジりあむ。

18. Palette

ピンクチェックスクール!生演奏!かわいい!格好いい! 辛いことがあった日はラブレターかPaletteのMV見るといいよ!

19. Twilight Sky

多田李衣菜ソロ曲、今回はなんとアスタリスクで披露! この曲、2番のサビ終了後の歌詞が滅茶苦茶よくて、聞くたびに泣きそうになるんですよね。 「I love you because you are you」

ちなみにアスタリスクが歌うTwilight Skyは「CINDERELLA PARTY! でれぱ音頭  \ドンドンカッ/」に収録されているため、 携帯音楽プレイヤーにジャケット画像も含めてちゃんと記録するタイプの人はあのジャケット画像が毎回出てきて大変面白いことになります。

www.youtube.com

20. 夢幻ノ救憐唱 ~堕チル星ノ調ベ~

神崎蘭子ソロ2曲目、ライブ初披露!内田真礼さんの表情が本当に最高なのですよ。 そこに蘭子がいたら絶対にその表情で歌ってるだろうなって感じ。 ソロの音楽活動のキャリアもかなり重ねていることもあり、滅茶苦茶歌が上手くなっててびっくりしました。

21. Max Beat

MVの振り付けが大好きで、実際にライブでやったらどうなるんだろうと思ってみてたんだけど、期待以上の格好良さ! クールのオリジナルメンバー(青木志貴,さん千菅春香さん村中知さん)に負けず、キュートの種崎敦美さん新田ひよりさんも格好良かった。

22. Fascinate

ベルベットローズの二人の曲。ちとせと千夜がおったわ。 黒埼ちとせ役の佐倉薫さんは歌ってるときの表情に魅入られたし、白雪千夜役の関口理咲さんのボーカルのパワーに圧倒された。 ライブで聞いて改めて好きになった曲でした。

23. 双翼の独奏歌

ダークイルミネイト!1番終わった後にそれぞれ長尺のセリフがあって、何か所かユニゾンになるところがあるんだけど、 完璧に合っていてものすごく格好良かった。どれだけ練習すればあそこぴったり合わせられるんだろ。

24. 毒茸伝説

星輝子ソロ1曲目に松田颯水さん花井美春さん原優子さんのパワー系ボーカルトリオでの披露。 ものすごく熱いボーカルと、ものすごくヘビーな演奏と、ものすごい熱気の客席で、歌われるきのこの歌。

25. アンデッド・ダンスロック

生演奏のアンデッド・ダンスロック、イントロのギターのリフからなんか滅茶苦茶格好良くて、すごくよかった。 桜咲千依さんのソロパートで緩急つけて、千菅春香さんのボーカルで一気に駆け上がる感じがすごくよくて、本当にこの2人の曲だなーと改めて思った。 あとめっちゃパイロ焚いてた。

26. Absolute NIne

なんか昔で言うところの「メッセージ」枠になってる気がするAbsolute NIne。今回は可惜夜月とベルベットローズの5人での披露。 「勝ち取るの」「この歌で」「「「「絶対!!!!」」」

27. ∀NSWER

インディヴィジュアルズの松田颯水さん朝井彩加に加え、高森奈津美さん三宅麻理恵さん洲崎綾さん東山奈央さんのベテラン勢での披露。 インディヴィジュアルズのメンバー以外が歌ったの初めてかしら。 みんなでペンライトを∀の形で持つの楽しい。まさかこれがペンライト芸の序章だとはこの時はつゆ知らず…。

28. Trinity Field

やると思ったけど!トライアドプリムス揃ってたからやると思ったけど!来た瞬間はやっぱり「うおおおおおお」ってなるよね。 支えあっていつでも無敵感があふれるのがニュージェネならば、競い合ってどこまでも高みに上るのがトライアドって感じで、回を重ねるごとにどんどんパフォーマンスが上がってる感じがする。 みんなでペンライトを△の形で持つの楽しい。

29. 紅

(フヒッ)紅だーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー!!!!!!!!!!!!!

さっつんの紅マジヤバい!語彙力なくなる!あとバンドメンバーの演奏もマジヤバい!本当に語彙力無くなる! 間奏中もずっと客席から歓声が上がり続けてたのが印象的でした。そりゃもう凄かったもん。伝説がここにあったもん。 もちろんみんなのペンライトはX!!!!!!!

30. 純情Midnight伝説

炎陣に立花理香さん津田美波さんを加えての披露。原さんの「みんな楽しんでるよな!?」って顔でメンバーを見守ってる感じがしてとてもよかった。 あとめっちゃパイロ焚いてた。

31. EVERMORE

シンデレラガールズ5周年曲。3公演通して初参加のメンバーが何人かいて、それぞれ圧巻のパフォーマンスを見せたんだけど、その締めくくりのこの歌は涙腺に来る。 「仲間の数が増えてくたびに叶う願いも増えてゆくね」の歌詞が本当に沁みるんだよなあ。まだまだすごい景色がこれからも見れそう。

32. TRUE COLORS

デレステ4周年曲かつ、今回の公演の通しのテーマソング。 毎回「同じ時代に生まれた奇跡 わたしの大好きな あなたと手繋ぎ 虹の橋を渡ろう」の歌詞で泣く。 メンバーが大変なレッスンを乗り越えて、最高のライブを見せてくれた、その最後にこの曲が歌われるの、本当にエモすぎて衣紋掛けになったわ。

33. お願い!シンデレラ

おねしん生演奏!大橋彩香さんが案の定ドラムのところに行ってドラムを脇から叩きに行ってたのが印象的だった。 本当に生演奏でよかったなあこのライブはってしみじみ思いながら聞いてた。

いやもう本当チケット取れなくて行くの諦めかけてたけど、何とか一般で2日目のチケット確保して現地行って本当に良かった! どの公演も本当に素晴らしく新しい発見や驚きに満ちていて最高でした。

帰りの新幹線で千葉公演のBD予約したので、届くの楽しみ。

npmパッケージを公開した話

前のエントリで作ったuseMediaQueryをせっかくなのでnpmパッケージとして公開してみました。 テストとかパッケージングとか色々やり方を知らなかったので、いい機会だし休み中に勉強がてらにやってみました。

公開したパッケージは以下のURLで確認出来ます。

www.npmjs.com

github.com

今回のパッケージ公開時では以下のことを実現したいと思っていました。

  • TypeScriptによる実装
  • テスト/lint
  • semantic-releaseによる自動バージョニング

TypeScriptによる実装

自分が普段JavaScriptのコードを書く際はいつもES6で書いているのですが、 公開パッケージと言うこともあり、出来れば型宣言も含めて公開できればと思い、TypeScriptで実装しました。 まあ、そんなに大きなコードでもないので、実装する際には所々変数や関数に型宣言を付与するくらいでしか無かったです。

テスト/lint

useMediaQueryは基本的にwindow.matchMediaによって実現しているのですが、この関数をテストコード上で動作させることが非常に困難です。

jestによるテストでは、documentとかwindowまわりのブラウザが持つDOMのAPIはnode上でそのまま動作させることが出来ず、 jsdomというライブラリを利用することでnode上で実行させることが出来ます。 問題として、jsdomではwindow.matchMediaをサポートしていないため、うまくmockを利用してテストコード上で動作させる必要があります。

ちなみにuseMediaQueryはresizeイベントを監視し、都度window.matchMediaを呼ぶことで実現していますが、 メディアクエリの状態が変化したときに呼ばれるコールバックを利用して実現するように改修したいと考えています。 実装自体はそんなに難しくなさそうなのですが、コールバックを発火させるテストが今のところうまく書けてません。

TypeScriptでのいい感じの実装の仕方があんまり分かってないので、そのあたりはtslintに教えて貰おうと思い、 tslintの設定も行いました。

semantic-releaseによる自動バージョニング

バージョン番号の付与の仕方としてsemantic versioningというものがあります。 このバージョン番号の付与を自動化し、適切なバージョンを付与するためにsemantic-releaseを利用しました。

semantic-releaseではコミットコメントから、その変更がパッチなのかマイナーアップデートなのかを自動的に判断し、 それにより適切なバージョン番号を付与します。 また、その際に様々なプラグインを利用することで、GitHubのリリースを作成したり、Changelogを自動生成したり、npmのパッケージを公開したりすることが出来ます。

今回はcircleci上からsemantic-releaseを利用することで、masterブランチが更新されると自動的にnpmへパッケージを公開するようにしました。 ちなみにこちらの動作確認の際に試行錯誤を行った結果、ちゃんと動作するバージョンが1.0.4になってしまいました。

まとめ

元々はReact Hooksのカスタムフックを利用した設計が面白いと言うことで、今仕事で書いているプロダクトで結構カスタムフックを書いていて、 せっかくだし汎用的なカスタムフックはライブラリにするかーと思い、npmパッケージを作ってみました。

カスタムフック自体は大きな1つの関数で、内部でメモ化された関数呼び出しを複数持つことで状態を管理できるようになっているものです。 その仕組み上、カスタムフック内部で持つ個々のメモ化された関数等のテストがちょっと面倒くさそうだなあと感じています。

後はコミットメッセージをConventional Commitsに従って書けば、 semantic-releaseで適切にバージョン番号が管理できることを知れたのは良かったです。 オープンソースプロジェクトのコミットメッセージの頭に良くfeat:とかfix:とか書いてあるのはこれだったのか、と今更気づきました。

やってみればそんなに難しくも無かったので、今後も何か有用そうなカスタムフック作ったら公開できればと思っています。

メディアクエリを扱うReact Hooksのカスタムフックを作った話

React Hooksでぼちぼちコードを書いているのだけれども、今日カスタムフックの実装をしてようやくReact Hooksの勘所が少し理解できたような気がするので、忘れないうちにメモ代わりに書いています。

今実装しているコードで、画面幅に合わせて異なるReact Componentを返したいケースがあって、最初は画面幅をwindow.innerWidthで取得して場合分けするコードをcomponentDidMountに記述して実現していましたが、ロード後に画面サイズを変更した場合にそれが反映されない問題がありました。 基本的にはデバイス毎に異なるコンポーネントをrenderしたり、propsの値を変えたいだけなので、それほど大きな問題にはなっていませんが、 出来ればなんとかして動的な画面サイズの変更に合わせて切り替えられるようにしたいなあと思っていました。

その実現のためにuseMediaQueryというカスタムフックを実装してみました。 引数には区別したいメディアクエリの配列を渡し、返り値にその中で現在のメディアクエリを返すようになっています。 画面幅の変更等でマッチするメディアクエリが変わった場合にはuseMediaQueryの返す値が変わり、Reactコンポーネントが更新されるようになっています。

割とシンプルなコードで実現できました。 以下がuseMediaQueryの実装です。

import { useEffect, useState } from 'react'

const getCurrentMedia = (mediaList) => {
  let result = null;
  for (const media of mediaList) {
    if (window.matchMedia(media).matches) {
      result = media
      break
    }
  }
  return result
}

const useMediaQuery = (mediaList) => {
  const [current, setCurrent] = useState(getCurrentMedia(mediaList))

  useEffect(() => {
    let mounted = true
    let timeout
    const onResize = () => {
      // 500msに一度しかresizeイベントのcallbackを実行しないようにする
      if (timeout) return

      const media = getCurrentMedia(mediaList)
      if (current !== media) {
        setCurrent(media)
      }

      timeout = setTimeout(() => timeout = null, 500)
    }

    window.addEventListener('resize', onResize)

    return () => {
      mounted = false
      window.removeEventListener('resize', onResize)
    }
  }, [])

  return current
}

export default useMediaQuery

実装はreact-useuseOrientationを参考にしました。 ReactのVirtualDOMの外の世界であるwindow.innerWidthやresizeイベントをカスタムフック内に隠蔽し、 useStateを利用してその結果だけをReactの世界で管理するようになっています。 これにより、実装時にはresizeイベントのことを気にせず、文字列としてメディアクエリを取得することが出来るようになります。

利用する際は以下のように表示を切り分けたいメディアクエリの配列を渡すことで、現在の状態にマッチするものが返されるので、その値を利用して描画処理を行います。

import { useMemo } from 'react'
import 'useMediaQuery' from './useMediaQuery'

const QUERY_SP = "(max-width: 640px)"
const QUERY_PC = "(min-width: 641px)"

const Comp = (props) => {
  // queryには現在の画面幅に応じて、QUERY_SPもしくはQUERY_PCの文字列が返される
  const query = useMediaQuery([QUERY_SP, QUERY_PC])
  const text = useMemo(() => {
    switch(query) {
      case QUERY_SP:
        return "スマートフォン"
      case QUERY_PC:
        return "PC"
    }
  }, [query])

  return <span>現在は{text}で表示しています。</span>
}

export default Comp

こんな感じで、実装している側ではresizeイベントを全く考慮すること無く実装することが出来ました。

結構個人的には革命的だったというか、Reactでどうしても実装が綺麗に出来ないと思ってたところがとてもすっきりしたので、 仕事中にもかかわらず思わず興奮してしまいました。

そのうちuseMediaQueryはテストコード書いたり、言語をTypeScriptで書き直した上でGitHub上で公開しようかなとは思っています。 カスタムフックのライブラリってどういう粒度で公開したらいいのかちょっと悩ましいですね。 フック1つでライブラリ1つにすると、なんか大量のライブラリを管理しなきゃいけなさそうで面倒だなあとは思いつつ、 react-useみたいにユーティリティライブラリみたいにする場合、他にどういうカスタムフックとセットにすべきかというのもなかなか悩ましいところ。