ゆめみでフロントエンドエンジニアをしているゆーけんです🐈新卒一発目でアサインされた案件で、Jotaiで状態管理されているプロジェクトをZustandで作り直すというパワー系リファクタを経験したので記事に書きます。 開発したプロダクト一覧画面新規作成画面編集画面がある以下の画像のような管理画面を、先輩と2人で0から開発しました。一覧画面新規作成画面詳細画面フォームの値をリアルタイムでプレビューに表示するため、フォームの値をJavaScriptで管理する必要があります。コンテンツの値を状態管理したいコンテンツは新規作成、削除されるコンテンツのプロパティ...

「よ〜し、管理画面を開発するぞ〜」「でも10個以上も管理コンテンツあってめんどくさいな〜」「どうせ似たような画面ばっかりなんだから、コマンドをポチポチして全部作れないかな〜」というのに真面目にチャレンジして、管理画面をほぼ丸ごと scaffdog テンプレートで生成できるようにしてみました。次の呪文を唱えて、pnpm scaffold artist artists アーティストpnpm exec scaffdog generate form-input-text -f --answer "property:name" --answer "required:true" -...

DuckDBはS3やS3と互換のあるAPIを持つオブジェクトストレージへアクセスする機能を持っています。同様にGCS(Google Cloud Storage)に保存されたオブジェクト（CSV、Parquet形式など）にもアクセスすることができます。ほとんどはS3のサンプルコードを見ながらパスを読み替える程度でうまくいくのですが、Secretの設定だけは特有の設定が必要で、その情報にたどり着くのに苦労したのでここに書き記しておきます。 前提DuckDB 1.1.3DuckDB CLI サービスアカウントを作成適切な権限を持つサービスアカウントを作成します。今回はStor...

!この記事は、株式会社ゆめみ Advent Calendar 2024 20日目 の投稿です。React Server Components (以下、RSC) は、Next.js App Router で先行導入されてから１年半以上の時間を掛けたのち、2024/12/05 に React 19 の一部としてリリースされました。RSC は、コードを「サーバー」/「クライアント」の2つの環境に分割することが特徴であり、関連していくつかのマーカーが登場しています。import 'client-only'import 'server-only''use client''use ...

dbt アドベントカレンダー 2024 11日目の記事です。 前置き普段はdbt Cloudを使っていて、Google Cloud に BigQueryとLookerStudio な技術スタックで社内のデータ基盤を構築・運用しています。データ基盤で扱うSourceの拡充をするため、ETL/ELT ツールをいくつも試してたどり着いたのが、dltというツールです。世間では非エンジニアでも画面上でポチポチ設定をしていくだけで、簡単にELT パイプラインが構築できるサービスを使われている話をよく聞きます。エンジニアのいない組織でも、すぐに各種データを収集して分析を始められる点では重宝さ...

これは、株式会社ゆめみ Advent Calendar 2024 13日目の記事です。Next.js (Pages Router) のAPI Routesのhandlerにおいて、ValibotやZodで値の検証をせずにリクエストボディの値を使用してしまう不具合を、型検査レベルで防ぐことを考えます。例えば、次のようなコードで、処理の順番やロジックの誤りを型エラーを出して気づきたいといったものです。import { NextApiHandler } from "next";import * as v from "valibot";const RequestBodySchema ...

2024/11/23(土)で開催された JSConf JP 2024に関する、現時点での公開資料と X アカウントリンクをまとめました。よろしければご活用ください。!この記事は、個人ブログへ投稿した記事の転載です。 はじめにhttps://jsconf.jp/2024登壇社名および登壇者名は敬称略させていただいています。x アカウントについては、以下のように確認できたものを記載しております。JSConf JP 公式サイトに記載があるJSConf JP 公式サイトに記載のプロフィールと一致している当イベントで登壇されることに言及されているスライドに記載されている...

生成AIの進化が早く普段の業務でもお世話になっている人は多いのではないかと思います。僕も普段からChatGPTやCopilotにお世話になっているのですが、主導権は僕が持ってサポートしてもらう関係性となっています。働きたくない！！ 強い意志でそう考えている僕は生成AIのみでアプリを作らせて僕は寝てたらお金が入ってくる状態にできないか検証しました。 結論無理 ChatGPTに丸投げしてみた(GPT-4o)あなたは天才的にかっこいいデザインを考えられるうえにマテリアルデザインも極めており、ユーザビリティも考えられる超優秀なAndroidエンジニアです的な設定にしました。...

プロジェクトはゆっくりと、そして容赦なく、手に負えないものとなっていくのです。ソフトウェアにおける惨事のほとんどは、たいていのプロジェクトでは気づかずに通り過ぎてしまうような、気づくには小さすぎるとも思えるものから始まるのです。[1] はじめに現代のモバイルアプリの開発はさまざまな要因の依存関係と向き合う必要があります。昔のことを思い出すと今から二十年前のモバイルアプリは Java ME[2] をベースに開発をしていました。アプリケーションのサイズ制限が 100KB[3] ということもあって、依存するものは極力少なくするために、 Java SDK 自体もモバイル向けに軽量化し...

登場人物 ワイ41歳プログラマー 後輩くんワイの後輩（20代）大きなタスクを分割して、ワイに指示をしてくれる とあるシステム開発会社にてワイ「あ〜〜〜っ！」ワイ「ワイの実装したバックエンドがバグってたせいで」ワイ「大事な社員名簿システムのデータが消えてもうてるやん！」ワイ「これじゃ、バックエンドやなくてバッドエンドやないけ！コラァ！」後輩くん「（なんでキレてんねん...お前のせいやろ...）」後輩くん「せ、先輩、大丈夫ですか？」ワイ「ぐぬぬ・・・取り乱してごめんやで」後輩くん「先輩、気を取り直して行きましょう」後輩くん「そのバッドエンド・・...

Announcing AWS Amplify integration with Amazon S3 for static website hosting というリリースが出ていたので、早速使ってみました。https://aws.amazon.com/about-aws/whats-new/2024/10/aws-amplify-amazon-s3-static-website-hosting/https://aws.amazon.com/jp/blogs/aws/simplify-and-enhance-amazon-s3-static-website-hosting-with-aw...

数の世界は、自然数に始まって実数、複素数と広がっていきます。この先に、さらにクォータニオンという数があります。本記事では、このクォータニオンについて基本的な事柄を解説し、Rustによる計算のしかたを述べます。なお、クォータニオンは日本語で「四元数」と呼びます。数学の世界では日本語で呼ぶことがほとんどです。ただ、コンピューターの世界では「クォータニオン」と呼ぶことが多いです。本記事もその慣習にあわせています。 クォータニオンとはクォータニオンとは、次の形で定義される数です。ここで、w、x、y、z は実数です。\mathtt{i}、\mathtt{j}、\mathtt{k} は虚...

はじめにPostgres には JSON/JSONB というデータ型がありますが，JSONB はデータをバイナリ形式で格納するためインサート時に変換のオーバーヘッドがあるものの，その後の処理が非常に高速である上に，インデックスを貼ることができるため，実用上は JSONB を使うのが一般的です．https://www.postgresql.org/docs/17/datatype-json.html一方で，そもそも RDB のようなスキーマの厳格な型付けをしているシステムで半構造化データである JSON を扱うこと自体がアンチパターンであるという指摘もあります．しかしながら，適...

経験の浅い人にちょくちょくするアドバイスとして、「コードリーディングのときにはあんまコードを読まないほうがいいよ」がある。コード全体を詳細に読むのではなく、名前やインターフェイスからコードの意図を把握することで効率的にコードリーディングできる。完全に下記の受け売り。「実装は極力見ないようにして、インターフェイスと構造を理解するようにするんです。ダイヤグラムや、関係のグラフを書いたりして。実装はちゃんと出来ていると信じて、読んでいるメソッドやクラスのインターフェイスの役割やパラメータをしっかり理解するようにするんです。そっちの方が、実装を見るよりずっと楽ですよね。」牛尾 剛「コードリ...

自己紹介すずきゆーだい(@szkyudi)です。株式会社ゆめみという会社でWebフロントエンドエンジニアをやっています。秋になると柿を200個食べます。 アクセシビリティは誰のためにあるかアクセシビリティは特定の人々だけでなく、あらゆる人のためにあるものです。 というような言葉はよく耳にすると思います。ただ、この言葉にピンときていない方々も多いと思いますし、私自身、まだまだ理解を深めていく必要があると感じています。そこで、この記事では、エンジニア自身がアクセシビリティ向上の恩恵を受ける当事者であることを認識してもらうとともに、少しでもアクセシビリティに興味を持ってもらうため...

Raycast からリポジトリを開いてる。たまーに開発環境見せあいっこをするときに、意外にも知られてなくて「へー、それいいね」と言われることが多いので紹介。https://www.raycast.com/moored/git-repos気に入っているところはRaycastなのでHotkeyが使えておよそ最短距離でリポジトリが開けるリポジトリの検索ができる開くエディタが選べるGitHubも開ける（Code、Issues、PRとタブも選べる）あたり。自分はghrでリポジトリを管理しているので、そのディレクトリを登録している。それでよくあるghq+pecoみたいなこと...

dotenv の改良版である dotenvx が使ってみてめっちゃ良かったので紹介します。https://dotenvx.com/https://github.com/dotenvx/dotenvx 特徴特に大きいのは「環境変数の暗号化」と「複数 .env ファイルへの対応」の2つです。 環境変数の暗号化dotenvx 経由で環境変数をセットすることで、環境変数が公開鍵暗号方式で暗号化されます。dotenvx set -f .env.development API_ENDPOINT https://example.com/graphql.env.developmen...

おいカラーパレットさ作るんだで！（A11y工船） リスペクトこの記事およびプロダクトは、フロントエンドカンファレンス北海道での発表 「ダークテーマとアクセシビリティの融合したカラートークンの設計」 に感銘を受け製作しました。https://speakerdeck.com/degudegu2510/dakutematoakusesibiriteinorong-he-sitakaratokunnoshe-ji モチベーション カラーパレットの明度変化についてダークテーマを含めてコントラスト比を維持したカラーパレットを作るの、むずすぎひんか！！出口 裕貴（Qiita...

皆さん、フォーム作ってますか？Webサイトやアプリを作るにあたって避けられないのがForm作成、多くの方が autocomplete を設定するなど、より使いやすいフォームを作成するために尽力されていることと思います。一方で、悪気なく書いたコードでより使いにくいフォームになってしまっている例が世の中には多く見られます(特に銀行系)今回は、よくあるフォームの実装を例に、(特に日本語話者にとって)より使いやすいフォームにするためのちょっとした仕様や私が考える対策を書いていこうと思います。忙しい方のために最初に書いておくと、この記事に書いてあることの多くは autocomplete の...

問題と検証以下のコードで添付GIFのように数値の入力が適切にできない全桁を削除して空欄にできない小数点が入力できないleading zeroが自動で削除される（iOS 18, Xcode 16.0.0 RC）struct ContentView: View { @State private var path: NavigationPath = .init() @State private var department: Department = .init() var body: some View { Navigation...