概要 Pages Router から App Router 移行時に一部既存の画面での CSR 遷移が 404 エラーになりました。 この件について調査したので、記事にしてまとめておきます。 前提 今回発生したバグの内容の再現環境の特徴として、以下が挙げられます。 Next v13.5.6 …

はじめに react-testing-library を使うと React アプリケーションのコンポーネントの挙動をテストすることができます。 詳しくは公式ドキュメントを読んでください。 https://github.com/testing-library/dom-testing-library testing-library.com ただ、re…

はじめに GPT 系で要約を実施するために、 Langchain の API (load_summarize_chain の map_reduce オプション ) を利用する機会がありました。そのために周辺の記事などを少し眺めてみる機会があったのですが、適切な解説記事がなかったため今回執筆してみ…

はじめに 今年の 2023年5月に Next.js の v13.4 がリリースされ App Router が Stable になり Vercel 推奨の実装方式となりました。 さらに10月 Next Conf にて、 Next.js v14 がリリースされ App Router を代表する新機能である Server Actions が Stable …

記事の概要 この記事は、Meta 社 relay.dev チームの Jordan Eldredge 氏の Tweet で紹介された GraphQL 成熟度モデル (GraphQL maturity model) を個人的な見解を加えながら和訳した記事です。 jordaneldredge.com GraphQL を実装する上で、どの程度 GraphQ…

概要 msw はいつの間にかモックツールとしてデファクトスタンダードになりました。 github.com Mock Service Worker という名の通り、Service Worker を利用して、アプリが API サーバーとやりとりするリクエスト/レスポンスをモックすることができるツール…

はじめに リリースされたプロダクトをエンハンス開発していく上で、保守性を保ち続けることがとても大事なのは言うまでもありません。 特に複雑な要件は実現するために難解なロジックを書く必要があります。 このことから 要件の複雑さと保守性はトレードオ…

概要 TypeScriptでフロントエンド開発をしているとバックエンドのAPIを呼び出す際に、APIのパラメータ、レスポンスの型付けをしたくなります。 僕は最近この型付けにZodを使い、APIクライアントにはZodiosというライブラリを使っています。 github.com この…

概要 GraphQL の理解を進める上で参考になったものを載せます。 React.js, TypeScript, Relay が使われるプロダクトを想定しています。 コンセプト GraphQL 公式 GraphQL とは、を正確に知るための公式ドキュメントです。 graphql.org GraphQLとクライアント…

概要 男性育休を取りづらいという話になるとき、おおよそ「他に取った人がいないから」とか「現場が取れる雰囲気じゃないから」とか、フワッとした理由だけ述べられるケースが散見されます。男性が育児に参加してこなかったから理解がないだけ、という話に片…

概要 1ヶ月間育児休業(無給)を取得しました。 育児休業を取るに至った経緯や取り方、また育児休職期間どのような生活を送っていたか記事にして残しておこうと思います。 本投稿に技術的な内容はありません。 また家庭や子供による部分が大きく個人差がありま…

概要 先日新規の Web サービス開発でフロントエンド側の技術選定を行いました。 利用する技術の中で GraphQL を提案した際に、RESTful な API で呼び出す方法と比較して納得感がないという意見があがりました。 そこで、なぜ、どういうときに GraphQL を選定…

会社から1月の1ヶ月間公式にお休みを頂きました。 やってみたことを挙げていきます。 自身の備忘録で、技術的な話はほぼ出てこないので、読んでもらっても基本得るものはないと思います。 ただ、もしかしたら誰かの何かに役立つかもしれないので、書き残して…

はじめに Next.js を使ったことがある人はたくさんいると思いますが、 コントリビュートしたことがある人は少ないのではないでしょうか？ Next.js は Vercel がメンテしてくれていますが、 OSS なのでコントリビューションできます。 この記事では、 Next.js…

概要 GCP 上で Web サーバーを公開するまでにやったことを忘れないようにメモしておく。 Web サーバーは、 アプリケーション(Node.js) DB (Postgresql) で構築される。 やることまとめ アプリケーションをローカルで開発する アプリケーションをコンテナ化し…

2021 HackDay Yahoo 主催のハッカソン HackDay 2021 に参加しました。 https://hackday.jp/ 開催日: 2021年03月20日 12:00 - 2021年03月21日 12:00 場所: オンライン 結果: 27日なのでまだ。 作ったモノ 「ぎょうれつや」 オンラインで行列に並んだり、自分…

はじめに すでに2021年がはじまってしまいましたが、気が向いたので去年を振り返ってみます。 本業 本業では1年間同じWebサービスの開発を継続して行いました。 一昨年の10月から開発を開始したサービスを昨年の2月にリリースし、 今も継続して開発を続けて…

はじめに この記事は Recruit Engineers Advent Calendar 2020 の18日目の記事です。 adventar.org 17日目は mic_psm さんの KubernetesとIstioを使ったDX改善 - 後ろを向いて後退します でした。 本記事の内容に入る前に、 本記事は複合的な条件が重なった…

Gatsby.js React.js + GraphQL ベースで簡単に静的サイトが作れるフレームワーク。 WordPress よりも軽量で柔軟で開発者初心者でも扱いやすく、 markdown を書くだけでオリジナルのブログが簡単に作れるため流行ってきています。 www.gatsbyjs.org 実際に使…

概要 サイズの異なる画像をタイル上に並べる際に、 column-gap と column-count が使えるということを知ったのでメモ。 タイル上と言っているのはこんな感じ↓の画像の配置のこと。 本記事の内容は下記のページの焼き直し。 css-tricks.com HTML + JS 下記は …

概要 あるコンポーネントの右上にラベルやバッジをつけるHTML/CSSの書き方を学んだので備忘。 もっと良い方法がある場合は教えて欲しい。 サンプルは以下のようなもの。 HTML HTMLでは親のDOM（class: badge）に、 - 三角形を描くDOM（class: triangle）と、…

はじめに アジャイルサムライをはじめ、アジャイルやスクラムなどに関する記事や文献を読み、アジャイル開発について理解を深めたので、これまでの経験等を含めて備忘もこめて理解したことと考えた内容を書き起こしておく。 アジャイルサムライ――達人開発者…

はじめに 昨日今日と JSConf JP 2019 に参加してきたので、聴講したセッションの内容を紹介します。 本記事は Recruit Engineers Advent Calendar 2019 1日目の記事です。 JSConf JP 2019 とは JSConf JP は世界的な JavaScript Conference である JSConf の…

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 ブラウザに関する最新のツー…

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

GCP の Cloud Function は誰でも呼び出せる GCP の Cloud Function で HTTP 関数を作成すると、デフォルトでは誰でもアクセスできてしまう。 （9/25現在。今後変わるらしい。） アクセス制限をつける 自身のアカウントに cloudfunctions/admin 権限がついて…

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

AMP Validator のChrome 拡張 Chrome 拡張で AMP validator が提供されている。 chrome.google.com 閲覧しているページに AMP 版のページがあるかわかったり、 開発している AMP ページが AMP-valid かどうか判断できる。 しかし、リクエストが多発する... n…

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_modu…

Next.js + AMP + typescript + styled-components ( + storybook)でやったことと気をつけること Next.jsでAMP化するときは、 pagesのコンポーネントに対して、nextAmpでwithAmpをimportし、withAmpで囲う。 import { withAmp, useAmp } from "next/amp"; wit…