2024-05-22 アーキテクチャを突き詰める Online Conference https://findy.connpass.com/event/314782/ ■ 参考URL - コンパウンドスタートアップというLayerXの挑戦｜福島良典 | LayerX - https://comemo.nikkei.com/n/n7332c93f50c7 - ビジネスドメインの拡大を実現する バクラクシリーズでのモノレポ開発 - Speaker Deck - https://speakerdeck.com/layerx/bakuraku-devsumi-2024-yyoshiki41 - Connect - https://connectrpc.com/ - gRPC - https://grpc.io/ - Protocol Buffers によるプロダクト開発のススメ - API 開発の

tsukiji.graphql x ハッカー鮨 https://tsukiji-graphql.connpass.com/event/314173/

format = """ ${custom.git_repo}\ $directory\ # ... """ [custom.git_repo] when = true require_repo = true command = 'git rev-parse --show-toplevel | sed -e "s,$(ghq root)/\(github\.com/\)\?,,"' style = 'bold blue' # style はお好み [directory] repo_root_format = '[($path )]($style)' repo_root_style = 'blue' # style はお好み # ... モチベーション 筆者は git リポジトリ上で生活している時間が長いため、正確なフルパスよりも「どの git リポジトリにいるか」のほうを知りたいケースが多

https://findy.connpass.com/event/306714/

こんにちは。バクラク事業部 Enabling チームの @izumin5210 です。最近「HUNTER×HUNTER」の既刊を全部読みました。 この記事はLayerXテックアドカレ2023の9日目の記事です。 前回「1人目データアナリストとしてデータチームに異動しました 」 次回「Slack × Zapier × MiroでKPTでの振り返りをラクにする」 RDB や KVS などのデータ保存先において、データを正規化せずにそのまま保存したいと思うことはありませんか？ 8月にリリースされた「バクラク請求書発行」というプロダクトには「柔軟なレイアウトカスタマイズ」機能が搭載されています。リンク先の画面操作イメージを見ていただくと、この機能の雰囲気を理解していただけると思います。この機能が扱うレイアウトデータはまさに「関係の正規化をせずに保存したいデータ」でした。 bakuraku.jp こ

コンポーネント設計のすゝめ 〜ベストプラクティスを学ぶLunch LT〜 - connpass https://findy.connpass.com/event/296449/

7月はLayerX エンジニアブログを活発にする期間です。今日は誰がなんと言おうと 7/6 です。 昨日 7/5 は「Datadog のコスト最適化で月額費用を 30% 削減した」でした。 2022年10月3日に、GraphQL Code Generator（以下、graphql-codegen）のおすすめ設定に関する記事を公開しました。 しかし、その後、graphql-codegen v3のリリースに伴い、ReactやVueではclient-presetが推奨されるようになりました。 client-preset前提の環境では、利用可能な設定項目などがいくつか変わるため、本記事では改めて、graphql-codegen以降のClient preset時代のおすすめ設定をまとめています。 全体 設定を TypeScript で書く graphql-codegen v3から公式ドキュメントで案

TL;DR React は単なる UI ライブラリにとどまらず Routing, Bundling, Server Technologies までを統合した技術になろうとしている React Server Components はパフォーマンスだけでなく、「PHP, Ruby on Rails のシンプルなサーバサイド HTML 描画の世界に戻しつつ、サーバサイドとクライアントサイドの実装を同じ技術でシームレスに実装できるようにする」ことができる それにより、開発者から見た複雑さを下げられ、かつエンドユーザは良いパフォーマンス・良い体験を得られる React Server Comonents （以下、RSC）について、インターネット上の記事では主にパフォーマンスについて語られることが多い印象です。しかし、RSC のもう1つ重要な点として、RSC は我々の Web アプリケーション開発の体験

この記事はLayerX Tech Advent Calendar 2022の20日目の記事です。 こんにちは。LayerXのバクラク事業部でOpsエンジニアをやっている@civitaspoです。みなさん、GCPのCloud Pub/Sub Push Subscriptionはご存じですか？便利ですよね。この記事では、あの便利さをAWSで実現する方法を紹介したいと思います。 GCPのCloud Pub/Sub Push Subscription とは？ GCPにはCloud Pub/Subというメッセージングサービスがあります。Pub/Subモデルを実現するGCPのマネージドサービスです。Cloud Pub/Subには3つのSubscription Typeがあり、その一つがPush Subscriptionです。 cloud.google.com cloud.google.com 引用した

バクラク事業部の Product Enabling Team でソフトウェアエンジニアをしている @izumin5210 です。 この記事は LayerXアドベントカレンダー(概念) の54日目の記事です。 バクラクのリソースを提供する REST API を開発するにあたり、その基盤を GraphQL をベースに実装する、ということをしました。 なかなかにチャレンジングな選定であり、これを入社してすぐ作っているという背景も含めておもしろい話だと思うので、技術的な話と文化的な話をあわせて紹介させてください。 「GraphQL で REST API を作る」とは？ まず「GraphQL で REST API を作る」というのが見慣れない文字列なのではないでしょうか？ 前提を揃えるために目指す形を明確にしておくと、だいたい以下のようなものです。 外から見た API は REST に従っており、H

転職・求人情報サイトのtype エンジニアtype 働き方 名村卓を迎えたLayerXがイネーブルメント専門チームを設立。プロダクト開発を最適化するアクションとは？ 2022.11.02 働き方 名村卓LayerXチームプロダクト 今、スタートアップ界隈で「イネーブルメント」への注目が徐々に高まっている。イネーブルメントとは、組織がスピーディーかつ継続的に成果を出すための仕組みづくりに用いられる概念だ。 この7月にはLayerXが元メルカリの名村卓さんを「イネーブルメント担当」として迎え、開発組織内にイネーブルメント専門チームを立ち上げた。 名村さんによると、同チームの役割とは「プロダクトチームに最適な選択肢を提供すること。それは従来の一般的な開発体制では、十分に機能してこなかった役割」なのだという。 なぜ今、このような新しい機能を担うチームが求められているのだろうか。イネーブリングチーム

GraphQL Code Generator v3 以降で標準となった Client preset では設定が大きく異なります。 この記事は Client preset を使わない前提の内容になっているため、注意が必要です。 Client preset 用の設定は別記事で紹介します。 全体 生成物をフォーマッタにかける graphql-codegen には Lifecycle Hooks という仕組みがあり、いくつかの用意された hook ポイントで任意のコマンドを実行できる。 これを使って生成されたコードを Prettier 等のフォーマッタに通しておくのがおすすめ。 基本 DO NOT EDIT とはいえ、コードジャンプしてきて生成された型を読みたいケースはよくある。 そういうときのために、人間が見やすいように改行しておいてもらうといい。 typescript plugin, type

コード生成のために GraphQL サーバから schema を取ってくる方法graphql が getIntrospectionQuery という関数を持っており、これが Introspection のクエリをいい感じに吐いてくれる。 これをそのまま GraphQL サーバに投げつけたらスキーマ情報を取得でき、その結果をそのまま schema.json みたいな感じで dump しておくことで graphql-codegen などのツールで読めるようになる。 import { getIntrospectionQuery } from "graphql"; import fetch from "node-fetch"; const url = "http://0.0.0.0:3000/api/graphql"; const { data, errors } = await fetch(ur

Wantedly では新卒含む新入社員向けに研修を毎年実施しています。これは「新入社員向け」といいつつ既存の社員も自由に参加できるものです。今年はこの研修のフォーマットを借りて、Wantedly のプロダクト開発を支える重要な概念のひとつである「Wantedly の UI デザインシステム」についての研修を、ソフトウェアエンジニアの @izumin5210 (筆者) とプロダクトデザイナーの @NishaMe で実施しました。 デザインの構造を正しく捉えることは、UI の実装を専門にしているかどうかを問わず、正しい実装 - 開発生産性が高く、ユーザにとっても使いやすい実装 - のための重要なポイントです。よってこの研修は「広義のフロントエンドエンジニア」、業務中に UI を実装することがある全てのエンジニアを対象としました。 Web フロントエンドエンジニアモバイルエンジニア専門ではないが

goimports をやめて gopls に寄せる自分は Go を書くときは Vim を使っていた。 2020-01 に vim-go から gopls + mattn/vim-goimports に移行してそのままだったのだが、 最近になって gopls が LSP の source.organzieImports Code Action に対応していることに気づいた。 （当時は gopls が import 補完に対応してない思いこんでいたんだけど、gopls の commit を追っていくと 2020 年時点で既に source.organizeImports に関するコードがあるように見える… 😇） ISUCON で久々に本気 Go を書くことになるので、環境を見直すついでにこのへんの移行もした。 vim-lsp の README をベースに、BufWritePre で sour

hi18nとはhi18n は現在Wantedlyで開発中の、TypeScript/JavaScript向け翻訳テキスト管理ライブラリ (i18nライブラリの一種) です。 GitHub - wantedly/hi18n: message internationalization meets immutability and type-safety Installation: npm install @hi18n/core @hi18n/react-context @hi18n/react npm install -D @hi18n/cli # Or: yarn add @hi18n/core @hi18n/react-context @hi18n/react yarn add -D @hi18n/cli Put the following file named like src/local

hi18nとはhi18n は現在Wantedlyで開発中の、TypeScript/JavaScript向け翻訳テキスト管理ライブラリ (i18nライブラリの一種) です。 本記事ではhi18nの重要な設計上の判断やその背景について説明します。 GitHub - wantedly/hi18n: message internationalization meets immutability and type-safety Installation: npm install @hi18n/core @hi18n/react-context @hi18n/react npm install -D @hi18n/cli # Or: yarn add @hi18n/core @hi18n/react-context @hi18n/react yarn add -D @hi18n/cli Put the

graphql-codegen と Nominal Typing(Branded Type) で Custom Scalar をちょっといい感じにする GraphQL では標準で用意されてる Int や String 以外にも、自前で Scalar を定義することができます（ここでは Custom Scalar と呼びます）。よくある用途としては日付を表す Date や日時を表す DateTime でしょうか。 type Profile { birthday: Date } scalar DateCustom Scalar をうまく使えば GraphQL スキーマでドメインを表現する力がかなり高くなるので、みんなで育てる共通言語としてはどんどん活用していきたいです。 一方で、Apollo CLI や GraphQL Code Generator（以下 graphql-codegen）で C

CSS variables によるダークモード対応タイトルの通り、このサイトをダークモード対応した。 このブログは React と CSS-in-JS ライブラリである Linaria で実装されているが、 結果として JS 側で特別なことをせず、ほとんど CSS だけでダークモード対応を実現している。 実装 実装は大きく3ステップ。 システム設定に合わせた Light / Dark 出し分け ユーザによる Light / Dark 切り替えサポート ユーザによる Light / Dark 切り替えの永続化 最初のステップだけだと prefers-color-scheme を見て色を出し分けるだけでいいので単純だが、それ以降はそんなに自明ではない。 やりたいのは「Light 用と Dark 用の2つの色定義セットを用意して、それを何らかの手段で切り替える」ということ。 この切り替え動作をど