Yukiya Nakagawa

皆さん、AIと仲良くやってますか。僕はCursor Agent + Gemini 2.5 Pro (Thinking)が妙に肌に合いまして、設計からコーディングまで、幅広い作業を任せております。さて、Cursorに限ったことではありませんが、AIエージェントは必要に応じて様々な作業をやってくれます。コードの読み書きが主なものとなりますが、場合によってはシェル実行を伴うこともあります。以前の筆者は「AIのことはそこまで信用してないので、シェル実行はコマンドだけ示してくれたらこっちでやるよ」というスタンスでした。しかしながら、少しずつAIと打ち解けてきて、そろそろシェルの実行も任せてもい...

macOSのシェル設定をzsh以外にしている場合にCursor Agentにzsh以外を使わせる方法

みなさん、TypeScript書いてますか？ふと気づくと、もうTypeScript 1.0から数えても11年が経過しているんですね。筆者も2015年くらいから本格的に触り始めた組なので、そろそろTypeScript 10年選手を名乗ってもよさそうです。さて、これだけ長いことTypeScriptを触っていると、昔の文法を前提とした手癖というものも蓄積されていくものです。同僚と雑談していたところ、手癖を改めるべき便利なイディオムを教えてもらったので、備忘録として残しておきます。 Before: 手癖で書いていたexhaustiveness checkTypeScriptには、exh...

TypeScriptのexhaustiveness checkをsatisfiesで簡単に書く

mhidakaアドベントカレンダーの8日目です。7日目はらこらこの本屋の話でした。本屋やってたの！？blog.lacolaco.net気がついたら12月9日になっていたので1日遅刻してますが、気にせず12月8日の43時を過ごしていこうと思います。今年の本業の振り返りをしていきますねー。デジタルメディア事業のお仕事に軸足が移った昨年まではマネイロ等のオンライン資産運用サービス事業に関するお仕事をしていることが多かった筆者ですが、今年はデジタルメディア事業のお仕事をしていました。モニクルグループでデジタルメディア事業を行っているモニクルリサーチ社は、月間ユニークユーザー数1300万人、月間閲覧数（配信先含む）が1億6000万PVを超える、くらしとお金の経済メディア「LIMO」をはじめ、お金の専門家がわかりやすく解説する金融メディア「LIMO & Finance」、くらしとお金の課題解決サービス「MeChoice」、株式投資初心者向け株主優待紹介メディア「株1（カブワン）」を運営しています。limo.media軸足が移ったあと、まずは編集部の業務を一部自動化する形の業務改善を行なったり、既存メディアの派生サービスを作ったりしていました。zenn.dev内向きの業務システムはGoogle Cloud中心で作ることも多いのですが、CDNキャッシュを効かせやすい外部向けのWebサイトはCloudflare Developer Platformを中心に組み上げていたりします。自分がやらないと他にやる人がいない状況が増えましたが、よく考えたら2011年くらいからずっとそんな感じのプロジェクトばかりやってきたな、と思うと、割といつも通りの感じでした。モニクルリサーチ社のCTOになりましたそんなわけで、モニクルリサーチ社のエンジニアリングマネージャーとして、業務フローの効率化を少しずつ進めつつ、新しい仲間集めに勤しむ2024年でしたが、最後に大きなイベントが待っていました。なんと、筆者がモニクルリサーチ社のCTOに就任しました。monicleresearch.co.jpモニクルグループ全体のCTOとしては塚田さん（ id:gabuchan ）がいるので、グループ内にCTOが2人いることになります。ちょっと混乱しそうですが、役割は明確に分かれています。筆者のCTOとしての固有の責務は エンジニアリングという選択肢を持って、モニクルリサーチ社の経営層やマネージャーと一緒に事業の課題解決の方法を考える ことだと考えています。それ以外のエンジニアリング組織の運営に関わる部分については塚田CTOやEMの仲間たちと協力しながら進めていけそうですが、デジタルメディア事業の経営メンバーと一緒に頭をひねる役割は筆者が担います。CTOとして大事にしようと思っていることよくある「エンジニアの親分」「社内で一番技術がわかる人」みたいなCTOは目指せなさそうなので、自分がCTOを名乗っていいのかな、と不安になることもありました。しかしながら、CTOの姿は組織ごとに違っていいと教えてくれている、昔から大好きな記事を思い出したのです。tech.toreta.in筆者も大学生のときに「へんな会社」のつくり方を読んで、将来ベンチャーで働くことを夢見た人間の1人なので、 id:naoya というCTOへの憧れは当然あります。でも、masuidriveさんが「We are NOT Naoya」という言葉を掲げてくれたときに、なんだか気が楽になったんですよね。偉大で尊敬しているからといって、真似しなければいけないわけではない。当時、とにかく偉大な先達の真似をしないといけないと思っていた自分にとっては、大きな転換点でした*1。読んだ当時は自分がCTOになる目線で読んでいたわけではありませんでしたが、数年ぶりに読み返してみると、自分たちの組織らしい形を考える足場になる、いい記事だなあと思います。そんなことを考えながら日々を過ごしていたら、sotarokさんがいい記事を書いてくれました。note.comCTOは「経営メンバーの中で一番技術が分かる人」になる必要がある、という話はちょうど似たようなことを考えていたタイミングだったので、めちゃくちゃ頷きながら読んでいました。モニクルリサーチ社のCTOにしかできないことは、やっぱりそれですよね、と自分の現在地を確認できたので、CTO 1年生としてなんとかやっていきます。アドベントカレンダー、次はあんざいゆきさんです。*1:2017年のAndroidエンジニアだった自分にとっては「We are NOT クックパッド」に気付けたのが大きかったし、2021年ごろの自分は「We are NOT メルカリ」と唱えていた気がします。事業も組織も規模も違うんだから、上辺の形だけ真似したってしょうがない。

経済メディアのお仕事をしていた近況報告

こんにちは、なかざんです。この記事はモニクルAdvent Calendar 2024の2日目です。昨日はgabuの39歳のリアルでした。https://gabu.hatenablog.com/entry/startup-and-life-39engineer はじめにさて、開発組織を運営する目的の本筋は、開発という行為によって事業に貢献することですよね。「売上は全てを癒す」という格言もあるくらいなので、売上を立てるために事業に貢献するよりも大事なことはなかなかないでしょう。とはいっても、ビジネスの方向だけを向き続けていれば組織が回るかというと、そういうわけでもありません。開発組...

開発合宿と技術同人誌即売会への企業出展にシナジーを見出した話

技術記事はzennに書くことが多くなりましたが、登壇報告はまあこっちでいいでしょう。8/25に行われたCloudflare Meetup Niigataと、9/25に行われたRemix Tokyo Meetupで登壇してきましたのでご報告しますー。Cloudflare Meetup Niigata #18/25はCloudflare Meetup Niigata #1 に登壇しました。仕事で7月にリリースしたキャラつくAIの事例をどうしてもCloudflareのイベントで喋りたくて、主催のkasacchifulさんを唆して開催した形になります。新潟なら家庭内稟議が通りやすいので……。わがまま言ってすいませんでした！cfm-cts.connpass.com登壇内容は、キャラつくAIで採用したCloudflare Developer Platformのツール群についてのお話です。 speakerdeck.com当日はCloudflareエヴァンジェリストのkameoncloudさんが来られていたのもあって、使い方のフィードバックがいただけたのが嬉しかったです。キャラつくAIでは、メモリをバカ喰いしそうなWorkers AIのためにWorkerを別立てして、Queue経由で動かしています。他の部分はService Bindings RPCで繋げているのですが、AI周りだけは処理時間の問題もあり、Queue経由の実行にしていました。それに対して、「undocumentedだけどService Bindings経由で動かすと呼び出し元と呼び出し先でメモリを共有しちゃうはずなので、Queueを挟むのは方針として正しそう」というフィードバックをいただけました。中の人と話せるのは貴重なので助かりました。という会話があった数日後、その辺の話題をサポートした記事が生えてきました🎉zenn.dev登壇してよかったです。併催されたハンズオンで、自分用のZero Trust環境を立ち上げて1.1.1.1にVPNを繋げる体験ができたのもよかったです。結構簡単にできるもんなんですねえ。Remix Tokyo Meetup先日、9/25にはRemix Tokyo Meetupで登壇してきました。今回は赤坂です！ 登壇なので会社から出張費が出ます！やったぜ！！！！lu.ma登壇内容は、Cloudflare環境のRemixでSentryを動かそうと頑張ったお話でした。そう、やっぱりキャラつくAIです。今年はキャラつくAIを擦っていきます。 speakerdeck.com5〜6月ごろに @sentry/remix の代替技術を探し回ったログをしゃべってお茶を濁すつもりだったのですが、 nodejs_compat_v2 が出てきて検証するチャンスができたり（動かなかったけど）、うっかり @sentry/cloudflare を見つけてしまったりして、思いの外いい感じに最新事情をお話しできました。イベントの印象としましては、Remix自体の話というよりは、Remixの開発環境や運用全般がスコープになっている印象でした。結果的に、Cloudflare Pages/Workers上でのフレームワークの取り回しをもっと良くする発表が多かったような気がします。参加者が口々に「Workers Tech Talksだったっけこれ」と呟いていました。あとはあれですね。なんかやたらと登壇者が豪華でした。10分枠​@chimame_rt - [RemixでVersion skewに立ち向かう]​@kenn​@gothedistance - [Dive Into Single Fetch]​@Nkzn - [Remix × Cloudflare Pages × Sentry 奮闘記]5分枠​@takashi_onda​@mizchi - [Remix は RSC にどう対応するのか]​@ossamoon - [RemixとCloudflare Stack におけるFile Upload]​@_kaiinuiここに主催のtecktalkjpさんも入れると、あら不思議、国内のRemix情報発信者のそこそこの割合が喋ってるのでは……？メンバー据え置きで1人50分ずつ喋らせたら立派なRemix Tokyo Conferenceになっていたかもしれません。……いや、その規模で喋れるネタはなかなか用意できないのでもうちょっと時間ちょうだい……もし次回登壇することがあったら、Expo RouterのAPI Routes用パッケージである @expo/server が、Node.jsサーバー上で動かすときにNode.js StreamとWeb標準のReadableStreamを相互変換するために、Remixの力を借りている↓話なんかをしてみたいですね。github.com今後の予定たぶん技術書典17まで大人しくしています。技術書典17で僕と握手！techbookfest.org

Cloudflare Meetup NiigataとRemix Tokyo Meetupで登壇してきました

CocoaPodsのアナウンスを受けて、React Nativeが今後どうなるのか不安な方がいそうだなーと思ったので、僕が調べた範囲でこんな状況かなと思っていることを書いてみます。原典は貼っておくので、基本的には僕のことは信じずに元記事を読んでください。 CocoaPodsのメンテナンスモード古くからのiOS/macOS開発者にとっては馴染み深いパッケージマネージャーであるCocoaPodsですが、この度、開発体制がメンテナンスモードに入ることが発表されました。https://blog.cocoapods.org/CocoaPods-Support-Plans/これは急な話では...

React NativeのSwift Package Manager対応の展望

Cloudflare Workersを中心とした、Cloudflareの開発者向け製品群（いわゆるCloudflareスタック）は、今やそれだけでちょっとしたサービスを生み出すことが不可能ではなくなってきています。今回、システム構成をCloudflareスタックにほぼ全振りした新サービスをお仕事で作ったので、工夫した点を紹介します。なお、本記事で紹介するサービスは7月4日に正式リリースしたばかりで、本格的なトラフィックをほとんど経験していない状態でこの記事を書き始めています。2ヶ月ほど運用した後での生の声は、8月25日に新潟で行われる、Cloudflare Meetup Niigat...

Cloudflareスタックをモリモリ使ってアバター画像生成サービスを作った話

こんにちは、Webサイト作ってますか？ Webサイトを作っていると、Lighthouseスコアを上げるために画像のサイズやフォーマットにも気を配りたくなりますよね。筆者は画像のフォーマットにはあまり頓着してこなかったので、「フラットな画像ならPNG」「込み入ったイラストはJPEG」「なんかWebPとかいうのもあるらしいけどよくわからん」くらいの解像度で適当に使っていました。しかし、最近の開発でLighthouseスコアのチューニングをしてみたところ、色々新しい知見が溜まったので、自分用の備忘録として残しておこうと思います。 3行まとめちゃんと複数の解像度の画像を用意しようねW...

解像度とフォーマット対応状況の両方に配慮してWebP画像やAVIF画像を扱う

こんにちは、Webサイト作ってますか？ Webサイトを作ってると、SNSやSlackにURLが貼られた時の見栄えを良くするために、OGP画像（og:image）を設定したくなりますよね。筆者はCloudflare PagesとRemixでサイトを作ることが多くなってきたのですが、OGP画像を動的に生成する上手い方法を調べていたら一定の成果が出たので、共有しておこうと思います。要点としては次のとおりです。Cloudflare Pages向けの @vercel/og ラッパーを使うできたらURLの末尾を .png にする（Cloudflareのキャッシュを効かせるため） Ve...

Remix on Cloudflare Pagesで、@vercel/ogを使ってOGP画像を生成する

今回はVSCodeでGitHub Copilotがサジェストするたびに音が出る挙動を止める方法を紹介します。 アラートがうるさいふと日本語のドキュメントを書いていて気がついたのですが、なぜか入力がひと区切りするごとにアラートが鳴ります。うるさい文章を書いても消しても鳴ります。これはうるさいのでなんとかしよう、と思って観察してみたところ、どうやらGitHub Copilotがサジェストするたびに鳴るようです。GitHub Copilotのユーザーの方ならわかると思いますが、Copilotくんはそこそこの頻度でサジェストをしてきます。そのたびにアラートが鳴るのですから、うるさく...

VSCodeでGitHub Copilotがサジェストするたびに音が出る挙動を止める

バズレシピAdvent Calendar 2023の25日目です。adventar.orgクリスマスイブで張り切ったので、もう疲れた！　込み入った料理はしたくねえ！　しかし冷蔵庫には消費期限がギリギリの豚こまと、大量の白菜が眠っておられる！　どうする！そんなときに役立つのが、「無水白菜カレー」です。www.youtube.com食材としては、ほぼ白菜と豚肉とカレールーがあればいけます。すりおろしニンニクも必要ですが、チューブでええんじゃ。後の調味料は家にあるな！ヨシ！玉ねぎを切らなくても甘く美味しくなるので、怠いときにめっちゃオススメ。レシピだと甘みのためにお砂糖を追加してるんですが、実はカレールーを甘口のやつにしておけば、お砂糖の工程がなくても全然大丈夫です。我が家は4歳児のためにバーモントカレー甘口のストックが豊富なので、砂糖なしでいけます。そんなわけで調理工程の様子〜。お手軽白菜カレー美味しくいただきました。アドベントカレンダー2023終了今年もなんとか最終日にたどり着けてよかった……！皆さんが料理にこだわったり雑にしたりしている様子が見えてめっちゃよかったです。来年もやりたいな！

クリスマス料理に疲れたら無水白菜カレー

バズレシピAdvent Calendar 2023の24日目です。adventar.orgメリークリスマス！ということで、クリスマスっぽい料理を作りました。メリクリ写真右のフライドチキンは「塩フライドチキン」、写真下は「超柔らかむねローストチキン」でした。www.youtube.comwww.youtube.comいやーどっちも美味しかった。子供達にも好評でよかったです。

塩フライドチキンでメリークリスマス

バズレシピAdvent Calendar 2023の22日目です。みなさん、納豆カルボナーラは好きですか！www.youtube.com僕は好きです。今回は納豆カルボナーラのワンパンバージョン、いわゆるリゾッタータによる調理に成功したので、紹介したいと思います。途中までは原作通り調理の順序を少し変えるだけですので、順を追っていきましょう。分量はどれも原作そのままです。オリーブオイルでニンニク、ベーコン、玉ねぎを炒める酒を入れて炒めるひきわり納豆を入れて炒めるここまでは全く同じです。次が重要な変更点です。 バターはまだ入れません。 バターを一緒に煮込んでしまうと、流石に香りが飛ぶと思うので、バターは最後に入れます。白だしを入れて炒めるバターを省いただけで、ここまでほぼ原作通りにソースを作っていますね。大きな変更点ここからは大きく変わっていきます。このタイミングでソースの水分をしっかり飛ばします原作では酒や白だしの水分が残っていることは許容されていますよね。後でパスタの煮汁を足して水分（と塩味）を補強するとはいえ、別にソース作りの工程で積極的に水分を飛ばすことには言及されていません。しかし本レシピでは、これから水を入れてリゾッタータを行うので、酒や白だし（もしかしたら納豆も）の水分を飛ばしておいて、水分量のコントロールを行いやすくするほうが重要です。また、水分を飛ばす過程で、ベーコンや納豆に酒や白だしの旨みが吸い込まれることも期待できます。フライパンに350mlの水を入れて沸かす小さじ1/3の塩を入れる1.6mmのパスタ100gを入れて7分茹でるこの辺は、普段のリュウジのワンパンレシピを見ている方なら見覚えがあるものだと思います。リゾッタータしてるところ茹で汁が大さじ1残るくらいまで水分が飛んだら、火を止めてバターを入れてよく混ぜるこの辺は至高を超えたボロネーゼを参考にした調理工程です。たぶん最後に入れたほうがバターの香りが活きると思いました。お皿によそって、卵黄を乗せて、黒胡椒とパセリをふったら出来上がりということで出来上がったのがこちらです。ワンパンで作る納豆カルボナーラかなりうまい煮込むことで納豆の風味が飛んでしまわないかなと不安だったのですが、出来上がってみると、パスタとの絡みがめちゃくちゃ良くなっていて美味しいです。焦がしチーズ納豆みそラーメンでは納豆を茹でても美味しいままだったので試してみましたが、正解でした。というわけで、原作との違いは以下のポイントでした。バターを最後に入れる炒め工程で調味料の水分は飛ばす水は350ml入れる水に塩小さじ1/3を入れるマジでめちゃくちゃ美味しいので、納豆カルボナーラ大好き勢の皆さんは是非とも作ってみてください。

納豆カルボナーラはワンパンで作れる

そーだいさんのアウトプットまとめを見て、久々に僕もアウトプットまとめしようかなと思いました。過去のまとめはこちら。アウトプットまとめ2017 - ナカザンドットネットOUTPUT2018 〜怒涛の50連発〜 - Speaker Deck今回はジャンル別にしてみます。登壇今年登壇したのは4回でした。新潟でLTイベントの「新潟5分Tech」をスタートできたので、来年は登壇の機会が増えるかも。毎月どこかの金曜日にやる予定なので、ちょうど新潟に来れそうな方がいたら顔を出してみてください。今あらためて考えるフルリモートでうまくいくプロダクトチームの作り方！ speakerdeck.com技術書典14スポンサートークplus.monicle.co.jp新潟5分Techniigata-5min-tech.connpass.comniigata-5min-tech.connpass.com同人誌2019年以来となる、技術同人誌を出しました。techbookfest.orgPull Request今年はひとつだけOSS活動をしていて、MUIのRemixサンプルをv1からv2に移行しました。全世界100万人のRemix + MUIユーザー（そんなにいねえよ）を救ったので褒めてほしい。github.comなんか今見たらRemix + MUIの体験をもうちょっとなんとかしようぜIssueが立ってたので、なんか手伝えそうなら手伝いたい。連載CodeZineさんで4本並行で連載を持っており、合わせて10本の記事が出ました。年内にもう一本出るかも？現場で役立つ！ React向けライブラリ詳説一覧|CodeZine（コードジン）再利用性とカプセル化のためのWeb Componentsを基礎から学ぶ一覧|CodeZine（コードジン）Remixを通じてWebを学ぶ一覧|CodeZine（コードジン）Next.jsの新しい概念を学ぶ一覧|CodeZine（コードジン）オウンドメディア会社のオウンドメディア、モニクルプラスでも時々ライター業をやっていました。純粋培養フルリモート開発組織のワーク＆ライフスタイル｜特集｜モニクルプラスマネイロで人気のお金の診断サービス「3分投資診断」誕生秘話｜特集｜モニクルプラス（インタビュイーとして）フルリモートのモニクルエンジニアチームが初めての開発合宿を開催｜カルチャー｜モニクルプラス3月の純粋培養〜の記事は当初、3,000字くらいで軽めのイベント参加報告をしてほしい、みたいなオーダーを編集長から受けていたのですが、初稿をゴリっと書き終えたら13,000字くらいのマッチョな記事に仕上がっており、急遽特集記事としてラベリングされたという事故があったりしました。懐かしいですね*1。ZennZennはスクラップ1本、記事3本でした。App Routerキャッチアップ（スクラップ）Streaming APIに対応したRemix 1.11のリリースノートを流し読むdocker/build-push-action@v3 + GCP のデプロイエラーを何とかした覚書Ajaxから始まった一つの時代の終わりsizu.meしずかなインターネットも始めました（正直立ち位置に困ってる）。技術書典15にいってきました｜nkznここ雑多に書いてましたが、だいたいアドベントカレンダーですね。やはり締切はコンテンツを生む……JavaScriptとDIについての雑文 - ナカザンドットネット書評：これからはじめるReact実践入門 - ナカザンドットネット至高を越えたボロネーゼは自分へのご褒美として作る最高のご馳走 - ナカザンドットネット3分投資診断の思い出 - ナカザンドットネットトキブルワリーはいいぞ - ナカザンドットネットプログラミングを始めてからこれまでどこにフォーカスしてきたか振り返ってみる - ナカザンドットネットバズレシピに慣れてきた頃に見始めた料理系YouTubeチャンネル - ナカザンドットネットモニクル社のzp-チャンネルを振り返る2023 - ナカザンドットネットまとめオンラインも含めれば、登壇は年に1〜2回ペースで続けられています。子供の手がかからなくなってきたらもう少しやりたい気もする。ブログ記事はここ数年で一番書いたかもしれないです。なんだかんだでCodeZineさんでの連載のおかげで、テクニカルライティングの習慣がついているのはいいことなのかも。基本的には家事と育児と本業と技術書典開発チーム業あたりで手一杯になって疲弊していますが、今後ともアウトプットは続けていきたいと思います。それではみなさま、良いお年を。*1:この出来事で本格的に編集部から「開発部門のライター役」としてロックオンされたような気がします。

アウトプットまとめ2023

モニクル Advent Calendar 2023の14日目です。昨日はコーポレートブランディング担当・高村さんの「表記のルールを考える　〜オウンドメディア運営の現場から〜」でした。記事公開後に社内で「僕は表記揺れのチェックにReVIEW-Templateのprh-rulesみたいなのを技術同人誌を書くときに使っててー」みたいな話をしたら、テンションぶち上がってました。さて、本題に入りましょう。1年半ほど前に、こんな記事を書きました。blog.nkzn.net筆者の入社前に分報文化が上手く定着せずに廃れていた times_ チャンネルでしたが、筆者が社内Twitterのような サボり場 雑談の場として利用したところ、コミュニケーションが活気づいた（ついでに命名規則を zp- にした）というお話でした。あれからエンジニアの人数も倍くらいになり、zpチャンネルの使われ方がどうなったかを振り返ってみようと思います。投稿頻度に差はあるものの、独り言チャンネルとしては引き続きワークしている筆者はXと同じかそれ以上くらいの頻度でzpに投稿していますが、そこまでではないにしても、みなさん自分のペースでzpチャンネルを活用するようになっています。zpの運用が定着したSWEのオンボーディングのワークフローにzpチャンネルの作成が組み込まれているのも大きいかもしれません。入社時のオンボーディング作業のために onboarding_(名前) というチャンネルを立てているのですが、ひと通りのチュートリアルが終わって、初めてのPull Request出したり初めてのデプロイをしたあたりのタイミングで、 zp-(名前) へとリネームする運用にしています*1。そのため、ここ1年半くらいで入社したSWEは必ずzpチャンネルを持ってるんですよね。やはり入社したばかりだとパブリックなチャンネルに質問や意見を投げるのが怖いということもあると思うので、「自分がイニシアチブを持っているチャンネル」がひとつあるというのは、安心につながる部分もあるのではないでしょうか。しらんけど。日報の投稿場所としてワークするケースが増えた割と意外だったのは、日報をつける人が続々と現れたことです。日報としてzpを使うケースが増えた初めは、ある新しく入ったメンバーが、習慣として出退勤の報告や日報を書いてくれていただけでした。それ自体は「ちょっとお堅い使い方だけど、それもまたzpだよね」くらいで筆者も眺めていたのですが、それを見た別のメンバーが「あれ、日報を書いておくと、翌朝や週明けに作業を再開するのがスムーズだぞ？」というのに気がついて、真似し始めたんですね。そこからは早くて、気がついたら開発チームの過半数くらいが日報を書くようになっていました。「上長に書かされる日報」というのは筆者も新卒の頃に経験があります*2し、まあまあ面倒なものでしたが、「自分のために書く日報」というのは、こんなに定着するものなんだなあと驚いたものでした。周りのメンバーからしても、どんな作業を抱えていて、何に困っているのかを検知しやすいので、本来の分報チャンネル的なメリットが一周回って戻ってきた感じがとてもよいですね。ちなみに、特に日報をつけなければいけない圧力はないので、入社をご検討いただいている方はご安心ください。あくまでも「日報でも書いておかないと明日の自分が今やってる作業を思い出せる自信がない」といったような各自の現実的な判断により、自発的に行われています。個人への連絡先や1on1の起点としての利用モニクルでは、情報のサイロ化を避ける目的で、DM（ダイレクトメッセージ）の利用が原則禁止*3になっています。そのため、「1on1のリスケお願いします〜」とか「今度飲みに行く時のお店どうします？」のような、個人対個人の色合いが強い連絡があるときは、zpチャンネルをDMの代わりに使うことがあります。DMと同じように「それはもっと適切な業務チャンネルで話したほうがよさそう」という話題が現れることもなくはないですが、見かけ次第誘導したりしなかったりしています。まあ他に誰もいない場所で喋られるよりは、多少のスレ違いのほうが1万倍マシです。まとめというわけで、zpチャンネルが色々な活用のシーンを見せ始めていて、やっぱり社内のコミュニケーションを活発にしていてよいというお話でした。*1:どこかの会社がそれで上手く回っているというのを見かけて真似したんだけど、どこだったか思い出せない*2:僕が書いてたのは週報だっけな*3:もちろん機密情報や社員自身の個人情報を扱う会話は例外です

モニクル社のzp-チャンネルを振り返る2023

バズレシピAdvent Calendar 8日目です。adventar.org今日は、筆者がバズレシピのおかげで料理に慣れてきた頃に見るようになった、別のYouTubeチャンネルについて紹介しようと思います。少し企画の主旨からは外れますが、たぶん需要はあるはず。料理技術のステップアップどんな技術の世界でも、入門書で最初の一歩を踏み出したり、自分にもできる！と自信をつけたりした後で、もっといろんなことを学びたいと思った時のために、「次に読む本」のような学習パスがあると、スムーズにステップアップできます。料理のステップアップについてはリュウジさんも言及しておりまして、2023年10月2日にアップロードされた、最高傑作カルボナーラ回の質問コーナーに出てきています。回答の主旨としては、まずは虚無シリーズのような簡単なレシピから始めてもらって、慣れてきたら至高シリーズにもチャレンジしてほしい、というものでした。わかる。まあ筆者からひとつだけ文句をつけるとするなら、例に挙げていた「虚無ボナーラ」は、いうほど簡単ではないので、初心者にはオススメしづらいという点でしょうか。終盤に半熟に仕上げる際の火入れの加減が難しくて、コメント欄で「いや、リュウジは弱火で混ぜろと言っているが、俺たち素人が火を入れてもやりすぎてボソボソになるので、諦めて火を消して余熱でできる範囲で仕上げたほうがマシ」という結論が出ちゃった程度には難しいんですよ。カルボナーラ系で一番簡単なのは、酒飲んでなかった太古に作られたレンチンカルボナーラです。少し余談が過ぎましたが、バズレシピの中にもステップアップのパスはあるということです。さて、それでは、他の料理系YouTubeチャンネルはどうだろう？と目を向けてみるのが本記事の主旨となります。バズレシピのいいところである、「家庭にある食材の範囲で手間をさほどかけずに美味しいものを作る」というテーマはさほど崩さずに、リュウジさんとはまた違ったアプローチで味付けをしている人を見ることで、調理技術の学びの幅が広がるのではないでしょうか。というわけで、サッポロ一番無水みそ油鍋からバズレシピを見始めて、そろそろ3年くらい料理をしている筆者が近年見ている他のチャンネルを紹介します。Koh Kentetsu Kitchenまずは料理研究家コウケンテツさんのチャンネル。www.youtube.comリュウジさんほどの時短テクニックを駆使することは少ないものの、家庭にある材料で、愚直にレシピを教えてくれます。ジョークが滑っても誰も突っ込まないテンポ感が独特です。チキンスティックや棒餃子、にら饅頭など、子供ウケのいいレシピには本当に助けられています。www.youtube.comwww.youtube.comwww.youtube.comバズレシピとの比較でいくと「常にほぼ至高」という感じがします。初心者がいきなり手を出すとしんどそうなレベル感ではありますが、バズレシピでしばらく修行を積んだ後なら、コウケンテツさんのレシピも恐れることはないはずです。だれウマ次はだれウマさんです。www.youtube.com筋肉系YouTuberという感じで、筋肉ネタ満載のトークに耐えられるかどうかが試聴を続けられるかどうかの分かれ目です。やっていきー＼＼💪マッチョ💪／／こちらはバズレシピの平均値くらいのレベル感のレシピが多いので、たまに手を出してもしんどいなと思わずに済むことが多いです。特に好きなのは、2023年5月アップロードの極ツナパスタです。www.youtube.com飴色玉ねぎを作る部分でやたらと時間がかかる点だけが面倒くさいものの、その面倒くささが気にならないくらいに、出来上がったものが美味しいです。ハマった時は週3で食べてた。ボディビルダーとしても活動している方なので、痩せめし系がガチなのもポイント高いです。【賛否両論】笠原将弘の料理のほそ道最後に、賛否両論、笠原さんのチャンネルです。www.youtube.com料理研究家ではなく、恵比寿の日本料理店のご主人という本職の料理人さんがやっているYouTubeチャンネルです。チャンネル開設が2023年6月ということで、最近始まったばかりと言っていいと思います。語り口は軽快だし、編集もお上手、もちろん腕も確かなのに、ちゃんと家庭料理で扱いやすいレベル感に落とし込んでくれています。今のところ、鶏むね肉の牛タン風とか、吉野家っぽいやつとか、親子丼を作ってみました。www.youtube.comwww.youtube.comwww.youtube.com料理中の雑談が深い経験に裏打ちされている感じで、大変勉強になります。リュウジさんだと「鶏肉の下処理はしなくてもいい。これはこれで美味いし」と時短目的で端折られている部分についても、「神経質になる必要はないけど、ここまではやってもいいかもね」という下処理の範囲を実践してくれていたりして、ワンステップ上を教えてくれる感じです。とはいえ、特にバズレシピよりも面倒という感じがしないのは、笠原さんの飄々とした語り口あってのものという感じがします。まとめというわけで、バズレシピで得た経験のおかげで見れるようになったチャンネルを紹介した感じになりました。技術的な面だけでいうとファビオ飯あたりも何を言っているのかわかるようにはなってきているのですが、いかんせん材料が全く家庭料理向きではないので、今回は除かせてもらいました。会社の同僚と話していると、バズレシピのおかげで白ごはん.comのようなレシピサイトが読めるようになってきて、重宝するようになった、といった話も聞くようになりました。筆者は動画じゃないと頭に入ってこないので使っていませんが、こういう方向性もアリですよね。バズレシピのおかげで身についた料理の基礎を、もっといろんな場面で使えるように、今後も学びを深めていきたいと思います。

バズレシピに慣れてきた頃に見始めた料理系YouTubeチャンネル

プログラミングを始めてからこれまでどこにフォーカスしてきたか振り返ってみる

Beer Advent Calendar 2023 - Adventarの3日目です。今回はトキブルワリーさんについて紹介します。トキブルワリートキブルワリーは佐渡ヶ島のマイクロブルワリーです。t0ki.beer元フラー社CTOの藤原さん（@wutali）がやっており、新潟でソフトウェアエンジニアをやっている筆者としては、かなり身近に感じられるブルワリーです。名前が独特ソフトウェアエンジニアが作っているビールということで、名前も独特です。今年のゴールデンウィークに、新潟明訓高校*1の隣にある亀田公園で行われていたバルイベントで飲んだのは、「BOOT」という名前でした。BOOT v2.0-b.YQH-1320t0ki.beerまた、11月には新潟駅南口近くのアマリロさんで、「SSL」というビールを飲む機会もありました。SSL v1.0t0ki.beer暗号化されていない爽やかなお味でした。どうやらP2B Hausさんで色々と飲める機会もあったようです。本日から #t0kiとP2B完全に理解した @t0ki_brewery プチTTO!!みてくださいこのラインナップ...謎ですね...面白いビール繋がってますグッズも出ます!遊びに来てくださいね〜 pic.twitter.com/nE2PFNPK29— P2B Haus🍻吉祥寺のクラフトビールレストラン✨定休日なし! (@p2bhaus) 2023年11月21日   ソフトウェアエンジニアなら、思わずクスリとしてしまうような名前のビールばかりです。もちろん味も試行錯誤が繰り返されていて、美味しいものばかりですよ！見かけた際はぜひ飲んでみてください。*1:ドカベンのあそこです

トキブルワリーはいいぞ

モニクルAdvent Calendar 2023の2日目です。昨日はCTOのがぶちゃんによる「エンジニア10人を超えて複数チームになった開発組織でCTOとして最近やっていること」でした。gabu.hatenablog.com2日目の今日は、筆者（@Nkzn）が入社直後に開発に携わった「3分投資診断」というサービスの思い出話をします。3分投資診断とは3分投資診断は、モニクルグループのワンマイルパートナーズが運営している、はたらく世代のお金の診断・相談サービス「マネイロ」が提供するサービスのひとつ*1です。moneiro.jp年齢や年収、現在の資産形成の概要、老後の過ごし方などを入力していくと、老後までにあとどのくらい資産形成が必要で、そのためにはどういった施策が有効そうなのかを、ざっくり診断してくれます。3分投資診断の診断結果の例思ったより反響があったオウンドメディアのモニクルプラスでも話したことがあったのですが、思った以上の反響がありました。plus.monicle.co.jp実は、筆者は計算エンジンの部分を2021年の秋ごろに実装し終えたあたりで開発から離脱しており、その後にこだわりのUI開発戦記があった時期については別のプロジェクトをやっていました。運用周りも当時のグロース関連のチームに任せてしまったので、あまり数字を追いかけることもしていませんでした。そんな筆者が驚くことになるのは、ちょうど一年前、昨年の12月に上記のインタビューを受けたときです。創業者の泉田さんから「3分投資診断すげーことになってるよ！めっちゃ使われてる！」と教えてもらって、そんなことになってんの！？と驚いた記憶があります。診断結果を受けてもっと詳しい対策を知りたくなったお客さんが、診断後にマネイロの相談サービスを申し込んでくれるケースも診断数に応じて増えているらしく、マネイロの2022年の成長を強力に後押ししたとのことでした。筆者からすると、入社から半年も経たないうちに作っていたものということもあり、がむしゃらに取り組んだいくつかの施策のうちのひとつ、くらいの感覚でした。入社から1年半経った頃に、1年越しに大ヒットを知らされて、やってきたことは無駄じゃなかったんだなあ、としみじみしたものでした。ドメインエキスパートとの共同開発で気をつけたことあまり表舞台で開発の話をしたことがなかったので、少しだけ開発の思い出話もしようと思います。基本的には役員の皆さんがドメインエキスパートとして仕様をまとめてくれていました。大量のスプレッドシートに根拠資料や計算式が並んでいるイメージです。筆者は計算エンジンの作成担当だったので、簡単なUIだけを用意して、基本的には数字のインプットとアウトプットが正しそうかどうかをドメインエキスパートと擦り合わせていく作業を行っていました。ここで特に意識したのが「正しさの確認しやすさ」です。プログラマーではないドメインエキスパートから「○○の項目のアウトプットが怪しい気がするんだけど、動作確認してる時はどんな数字が出てた？」と聞かれたときに、ソースコードを見せながら議論するわけにもいきません*2。次善策として、できるだけテストコードの処理結果で各種の途中計算の結果が見えるようにしてみました。例えば、年金の算出のために必要な「厚生年金対象勤務期間」や「標準報酬月額」の算出の自動テストでは、次のような実行結果が表示されます。PASS  hoge/services/index.test.ts  「厚生年金対象勤務期間」の算出    ✓ 退職年齢65歳、勤務開始年齢24歳、未加入期間5年の場合、厚生年金対象勤務期間は432ヶ月である (1 ms)    ✓ 退職年齢75歳、勤務開始年齢23歳、未加入期間10年の場合、厚生年金対象勤務期間は504ヶ月である  「標準報酬月額」の算出（令和3年3月データによる検証）    ✓ 年収が0万円のとき、標準報酬月額は88000円である    ✓ 年収が468万円のとき、標準報酬月額は380000円である    ✓ 年収が720万円のとき、標準報酬月額は590000円である    ✓ 年収が1000万円のとき、標準報酬月額は650000円である    ✓ 標準報酬月額表を検索できる（表はテストデータで代用） (2 ms)これなら、ドメインエキスパートに見せたり、検算してもらったりするのも、ある程度は容易です。最終的に数百件のテストケースを作成しましたが、ほぼすべてのテストケースをこのノリで作り、順次ドメインエキスパートに確認してもらいながら開発を進めていきました。こういったテストの作成においては、JUnitで学んできた*3Parameterized Testの考え方が役立ちました。今回はテスティングフレームワークとしてJestを採用していましたが、 test.each() を用いると、次のように簡単にParameterized Testが書けるので、重宝しています。describe("「標準報酬月額」の算出（令和3年3月データによる検証）", () => {  test.each([    [0, 88_000],    [468, 380_000],    [720, 590_000],    [1000, 650_000],  ])(    "年収が%i万円のとき、標準報酬月額は%i円である",    (yearlyIncome, standardMonthlySalary) => {      const actual = calcStandardMonthlySalaryYen(yearlyIncome)      expect(actual).toBe(standardMonthlySalary)    }  )  test("標準報酬月額表を検索できる（表はテストデータで代用）", () => { ... })})「読みやすいテストケース」というのは、かなり認知負荷を下げるのがわかったので、無理に慣れない英語でテストケースの名前を書いて、書いた人も読んだ人もパッと意味がわからないものになるくらいなら、躊躇わずに日本語で書いていくのがよいと思います。宣伝：マネイロの広告を探せ！12月1日から、東京メトロにマネイロの広告を掲出しています。答えはマネイロの3分投資診断で！（ワンマイルパートナーズUさん撮影）新潟からフルリモートで働いている筆者はなかなか見る機会がないので、もし見つけた人は #マネイロ のハッシュタグと共に @Nkzn まで「見つけたよ！」のリプをいただけると、めちゃくちゃ喜びます。中旬には筆者もモニクルグループの全社納会へ参加するために東京へ行く予定なので、そのときに探してみようと思っています。明日は新潟メンバー仲間の@circled9です。よろしく！*1:他にも、オンラインセミナーや相談サービスなどもあります*2:ドメイン駆動設計の本来の精神に則るならば、ドメインエキスパートが読めるようなプロダクトコードを書くべきではありますが、あれは英語が母語な人たちだからこそ成り立ってる部分もあると思うので、今回は勘弁してください。日本語でコードを書けばたぶんできるんだけど、そこまではやってられない。*3:そろそろ自分でも忘れかけていますが、Android Java出身エンジニアなんですよ僕

3分投資診断の思い出

12月といえばアドベントカレンダーの季節！　そして、昨年に引き続き、やります！　バズレシピアドベントカレンダー！adventar.org言い出しっぺということで、1日目をやらせていただきます。今年も色々と作ってきて、子供ウケが良かったレシピも時短に効いたレシピも色々とあったのですが、今回は「筆者個人が自分で食ってて一番美味かったやつ」というシンプルかつ最も重要なところを紹介します。至高を越えたボロネーゼ筆者の中で、バズレシピオブザイヤー2023はこいつでした。 「至高を越えたボロネーゼ」 です。www.youtube.com今年のパスタレシピは、冷製パスタや焼きスパゲティのような例外を除いて、ほぼ全レシピがワンパンパスタだったと思います。昔のパスタレシピをリゾッタータ（ソースでパスタを茹でて煮詰める手法）で再構築しつつ進化させることでネタ切れを防いでいた側面があったような気もします*1。そんな中で、筆者が今年本当に食べていて幸せだったのが、この至高を越えたボロネーゼです。至高を越えたボロネーゼ2020年に出ていた至高のボロネーゼのワンパンバージョンとなります。材料としてもそんなに変わらないはずなのですが、至高の〜よりも圧倒的に好みです。別茹でせずに煮詰めて作っているからか、ソースが麺にめちゃくちゃ絡むんですよねえ。動画ではコラボ相手として使っていた赤ワイン「ジェイコブズ・クリーク」は近所に売っていないので、適当な赤ワインを買ってきて作っていますが、全然美味しいです。一緒に飲むとマリアーーーーージュ🍷になります。動画の出始めのときには週3で食べてましたが、今は「ここぞというときの自分へのご褒美」として作るようになりました。ちなみに↑の写真は、11/12の技術書典15オフラインイベントと、11月16日の4年半ぶりの新刊脱稿を乗り越えた自分へのご褒美として作ったやつでした。デメリットはパスタとして食うしかないことこのレシピは、たぶん来年以降もプチハレの日のレシピとして鬼リピすることになるのですが、一点、ただ一点だけ、旧作である「至高のボロネーゼ」のほうが優れていると筆者が思っている点があります。至高のボロネーゼは、ソースだけを別の料理に転用可能なのです。白米に乗せて、ボロネーゼ丼を作ってみてください。旨すぎてトビますよ。至高を越えたボロネーゼは、良くも悪くも煮詰めることでパスタとソースが一体化し、ソースだけの状態が存在しないレシピです。そのため、ボロネーゼ丼を作る余地がほとんどありません。ごく稀に、食べるのが下手くそすぎて麺に具を絡めきれずに、食べ終わった皿にソースがそこそこ残っているという事態はありますが、これは直後にシメとしてボロネーゼ丼を食べるようなことはできても、冷蔵庫に保存しておいて後日リメイクしましょう、という話にはならないですよね。というわけで、パスタ以外にもボロネーゼの楽しみ方を模索したい場合は、至高を越えたボロネーゼは向いていません。至高のボロネーゼや、シン・ボロネーゼのほうが向いています。ワンパンパスタ最高！ワンパンパスタシリーズは、やっぱり洗い物が少ないという最高の利点があるんですよね。まな板と包丁とフライパン（＋α）あたりがあれば大体作れてしまうので、時間があまりない昼食にも重宝しました。リュウジさんがいつまでワンパンパスタを擦り続けるつもりなのかは分かりませんが、2024年も楽しみですね！2日目を書いてくれる人を募集中ですところで、このアドベントカレンダー、2日目に誰が書くのか決まってないんだけど、どうしようかなあ。誰も書かなかったら僕が最高傑作カルボナーラの話をしますが、欲を言えば誰か書いて欲しいなあ。12/2は会社のアドベントカレンダーの担当なので、他に書きたくないんじゃよ。誰か頼む……*1:これの別茹で版を作ったことある気がする、みたいなレシピが多かった

至高を越えたボロネーゼは自分へのご褒美として作る最高のご馳走

明日、2023/9/28に発売する「これからはじめるReact実践入門」を献本いただきましたので、簡単に目を通した感想を書こうと思います。これからはじめるReact実践入門目次目次かなり網羅性が高い足りない情報があったらプロを目指す人のためのTypeScript入門Next.jsについて、次に読む本はありますか？補足したいところCreate React Appを使わない選択肢もあるRecoilさんは開発状況がちょっと心配React Routerの知識が活きるアプリケーションフレームワークもあるまとめおまけ2023.9.28 10:36追記かなり網羅性が高いパラパラと読んでみて感じたのは、かなり手広く、それでいて一定の深みもある本だということです。出版社のサイトにある目次を見てみましょう。Chapter 1　イントロダクション1-1　ReactとJavaScript1-2　Reactアプリを開発／実行するための基本環境1-3　モダンJavaScriptの基本Chapter 2　Reactの基本2-1　はじめてのReact2-2　サンプルアプリの内容を確認する2-3　JSXの基本Chapter 3　コンポーネント開発（基本）3-1　コンポーネントを支える基本概念 – PropsとState3-2　条件分岐と繰り返し処理3-3　Props／Stateの理解を深める3-4　より高度なイベント処理Chapter 4　コンポーネント開発（フォーム）4-1　フォーム操作の基本4-2　Stateにおける構造化データの更新4-3　検証機能の実装 – React Hook FormChapter 5　コンポーネント開発（応用）5-1　組み込みコンポーネント5-2　コンポーネント開発でのスタイル定義5-3　コンポーネントのその他の話題Chapter 6　Reactライブラリの活用6-1　典型的なUIを実装する – MUI6-2　コンポーネントの見た目／動作をカタログ表示する – Storybook6-3　外部サービスからデータを取得する – React QueryChapter 7　フックの活用7-1　コンポーネント描画／破棄時に処理を実行する – 副作用フック7-2　さまざまな値への参照を準備する – useRef関数7-3　状態と処理とをまとめて管理する – useReducer関数7-4　コンポーネントの複数階層で値を受け渡しする – useContext関数7-5　ステート管理ライブラリ「Recoil」7-6　関数、またはその結果をメモ化する – memo／useMemo／useCallback関数7-7　優先順位の低いState更新を区別する – useTransition関数7-8　フックの自作Chapter 8　ルーティング8-1　React Routerの基本8-2　ルーター対応リンクの設置8-3　ルーター経由で情報を受け渡しする手法8-4　Routeコンポーネントの属性8-5　ルーティングに関わるその他のテクニックChapter 9　テスト9-1　単体テスト9-2　E2EテストChapter 10　TypeScriptの活用10-1　TypeScriptの基本10-2　ReactアプリへのTypeScriptの導入Chapter 11　Next.jsの活用11-1　Next.jsの基本11-2　App Routerの基本を理解する11-3　応用アプリ「Reading Recorder」を作成する11-4　アプリの実装を読み解く11-5　Vercelへのデプロイ668ページの本なので、そこそこ長いです。全体の構成としては、次のようにまとめられるでしょうか。Chap 1〜3：基本理念の解説や、言語の文法やReactの基礎文法について解説Chap 4〜5：React単独でできることChap 6：ライブラリを組み合わせると、更にできることが広がるChap 7：組み込みフックの解説と、フックを活用したライブラリの紹介、そして自作によって、関数コンポーネントをより柔軟にシンプルに扱うChap 8：シングルページアプリケーションを成立させるための画面遷移Chap 9：品質保証Chap 10：Reactで一通り何ができるのかわかったところで、型の支援を受けて実用レベルの使い方を知るChap 11：ここまで読めば、ある程度大きい概念も理解できるようになってきているはずなので、デファクトスタンダードなフレームワークであるNext.jsを学ぶ私もReactの学習については頭を悩ませたことがあるのですが、大筋としては良い流れで書いてあると思います。TypeScriptは現代の開発では事実上必須ではありますが、慣れていないうちにReactやReact関連ライブラリの解説をTypeScriptで行なってしまうと、今学んでいるものがReactなのかTypeScriptなのか、読者は混乱してしまうでしょう。思い切ってTypeScriptの解説を終盤の応用編として収録したのは、英断だったと思います。著者の山田さんと私は編集者と著者という関係で記事を一緒に作ることが多いのですが、やはりTypeScriptの登場タイミングの匙加減について話し合うと、お互いに「悩ましいけど、本気でライブラリの解説にフォーカスしたいなら、最後にちらっと解説するか、いっそTypeScriptに触れないか、ですよねえ」という結論になりがちなので、「最後にちらっと解説」の一例として、納得感のある構成になっていると思います。また、膨大なページ数を使っているだけあって、一つ一つの項目がかなり丁寧です。よそのプログラミング入門書には、初心者向けだからと詳細な説明を省いている残念な本も多いのですが、この本では細かい点まで親切に解説されています。おそらく、React歴3年目くらいまでの人が読んでも、初めて見る基礎的な知識が多く記載されていることでしょう。多くのページが実際に手を動かして、手元で動作を確認しながら読み進められるものになっています。そして、そのとき何が起きているのか、どんな仕組みで動いているのか、といった背景にも存分に触れているので、楽しみながら読み進められると思います。足りない情報があったらこの本は「広く・やや深く」という感じで進行していくので、物足りなさを感じる場面というのは少ないのですが、もっと深く知りたいな、と思った場合には、専門の書籍をあたると良いと思います。P264のコラムでは参考書籍が紹介されていますが、直接的な深掘りができるタイプの本が紹介されていないのが気がかりなので、この場を借りて、少し紹介しておきます。プロを目指す人のためのTypeScript入門まずは、相対的にちょっと浅めになっている、TypeScriptを深掘りしたい場合の本ですが、これは@uhyoさんのブルーベリー本で良いでしょう。gihyo.jpNext.jsについて、次に読む本はありますか？ぶっちゃけこれはかなり難しいです。現行のNext.jsの本は、大半がPages Routerを前提にしており、App Routerの使い方を書籍として取り上げた本がまだほとんどないはずです。商業出版の紙の本としては、本書が日本最速では……？くらいのレベルです。とはいえ、本書に記載されたNext.js（のApp Router）の使い方は、「よくできたチュートリアル」くらいのものなので、もっと深い情報も欲しいですよね。2023年9月現在では、「公式ドキュメントを読んでくれ……！」が一番誠実な回答かなという感じはしています。nextjs.org一応、私も↓でApp Routerの連載を行っていますが、少しずつしか進んでいないので、たまに読んでいただければ、くらいのものです。codezine.jpApp Router前提で、広く深くNext.jsについて扱った書籍が今後出てくることを期待したいですね〜。補足したいところ全体的にはよくできているのですが、細かいところで気になったところがあるので、補足情報を書いておきます。嘘が書いてあるわけではないので、本書の内容そのままに読み進めていただいても問題ありませんが、2周目を読み始めたあたりで気にしてみると面白いかもしれません。Create React Appを使わない選択肢もある本書の中で、Next.jsの話題が登場するまで、一貫してReact製アプリケーションの環境構築＆ビルドツールとして解説されているCreate React Appですが、現代では役割を終えたものとして、開発がほぼストップしました。最新のReact公式ドキュメントでも、プロジェクトのセットアップに使うツールにCreate React Appは登場しません。react.dev業務レベルのプロジェクトを作成するのであれば、Next.jsやRemixといったフレームワークを利用したほうが、より高度に通信と画面遷移が統合された、快適な開発体験を得ることができます。ただし、Create React Appと比べると、プロジェクトの最低限のファイル数は多くなりますし、一定の複雑さがあることは否めません。入門書での取り回しがいいのは、確実にCreate React Appなので、本書の選択は正解だと思います。ただ、本当に業務で実践できる内容に持っていこうと思った場合は、やはり本書の最後の章で解説されているNext.jsを導入したほうがよいでしょう。ちなみに、公式ドキュメントではほんの微かな言及しかありませんが、Create React Appと近い規模感＆使用感でプロジェクトを扱えるツールとして、Vite（ヴィート）があります。ja.vitejs.devほんの少しクセの強さはあるものの、こちらは活発に開発が続いていますし、一定の人気もありますので、場合によっては本書のサンプルをViteで作成・動作させてみても面白いかもしれません。Recoilさんは開発状況がちょっと心配Recoilは人気はあったものの、リポジトリ名がfacebookexperimental/Recoilだったことからも分かるとおり、Meta社内でも実験的なプロジェクトでした。社内ライブラリをちらっとカンファレンスで発表してみたら、思ったよりも反響があって、みんなが使い始めてしまった、くらいの流れだったと思います。さて、そんなRecoilですが、残念な話がありました。残念ながら、2022年10月にRecoilの主要メンテナの@drarmstr氏がMeta社の一斉レイオフで解雇されたJotaiで快適フロントエンド開発 | 株式会社ヌーラボ(Nulab inc.)主要メンテナの解雇というのは、まあまあの事故ですよね……移行先のライブラリとして考えられるのは、上記の記事でも紹介されている「Jotai」です。jotai.org元々Recoilにインスパイアされて生まれたライブラリとのことなので、Recoilのいいところはある程度受け継いでいます。本書のサンプルとしては、まずRecoilを使ってみるのがいいと思いますが、少し慣れてきたら、Jotaiで書き換えてみるのも、いいエクササイズになるかもしれません。React Routerの知識が活きるアプリケーションフレームワークもある本書では、シングルページアプリケーション（ブラウザ上だけで動くアプリケーション）の中で画面遷移を行うために、React Routerの利用方法が70ページに渡る大ボリュームで解説されています。しかし、残念なことに、その3つ後ろの章で解説されるアプリケーションフレームワークはNext.jsであり、React Routerで学んだ知識の大半はそのまま使うことができず、Next.jsのルーティングの癖を改めて学ぶことになります。Next.jsは世界で最も使われているReact向けのアプリケーションフレームワークですので、本書の選択は間違っていません。間違ってはいないのですが、もし幻のChap 12があったとしたら、ぜひ解説してほしかったアプリケーションフレームワークがあります。それはRemix（リミックス）です。remix.runRemixは、React Routerの開発チームが作った、ルーティングと通信をより快適に統合させながらブラウザとサーバーの通信をスッキリさせるためのフレームワークです。現在は開発チームが丸ごとShopifyに買収され、RemixはShopifyの公式フレームワークHydrogen v2のベースとなりました。shopify.devRemixをおすすめしたいのは、なにも開発チームが同じだから、という理由ではありません。Remixのルーティングは、React Routerによって実現されているので、Remixの画面遷移にはReact Routerの知識がとても役に立つのです。URLのパスを決定する方式だけはNext.jsとそっくりな、ファイルとフォルダによる仕組みを使っていますが、それ以外の部分はかなりReact Routerらしい機能が露出しており、React Routerを学んだ人には親しみ深く感じられることでしょう。 useHistory() や useParams() といったフックを利用する際には react-router-dom からインポートしますし、階層構造になっているルート*1では <Outlet /> をプレースホルダーとして配置します。一通り本書の内容を実践した上で「React Routerの空気感もいいなあ」と思われた方がいらっしゃいましたら、Remixのチュートリアル（英語）にチャレンジしてみていただけると、Remix推しとしてはちょっと嬉しいです。remix.runremix.runこれは宣伝ですが、本書著者の山田さんに編集してもらいながら、CodeZineにRemixの記事を連載しているので、興味があればこちらもお読みください……！！！codezine.jpまとめ本書の内容は実際よくできており、Reactの初学者だけではなく、React 3年生くらいのジュニアエンジニアであっても多くのことを学べる良書に仕上がっていると思います。ちょっと分厚くてお高いですが、それを補って余りある基礎知識を得られますので、ぜひ読んでみてください。これからはじめるReact実践入門　コンポーネントの基本からNext.jsによるアプリ開発まで作者:山田 祥寛SBクリエイティブAmazonおまけ実は、なんで献本をもらえたのか全くわかっていませんw普段、著者の山田さんが主宰しているWINGSプロジェクトでReact関連の記事を書かせてもらっていて、山田さんには編集者として忌憚のないご意見をいただいているので、その辺の経験がこの本に活きたりしたのかなあ、そうだといいなあ。2023.9.28 10:36追記P264の参考書籍のコラムに、僕のRemix連載を載せてくださっていました！ちゃんと僕とご縁のある本だった！ありがたい！codezine.jp参考書籍にRemix連載を記載していただきました！*1:RemixではNested Routesと呼びます

書評：これからはじめるReact実践入門

JavaScriptでDIコンテナってどうなの？という話題について雑に書きます。↓の話題について意見をくれと某所で言われたのでざっくり意見を書きます。mond.howDIコンテナ（≒依存性注入自動化フレームワーク）の発祥の地といってよさそうなJavaでは、DIコンテナでも使わないと依存性注入がやりづらいという言語上の制約があったために、DIを実現するためにはDIコンテナが事実上必須だった、みたいな雑な認識をしています。しかし、JavaScriptのように関数が第一級市民として扱われる（関数を値として引数に渡せる）言語では、依存性の注入や差し替えが概ね容易であることが多い（DIコンテナがなくてもDIを実現しやすい）ため、DIコンテナ的なフレームワークを導入する旨みはJavaと比べると薄めなのかなと思います（ふわっとした発言）。実際、DIコンテナを内蔵しているNestJSを使ってみると、規模次第では便利っぽいけど、規模次第では煩雑さが目立つ（exportsやprovidersを登録するのめんどい）なあという印象です。素朴なDIについて想いを馳せる僕がDIでやりたかったこと（だと自分では思っている）を素朴に思い出してみます。例として、次の fnA() は fnB() への依存性を持っており、モックが原則不可能です*1。/* 依存性がある関数A */import fnB from './b.ts';export function fnA(a: number) {  const b: Date = fnB(a);  b.setDate(1);  return b;}/* 使い方 */const dateA: Date = fnA(1); // fnBの挙動をモックできない一方、次の fnC() は↑と同じ処理を表していますが、 fnB() への依存性を持っていません。/* 依存性を注入している関数C */export function fnC(a: number, fnX: (a: number) => Date) {  const b: Date = fnX(a);  b.setDate(1);  return b;}/* 使い方 */import fnB from "./b.ts";const dateC: Date = fnC(1, (a) => fnB(a)); // 第二引数を差し替えることでfnBをモック可能fnC では、第二引数で fnB() 相当の関数 fnX() を外から注入しています。これも依存性の注入＝DIと呼んで差し支えないでしょう。上記の例では fnB() がそのまま実行されるだけですが、テストコード等では次のような書き方もできます。const actual: Date = fnC(1, (a) => new Date('2023-01-15')); // fnXの挙動を固定するexpect(actual).toBe(new Date('2023-01-01'));fnX() が内部的に fnB() を利用しない形に差し替え、常に固定の結果を返すようにしました。これで fnB() の実装を気にせず、 fnC() 固有の挙動のテストに集中することができます。これは素朴な例です。もっとDIコンテナが欲しくなるような複雑なケースもあるかとは思いますが、少なくとも僕は欲しいDIはこの素朴な例を少し複雑にした程度に収まることが多めです。まとめDIという概念で僕が最低限やりたいことは、前述のように素朴なものです。もっと複雑なケースではDIコンテナが必要になるケースもあるかもしれませんが、素朴なケースでDIコンテナを持ち出すのは嫌だなあと思います。用法容量を守って、必要なDIを必要な分だけやっていきましょう。*1:webpack等でimport元を差し替えてテスト用モジュールに差し替えるようなハックはできますが、テスト用途で気軽に使うには実装コストが見合わないように思います

JavaScriptとDIについての雑文

最近の流れを見ていての感想文なので、ideaとして投稿します。筆者のバックグラウンドとしては、Remixの商業記事を書いたり、App Routerの商業記事を書いたりしている人です。さて、筆者は2022年の秋から、社内システムではありますがRemixをプロダクション運用しています。また、Next.jsのApp Routerについても、パラダイムとしてはRemixにインスパイアされた部分が多い[1]おかげで、順調にキャッチアップできています。RemixとApp Routerは、ルーティングとデータフェッチを高度に統合しており、Progressively Enhanced SPA（PES...

Ajaxから始まった一つの時代の終わり

!GCP 素人の私と、心優しい同僚たちが、デプロイエラーに立ち向かった覚書です。筆者が GCP 素人なので、語り口が素人くさいのはご容赦ください。 3 行まとめ2023 年 1 月 14 日以降しばらくの間、GitHub Actions を用いて Cloud Run 等へデプロイする際に「コンテナイメージが見つからない」といった類のエラーメッセージが出たら、 docker/build-push-action@v3 の利用を疑ってみるprovenance に未対応のレジストリを使っているのがわかったら、 provenance: false をインプットとして指定すると、治る...

docker/build-push-action@v3 + GCP のデプロイエラーを何とかした覚書

Remix の v1.11 が出ました。適当に感想を書きます。https://github.com/remix-run/remix/releases/tag/remix%401.11.0!ざっくり流し読みして、ろくに動作確認もせずに書いているので、あんまり鵜呑みにせずに自分で調べながら読んでください。 クライアント側で完了を待つ defer サポートReact 18 には Streaming という機能があるんですってね。https://zenn.dev/shinbey/articles/8acce14b8b60e3「ファーストビューの表示には間に合わなくてもいいから、...

Streaming APIに対応したRemix 1.11のリリースノートを流し読む

Beer Advent Calendar 2022 - Adventarの19日目とバズレシピ Advent Calendar 2022 - Adventarの20日目を一緒にやっちゃいます。バズレシピ19日目を読んで、僕もそろそろリュウジが使ってるおろし金を買おうかなあという気持ちになりました。Microplane おろし器 正規輸入品 31.8×3.5×3.3cm ブラック プレミアムシリーズ ゼスターグレーター MP-0611マイクロプレイン(Microplane)Amazonさて今回は、バズレシピのビール煮（ちゃんとビールで作ったやつ）を食べながらビールテイスト飲料を楽しむという倒錯的な食事を楽しみました。ビール煮でビアリーIPAを飲むビアリーIPA STYLEビアリー IPA STYLEは、ビールテイスト飲料ビアリーの10月に発売された新味です。www.asahibeer.co.jpたまたまスーパーで見かけたので飲んでみたのですが、これがまたびっくりする旨さでした。ビアリーのIPA、なんだこれめちゃくちゃ美味いぞ……！？PUNK IPAを彷彿とさせるようなしっかりした苦味がある pic.twitter.com/hfzsguIFg4— なかざん💉💉💉 (@Nkzn) 2022年12月11日  しっかりした苦味があって、ビールテイスト飲料とは信じられないくらいです。ビアリーは普通にビールを作った後でアルコールを抜く製法なので、ほぼビールな味が出しやすいのかもしれませんね。ビアリー IPA STYLE原材料を見ると、酒類ではないのをいいことに（？）麦芽がモリモリと使われている様子が窺えます。もしかしてホップもまあまあ入っているのでは……？麦芽とホップがモリモリそして重要なのは、ゼロカロリーは目指していないので、それなりにカロリーや糖質が入っているということです。やっぱり旨みは脂肪と糖から生まれるので、これは仕方ないですね（遠い目）。至高のビール煮めちゃくちゃ旨いビアリー IPA STYLEをより美味しく飲むためにはどうしたらいいのか、私は考えました。ビール（テイスト飲料）に合うのはやはりビール！　ということで、ビールで作る最高の料理を作ることにしました。www.youtube.com材料は次の写真の通りです。近所のスーパーで豚肩ロースブロックが安く売っていて助かりました。至高のビール煮の材料飲むのはビールテイスト飲料ですが、料理の材料には妥協しません。一番のヤツ！（C.V.大蛇丸）です。肉に焼き色をつけて〜焼き色をつける飴色玉ねぎとコンソメとビールを入れて煮込んだら〜煮込むあらヤダ美味しそうヤダー小一時間煮込んだやつ実食というわけで冒頭の写真になったのでした。マリアージュ！ビールの旨みが染み込んだ肉を、ビールの旨みを忠実に残したビールテイスト飲料で流し込む！　美味しくないわけがないでしょう！ちなみに僕は夕食の後にも仕事をすることが多いのですが、ビアリーなら飲んだ後でも仕事に支障がなくていいですね。晩酌要員として優秀です。まとめというわけでバズレシピとビールという二つのアドベントカレンダーを繋いだテーマでやってみました。ビール好きのみんな！飲みたい気持ちはわかるけど、ビール煮も旨いから作ってみてくれよな！

ビアリー IPA STYLEを一番のヤツで作った至高のビール煮で飲む

バズレシピ Advent Calendar 2022 - Adventarの6日目です。生協で毎週キャベツが家に届くので、キャベツの消費方法に頭を悩ませることが多いです。そんな時は 米消滅鶏キャベツ にお任せ！youtu.be鶏肉は削ぎ切りするし、味噌と絡めて揉み込むし、キャベツはバターと一緒にレンチンするしで、そこそこ手間のかかるレシピではあります。それでも、濃厚に味噌を絡めて炒めた鶏もも肉が美味しくないわけがないんですよ。そこに蒸したキャベツまで絡んだら優勝間違いなしなんですよ。優勝する要素しかないこれはかなり子供ウケもいいので、キャベツの使い道に迷ったときはまた作ります。それではまた次回！

米消滅鶏キャベツ

バズレシピ Advent Calendar 2022 - Adventar の5日目です。無性にほうれん草が食べたくなることってありません？　僕はあります。サイゼリヤの「ほうれん草のソテー」がなくなったのが悲しい……というわけでほうれん草欲が高まったときに作るのが 至高のポパイ です。youtu.beなんか餃子の王将にこういうレシピがあったんだって？（よく知らない）途中でほうれん草を水にさらす工程があるのですが、これはマジで大事です。ここを端折ると、食べ終わる頃にはシュウ酸？の効果で歯がキシキシします。4人家族なのでだいたい3〜4人前になるように作るのですが、そうするとほうれん草を2袋くらい使うんですよね。2袋分のほうれん草って、多すぎてフライパンで一度に炒められないんですよ。ちょっとずつ足しながらなんとか炒めてます。それでも出来上がる頃には↓くらいに小さくなっちゃうんだから、不思議ですよねえ。ほうれん草と豚と卵ってなんでこんなに合うんだろうねバズレシピのほうれん草レシピはかなり少ないので、他にも出てくるといいなあ。ではまた次回。

至高のポパイ

バズレシピ Advent Calendar 2022 - Adventarの4日目です。朝ごはんにガツンと旨いものを食べたい日ってあるじゃないですか。そんな日に僕が重宝しているのが ねぎ塩ツナ油飯 です。youtu.be卵やツナ缶は家に常備しているので、あとは長ネギがあれば手持ちの調味料でだいたい作れます。卵の白身でスープを作るオプションもあるので、朝ごはんにもぴったりですね。旨みの暴力まあネギを刻むのはまあまあ手間なので、もうちょっと楽できないかなと思うところではありますが……これを食べると1日元気に過ごせるので、今後とも作っていこうと思います。

ねぎ塩ツナ油飯

バズレシピ Advent Calendar 2022 - Adventar3日目です。僕は新潟市の西区に住んでいるんですが、北区ではトマトの栽培が盛んで、トマトのシーズンになるとスーパーに新鮮なトマトが並びます。そんな環境で、2022年の夏〜秋にかけて何回かリピートしたのが、 ストラパッツァータ です。youtu.be必殺技の名前っぽいね。わかる。料理としては割とシンプルで、ニンニク仕立てのトマトソースと卵で作るスクランブルエッグという感じです。必殺！！！ストラパッツァータァ！！！熱したトマトが好きな人にはたまらねえんですよこれが。また、ニンニクの香りがうまいこと働いているのか、なぜか全く入れていないチーズのような香りがします。チーズ好きのワイ歓喜。レシピ通りに作ると「トマト1/2缶」という食材ローテに困る分量が出てくるので、だいたい2倍量で作っちゃいます。どうせ僕と妻にかかれば秒でなくなる。以上です！次回をお楽しみに！

ストラパッツァータ

バズレシピ Advent Calendar 2022 - Adventar の2日目です。冬になるとあったかいラーメンが食べたくなりますよね。というわけで冬季になるとリピしがちなレシピが、今回紹介する 30分で作る本格的な鶏醤油ラーメン です。youtu.be鶏もも肉ニンニク生姜長ネギ鰹節あたりの比較的常備している食材と、醤油などの調味料、それから中華麺があれば作れるので、材料調達の面ではかなり気軽に作れるレシピになっています。ごめん嘘。ハイミーという味の素社のマイナー調味料を使ってます。味の素 うま味だし・ハイミー 65g味の素Amazonまあスーパーにも売ってるものなので入手性はさほど悪くないはずです。何より、作っている間のビジュアルがめっちゃワクワクするんですよこれ。スープと鶏チャーシューを作っているところ（倍量・4人前）ラーメン好きにはたまりません。鶏チャーシューがかなりホロホロになるんですが、ホロホロすぎて上手く切れないのもご愛嬌です。上手にできましたーバズレシピの醤油ラーメンレシピの中では意外と手間がかからないほうのレシピなので、今後ともリピしていきたいと思います。ではまた次回！

30分で作る本格的な鶏醤油ラーメン

バズレシピアドベントカレンダーの遅れてきた1日目です。12/7に企画を思いついて書き始めてますが、日付だけ12/1にさせてください。adventar.org1日目は、おそらく2022年に僕が最も多く作った料理である、虚無ペペロンチーノです。目次目次虚無ペペロンチーノとは僕の虚無ペペロンチーノさらなる虚無を目指してマ・マー 早ゆでスパゲティ FineFast 2/3サイズ 1.6mmS&B おろし 生ニンニクまとめ虚無ペペロンチーノとは虚無ペペロンチーノは、バズレシピの 虚無シリーズ のひとつです。「ペペロンチーノ」と呼べるギリギリまで材料を削ぎ落として、手間を軽減したレシピになっています。bazurecipe.comyoutu.be実はリュウジと僕は同い年なので、僕も起き抜けはこんな感じなんだろうか……と楽しみながら見ています。僕の虚無ペペロンチーノ僕はタッパーで虚無ペペロンチーノを作ることが多いです。タッパーと虚無工程としてはざっくりと5分茹でパスタを半分に折ってタッパーにinおろしニンニク、オリーブオイル、コンソメ、輪切り唐辛子、塩をかける水を入れるレンチン追いオリーブを入れつつ混ぜて完成みたいな感じなので、本当に手間が少ないです。そして美味しい。最高。さらなる虚無を目指して現在でも月に2回くらいのペースでお昼ご飯に作っているのですが、省力化を考えると、元レシピの次の2点は面倒に感じるところです。パスタを折る生ニンニクをおろす特に後者の生ニンニクをおろす工程は、おろし金という洗い物が増えてしまいます。ズボラ飯として作りたいので、省力化したいですね。というわけで、愛用している食材をご紹介します。マ・マー 早ゆでスパゲティ FineFast 2/3サイズ 1.6mmまずは麺です。早ゆでスパゲティを愛用しています。www.nisshin-seifun-welna.comこのFineFastシリーズ、2020年ごろに食べたときには食感が悪くて全く食べる気にならなかったのですが、2022年のリニューアルで、食感が大きく改善されました。もう普通のパスタと遜色ないので、普通のパスタをほとんど買わなくなったくらいです。マ・マー 早ゆでスパゲティ FineFast | 研究開発 | 日清製粉グループ特に今回紹介する2/3サイズのものは、短いことから我が家の3歳児もそのまま食べることができ、1人飯だけではなく家庭での使用にも耐えるものになっています。また、我が家のタッパーに斜めですっぽり収まるので、サイズ感もバッチリです。タッパーにすっぽり収まるちなみにこのタッパーは 保存容器 楽ちんパック 角型 容量９５０ｍｌ クリアーブラック です。とまあ、取り回しがいいのはいいのですが、 虚無ペペロンチーノのレシピから、勝手にパスタを変えても大丈夫なの？ という疑問が浮かんできますよね。大丈夫なんです。 まず、このFineFast 3分茹で 1.6mmのスパゲティは、公式にレンジ調理ができます。www.nisshin-seifun-welna.com茹で時間は、 600W 7分 です。さて、それでは本家のレシピで使われている、マ・マー 5分茹で1.4mmをレンチン調理する場合の茹で時間はどのくらいなのでしょうか。公式には見つかりませんでしたが、目安を出してくれているレシピサイトがありました。www.tenukitchen.comこのサイトによれば、5分茹で1.4mmのレンチン時間は 600W 7〜8分 です。これは3分茹で1.6mmとほぼ一致します。つまり、レンチン調理する際の特性が 5分茹で1.4mmとかなり近い ことが期待できます。というわけで、リュウジのレシピのパスタ部分をFineFastに単純に置き換えても、美味しく食べることができます。レンチンする時間は変わりませんが、折る手間がなくなるだけでも少し気が楽ですね。出来上がりはちょっと太いペペロンチーノにはなりますが、これはこれで美味しいのです。S&B おろし 生ニンニクもう一つの省力化ポイントは おろしニンニクチューブ を使うことです。S&B お徳用おろし生にんにく 175g×5個お徳用チューブAmazonその効果は言わずもがなで、すりおろしニンニクを生成するための従来の工程である、生ニンニクの足下を切る・皮を剥く、すりおろす、という流れが、 チューブを絞る という一工程になるので、めちゃくちゃ楽です。洗い物も最低限にできる。最高。もちろん、至高シリーズ等の他の動画の中でリュウジがよく言っている通り、生ニンニクと比べるとチューブのニンニクはいくらか香りや味は弱いかもしれません。しかしチューブのニンニクも普通に美味しいのです。そして これは材料と手間を極限まで削ぎ落とす虚無レシピ なのですから、多少の味を犠牲にしてでも省力化に寄った技術選択をするのは、理に適ったことのはずなのです。実際、虚無ペペロンチーノの動画の中ではリュウジもチューブの利用にポジティブな立場を取っています。バズレシピの至る所に出てくる、すりおろしニンニクですが、味を1ランク下げてでも省力化したい時には、このチューブが大活躍するはずです。まとめというわけで、今年一番作ったので、研究の成果としてちょっと長めの記事になりました。次回から3行くらいで済ませたいです。

虚無ペペロンチーノ

React Router v6.4 が、破壊的変更を伴わないマイナーバージョンアップながら、機能追加の内容としてはかなり新しい世界観を追加してきたので、5 分くらい眺めて気づいたことをメモしておきます。!ろくに動作確認もせずに、Remix をちょっと齧った経験と、React Router のドキュメントを読んだだけの知識で書いているので、あんまり鵜呑みにせずに自分で調べながら読んでください。 Routing と Data Loading/Mutation の統合まずはリリースノートがこちら。https://remix.run/blog/react-router-v6.4そ...

React Router v6.4はClient Side Remix

伝わる技術記事を書くのって難しいですよね。今回は、私が技術記事を書くときに可能な限り実践していることを紹介します。 その記事において筆者と読者が持つべき課題感を共有する私が技術記事を書くときは、記事の初めに筆者と読者の課題感を共有する、ということを大切にしています。お金をもらっていないときは雑に本題から入ってしまうこともありますが、お金をもらって記事を書く場合は必ず実施している取り組みです。課題感とは何かというと、「どんな困りごとを解決しようとしたのか」ということです。課題感を記事の中で真っ先に提示することで、「この記事の中に現れるすべての要素は、その困りごとを解決へと導く方法...

技術記事を書くときに心がけているたった一つのこと

時間が流れるのは早いもので、GitHub Copilotが2022年6月21日に正式リリースされてから、2ヶ月が経ちました。会社でCopilot利用料が経費で落ちるようになったので、引き続き使っていきます。github.com当初は「コメントを書くとコードを自動生成してくれる」ツールとして有名になったと記憶していますが、2ヶ月使ってみた感想としては、ほとんどその使い方はしていません。コメントを参考情報の一つとして読んでくれていそうな挙動をするときはありますが、コード生成を目的としてコメントを書いたことは全くありませんでした。私個人の感想としては、 ちょっと強めのIntelliSense という感じです。今書いている近くにあるコードや、プロジェクト内のコードを参考にして、次に書きそうなコードをサジェストしてくれるツールとして重宝しています。例えば、5分前に書いたコードと、変数名やそこから生えているプロパティの名前は違っているものの、処理の大筋としては似ているコードを書いている場合などに、今いるスコープの中で使える変数や、そこから生えていそうなプロパティ（おそらく型情報を読んでいそう？）に合わせて、先に書いたコードの大筋に沿ったコードを生成してくれたりします。人によって体験が違う気がする私は比較的スムーズにCopilotに慣れることができたのですが、Twitterでタイムラインを見渡すと、そうでもない意見がそれなりに見られました。書いているコードとほとんど関係ない頓珍漢なサジェストばかりが出てくるどこかのリポジトリからコピペしたようなコードがサジェストされる特に後者の挙動は「著作権的にどうなの？」と物議を醸しているようですね。さて、Copilotをそれなりに使っている私が、なぜこの話題を他人事のように話しているかというと、特にそういった挙動に出会っていないためです。微妙に惜しいサジェストを出されて無視する（Escキーを押す）ことはあるので、前者に近い体験は全くしていないわけでもないのですが、「いったいどこを見て、そんなコードをサジェストしたんだ」と思うことは全くと言っていいほど無いのです。もしかして、見えている世界が違うのでは？と考えてみたところ、Copilotの利用開始時に適当に設定した項目のことを思い出しました。GitHubからのコピペを弾かれる設定GitHubの設定画面を漁ると、Copilotの設定画面があります。https://github.com/settings/copilot私の場合は、次のように設定してあります。nkznのcopilot設定設定項目は、次の二つです。Suggestions matching public codeAllowBlock ✅Allow GitHub to use my code snippets for product improvementsONOFF ✅Allow〜のほうは、よくある「製品の改善のために情報を共有する」の類ですね。手元のコードが送信されてしまうので、流石にこれはオフにしました。本記事で焦点を当てたいのは、 "Suggestions matching public code" のほうです。これは、CopilotさんがサジェストしようとしたコードがたまたまGitHub上の公開コードと一致した場合に、そのままサジェストとして出す（Allow）か、除外して別の候補を出す（Block）かを切り替える設定だと私は認識しています。ヘルプページにも記載があります。https://github.com/features/copilot#what-can-i-do-to-reduce-github-copilot-s-suggestion-of-code-that-matches-public-codeWhat can I do to reduce GitHub Copilot’s suggestion of code that matches public code?We built a filter to help detect and suppress the rare instances where a GitHub Copilot suggestion contains code that matches public code on GitHub. You have the choice to turn that filter on or off during setup. With the filter on, GitHub Copilot checks code suggestions with its surrounding code for matches or near matches (ignoring whitespace) against public code on GitHub of about 150 characters. If there is a match, the suggestion will not be shown to you. We plan on continuing to evolve this approach and welcome feedback and comment.かいつまんで読むと、「CopilotがサジェストしようとしたコードがGitHubで公開されているコードと一致（※空白文字は無視）した場合に、そのサジェストを実際に行うかどうか」の設定のようです。これをオフにしておけば、GitHub上のコードと完全一致したコードがサジェストから弾かれ、何かしらCopilotのアレンジが入ったコードがサジェストされることになります。前述した「頓珍漢なサジェスト」が出てくるのは、GitHub上のコードをそのまま出してしまった場合が多いのかなと思いますので、この設定をするだけでも、ある程度は快適になるのではないでしょうか。実際、私の手元では、プロジェクト内にあるコードをアレンジしたと思われるサジェストが出てくることが多いです。あまり大量のコードを生成してくれることはありませんが、次の1行に書こうと思っていたコードをそれなりの精度でサジェストしてくれるので、重宝しています。まとめGitHub Copilotの設定について紹介しました。ぶっちゃけると、 Allow にして使ったことがあるわけではないので、もしかしたら他の要因で妙なサジェストが出づらくなっている可能性もあり、本当にこの設定が支配的なのかはわかっていません。クラス名や変数名、関数名等の命名を適切に行なっておくと、サジェストの精度が高くなる気がするので、命名に気を遣っている人にはいいことがあるかもしれません。しらんけど。裏取りが全くできていない、個人の感想みたいな記事になってしまいましたが、とりあえず Block にしてない人は Block にして使用感を見てみてくださいという記事でした。※ 記事公開後、 Allow のままでも快適、というご意見もやはり見かけたので、そこまで支配的ではない可能性がある……宣伝株式会社モニクルでは、はたらく世代・子育て世代がお金の不安を手放せる手助けをするための金融サービス業をより広めるために、ソフトウェアエンジニアを募集しています。90秒だけお時間をいただいて、↓の動画を見ていただけると、どんなサービスをやっている会社なのかざっくりわかってもらえると思います。www.youtube.comマネイロにお金の相談をしにきてくださるだけでも嬉しいですし、もしこの記事を読んで会社自体にも興味を持っていただけたら、↓のCulture Deck（会社説明資料）を読んでみてください。 speakerdeck.comさらに興味を持ってもらえた方はMeetyで私と雑談しましょう！meety.netよろしくお願いします！

GitHub Copilotをたぶん最低限の挙動で使うための設定

React Router v6 で登場した <Outlet /> を活用すると、良い感じに共通レイアウトを組み込めて、さらに <React.Suspense> や React.lazy() を組み合わせると体験が良くなるのを見つけました。おそらく React Router v6 を利用する上での頻出イディオムになると思うので、自分用のメモとして残しておきます。最終的なサンプルコードはこちら。使用したライブラリは次のとおりです。見た目がしょぼいとテンションが下がるので MUI で装飾していますが、本筋とは関係ないので今回は特に触れません。react@18....

React Router v6のOutletとReact.lazyの組み合わせが便利

プロトタイピングしたツールを、身内へ気軽に公開したくなることってありますよね。Cloudflare Accessみたいなちゃんとしたソリューションをイチから導入するほどのモチベーションはなくて、Basic 認証が付いてればまあいっか、くらいの気軽さのやつです。近頃だと、筆者はフロントエンドプロジェクトを Vercel にデプロイすることが多いので、Vercel について調べてみました。Vercel には、主に Next.js から使うことを前提とした、Edge Middleware という仕組みがあります。これはページの表示前に割り込む形で通信結果に介入できるので、Basic 認証を...

VercelのMiddlewareを使って非Next.jsプロジェクトにBasic認証をかける

7月下旬からcovid19にかかってました。妻の助け、そして新潟市・新潟県の支援体制に支えられながら、今週後半に自宅療養を終える予定です。まだ終わってはいませんが、これがあったのは嬉しかったよ、というログを残しておこうと思います。軽症者の一例としてご覧ください。タオルたくさんすぐ食べられるもの水分ブリーズライトパルスオキシメーター布団の部屋干し設備＆スゴイッス県からの支援物資地味に嬉しかったものワンピース無料公開キャンペーン妻の手料理まとめタオルたくさん初日の時点で、妻が隔離部屋に清潔なタオルをいくつか差し入れてくれました。汗をかく機会が多かったので、これは助かりました。すぐ食べられるもの食欲は比較的早い段階で戻りましたが、家族の生活空間は可能な限り行かないようにしないといけないので、妻が差し入れてくれた食料にかなり助けられました。主にスティックパンとゼリー飲料でした。www.pasconet.co.jpinゼリー エネルギー マスカット味 (180g×6個)すばやいエネルギー補給 10秒チャージ ビタミンC配合 おにぎりおよそ1個分 エネルギー180kcal 森永製菓inゼリーAmazon水分エアコンがない部屋で自宅療養していたこともあり、水分の摂取には特に気を使いました。最初は妻に差し入れてもらっていたのですが、負担がバカにならないので、2日目に通販で麦茶を箱買いしました。伊藤園 健康ミネラルむぎ茶 650ml×24本健康ミネラルむぎ茶Amazon今も無限に麦茶を飲んでます。ブリーズライト快眠のお供に。鼻詰まりで眠れなくなる可能性が高かったので、ブリーズライトを毎日付けて寝ています。元々鼻のトラブルが多いので、常備していたのが功を奏しました。ブリーズライト クール レギュラー 肌色 鼻孔拡張テープ 快眠・いびき軽減 10枚入 【佐藤製薬】ブリーズライトAmazon今回使ったのは↑のクールタイプでしたが、万全を期すのであれば、強力に鼻孔を広げてくれるエクストラタイプを使ったほうが良いでしょう。ブリーズライト エクストラ レギュラー 肌色 鼻孔拡張テープ 快眠・いびき軽減 24枚入 【佐藤製薬】ブリーズライトAmazonパルスオキシメーター新潟県では、県医療調整本部からパルスオキシメーターが貸与されて、毎朝SpO2値を含む健康状態を報告することになっています。息苦しいな、と思ったときに測ってみて、98%になって「なんだ気のせいか……」となることが多かったです。余談ですが、大学の卒業研究が「Android + パルスオキシメーター」をテーマにしたものだったんですよね。blog.nkzn.netあれから12年ほど経って、パルスオキシメーターのお世話になるとは思いませんでした。ご縁ですねえ。布団の部屋干し設備＆スゴイッス隔離部屋からはなかなか出られないわけですが、寝ている間にはなかなかの量の汗をかくので、布団を敷きっぱなしというわけにもいきません。というわけで、日中は布団を部屋干ししています。布団を干すやつ＆スゴイッスこんな感じのやつを使ってます。アイリスオーヤマ 洗濯物干し 室内物干し タオルハンガー付き 布団も干せる 軽量 約5人用 幅約92~162×奥行約64×高さ約127.5cm CMB-92XRアイリスオーヤマ(IRIS OHYAMA)Amazonまた、布団を退けて空いたスペースでパソコンが触れるように、キャンプ用の椅子（スゴイッス）とフットレストを設置しました。【Amazon.co.jp 限定】 DOD(ディーオーディー) スゴイッス 高さ調整 4段階 焚き火 スタイルから ハイスタイル まで コットン素材 で 火の粉 に 強い チェア タンDOD(ディーオーディー)Amazonセノビィ フットレスト 足置き デスク下 【整体師が監修】 テレワーク用 足台 足枕 机の下 足置き台 （ブラック）セノビィAmazonこの環境でなんとかパソコン作業を再開できるようになりました。この記事もスゴイッスに座って書いています。県からの支援物資新潟県では、パックごはん等の食料品や除菌ウェットティッシュのような日用品などを、自宅療養者向けの支援物資として希望者に配布しています。www.pref.niigata.lg.jp私はもちろん外出できませんし、濃厚接触者になっている家族もあまり頻繁には買い出しに行けない状況になったので、お願いすることにしました。これが大人1人分の物資です。二箱届きました。支援物資1支援物資2食料品としては、ドライフルーツやドリンク、野菜ジュース、ゼリー飲料などのそのまま食べられるものだったり、乾燥海藻などの少し調理すれば食べられるものが入っていました。地味に嬉しかったもの我が家は手を洗えるような水盤が共用のキッチンと洗面所にしかなく、家族との接触をできるだけ避けたい私は手を洗う機会が少なくなっていました。そのため、手指の清潔を担保できるウェットティッシュが地味に嬉しかったです。アルコール除菌ウェットティッシュワンピース無料公開キャンペーン初めの数日間はパソコンを開く元気もなくて、iPadくらいしか使えなかったのですが、ちょうど時期が被ったのがワンピースの無料公開でした。game.watch.impress.co.jp魚人島からワノ国まではちょうど読んでなかったところだったので、読めてよかったです。いやほんと、これがなかったら2〜3日目は暇で死んでたと思う……妻の手料理胃に負担がかからないように、麺類を中心に食事を用意してくれた妻に感謝です。どれも美味しかった……まとめというわけで、自宅療養に入って嬉しかったものを並べてみました。雑多に書いてしまったので参考になるかは怪しいですが、皆様が発症したときの参考になれば幸いです。

covid19の自宅療養中にあって嬉しかったもの

私が所属する株式会社モニクルの開発チームでは、業務時間内に各個人の技術ブログを書いてもよいことになりました。2022 年 7 月現在の時点では、きちんとスプリントの中でストーリーポイントを付けたタスクにして、時間を確保することが推奨されています。アウトプットの習慣があるメンバーが多く見えるチームというのは、対外的にも魅力を説明しやすいです。今後のソフトウェアエンジニア採用を円滑に進めていくための施策の一環として、アウトプットを推奨していきます。 技術ブログまとめサイトはじめましたということで、メンバーの技術ブログをまとめた、monicle developers というサイトを作り...

開発チームの技術ブログまとめサイトを作って定期デプロイを設定した

社内の雑談用チャンネルとして #times_[人名] という命名規則があったのですが、このたび #zp-[人名] に変わりました。というお話。目次目次フルリモートと雑談times_nkznという無法地帯フォロワーが現れ始めたzp-nkznへの転生まとめ宣伝フルリモートと雑談COVID19の影響により、リモートワーク（テレワーク）が常態化する会社が増えてきました。ソフトウェアエンジニアの採用市場でも、フルリモートの働き方を常設している会社だけしか選べない、という方が増えてきているそうです*1。私が現在働いているモニクルは、ソフトウェアエンジニアやデザイナーの組織をフルリモート前提で構築しています。CTOの @gabu は札幌にいますし、私のチームメンバーは台湾と沖縄にいて、オンサイトでのコミュニケーションはそもそも選択肢に上りません*2。https://speakerdeck.com/monicle/about?slide=43メンバーが全国にいる（今は↑に加えて沖縄もいる）さて、フルリモートが可能になると、働く場所の制約がなくなったり柔軟に家事と仕事をスイッチしながら日常を過ごせたりと、メリットも多くなりますが、もちろんデメリットもあります。その中でも特に話題に上るのが「雑談の機会損失」です。モニクルではAroundによる常時接続のビデオチャットを常用しており、ソフトウェアエンジニアやデザイナーは勤務中の多くの時間でお互いの顔を画面の片隅に置きながら過ごしています。around.coログインは強制ではないのですが、単純に寂しさが薄れるのと、話しかけやすい、話しかけてもらいやすいというメリットがあるため、常駐している人が多いです。常時接続だと他人の環境音が気になったり、Webカメラ・マイクのスペックでストレスを抱えやすいところですが、次のようなツールを会社から全社に支給しているので、ストレスは最小限になっています。ノイズキャンセリングツールのKrispのライセンスそれなりにいいWebカメラそれなりにいいマイク詳しくはCTOが記事にしていたので、こちらをご覧ください。note.comそんな感じで、フルリモート勤務をストレスレスに過ごすためのツールはどんどん整備していく会社になっています。とはいえ、これだけ設備が揃っていても、実際に雑談が活発に行われるかどうかは別の話です。散発的に雑談は行われていますが、他の仕事をしている人の邪魔にならないかな、と気を使うので、Around上で雑談が発生するのは人数が少ない時が多くなりがちです。今思えば、ビデオチャット以外の雑談の機会が潜在的に求められていたように思います。times_nkznという無法地帯2010年代後半に「分報」という文化が盛り上がりました。私の観測範囲では↓の記事が火付け役だったように思います。craftsman-software.com日報の代わりとして、リアルタイムで個人的な業務メモを書いておくと、同僚・上司から状況を把握してもらいやすくなり、アドバイスをもらえる速度も上がる、といった業務効率化の文脈で流行り始めた文化だったように思います。私もそういった文脈は知らなかったわけではありませんが、根がツイ廃なので、社内Twitterが欲しいな、という邪な気持ちで、入社時にお世話をしてもらう場所だった #onboarding_nkzn チャンネルを #times_nkzn チャンネルにリネームしました。おかげ様で、timesの合間に仕事仕事の合間に楽しくtimesを投稿させてもらっています。my new gearな話題新潟自慢の話題（角上魚類は新潟の会社です！！！）だんだんと反応してくれる人が出てきて、雑談のハブとして機能するようになっていきました。Twitterとの使い分けとしては、若干の個人情報が混ざっても気にしなくてもいい場所、として重宝しています。timesには「Twitterには書けないけど同僚には知られてもいい個人情報」が気軽に書けるので重宝してます— なかざん💉💉💉 (@Nkzn) 2022年6月27日  フォロワーが現れ始めたそんな具合に、雑談のエントリーポイントの一つとして私のtimesがうまく回り始めたのですが、これを見た同僚が、新しくtimesを初めてくれました。社内Slackで同僚が「times_nkznが上手く回ってて楽しそうだったから」 というのを理由の一つにしてtimesチャンネルを開設したので、お祝いの言葉を贈りました pic.twitter.com/qp9VOpXSkU— なかざん💉💉💉 (@Nkzn) 2022年6月27日  私は私のためにサボって雑談していただけなので、誰かの役に立っていたとは思わず、嬉しいやら驚くやらという感じです。話を聞いてみると、そもそも私の入社より前に分報を運用しようとした歴史があったそうです。そのときは「リアルタイム日報」という業務効率化目的での運用を意識していたそうで、段々と疲れてしまって運用されなくなった、とのことでした。ここからの流れで、何人かの同僚が業務目的というよりは雑談目的のtimes運用を初めてくれて、雑談を始めるきっかけがかなり増えたように思います。zp-nkznへの転生ここでやっとタイトル回収です。雑談timesチャンネルが増えてきたことによって、CTOの中で「雑談timesがチームにもたらす好影響」への解像度が上がってきた折に、こんな気づきがあったようです。いい話。times とか分報が生まれた時代って「仕事の細かいつぶやき = 自分用のメモ & 誰かが突っ込んでくれるかもしれない」って意味合いだった気がするので、雑談主体の times は、もはやリネームが必要なのかもしれない / “弊社の執行役員に、#times_役員 なSlack分報を…” https://t.co/H5CCpzSiFw— がぶちゃん | 塚田翔也 | モニクルCTO (@gabu) 2022年7月15日  まあ惰性でtimesと呼んできたものの、元の分報文化とは似ても似つかない運用をしているので、「雑談times」を表す別の呼び方があってもいいよね、timesという名前のままだと分報文化を引きずって業務効率目的の話題しか書いちゃいけないんじゃないかと葛藤する人も出てくるよね、みたいな課題感なら私にもわかります。ここまで解像度が上がったことにより、これまで名前は知っていたものの概念が微妙にわからなかった、メルカリの #zp- という命名を完全に理解することになりました。ということを社内の times_gabu でもつぶやいたら「メルカリは zp- みたいだよ」と @Nkzn から教えてもらえて秒で解決しましたｗz: 雑談 p: パーソナルって意味だと思うけど、これを組み合わせた zp- いいな！ https://t.co/3d6qoT2ekY— がぶちゃん | 塚田翔也 | モニクルCTO (@gabu) 2022年7月15日  私が #times_gabu に貼ったのはこれ↓mercan.mercari.com元々、雑談グループチャンネルとしての #z- プレフィックスは営業メンバーにも認知されているので、その派生としての個人チャンネルに #zp- と名づけるのは全社的にも（timesよりは）受け入れられやすいだろう、ということで、雑談促進の施策として導入を進めることになりました。判断が早いまとめそんなわけで、 #times_nkzn 改め #zp-nkzn は今後とも適度なサボり場雑談のハブとして好き勝手な話をやっていきます。宣伝株式会社モニクルでは、はたらく世代・子育て世代がお金の不安を手放せる手助けをするための金融サービス業をより広めるために、ソフトウェアエンジニアを募集しています。90秒だけお時間をいただいて、↓の動画を見ていただけると、どんなサービスをやっている会社なのかざっくりわかってもらえると思います。www.youtube.comマネイロにお金の相談をしにきてくださるだけでも嬉しいですし、もしこの記事を読んで会社自体にも興味を持っていただけたら、↓のCulture Deck（会社説明資料）を読んでみてください。 speakerdeck.comさらに興味を持ってもらえた方はMeetyで私と雑談しましょう！meety.netよろしくお願いします！*1:某採用プラットフォームの営業さんから聞いた話*2:開発合宿くらいはそのうちやりたいね、と言っていますが

times_nkznが上手いことフルリモートの雑談を創出した結果、zp-nkznが生まれた話

ハッピーニューイヤー。2022年もよろしくお願いします。2021年を振り返ってみましょう。引き続きやっていること技術書典Web開発とCodeZine連載は引き続き取り組んでいます。2021年は技術書典11がオフライン・オンライン同時開催という暴挙に出たのがあって、なかなか精神的に追い詰められる初夏を過ごしていました。CodeZineは2020年末に始まったReactライブラリ連載を細々と続けています。どちらも2022年も続けていきます。techbookfest.orgcodezine.jp変わったこと5月末で10年間お世話になったウォーターセルを辞めて、OneMile Partnersに転職しました。ちなみに事業展開の都合で、11月には持ち株会社として新たに作られた株式会社モニクルに転籍しました。日本人のお金のリテラシーを底上げできるように頑張るのでよろしくね。blog.nkzn.net新しく始めたことウマ娘プリティーダービーにハマりました。そしてそれをきっかけにして、本物の競馬にもハマりました。予想はからっきしなので、もともと日本Androidの会で10年ほど前から親交があった予想屋マスターさんの力を借りながら、馬券購入を楽しんでいます。3〜5歳馬あたりの上位馬たちの名前は段々と見覚えがあるものになってきて、重賞レースを見るのが楽しみになってきました。住んでいる場所が新潟競馬場まで車で30分くらいのところなので、開催期間中は気軽に見に行けるのも嬉しいところです。コロナ前は子供向けのプリキュアショーなども行われていたので、またその頃に戻ってくれると子供たちも連れていきやすくなりますね。ウマ娘の元ネタの競走馬たちの子や孫が活躍する様子も見られ、オタクとしても満足感が高いです。5月に新潟県胎内市へ家族旅行に行った際、乗馬目的で松原ステーブルズさんにお邪魔したのですが、アグネスデジタルやマンハッタンカフェの子がいて地味に感動しました。夏にはキングヘイローの子も（色々あったようですが）仲間入りしたそうです。また行きたいですね。matsubarastables.webnode.jp2022年やりたいことせっかくハマったので、2022年は競馬に関するサービスやアプリを何か出せたらいいなあと思っています。あとは、証券外務員二種を取ってみたいなあ。プロメトリックで毎週試験が受けられるので、適度に勉強したらチャレンジしようと思います。

2021年を振り返る

Beer Advent Calendar 2021の5日目です。昨日はかんざむさんのバドワイザー メッシ缶でした。そういえばバドワイザーはなんだかんだで飲んだことないな……adventar.org今年は新潟らしいエチゴビールを飲むぞさて、今年はエチゴビールを飲もうと思います。日本第一号の地ビール醸造所であるエチゴビールについては2015年のアドベントカレンダーでお話ししたので、よろしければこちらもご覧ください。blog.nkzn.net新潟といえば米ですよね。エチゴビールにも、新潟らしさを出そうとしたのか、新潟米仕立てのビールがあります。それが、 こしひかり越後ビール です。田植えのイラストに郷土愛を感じるこしひかり越後ビール見た目には素直なピルスナーですが、原材料にはしっかりと「米」が明記されています。原材料にはしっかりと米が明記されていますただのスッキリ系かと思いきやどこかフルーティ実はお米をビールに入れるというのは、喉越しのいいスッキリしたビールに仕上げる際には時々ある手法なようで、そこまで独自性があることではないようです。となるとスッキリ系かなと思って飲んでみるのですが、これがどこかほっとするフルーティな味わいもあるのです。ある意味淡麗辛口の日本酒と近いかもしれません。新潟こしひかりから生まれた、ほっとする味わいのこしひかり越後ビール、皆様もいかがでしょうか。エチゴビール お試し 6缶 セットエチゴビールAmazon

🍺 こしひかり越後ビール 🍺

気分転換で下調べも何もせずに雑に書いた記事です。個別のライブラリについては間違ったことを言っている部分が多いと思うので、参考にしないでください。こんなツイートを見かけました。YouTube、yogaが使われてるんだ👀 pic.twitter.com/A9GVR7ByPb— Naturalclar(Jesse K.) #StopAsianHate (@natural_clar) 2021年11月17日  Yogaといえば、FacebookMeta社が作ったAndroid / iOS向けのレイアウトエンジンです。yogalayout.comReact Nativeのレイアウトエンジンでもありますが、まあ今回はReact Nativeの話はしません。YogaはAndroid向けのLithoやiOS向けのComponentKitといった形でも提供されており、ネイティブアプリのUI実装にも活用されている技術なので、YouTubeアプリで使われていることに大きな驚きはないのです。……が、やはりGoogleで採用されるには珍しいライブラリであることも事実なので、これはもっと怪しいライブラリが隠れているな？という直感が働きました。結論からいうと実際にやばかったので、目についたライブラリを並べて行こうと思います。Closure LibraryまずはGoogle謹製JavaScriptフレームワークとして古株の Closure Library さん。developers.google.com……おかしい……初手からおかしい……お前はネイティブアプリではないのか……？J2ObjC続きまして、「AndroidとiOSの両方から使えるライブラリを作りたい」という夢を持ったことがある人なら誰もが知っている J2ObjC です。developers.google.comJava言語で書かれたコードをObjective-C言語に変換するやつです。いわゆるトランスパイルツールですね。JavaScriptライブラリが出てきたあとだと、最終的にObjective-Cになる分だけまだ普通のツールに思えてきました。JavaScriptCoreお次はSafari / WebKitのJavaScriptエンジンである JavaScriptCore です。developer.apple.comまあClosure Libraryがあるんだから、JavaScriptを動かせる何かが出てくるのはなんとなくわかってた。iOS的にはほぼ標準ライブラリみたいなもんなんだから、特筆する必要はなかったと思うんだけど、なんで書いたんだろうなあ……jquery2JavaScriptライブラリ第2の刺客。言わずと知れた jQuery さんです。jquery.com今の最新はv3系だったと思うんですけど、わざわざ2って書いてあるのでv2なんですかね……どこで使ってるんだろ……LLVM次はコンパイラ基盤の LLVM さん。llvm.orgまあXcodeでビルドするときに使っているので、特に違和感はないのですが、他の異常さを際立たせるためにあえて置いておきます。quickjsさあ、今度は軽量JavaScriptエンジンの QuickJS だ！！！bellard.orgJavaScriptエンジン2つ目いただきました〜〜〜〜〜〜〜〜〜！！！！！！！！！！！なんで？？？？？？？？？？？？？？？？？？？？ES2020の仕様をほぼ網羅しつつも、ファイルサイズが小さく起動も高速という特長があるエンジンということで、そういうのが求められる場所に配置されたものと思われます。V8若き王者が帰ってきたッどこへ行っていたンだッ　チャンピオンッッ俺達は君を待っていたッッッ V8 の登場だ――――――――ッv8.devJavaScriptエンジン3つ目で〜〜〜す！！！いえ〜〜〜〜〜〜〜〜〜〜〜〜い！！！！！！！！！いやあ……どこに使ってるんだろ……まじでわからん……JavaScriptCoreとQuickJSがあったら大体のパターンいけるやろ……ええ……？まとめYouTubeアプリってガチガチのObjC/Swift製ネイティブアプリだと思ってたんですけど、JavaScriptエンジンを3つも積んでてjQueryやClosure Libraryまで登場するとなると、それなりのハイブリッドアプリなのかなあと認識を改めた次第であります。j2ObjCは5年前にちょっと調べたことがあったので、今でも元気にしているのが見れてちょっと嬉しかったです。おまけ：妄言というかアレなんですよね、React Nativeも「Yoga + JavaScriptCore」がレンダリングエンジン＋言語エンジンの構成なのを考えると、YouTubeアプリの中に「JavaScriptにビジネスロジックを書いてネイティブUIをレンダリングする」仕組みが作れそうな気がするんですよね。もしかしてどこかの画面はそういうフレームワークになっているのかなあ……

iOS版YouTubeアプリのOSSライセンスページが魔窟

会社の開発チームで常時接続に使っているAroundの月次？アップデートが来ていたので、リリースノートを流し読みします。new.around.coiOSアプリがビデオ通話に対応June 2021でリリースされたAndroid/iOSアプリでしたが、デスクトップアプリと同じルームへの参加はできるものの、ビデオ機能が開放されていませんでした。今回のアップデートで、ひとまずiOSアプリでビデオ機能を利用できるようになります。移植が単純ではなさそうなフェイストラッキング機能もちゃんと実装してくれたようで、頭が下がります。iPad版Aroundでカメラを有効にしてみたAndroid版はcoming soonです（察し）。画面共有のパフォーマンス改善「めっちゃファンが回ってたし重かったのでフルスクラッチで書き直したやで」とのこと。わいわい。画面共有中に配信者の画面内のAroundを「消さない」オプションCPUリソース節約のためのもう一つのアプローチとして、画面共有中に配信者の画面内のAroundを 消さない オプションが追加されました。配信者のaroundを消さないオプションぱっと見だとなんのことか分からない修正なので、例を挙げます。実は今まで、配信者が画面共有している画面内にAroundのUIがあっても、視聴者には見えなくなっていました。 配信者  視聴者     ここで、今回追加されたオプションをオンにします。すると、視聴者側にもAroundのUIが見えるようになります。 配信者  視聴者     標準の動作では、AroundのUIを配信対象から外すためにCPUリソースを消費していたようで、今回のオプションはその挙動をオフにする（＝配信者の画面に見えているままの見た目で配信する）ことで、CPUリソースの節約を図る新機能ということになります。今後の改善点1.0以降、リソース節約と安定性、複数プラットフォーム展開にフォーカスして頑張っているそうです。短期的にはパフォーマンスや質の改善を中心に改善していくとのこと。嬉しい。新規機能としては、ミーティングの録画機能を年内にリリースしたいとのことです。楽しみですね。

Aroundアップデート：September 2021 Editionまとめ

TL;DRAroundチームは顧客の気持ちがわかっていて最高大好きAroundのアップデートが来ました最近、会社のdevチームで、常時接続のコミュニケーションツールとしてAroundを利用しています。around.coAroundはさまざまな工夫により、ZoomやMeetに比べると精神的なストレスが少ない作りになっており、常時接続してもストレスになりづらくなっています。次の記事が詳しいです。japan.cnet.comさて、そんなAroundですが、6/12に大きめのアップデートが来ました。new.around.coざっくり眺めただけでも神アプデっぽさが出てたので、簡単に紹介します。概要モバイルアプリが出ましたLinuxアプリ（Beta）が出ましたHandoff機能の追加ミーティングを始めたときのデバイスとは別のデバイスでシームレスにミーティングを継続できるある時間まではPCでミーティングして、その後営業のために離席して車で移動を始めたりしても、スマホでミーティングを継続できるということモバイルアプリが出てきたタイミングならではという感じの新機能で嬉しいですねVoice Channels（音声のみの部屋）が作れるようになりましたMinimal Modeを使うとサムネイルのサイズを最小化して、できるだけ画面を隠さないようにできますメニューがネイティブ実装になりましたフィルターをTouch Barで選択できるようになったよ（Macのみ）Face Mask Modeをオンにすると、マスクをつけているときのくぐもった声がクリアに補正されるよ謎の技術じゃんAdd your team to multiple Rooms（まとめて招待）自分が入っているルーム一覧から任意の複数のルームを選んで、招待リンクを作成できます動作するプラットフォームにAndroid、iOS、Linuxが追加されるというビッグニュースに加え、ミーティングに参加したままプラットフォーム間の切り替えができるHandoff機能が同時にリリースされたことで、より「常にAroundと繋がっている」が実現しやすくなりました。PCから離席してキッチンにコーヒーを淹れに行く間も、スマホで雑談の続きを聞き続けることができそうです。今後追加される機能Vertical floating mode（顔が縦に並ぶよ！）ちょっと欲しかったやつAnnotations（共有スクリーンにお絵描きできるよ！）完全に！！！！！！！！欲しいやつ！！！！！！！！！Annotationsは早く来て欲しいですね。Slackの画面共有では画面上にマーカーが引けてめちゃくちゃ便利なのですが、おそらくそれに近いものになると思われます。仕事でモブプログラミングをしながら「ここ！ここです！ちくしょう、マーカーが引きたい！！！」みたいになってた*1ので、的確にペインポイントを押さえにきている印象です。まとめAroundチームは顧客のペインポイントをよく理解してる……しゅき……*1: https://pop.com/home の利用を検討していました

AroundのJune 2021 Editionが神アプデっぽい

2021年11月11日追記：株式会社モニクルに転籍しました。monicle.co.jpOneMile Partnersの親会社にあたる持ち株会社です。エンジニアリングやデザイン等、クリエイティブ系の部門はこちらに転籍となりました。この記事を読んで筆者の仕事に興味を持ってくださった方は、モニクルの名前で検索してみてください。よろしくお願いします。We are hiring!open.talentio.comはい、というわけでですね、昨日の退職エントリに引き続きまして、入社エントリです。OneMile Partnersとmoneiroなぜ入社したのかまとめといってもまだオンボーディングも終わっていない段階なので、業務内容について書くことは特にありません。簡単に会社紹介をしますね。OneMile Partnersとmoneiroこの度、OneMile Partners（ワンマイルパートナーズ）という会社で働くことになりました。onemile.co.jpmoneiro（マネイロ）というサービスを運営している会社です。moneiro.jpこのmoneiroは「資産のセレクトショップ」という謳い文句で、働く世代の資産運用を手助けするサービスです。お金のプロがニーズに合わせて株式や保険などの金融商品をいい感じに組み合わせられるよう、相談に乗ってくれます。難しいと思われがちな資産運用の敷居を可能な限り下げるためにかなり努力しているようで、グッドパッチさんの力を借りてガッツリとディスカッションをしながら、わかりやすい見せ方や導線について議論したそうです。goodpatch.com（ちょうど昨日リリースされた記事↑があるから出しとけって言われました）なぜ入社したのか「給料がよくなるから」というのはITエンジニアの転職においては珍しくもない理由なので、ここでは特に掘り下げません。話だけでもということで事業説明を聞いてみると、「手に入るお金は増えてきたけど、このお金をどう運用したら家族を幸せにできるかわからなくて悩んでいる一家の大黒柱の30代」は、メインターゲットのひとつらしいことがわかりました。つまり私です。日本人はお金に関するリテラシーが低い、という話はよく耳にしますし、自分もある程度お金の勉強をする中で「これはもっと早く知りたかったなあ」ということはたくさんありました。moneiroでお金のプロに相談することで、リテラシーの不足をある程度補えるようになるのであれば、これはかなり社会にとって良い影響があるはずです。前職で農業生産者さんを相手にしていたときや、Androidの初心者本を書いているときにも意識していたのですが、私はリテラシーが不足している層に補助輪のように寄り添うサービスで社会貢献をするのが割と好きなようで、moneiroが良い感じに琴線に触れたのでした。とはいえやはり、何より自分がターゲットユーザーであるというのは、事業を自分ごととして感じられる点で何より良いことだと思います。今までは本業と副業と子育ての合間の、あるかないかよくわからない余暇を使って家庭の資産運用について勉強していたわけですが、今後は仕事をしていれば事業のドメイン知識として資産運用を学ぶことができます。お得です。というわけで、事業がなかなか好みなのでした。他にも、居住地を変えずに新潟からフルリモートしてよいことや、あれこれと（給与以外にも）良い条件が重なったことから、転職を決めています。まとめというわけで、在宅勤務の会社から在宅勤務の会社に移るので、労働環境が何も代わり映えしない気がしますが、今日からワンマイルのなかざんとしてやっていきます。皆様よろしくお願いします。

OneMile Partnersに入社しました

追記：当初はglyphMapを使う記事として書いていましたが、ComponentPropsを使ったほうが楽そうなので、記事のタイトルを変更しました。記事の大筋は変わってません。React Nativeでアイコンを扱いたいとき、react-native-vector-iconsを使っている方は多いと思います。このライブラリは、Font AwesomeやIonicons、MaterialIconsやMaterialCommunityIconsなど、多彩なアイコン集をバンドルしています。おかげで、アプリ開発で要求されるアイコンの大部分をこのライブラリで賄える現場もあるのではないでしょうか。...

@expo/vector-iconsのアイコン名を型安全に扱う

本記事は、2018年に筆者が書いた「Web最新技術がてんこ盛りのreact-native-domから目が離せない」という記事の一部分を抜き出したものです。https://blog.nkzn.info/entry/2018/05/26/0203122018年の記事はproof of conceptなツールについて紹介していたものでした。そのため、時間が経てば陳腐化して読まれなくなりますし、私もそれでいいと思っています。ただ、一部分については2021年になっても参照してくれる方がいるような、それなりにまとまった特異なノウハウだったことがわかってきました。そこで、単独の記事として分離し、...

React DOMとReact Nativeの違い（2018）

Apple SiliconのMacに対応した、Homebrew 3.0.0が2021.2.5にリリースされました。https://brew.sh/2021/02/05/homebrew-3.0.0/筆者は以前から手動インストールしてApple Silicon対応版のHomebrewを使っていたのですが、せっかく正式対応してもらえたので、いつもの install.sh でインストールし直すことにしました。その過程で、少しハマりポイントになりそうな箇所を見つけたので、備忘録として残しておきます。 うっかりRosetta 2の実行環境で /usr/local にインストールしそう...