参考になった技術資料

Intercepting routes は Next.js 13.3 から追加された機能で、App Router（app ディレクトリ）において使用できます。Intercepting routes ではブラウザの URL を遷移先のものに上書きしつつ、現在のレイアウトに新しいページを表示できます。これは例えば Instagram のように、ユーザーのプロフィールから写真をクリックすると、写真をモーダルを開き、ページを更新したり共通したりするとデフォルトのレイアウトで表示する場合などに便利です。

増田で話題の特定のサイトで Chrome がめちゃくちゃストレージ (Cache Storage) を使用している（ように見える）問題について調べる。Chromeが報告するサイトごとのストレージ使用量は大嘘？実サイズはたったの5MB程度...!?

React folder structures... lots of approaches and opinions. But how do they evolve and at what cost? This is a journey of a growing codebase with a feature-driven folder structure at its end.

巷で、顧客の課題を解決しつつ、より良いシステムを作るための設計手法として、ドメイン駆動設計（DDD）が話題になっていると思います。 このドメイン駆動設計について、どのように実践するか、実際に実践してみてどう感じたか、という話はよく出て...

テックリードがどのような役割で、実際にどんな仕事をするのか、自身の体験を基にまとめました

A series of technical guides for building application authorization.

Fetch API の実装が広まり、 IE もリタイアを迎えたことで、今後忘れ去られていくことになるだろう XMLHttpRequest について。どのように始まり、どのように広まり、どのように使われなくなっていくのか。その間に残した多大な功績を残す。

はじめに JavaScriptにて文字数をカウントする方法に関する記事をいくつか目にする機会があり、今回実際に記事を参考に調べてみました。 簡単そうに見えて意外と難しいです。 String.length Googleなどで「Jav...

プログラミングをしているとき、変数名や関数名の命名に迷ったことはないでしょうか？時間をかけて考えた変数名や関数名を後で見返したときに何の処理なのかわからないと思ったり、他の人が書いたコードを理解するのに時間がかかった経験は誰でもあると思います。一般に、プログラマーはコードを書いている時間より読んでいる時間の方が長いと言われています。わかりにくい命名はコードを読んでいる時間を長くしたり、バグを生む原因になってしまいます。

河野と申します。2018年8月からマッハバイト事業部で業務委託（いわゆるフリーランス）として業務に携わっており、2022年6月から、テックリード（以降、TL）という立場となりました。 TLという言葉は広く使われていますが、実際に何をするのかは、会社や環境によってさまざま。 3ヶ月の振り返りがてら、ここに一例として公開し…

こんにちは！フロントエンドエキスパートチームの@nus3_です。 kintone のフロントエンド刷新プロジェクト（フロリア）では、品質を保ったまま開発を加速させるためにフロントエンドのテストを積極的に行っています。 今回はそんなフロントエンドのテストの実装例をいくつか紹介します。この記事がフロントエンドのテストを行う上での参考になれば幸いです。 テストに使用する主なパッケージ コンポーネントのテスト 補足: Testing Library の記法をチェックしてくれるeslint-plugin-testing-library カスタムフックのテスト 補足: React v18 では @test…

Author: @urahiroshi, Engineering manager of Web Platform team2022年8月4日、メルカリで “web-2” と呼ばれるサーバがシャットダウンされました。これはメルカリWeb版の開

はてなでは最近のプロダクトにおいて、他のソリューションと比較しても標準的なCSSに近い形でコーディングができるCSS Modulesが主に採用されています。CSS Modulesの先行きについてはメンテナンス体制に対して懸念があり、将来的な存続を危ぶむ声もあるようです。そこで、CSS Modulesについて歴史から振り返りつつ、現状のメンテナンス体制、そして将来までを一通りまとめてみました。長らくメンテナンスされていない仕様に対して、実装はそれなりにアクティブにメンテナンスされており、安定している印象があります。

今回はgraphql-codegenを使い説明します。今回の例は、graphql-codegen以外でも発生する可能性がありますが自動生成系が一番顕著に影響がわかりやすいです。 graphql-codegenはよく、graphqlのスキーマからtypescriptの型定義/reactのhooks等を自動生成するのに使われますが、これはnext.jsと組み合わせた場合、少しトリッキーな部分があります。 www.graphql-code-generator.com graphql-codegenはデフォルトでは1ファイルにすべて出力されますが、それに対しnext.jsは各ページをchunksとして…

TechFeed Experts Night#2 〜 フロントエンドフレームワーク特集 https://techfeed.io/events/techfeed-experts-night-2 Twitter https://twitter.com/__sakito__

こんにちは。@kenkoooo です。 教科書に載っているようなアルゴリズムって勉強しても仕事では全然使わない、と見せかけて意外と使うなぁと感じたので、仕事で見たことがあるアルゴリズムをいくつか紹介します。 広告を配信したい！ あなたはウェブサービスの会社で働いています。サービス利用者のユーザーに広告を配信することで、広告主からお金をもらっています。 あなたは今から広告主からもらった広告をユーザーに配信します。 広告主が 社います。 広告主 は広告を 人に配信したいです。 配信対象となるユーザーが 人います。 ユーザー は広告主 の広告は受け取りを許可しています。 ユーザー は、合計 件までし…

皆さんこんにちは。今回は、2022年7月25発売の『 TypeScriptとReact/Next.jsでつくる 実践Webアプリケーション開発 』を読み終わったので、書評という形で感想と紹介を述べたいと思います。筆者はもともと技術書を読まず「ネットでいいやん」派だったのですが、このたび TypeScript…