正直2つだろうが4つだろうがスペースだろうがタブだろうが何でも良い派なのですが、ふと気になって調べてみたら個人的に新しい観点の発見があったので記事にしてみました。 ※オフィシャルの見解を探すまでは頑張れなかったのですが、適当にググって出てきた中で見つかった興味ある観点の紹介になりますm 見たのはこちらのページ。 色々議論されてますが、個人的になるほどな、と思ったのは、スペース4個（要はある程度インデント確保する）だと、深いネストでコーディングされることを抑止しやすい意図があるという点でした。（もしかしたら他のエンジニアの方にとっては当たり前の観点なのかも...） 今回個人的にめちゃくちゃどうでも良い違和感から始まりましたが、案外新しい観点が見つかったりして面白い体験でした。

はじめに 株式会社ナレッジワーク Engineering Division のわだまる（@wadackel）です。 ナレッジワークの Web フロントエンド開発では、Storybook を活用したコンポーネント開発を行っています。そして、昨年末により良いコンポーネント開発の基盤整備を進めるべく @storybook/test-runner（以降 Storybook Test ruuner）を導入しました。導入目的としては主に、各 Story に対するスモークテスト、play 関数を活用したコンポーネントテストを行うことです。 さらに、ナレッジワークでは前述した通常のコンポーネントテストに加えて、reg-suit と storycap を利用した Visual Regression Testing（以降 VRT）を行っています。 これまでは Storybook を活用したテストは VRT の

イントロ 皆さんこんにちは。デザインチーム和田です。 私が現在のソーシャルデータバンクに転職したのが2023年の2月になるのですが、1人目のUIデザイナーとして採用していただきました。 1人目ということで珍しいのか、社内の方から「どうやったらUIデザイナーになれるんですか？」という事をたまに聞かれたりします。 この質問に端的に答えるのは意外と難しく、仕事や実践を通して少しずつできるようになっていった、というのが正直なところです。ですがもう少し内容を深掘りし、UIデザイナーになるのに「これは必要だったな...」という要素を紹介したいと思います。 簡単なキャリア紹介 私は元々エンジニア歴が長く、プロダクト開発をきっかけにUIデザイナーにジョブチェンジしました。UIデザインはフロント実装の傍らやっていただけだったのですが、徐々にUIデザインを専業に近づけていった感じです。 バックエンド -> フ

この記事は 2024 年 2 月 28 日に執筆されました．今後この問題が Cloud Run 側で修正された場合，再現しない可能性がありますのでご留意ください． TL; DR Cloud Run は執筆時現在 zstd による圧縮に対応していない ヘッダの Content-Encoding: zstd のみが削除され，ボディは圧縮されたまま応答される ブラウザはこの応答を正しく解釈できないため文字化けのような表示となる zstd による圧縮は，執筆時現在 Chrome に実装されているもののデフォルトでは無効だが近い将来に有効化される 悲劇は突然訪れる 弊社では，コーポレートエンジニアリングチーム [1] [2] において，社内向けにいくつかのサービスを提供しています． これらのサービスはもともと AWS でホストされていましたが，アクセス制限に Identity-Aware Proxy

「Honoのv4が2月9日にリリースされます」という記事にてHono v4ではSSGモードがサポートされると発表があった。この機能を試す目的で今までNext.jsのSSGモードで構築していた個人ブログをHonoのSSG機能で書き換えた。 ブログ https://yuheinakasaka.github.io/gialog-diary/ リポジトリ https://github.com/YuheiNakasaka/gialog-diary 元の個人ブログではr7kamuraさんのr7kamura/gialog: Blog template to use GitHub Issues as article editor.というテンプレを使っている。これはGitHub IssuesをCMSとして用いて記事を書き、issueの作成などのイベントをフックにしてGitHub Actionsを起動させて記

TL;DR 弊社で実験的に導入を始めている、2024初頭時点で今後に期待が高まる最新のweb技術についてまとめています。 新規プロダクトの技術選定に迷っている方などにおすすめです。 Turborepo - Monorepo管理 モノレポ構成における懸念点の一つとして、プロダクトが大きくなるにつれてビルド時間が膨大になって来る点です。 TurborepoはRust製、並列化、差分ビルド、Remote Cashingなど、肥大化しがちなmonorepoのビルド時間を短縮するメソッドがたくさん詰まっています。 Bun - Package manager (runtime, test tool) 正確にはBunはランタイムですが、Nextなど厳密にはNode.jsで動かす必要があるため、弊社では（ほぼ）パッケージマネジャーとして活用しています。 pnpmやyarnと比較してnpm installな

はじめに 私が所属しているライフイズテックのデータ基盤グループで、ここ2年ほどでdbtとterraformを活用してDataOpsを進め、データ基盤の整備の生産性が向上した話をまとめます。 導入前の状況と課題 弊社のデータ基盤ではデータ基盤が綺麗に整備されていることよりも、プロダクトや事業に貢献できているかを重要と考え、まずデータを使える状態にすることを目指したサービスの導入や基盤構築を行いました。 考え方としてはこちらの DWHにおけるデータモデリングで大事にしている考え方に書かれている内容に近い考え方になります。 そのため、データモデリングの前にRedashやCRM AnalyticsというBIツール向けにデータレイクからデータマートを先に構築していました。 terraformとdbt導入前は、図のような流れで SQLでSnowflake上にDBやスキーマなどを作成 ELTサービスとし

はじめに 「eslint-plugin-react の plugin:react/recommended に含まれていないルールにも有効なものがあるよ！みんなで同じようなコンポーネント書いて、レビューを楽にして保守性も上げよう！」という内容の記事です。 この記事では React の関数コンポーネント、TypeScript、Prettier を使っている前提で書いています。そのため、タグの位置調整など Prettier で対応可能なものは Prettier に任せる方針です。 先に結論の .eslintrc.cjs を載せておきます。React 以外の設定は省いています。 { extends: [ "plugin:react/recommended", "plugin:react/jsx-runtime", "plugin:react-hooks/recommended" ], rules:

自分はフロントエンドのロジックを考えるのは得意なんですが、CSS は苦手です。 なので 自分は AI にコード変更を依頼して実行結果を目視でプレビューしつつ、その生成結果を受けいれるかどうかの判断だけすればよくね？と考えて、それを CLIとして実装してみました。 ボタンの色を書き換えるという簡単な例ですが、こんな感じで動きます。 主に React Component の修正をターゲットにしていますが、class(Name) を書き換えることを優先するプロンプトを与えているので、ロジックを保ちつつ、見た目を綺麗にするためのツールになっています。 実装した背景 vscode ターミナル上で画像を表示できる OpenAI API はgpt-4-vision-preview のモデルで画像をアップロードして認識させることができる これらを使って、vscode terminal で実行することを前提

現状のLeanerがこういう価値観で組織づくりしているというだけで、今後も絶対これらのポジションをつくらないと思ってるわけではないです Leanerについて Leaner Technologiesは「調達のスタンダードを刷新し続ける」会社です。企業の購買や調達に関する業務を支援するBtoB SaaSスタートアップです。トヨタ自動車様 や 大手コンビニエンス企業様 など主にエンタープライズ領域に導入いただいて急成長してます。 「Leaner見積」 「Leaner購買」 の二つのプロダクトを開発・提供しています。 エンジニアメンバーは約15名ほどです。 なぜポジションがないのか そもそもなぜポジションがあるのかについて明確な理由が自分たちの中でありません。特定のポジションがあるとそのポジションを目指すことが社内で正当化されます。 Leanerは「調達のスタンダードを刷新し続ける」という大きなコ

Reactの技術選定においてルーティングとデータ取得は特に重要な役割を担っています。 もちろんNext.jsやRemixのようなフレームワークを採用すれば、個別のライブラリを追加することなくルーティングからデータ取得までフレームワークが提供するAPIを使って実装することができます。 しかし、AI ShiftのようなBtoBのサービスにおいてはSPAで十分なことがほとんどで、Next.jsなどのフレームワークの採用がtoo muchになりかねません。 この記事は2024年2月時点の技術選定において、TanStack RouterがSPAのルーティングライブラリとして非常に有力な候補であることを紹介します。 はじめに TanStack RouterとTanStack Queryの採用がSPAアプリケーションにおける最適解の一つになりうることをその特徴と実際の設計例をもとに解説します。 TanS

TL;DR セキュリティ対策には予防的統制と発見的統制の2つの観点が欠かせない AWSが提供するセキュリティサービスが予防的・発見的統制にどう寄与するかを解説 セキュリティ対策は、リスクの特定と可視化、リスク分析と優先度付け、施策費用の算出、経営層への報告とサポートの獲得で進めるべし セキュリティは、単に技術やツールを導入するだけではなく、組織全体の意識や文化、そして継続的な改善が求められる はじめに レバテック開発部レバテックプラットフォーム開発チームに所属している内藤です。 普段は、バックエンドの設計や実装、さらにインフラの構築まで幅広く担当しています。 最近、私は弊社開発部を代表して（色々な方面から怒られそう笑）、AWSセキュリティインシデント擬似体験GameDayに参加する機会に恵まれました。このイベントでは、セキュリティインシデントへの対応方法や予防策など、実際のインシデント調査

前書き どうも、スマートショッピングでプログラマーをやっている桑島です。 昨年末頃からスクラム運用にNotionを使い始めました。まだまだ試行錯誤中ですが、現在の利用方法などについて社内共有もかねて記事としてまとめたいと思います。 弊チームのスクラムのすすめかたについて 社内でもチームごとにスクラムの進め方がちがうので、私のいるチームが普段どうスクラム開発を行っているかまず説明します。 社内のエンジニアチームですが、いわゆるSaaSのロードマップ開発を行っているチームが3つ、ハードと組み込みソフトウェアを開発しているチームが1つ、あとSREチームが存在しています。 その中で私はマッハ（Mach）というロードマップ開発を行うチームに所属しています。 チームメンバーはエンジニアが3人、PdM、デザイナーとなっており、PdMとデザイナーは他チームとの兼任になっています。 開発の流れですが、基本的

TL;DR スマホでQRコードを読み込むプロフィール交換アプリを開発した。 イベントソーシングだったり Hono だったり、気になる技術を試せた。 アプリのレスポンスが速く、懇親会も盛り上がったのでよかった！ はじめに レバテック開発部で基盤システムグループに所属している瀬尾です。 普段はマイクロサービスのつらみを味わったりしています。 昨年末に弊社で大規模な懇親会があり、そこでの交流を増やす目的として、互いの QR コードを読み取りプロフィールを交換するアプリを作りました。 この記事では、そのアプリをどんな技術でどのように開発していったかをご紹介しようと思います！ 技術スタック 言語 Typescript Go（Lambdaで使用） フロントエンド Node.js Next.js, TailwindCSS バックエンド Bun Hono, Prisma イベントソーシング インフラ AW

今、バージョン管理システムといえば Git です。しかしながら、Linux Kernel のコミッターの負担を軽くすることに最適化されたために、スナップショットとしての確実性・ツール規模・ユーザインタフェイスなど必ずしも完璧とはいえません。Google開発者 martinvonz 氏による新バージョン管理システム Jujutsu は Git との互換性を維持しつつ、そんな問題へ対応したツールです。本書では Jujutsu のメリットや、必要最小限のサイクルをまわせるようになるまでの簡単なオペレーションを解説します

はじめに 以前こんなツイートをしました。 すると、リプライで色々とコメントを頂きました。（疑問を投げかけたら答えてくれる方々、本当にいつもありがたいです🙇‍♂️） ということで、本記事では推定行数と実際の行数の乖離を減らすために何をやったのかを備忘として書きます。 ただ、実際のSQLや実行計画を書くことはできないので、あくまでどんな考え方をしたのか、ということを書きます。 対処法①（対象のテーブルのautovacuum頻度を変更） 対象のテーブルはかなり更新の激しいテーブルだと聞いていたので、まずは統計情報が最新化されているかを考えました。 更新が激しくてautovacuum時の自動ANALYZEが追い付いていないんじゃないかと考え、対象のテーブルだけ自動ANALYZEの頻度が上がるように設定を変更しました。 PostgreSQLの設定パラメータは基本的にはpostgresql.conf

こんにちは！プロダクト開発部の熊谷です。 Fairy Devices（フェアリーデバイセズ） の 入社エントリ を書きます！！ 背景 私が Rust に出会ったのが2019年。それまでは C, C# をよく書いていましたが、 Rust の型システムやメモリ安全性、パフォーマンスに魅了され、ますます没頭していきました。 当時学生だったわけですが、新卒時は Rust にこだわらず仕事の安定性を求めて、 SIer 業界に就職しました。 そこで働きつつ、こんなことを思っていました 業務でも Rust を書きたい！ 自社製品を開発したい！ 5000兆円欲しい！ 業務経験も乏しい上に Rust の求人はまだ少なく狭き門になると考え、個人開発や勉強会への参加など頑張っていました。 そんなとき、 Rust.Tokyo で当社の存在を知り、入社に至りました。 何をやっているか mimi®クラウドAI のサー

松尾研究所とは はじめまして、株式会社松尾研究所で働いているからあげ（@karaage0703）です。 松尾研究所がテックブログをはじめます！といっても、松尾研究所を知らない人が大半だと思いますので少し紹介させてください。松尾研究所は東京大学大学院工学系研究科の松尾・岩澤研究室とビジョンを共有し伴走する組織です。働いている従業員数は、私のような社員に、インターンとして働いている学生も含めると200名を超える規模の組織となっています。 松尾研究所は、アカデミアで生み出された先端技術を産業界に繋げ、社会実装をすると共に、そこで得られた知見をまたアカデミアに還元することで、次の時代の礎となる人材・先端技術を育成するといったエコシステムを創り出そうとしています。以下がそのイメージ図となります。 株式会社松尾研究所の公式Webサイトから引用 松尾研究所が、外部に公開している企業様との共同研究のプロジ

2月9日、予告していた通りHono v4をリリースしました。 そのHono v4のリリースと同時に、Honoを使ったメタフレームワーク「HonoX」を公開しました。 今回はHonoXのいくつかの特徴について書いてみたいと思います。これは使い方というより作者目線の思想みたいなものです。 メタフレームワーク HonoXとは一言で言うと「HonoとViteを組み合わせたメタフレームワーク」です。HonoX自体が機能を提供しないのが肝です。 もう少しだけ具体的に言います。HonoXで扱うのは「Honoのインスタンス」そのものです。つまりあなたがHonoXでアプリを作るということは「Honoのアプリを作る」ことになります。その証拠にエントリーポイントになるapp/server.ts内で出てくるappはHonoのインスタンスなので、hono/devにあるヘルパー関数showRoutes()がそのまま使

会社で複数の新規事業を立ち上げる機運が高まったことをきっかけに社内向けUIライブラリを開発し、限定公開して利用を始めました。 本記事ではReactで社内向けUIライブラリを開発・ビルド・公開・布教するためのアレコレを共有します。 以下のような話題について知りたい方に特に読んでほしいです。 Private Packageの作り方、配布の方法のイメージがつかない方 CommonJSとES Modules、今はどちらでビルドするのがいいのか知りたい方 ライブラリの作り方について網羅的に知りたい方 前提 利用側のアプリケーションはNext.js固定を前提とする Tailwind CSSを内部的には利用する 利用側のアプリケーションはパフォーマンス（Lighthouseスコア）重視することが多い 社内の様々なレベルのエンジニアがContributeする可能性がある 端的に言うと、社内のプライベートリ