はじめにこんにちは、 @okarin です。みなさんはトラブルが発生した時に他のメンバーに頼りっきりになってしまったり、ここは自分は分からないからといって進んで対応できなかったりと、プロダクトの理解が浅くてなかなか貢献できずにもどかしくて悩んだことはありませんか？ 私は弊社に入社してもうすぐ1年になるのですが、 少し前までそのような状態でした。そこでプロダクトの理解を深めるために試行錯誤してきて、

背景こんにちは、 @okarin です。弊社のプロダクトのサーバーサイドは Golang で開発していることが多く、 ORM のライブラリとして GORM を採用しています。 GORM を利用していくなかで、以下のようなコードが想定したとおりに動かないことに気づいたので、記事にまとめました。type DB struct {db *gorm.DB}func (d *DB) DeleteS

こんにちは。@Himenonです。動画が公開されましたので、 TypeScriptで型定義を信頼しすぎず「信頼境界線」を設置した話のスピーカーノートも合わせて公開します。発表場所/日時: JSConf JP 2023 11/19 トラックC 13:30-14:00トラック: https://jsconf.jp/2023/talk/himeno-kosei-1/スライド:&nbs

はじめにこんにちは、 @okarin です。以前に、 「Node.js で DataLoader を使って GraphQL の N+1 問題を解決する」という記事を書きました。記事内では DB などへのリクエストをバッチとしてまとめることで、 N+1 問題が発生しないようにすると述べました。しかし、graphql/dataloader ではどうやってバッチ処理を実現しているのかは難しいと判断して詳

はじめにこんにちは、 @okarin です。弊社に入社してから Node.js を使って開発する機会が増えており、イベントループという用語をよく聞くようになりました。しかしながらその中身はどうなっているのか自分にとってはブラックボックスだったので、イベントループに関して調べてみました。Node.js の非同期処理の仕組みNode.js における非同期処理は、libuv というライブラリがその役割を

こんにちは、Iwataです。みなさん、ReactのuseSyncExternalStoreはご存知でしたでしょうか？意外と知られてないかなと思い、今回はこのuseSyncExternalStoreについて紹介していきます。useSyncExternalStore とはuseSyncExternalStoreはReact18で追加されたReact Hookで、外部ストアをサブスクライブできるようにし

こんにちは、@Himenonです。Webフロントエンドの開発ではGitのSqash Mergeを利用してコミットしています。なぜSquash Mergeを利用しているのか紹介していきたいと思います。Squash MergeとはSqash Mergeは特定のブランチに含まれる複数のコミットを1つのコミットにまとめて、別のブランチにマージすることを意味します。例えば、次のようにリポジトリの初期化用のP

こんにちは、@Himenonです。Chromeに存在していたバグについて今日は紹介しようと思います.。この問題は弊社だけの問題でなく、Chromeを利用しているユーザー全員に発生していたと考えられます。Chrome v116で修正されたバグとは？修正された内容自体は以下のコミットを見ると速いでしょう。確認してみます。ipcz: Fix stalling proxy bypasshttps://ch

はじめにこんにちは、 @okarin です。今回は graphql-tools/utils を使って、GraphQL のカスタムディレクティブを利用して GraphQL のクライアントから意図しないデータへのアクセスを防ぐ、といった試みをしたので、記事にまとめました。カスタムディレクティブの利用方法スキーマ定義specification に載っているとおりにカスタムディレクティブを指定します。今回

こんにちは、@Himenonです。弊社のWebフロントエンドの技術選定について紹介します。前提提供しているプロダクトの性質エンタープライズ向けのコーディング試験サービス（SaaS）企業（組織）が利用するドメインと、試験の受験者が利用するドメインが存在するデスクトップ環境での利用を前提とするブラウザは最新版のみ対応ドメインが多様試験の作成、回答、レポーティング、共有 …ライブコーディング、ビデオ通話

はじめにこんにちは、 @okarin です。以前の記事で、 DataLoader を使って N+1 問題を解決する仕組みを紹介しました。しかし、実際に運用していく中で、バッチ関数と composite key に関していくつか気をつけることがあったので記事にまとめました。バッチ関数の引数と返り値の制約バッチ関数の2つの制約DataLoader のバッチ関数には2つ制約があります。これらは grap

背景こんにちは、 @okarin です。前回の記事で、 graphql/graphql-js と ardatan/graphql-tools を使った実装をみていくのに必要な前提知識を整理したので、今回はソースコードをみながら、処理の中身をみていきます。graphql/graphql-js の使い方ardatan/graphql-tools の makeExecutableSchema の例を少し

背景こんにちは、 @okarin です。GraphQL のクエリをクライアントからサーバーに送ると、以下のような実行結果が返ってきます。今回は GraphQL のサーバーが GraphQL のクエリから値を返す仕組みが気になってきたので、調べてみました。本記事は前編と後編に分かれています。 graphql/graphql-js と ardatan/graphql-tools を使った実装をみていく

概要こんにちは、6月にハイヤールーに入社した @okarin です。今回は GraphQL のサーバーサイドを開発している際に発生した N+1 問題を、 graphql/dataloader を使って解決することができたので、記事にまとめました。なぜ GraphQL で N+1 問題が起こるのかまず、スキーマが以下のように定義されているとします。type Author { id: Int

こんにちは、@Himenonです。ReactのPropsから特定の型定義を抽出する方法を様々なパターンで紹介します。紹介する内容この記事が活躍であろうケースTypeScriptでReactのコンポーネントを作成していると、型の再定義を行うケースがあります。例えば、使用しているライブラリから型定義がexportされておらず、自分で定義しなおしたり、アーキテクチャのルールでexportできる型定義を制

こんにちは、Iwataです。GraphQLのエラーハンドリングについて紹介します。GraphQLのレスポンスの仕様まず、GraphQLのレスポンスの仕様を見ていきましょう。レスポンスの形は次のようになります。{ "data": { ... }, "errors": [ ... ]}リクエストに対するレスポンスは JSON形式で data と errors のキーが返ってきます。data はク

こんにちは、@Himenonです。react-routerのためのMiddlewareを実装する方法を紹介します。react-routerに対するMiddlewareとはreact-routerにはmiddlewareという概念は直接的には存在しません。しかしながら実際のユースケースにおいてルーティングにmiddlewareが必要なケースがあります。例えば、権限などのアクセスに必要な情報を確認して

こんにちは！共同創業者の谷合です。コーディング試験サービスを提供するハイヤールーは今年の6月2日に開催される Go Conference 2023 にシルバースポンサーとして参加させていただきます！ハイヤールーとしてGo Conferenceの初のスポンサーとなります！オンライン開催となった今年は、オフィスアワーでハイヤールーのブースを出させて頂く予定です。当日は、弊社COO 高柴と 私、谷合が参

こんにちは、@Himenonです。表題の通り、Reactの実装中でbooleanを極力使用しない方法を紹介します。※ 注意「booleanを使うな！」という話ではありません。こういう方法もあるよ、という話です。booleanで表現される状態はString Literalを利用するUIの状態を表すために、複数のbooleanが条件に利用される場合、各状態に名前をつけて状態を表現するほうが、可読性が高

こんにちは @poster-keisukeです。今回は 4/7日にハイヤールー初のオンライン勉強会 HireRoo Tech Talk #1 を開催しました。この記事では、開催に際してのモチベーションや、集客方法、またその結果について詳しくご紹介いたします。本編の詳しい内容については、別途記事にまとめていますのでそちらをご参照ください。HireRoo Tech Talk #1を開催しました！この記

こんにちは。ハイヤールーのIwataです。本記事ではReactのkeyによるStateのリセットについて解説していきます。Reactの公式Documentのpreserving and resetting stateの内容について紹介します。想定読者フロントエンド初心者〜中級者フロントエンドをメインでは触らない方React keyについてReactの要素を一意に識別するためにkey属性が使用されま

こんにちは、@Himenonです。フロントエンド開発のコンテキストで最近あまり聞かなくなったclass構文の使い方について紹介します。ただし、ReactのClass Componentの話ではなく、純粋な言語としてのclassです。いつclassが使われるのか？大抵の場合、サードパーティ製のライブラリを利用する際に利用されることが多いように感じます。ライブラリがUIライブラリではない場合、ライブラ

こんにちは @poster-keisukeです。今回は 4/7日にハイヤールー初のオンライン勉強会 HireRoo Tech Talk #1 を開催しました。この記事では、各登壇内容を簡単にご紹介いたします。当日の様子は、動画にもアップロードされておりますので興味があればぜひ御覧ください。初開催ながらconnpassの参加者は241人、当日参加者は128人という多くの方にご参加いただくことができま

こんにちは、@Himenonです。EventEmitterをTypeScriptで実装する方法について紹介します。EventEmitterとはEventEmitterはデザインパターンの一つ、Observer Patternの実装です。https://en.wikipedia.org/wiki/Observer_patternNode.jsでは”events”モジュールからEventEmitter

こんにちは、@Himenonです。Rollupでexpressサーバーをビルドする方法を紹介します。ブラウザ以外で動くJavaScriptをバンドルする動機としては、Node.jsのサーバーをコンテナ化する際にImageサイズが大きくならないようにする方法として利用することができると考えられます。Rollupのビルド設定を紹介した後、webpackとの比較を紹介していきます。RollupとはRol