"use server"; でexportした関数が意図せず？公開される
Next.js AppRouterで利用できるReactのServer Actions機能。クライアントからサーバ上の処理を関数で呼び出せるので非常に便利ですが、 "use server"; のことをあまり知らず、誤った使い方をすると意図せず公開したくない関数が外部に公開されてしまうケースがあるので注意です（ほとんどこんなケースはないと思いますが、なくはないので注意喚起です）。 Server Actionsの例 Server Actions用の関数として宣言するためには "use server"; が必要です。それ以外は至って普通の非同期関数で大丈夫です。 "use server"; export async function someAction() { return { message: "Server Action", }; } 次に定義したServer Actionsの関数を呼び出
GraphQL でフェッチした部分的なモデルのドメインロジックを TypeScript と Proxy で表現する試み
仕事で GraphQL を使ったプロダクトに DDD のエッセンスを取り入れたく、GraphQL で部分的にフェッチしたドメインモデルに堅牢な型付けを試みたので、まだまだ荒削りですが紹介します。 やりたいこと このような GraphQL スキーマがあったとします。 type Person { firstName: String! lastName: String! age: Int! } type Query { person: Person! } function getAnnotatedFullName(person: Person): string { const suffix = isAdult(person) ? "" : " (未成年)" return person.firstName + " " + person.lastName + suffix; } function i
Apollo Federation で GraphQL マイクロサービスアーキテクチャを構築する
最近調べていた Apollo Federation についてのメモです。 Apollo Federation の概要と、Next.js の API Routes で Apollo Federation を使う例をまとめています。 Apollo Federationとは？ 以前 Netflix の GraphQL マイクロサービスアーキテクチャが話題になりました。その構成を支えているのが Apollo Federation です。 Apollo Federation は、複数の GraphQL マイクロサービスをゲートウェイでまとめて、1 つの GraphQL エンドポイントとして提供するものです。 Apollo Federation を使うことで、それぞれのマイクロサービス間で依存する処理を良い感じに統合してくれます。 例えば、投稿情報は Post マイクロサービスにあり、その投稿の投稿者
Chrome内蔵LLM Gemini Nanoを使ってみた
はじめに Chrome 126からローカルで使えるLLM Gemini Nanoが使えるようになりました。 本記事では実際に使ってみようと思います。 前準備 まずはChrome Release ChannelsにてDev channelのChromeをインストールします。 インストールできたら下記機能を有効にします。 Enables optimization guide on device: Enabled BypassPerfRequirement Prompt API for Gemini Nano: Enabled 次に、LLMのダウンロードが必要のため、 chrome://components/にアクセスし、Optimization Guide On Device Modelのアップデート状況を確認します。 まだダウンロードされていない場合は、アップデートを確認ボタンでダウンロード
neverthrow の全機能リファレンス
JavaScript/TypeScript で try/catch を使わないエラーハンドリングに利用できるライブラリとしてはそこそこ有名だと思う neverthrow ですがあまり解説された記事が少なく、関数型と手続き型の書き方をいい感じにミックスできるいいライブラリで情報の少なさから選択されないのも勿体なく感じました。ちょうど GitHub のドキュメントを読みながら意訳してまとめた手元の技術メモがありますのでその一助になればと公開します。 neverthrow とは supermacro/neverthrow: Type-Safe Errors for JS & TypeScript プログラムのエラーハンドリングを try - catch ではなく関数型プログラミング由来の Result 型や Either 型と呼ばれる方法で実現する機能を提供するライブラリです。具体的には Res
デジタル認証アプリとのID連携で使われている標準化仕様と勘所
ritou です。 みんなが待っていたデジタル認証アプリの情報が公開されました。 開発者向けのガイドライン、APIリファレンスなどのドキュメントも公開されています。 今回は開発者視点でどんな作りになっていて、利用するために理解が必要となる標準化仕様はどのあたりなのかを取り上げます。ちょっとOIDCのRPやOAuthのClient実装経験のある開発者向け、ぐらいの内容です。 概要 公開された情報からすると デジタル認証アプリサービス(アプリ+バックエンド)はマイナンバーカードを用いた当人認証を実施 現在は都度マイナンバーカードを利用する必要がありますが、いずれはスマホに保存されたカード情報を使ってもっと楽になりそう ID連携のIdentityプロバイダとして認証イベント情報、基本4情報といった属性情報を民間/行政サービスに提供 民間/行政サービスは認証イベント情報に含まれるユーザー識別子を利
フルリモートで相手に気持ちよく仕事をしてもらうためのコツあれこれ
社内のプチ発表に使った資料です。 文章のコツ 前置き フルリモートでは、文章でのやり取りがメインになる。 なので、文章がヒドいと「この人と仕事するのキツイ」と思われちゃう😢 そう思われないための色々思ったことを自戒メモ。 なるべく箇条書きにする
GitHub Actionsを活用してアプリバージョンの更新とPR・リリースドラフト作成を行う方法
概要 GitHub Actionsは、GitHubのリポジトリ内にある .github/workflows ディレクトリに配置されたYAMLファイルを通じて自動化されたプロセスを実行する機能です。 これらのワークフローは、特定のイベントに基づいて自動的に、または手動でトリガーすることが可能です。 この記事では、GitHub Actionsを利用して、手動トリガー（workflow_dispatch） にてアプリのバージョンを自動で更新し、プルリクエストとリリースドラフトを作成するワークフローを設計する方法を紹介します。 実装 GitHub Actionsを用いてアプリのバージョンを自動的に更新し、関連するプルリクエストとリリースドラフトを作成するプロセスは以下の通りです。 ステップ1: ワークフローファイルの作成 まず、GitHubリポジトリ内の .github/workflows デ
TSKaigiは配信画面もTypeScript製だったという話
はじめに 先日開催されたTSKaigi 2024にて配信チームとして、オンライン配信のスタッフをしていました。 当日の各トラックの配信運営や総合的な環境構築などは他のメンバーを中心に行っていただきましたが、自分は配信画面のデザインや配信に乗せる情報管理用のシステムをコツコツ作っていたのでその紹介をさせていただきます。 情報管理用のシステムといってもローカルマシン上で動く簡単なもので、NodeCGと呼ばれるNode.js向けの配信画面管理用のフレームワークを利用しました。 NodeCGとは NodeCGは先ほど紹介したようにNode.jsとブラウザ技術で動的な配信画面を作成したり、管理画面を提供してくれるフレームワークです。 配信レイアウトとダッシュボードはブラウザ上で動作し、ダッシュボードで編集した情報を配信レイアウト側にWebSocketでリアルタイムに反映したり、WebSocketサー
Node.js の進化に伴い不要となったかもしれないパッケージたち
tl;dr はじめに 2024 年の 4 月 24 日に Node.js 22 がリリースされました。ESM を 条件付きで require する機能や、--run フラグによる npm スクリプトのパフォーマンス改善などが v22 で追加され、2009 年に Ryan Dahl が Node.js をリリースしてから 15 年が経つ今も、Node.js は進化を続けています[1]。 こうして Node.js 自身が強化されていくにつれ、以前はサードパーティーのパッケージを使用して実現することが一般的であった機能が Node.js のみで実現可能となり、当該パッケージが不要となるような場合があります。冒頭に引用した Ben Holmes の動画では、そのように不要となったパッケージとして dotenv node-fetch chalk mocha が挙げられていますが、この記事では「これら
自社サービスのバックエンドを Go から TypeScript へ切り替えるための整理
切り替える理由 自社の主力製品で利用している技術(WebRTC / WebTransport)がブラウザベースのため TypeScript を利用する Go を採用したのは sqlc が使いたかったという理由 sqlc-gen-typescript が出てきたのでもう Go を使う理由がなくなった 自社サービスチーム全員が Go にまったく興味が無い sqlc 自体は便利 そもそも自社に Go への興味がある人がいない 自社サービスの規模ではボトルネックになるのはデータベースであって言語ではない もしアプリでスケールが必要なときは Rust や Erlang/OTP に切り替えれば良い コネクションプールは PgBouncer を利用すればいい TypeScript からは 1 コネクション 1 接続で問題無い どうせフロントエンドでは TypeScript を書く 自社では React
「実装例から見る React のテストの書き方」をアップデートする
社内の人から、自分が以前書いた次の記事が「便利で助かった！書いた時から何かアップデートある？」ってメッセージがきた。 そんな便利だなんてどうもありがとうございますウフフ、と思いながら書いた日を見てみると 2022-08-09 だった。もうすぐ 2 年経とうとしてる。時の流れが早くて怖い。 この記事に書かれた実装例はリポジトリにまとめていたんだけど、当然、何かメンテをしていたわけもなく、2022 年当時の状態がそのまま残っていた。 せっかく便利に思ってくれる人がいたので、内容をアップデートする。 アップデートまとめ メジャーバージョンのリリースやビルドツールの統一の観点で Jest から Vitest に移行 useFakeTimers({ shouldAdvanceTime: true }) @testing-library/reactを v15 にバージョンアップ MSW を v2 にバ
データ分析のためのSQLを書けるようになるために
はじめに 本稿では分析用クエリをスラスラ書けるようになるまでの勉強方法や書き方のコツをまとめてみました。具体的には、自分がクエリを書けるようになるまでに利用した教材と、普段クエリを書く際に意識していることを言語化しています。 想定読者として、SQLをガンガン書く予定の新卒のデータアナリスト/データサイエンティストを想定しています。 勉強方法 基礎の基礎をサッと座学で勉強してから、実践教材で実際にクエリを書くのが望ましいです。 実務で使える分析クエリを書けるようになるためには、実務経験を積むのが一番良いですが、だからといって座学を御座なりにして良いというわけではありません。SQLに自信がない人は、一度基礎に立ち返って文法の理解度を確認した方が良いと思います。 書籍 SQL 第2版: ゼロからはじめるデータベース操作 前提として、SQLに関する書籍の多くがデータベース運用/構築に関する書籍がほ
Blue/Green デプロイを使用した、RDS MySQL/PostgreSQLのアップグレード
TL;DR RDS の メジャーバージョンアップグレード を行なった PostgreSQL 11.6 -> 15.5 MySQL 5.7.44 -> 8.0.36 PostgreSQL は AWS CDK を利用した、自前での手動切り替えをベースにした Blue/Green デプロイによるアップグレードを行なった MySQL は AWS コンソールから AWSが提供している機能である RDS Blue/Green Deployments による MySQL のアップグレードを行なった nginx の ngx_http_proxy_module を活用してサービスのダウンタイムを防止した はじめに 初めまして。株式会社ジーニーの GENIEE CHAT開発チームのマネージャーを担当しています。 今回は、データベースのメジャーアップグレードを行った際の手順やポイントなどを書いていこうと思います
MySQL(InnoDB)のSQLパフォーマンスチューニングのエッセンス
はじめに MySQL(InnoDB)でSQLのパフォーマンスチューニングをするときに役に立つ知識をエッセンスとしてまとめました。結合(JOIN)やB-treeインデックスの探索の仕組み、実行計画の基本的な見方を紹介します。 想定する読者は、SQLのパフォーマンスを改善する必要があるが実行計画をみてもいまいちピンと来ない方です。インデックスの作成の経験や、複合インデックスやカーディナリティの知識があることを前提にしています。目標は、実行計画の内容がよく分からない読者が、実行計画をみただけでクエリが実行される様子をイメージでき、自信を持ってクエリの改善にあたることができるようにすることです。 ストレージエンジンはInnoDBを前提としています。また、インデックスはB-treeインデックスを想定しています。全文検索の転置インデックスや空間検索のR-treeインデックスについては触れません。 イン
DDD入門：用語解説・モデリング編
はじめに こんにちは、クラウドエース Backend Division 所属の秋庭です。 私は今年新卒で入社したのですが、入った案件では DDD (ドメイン駆動設計)を元に設計・実装が行われていたため DDD について学ぶ必要がありました。 この記事は、私が何も知らない状態から DDD について学び始めた一歩目のアウトプットであり、同様にこれから一歩を踏み出す方の手助けになるものとなったら嬉しいです。 この DDD 入門記事は大きく「用語解説・モデリング編」と「コーディング編」に分かれており、用語の紹介と実際の作業を通して DDD の概観を紹介できればと思います。 この記事は「用語解説・モデリング編」となります。この記事の続きとなる「コーディング編」もぜひご覧ください！ 対象 想定読者 DDD の用語や概念、モデリングについてこれから学ぼうと考えている方。 記事内容 この記事では主に DD
データ分析基盤まとめ（随時更新）
はじめに データ分析基盤の資料を力尽きるまで追記していきます。 構成図にあるアイコンや記事の内容から技術要素を調べて記載していますが、不明分は未記載にしています。修正のコメント頂ければ助かります。 あと、この記事追加してっていう要望も歓迎いたします。 テンプレート 記事公開日 : 会社名（サービス名） データソース : データ処理 : アウトプット : 画像 URL 2025年 2024/03/14 : 株式会社エス・エム・エス（カイポケ） データソース : Amazon Aurora データ処理 : Datastream、BigQuery、dbt アウトプット : Looker Studio 2024/03/12 : 株式会社マイナビ データソース : SQL Server、Amazon S3 データ処理 : Embulk、Amazon MWAA、Apache Airflow、Snowf
cloudflare-workers で動く claude3 の discord-bot を作ってみた
なぜ cloudflare-workers: 運用が楽 なぜ claude3: GPT-4 より体感性能がいい 動いてるもの /claude <prompt> で claude 3 が答えてくれるチャットボットで、 cloudflare-workers 上で動く。 ただし、AI は自分のことを FF7 のクラウドだと思い込んでいるミッドガル在住の中年男性という設定になっており、時折魔晄中毒で幻覚を見始める。 (アイコンは bing で生成させた) (最近 FF7リバースをクリアしたので...) 自分の課金で claude3 の APIキーを使って動かしてるので、一般公開はしない。代わりにソースコードは公開している。 claude3 を動かす 以下の記事を参考にした。 とりあえず課金してAPIキーを手に入れる。この課金登録フローが少々面倒だったが、調べれば出てくるのでこの記事では割愛。 トー
Firebase Authのリダイレクトログインを使っている人は今年の6月までに対応しないと大変ですよという注意喚起
公式ドキュメントに書いてあり、Firebaseからもメールなどで通知されていることではあるのですが、意外と見落としたままになっているかもしれない情報なので、啓蒙の意味も込めて記事にします。 結論 Firebase AuthのJavaScript SDKを使っている場合、今年6月までに以下のドキュメントに従った対応をしないとChrome/Edgeでリダイレクトログインが動かなくなります。 サードパーティのストレージ アクセスをブロックするブラウザで signInWithRedirect を使用する場合のベスト プラクティス 必要な対応 公式ドキュメントにある対応選択肢を、補足や注意点も含めた形で以下に焼き直してみます。 ポップアップ形式のログインでもいい場合 同一タブ内でリダイレクトしてログインする形式から、ポップアップウインドウを開いてログインする形式に切り替えましょう。 （公式ドキュメン
Re: WebサーバーアーキテクチャとPHP実行方式の理解から始めるphp-fpmとはなにか？
この記事のモチベーション 「php-fpmとはなにか？」を知るため、PHPのドキュメントを見ました。 しかし、ここに書いていることはまあそうなのですがあまりに焦点が絞られ過ぎてて「php-fpmとはなにか？」に対する答えとしては少し不十分な気がしていました。 例えるなら数学の問題に答えるにあたって、途中式を飛ばしたり証明の過程を飛ばしたりというような感じ。 不十分というのは、それを理解するための段階をすっ飛ばして答えだけが書かれている状態のことを指しています。 その不十分なところを自分も曖昧にしか理解できていない気がしており、いい機会なので整理しておこうというのがこの記事のモチベーションです。 そのためこの記事は、「php-fpmとはなにか？」をプロセス→Webサーバー→実行方式と順を追って説明していく構成になっています。 「細けぇこたぁいいんだ、おらぁ今すぐ答えだけ知りてぇンダ」という方
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
