概要 Pages Router から App Router 移行時に一部既存の画面での CSR 遷移が 404 エラーになりました。 この件について調査したので、記事にしてまとめておきます。 前提 今回発生したバグの内容の再現環境の特徴として、以下が挙げられます。 Next v13.5.6 Base path の設定あり App Router と Pages Router が共存している Base Path について Base Path の設定は next.config.js に以下のような記載があると、 module.exports = { basePath: '/base', } /pag…

はじめに react-testing-library を使うと React アプリケーションのコンポーネントの挙動をテストすることができます。 詳しくは公式ドキュメントを読んでください。 https://github.com/testing-library/dom-testing-library testing-library.com ただ、react-testing-library は若干厄介なところがあり、 state の更新や非同期な処理が含まれる挙動をテストしたい場合に、 React と react-testing-library の挙動を理解していないとテストが思ったように動作しない…

はじめに GPT 系で要約を実施するために、 Langchain の API (load_summarize_chain の map_reduce オプション ) を利用する機会がありました。そのために周辺の記事などを少し眺めてみる機会があったのですが、適切な解説記事がなかったため今回執筆してみることにしました。 筆者は LLM や生成 AI 、ましてや機械学習、ディープラーニング、そもそも Python にも詳しいわけではないため、一部事象を誤解していたり、間違った解説をしている可能性があります。 ご容赦いただくとともに、間違っている点についてはご指摘いただけると幸いです。 前提 LLM (…

はじめに 今年の 2023年5月に Next.js の v13.4 がリリースされ App Router が Stable になり Vercel 推奨の実装方式となりました。 さらに10月 Next Conf にて、 Next.js v14 がリリースされ App Router を代表する新機能である Server Actions が Stable になりました。 App Router はこれからのWeb開発の未来を担うフレームワークになっていくことが予想されており注目度の高い技術です。一方、これまでの Pages Router からの変更点の多さ、機能の興味深さ、設計の複雑さ、動作の不安定さ…

記事の概要 この記事は、Meta 社 relay.dev チームの Jordan Eldredge 氏の Tweet で紹介された GraphQL 成熟度モデル (GraphQL maturity model) を個人的な見解を加えながら和訳した記事です。 jordaneldredge.com GraphQL を実装する上で、どの程度 GraphQL を使いこなせているか判断するための参考になれば幸いです。 実際の成熟度モデルの和訳 最初の Tweet 私は、GraphQLの利点がまだ十分には理解されていないと思っています。ほとんどの組織では、GraphQL の提供する価値を捉えきれていません…

概要 msw はいつの間にかモックツールとしてデファクトスタンダードになりました。 github.com Mock Service Worker という名の通り、Service Worker を利用して、アプリが API サーバーとやりとりするリクエスト/レスポンスをモックすることができるツールです。 ただ、ふと気がついたら Service Worker なしでモックできるようになっていたので、その小ネタを書きます。 この記事は Recruit Engineers Advent Calendar 2022 の9日目の記事です。 adventar.org Node でも使える msw ご存じの方…

はじめに リリースされたプロダクトをエンハンス開発していく上で、保守性を保ち続けることがとても大事なのは言うまでもありません。 特に複雑な要件は実現するために難解なロジックを書く必要があります。 このことから 要件の複雑さと保守性はトレードオフになりがち です。 保守性を保つ方法はさまざまです。 例えば、可読性を高めるような書き方をした上でコメントを残したり、 Lintやテストなどツールを使ったりなどです。 しかし、この記事では書き方やツールではなく、 そもそも複雑になりそうな仕様を整理し要件から取り外すこと で保守性を保つ取り組みを紹介します。 この記事は Recruit Engineers…

概要 TypeScriptでフロントエンド開発をしているとバックエンドのAPIを呼び出す際に、APIのパラメータ、レスポンスの型付けをしたくなります。 僕は最近この型付けにZodを使い、APIクライアントにはZodiosというライブラリを使っています。 github.com この記事では、Zodios でZodのスキーマ定義から型安全なAPIクライアントを作る方法を紹介します。 他のやり方 Types定義 純粋にパラメータとレスポンスの type を Type Alias で定義し、fetch やaxios などの素のAPIクライアントに型付けするやり方です。 APIのパスと、パラメータ、レス…

概要 GraphQL の理解を進める上で参考になったものを載せます。 React.js, TypeScript, Relay が使われるプロダクトを想定しています。 コンセプト GraphQL 公式 GraphQL とは、を正確に知るための公式ドキュメントです。 graphql.org GraphQLとクライアントサイドの実装指針 GraphQL とはどういうものかが読みやすくまとめられています。 GraphQLとクライアントサイドの実装指針.md · GitHub GraphQL との向き合い方 2022 年版 2022 年現在における GraphQL の特徴がスライドでわかりやすくまとめら…

概要 男性育休を取りづらいという話になるとき、おおよそ「他に取った人がいないから」とか「現場が取れる雰囲気じゃないから」とか、フワッとした理由だけ述べられるケースが散見されます。男性が育児に参加してこなかったから理解がないだけ、という話に片づけられがちです。 その問題の本質に向き合わずに「男性育休を必須化しよう」という話が出ているので、現場から見ると現実と乖離しているように感じるのだと思います。 男性育休が取りづらい問題の背景には、もちろん男性が育児に参加してこなかったことも関係しているとは思いますが、僕は育児どうこうよりも問題視していることがあるので、それを書きたいと思います。 問題の本質は…

概要 1ヶ月間育児休業(無給)を取得しました。 育児休業を取るに至った経緯や取り方、また育児休職期間どのような生活を送っていたか記事にして残しておこうと思います。 本投稿に技術的な内容はありません。 また家庭や子供による部分が大きく個人差がありまくるので、参考程度に読んでください。 育児休業とは 育児休業とは、子を養育する労働者が法律に基づいて取得できる休業のことである。育休とも称される。女子に対するあらゆる形態の差別の撤廃に関する条約の第11条は育児休業の取得による解雇と差別を禁止している。 育児休業 - Wikipedia 産前産後休暇は女性に限った休暇ですが、育児休業は男性でも取得できま…

概要 先日新規の Web サービス開発でフロントエンド側の技術選定を行いました。 利用する技術の中で GraphQL を提案した際に、RESTful な API で呼び出す方法と比較して納得感がないという意見があがりました。 そこで、なぜ、どういうときに GraphQL を選定すべきだと思うか、文章にして自分なりにまとめておこうと思います。 前提 構成が BFF か BE かで意見は大きく変わりません。 例えば BFF として利用されるケースでは、バックエンド側には BE チームとマイクロサービス的な API が存在しており、 BFF として GraphQL を配置するようなケースです。Gra…

会社から1月の1ヶ月間公式にお休みを頂きました。 やってみたことを挙げていきます。 自身の備忘録で、技術的な話はほぼ出てこないので、読んでもらっても基本得るものはないと思います。 ただ、もしかしたら誰かの何かに役立つかもしれないので、書き残しておきます。 前提 自分：会社員。エンジニア。 妻：会社員。妊娠後期。 結婚しています。 夫婦ともに在宅ワークをしています。 妻は妊娠しており、春頃出産予定です。 両実家が遠く現在は二人のみで賃貸マンションに住んでいます。 時期が近づけば妻実家にて里帰り出産予定です。 専業主夫業 まず一番大きな時間をかけたのは専業主夫業です。 炊事、洗濯、掃除、買い物等、…

はじめに Next.js を使ったことがある人はたくさんいると思いますが、 コントリビュートしたことがある人は少ないのではないでしょうか？ Next.js は Vercel がメンテしてくれていますが、 OSS なのでコントリビューションできます。 この記事では、 Next.js に PR がマージされるまでに僕がやったことを紹介します。 実際の修正内容は詳しく述べません。 修正が取り込まれるまでの流れを紹介し、 「全然大したことしてないじゃん、僕でもできそう」と思ってもらえることがゴールです。 Next.js github.com またこの記事は Recruit Advent Calenda…

概要 GCP 上で Web サーバーを公開するまでにやったことを忘れないようにメモしておく。 Web サーバーは、 アプリケーション(Node.js) DB (Postgresql) で構築される。 やることまとめ アプリケーションをローカルで開発する アプリケーションをコンテナ化しておく ローカルで DB を立てる(on docker) ローカルで DB + アプリケーションを dockerize し動作を確認する(docker-compose) GCE で DB を構築する GKE でアプリケーションをデプロイする アプリケーションから DB を接続するためにファイアウォールを設定する G…

2021 HackDay Yahoo 主催のハッカソン HackDay 2021 に参加しました。 https://hackday.jp/ 開催日: 2021年03月20日 12:00 - 2021年03月21日 12:00 場所: オンライン 結果: 27日なのでまだ。 作ったモノ 「ぎょうれつや」 オンラインで行列に並んだり、自分で行列を作ることができるサービス。 Twitter でログインすると行列にならんだり作れたりする 並ぶ時にコメントできて、みんなのコメントを眺めることができる レコメンド機能でツイートや並んだ行列からおすすめの行列を提案してくれる gyoretsuya.mocch…

はじめに すでに2021年がはじまってしまいましたが、気が向いたので去年を振り返ってみます。 本業 本業では1年間同じWebサービスの開発を継続して行いました。 一昨年の10月から開発を開始したサービスを昨年の2月にリリースし、 今も継続して開発を続けています。 ここまで長い間、リリースしてからも継続して 1つのサービスに携わる経験ははじめてなので嬉しく思っています。 技術的な話では、自由度が高い職場なのでAMPやSXG, Next.jsなどの モダンでチャレンジングな技術に触れながら、楽しく働けています。 職責的な話では、立場がメンバーからリーダー職になりました。 初期リリース後は開発業務で…

はじめに この記事は Recruit Engineers Advent Calendar 2020 の18日目の記事です。 adventar.org 17日目は mic_psm さんの KubernetesとIstioを使ったDX改善 - 後ろを向いて後退します でした。 本記事の内容に入る前に、 本記事は複合的な条件が重なった際に表出する問題に注目したとてもニッチな内容なので、 Next.js や AMP を利用するケースが必ず起こりうるような問題ではないことにご注意ください。 Next.js と AMP オプションを使った Web アプリケーションに Storybook を導入した際に躓い…

Gatsby.js React.js + GraphQL ベースで簡単に静的サイトが作れるフレームワーク。 WordPress よりも軽量で柔軟で開発者初心者でも扱いやすく、 markdown を書くだけでオリジナルのブログが簡単に作れるため流行ってきています。 www.gatsbyjs.org 実際に使ってみると確かにほとんど自分でコードを書かなくてもサンプルは揃っているし、 デザインテンプレートも充実しているのですぐにブログを公開することができます。 しかし markdown で書く場合は、 markdown to html が自動的に行われてしまうので、 実際のブログ記事本文に対して C…

概要 サイズの異なる画像をタイル上に並べる際に、 column-gap と column-count が使えるということを知ったのでメモ。 タイル上と言っているのはこんな感じ↓の画像の配置のこと。 本記事の内容は下記のページの焼き直し。 css-tricks.com HTML + JS 下記は 100px から 400px までのランダムな大きさの画像を 25枚並べているだけ。 <div id="photos" class="photo"></div> function getRandomSize(min, max) { return Math.round(Math.random() * (m…

概要 あるコンポーネントの右上にラベルやバッジをつけるHTML/CSSの書き方を学んだので備忘。 もっと良い方法がある場合は教えて欲しい。 サンプルは以下のようなもの。 HTML HTMLでは親のDOM（class: badge）に、 - 三角形を描くDOM（class: triangle）と、 - その上に表示するラベルを描くDOM（class: label） をそれぞれ用意する。 子要素をそれぞれ before, after の擬似要素で用意しても書けそう。 必要以上にDOMを増やしたくない場合はその方がいいかも。 <div class="badge"> <span class="tria…

はじめに アジャイルサムライをはじめ、アジャイルやスクラムなどに関する記事や文献を読み、アジャイル開発について理解を深めたので、これまでの経験等を含めて備忘もこめて理解したことと考えた内容を書き起こしておく。 アジャイルサムライ――達人開発者への道作者:ＪｏｎａｔｈａｎＲａｓｍｕｓｓｏｎ,西村直人,角谷信太郎出版社/メーカー: オーム社発売日: 2017/07/14メディア: Kindle版 アジャイル開発の本質とは何か？ アジャイル開発はウォーターフォール開発とは異なり、仕様の検討から設計、開発、リリースまでを行うサイクルを短く何回も繰り返すものである。この理解は間違いではないが、このことだ…

はじめに 昨日今日と JSConf JP 2019 に参加してきたので、聴講したセッションの内容を紹介します。 本記事は Recruit Engineers Advent Calendar 2019 1日目の記事です。 JSConf JP 2019 とは JSConf JP は世界的な JavaScript Conference である JSConf の日本開催です。昨年まで日本Node.jsアソシエーションがNode学園祭として開催していた大規模JavaScript イベントが、Node.js に限らず JavaScript に関する内容のお祭りとして変化を遂げ、今年からJSConf JP …

Chrome Dev Summit 2019 とは Chrome Dev Summit is an annual conference where developers can learn about the latest tools and updates coming to the Google Chrome browser. Chrome Dev Summit は、開発者がGoogle Chrome ブラウザに関する最新のツールやアップデートについて学ぶことができる年に一度のカンファレンスです。 developer.chrome.com Google I/O よりも小規模だが、Web 系…

Nihonbashi.js で登壇した AMP 開発のつらみを発表した。 そのときのスライド。 speakerdeck.com

GCP の Cloud Function は誰でも呼び出せる GCP の Cloud Function で HTTP 関数を作成すると、デフォルトでは誰でもアクセスできてしまう。 （9/25現在。今後変わるらしい。） アクセス制限をつける 自身のアカウントに cloudfunctions/admin 権限がついていることを確認（そうでないと、未認証の呼び出しを許可するチェックボックスを操作できない）。また、呼び出す側のサービスアカウントに cloudfunctions/invoker 権限がついていることを確認。 gcloud の CLI からアクセス制限かけられないので、GCPのwebページ…

Next.js で AMP ページを作る Next.js では簡単に AMP ページを開発することができる。 Next.js v8 での方法 withAmp の HoC が用意されているので、関数でコンポーネントをはさみこむ。 import { withAmp } from ‘next/amp’ function Home() { return <p>Welcome to Next.js.</p> } export default withAmp(Home) Next.js v9 での方法 {amp: true} の config を export する。 export config = {a…

AMP Validator のChrome 拡張 Chrome 拡張で AMP validator が提供されている。 chrome.google.com 閲覧しているページに AMP 版のページがあるかわかったり、 開発している AMP ページが AMP-valid かどうか判断できる。 しかし、リクエストが多発する... next.js で getInitialProps で console.log する amp ページを作り、chrome からアクセスする。 getInitialProps [ warn ] [ info ] ready on http://localhost:3000 …

ValidationError: CSS Loader Invalid Options nuxt を v2.9 にあげようとしたら css-loader の validation error が出てしまった。 ERROR in ./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css& Module build failed (from ./node_modules/css-loader/dist/cjs.js): ValidationError: CSS Loader Invalid Options options…

Next.js + AMP + typescript + styled-components ( + storybook)でやったことと気をつけること Next.jsでAMP化するときは、 pagesのコンポーネントに対して、nextAmpでwithAmpをimportし、withAmpで囲う。 import { withAmp, useAmp } from "next/amp"; withLayoutも使いたいときはそれも囲う withAmp(withLayout(Index), { hybrid: true }); hybrid: trueをつけているときは、URLに ?amp=1 をつけ…