タグ

ブックマーク / zenn.dev (185)

  • フロントエンドのテスト基盤を Jest から Vitest に移行した話

    こんにちは。ナレッジワークの torii です。 7 月にフロントエンドエンジニアとして入社してもうすぐ半年、そろそろ技術記事の一つも書きたいなと思っていたところに、ちょうどいいネタを見つけたので投稿してみます! Jest から Vitest に移行してみた 早速やったことですが、フロントエンドのテストフレームワークを Jest から Vitest に移行しました。理由としては、Jest が CJS を前提として動作しており、ESM 前提のモジュールを動かすのに一手間も二手間もかかるからです。 ナレッジワークのフロントエンドNext.js を採用しており、テストフレームワークには Next.js と相性の良い Jest を採用していました。関数単位のテストや UI コンポーネントのテストを書く分には問題なかったのですが、それより上層(ページなど)になるとたちまち ESM 互換性の問題を

    フロントエンドのテスト基盤を Jest から Vitest に移行した話
    tuki0918
    tuki0918 2023/12/27
  • CTOのいない会社にEMとして入社するあなたに 

    私は今までのキャリアの中で、CTOのいない会社に3回入社してきました。うち2社はEMとして入社してVPoEになりました。そこでの反省はもちろんありますが、成果を出すことができました。そして1社は、なんと3週間で退職しました…。 OPENLOGI Advent Calendar 2023で今年は何を書くか考える中で、私のようにCTOがいない会社に何度も入社した経験があるEMはそうそういないのではないかと思いました。将来CTOのいない会社に入社するCTO・VPoE・EMといったマネジメント層の方に、私の経験から学んだことを参考にしていただければと思います。 ※OPENLOGIには現在CTOは在籍しております。 CTOのいない会社とは CTOのいない会社とは、エンジニア組織のトップであるCTO・VPoE・開発部長といった立場の人がいない、もしくは、トップはいるけれど何らかの理由(トップがエンジニ

    CTOのいない会社にEMとして入社するあなたに 
    tuki0918
    tuki0918 2023/12/27
  • cron で exponential backoff するツール作った

    この様に指定すると3分毎に実行されます。 とても便利ではあるのですがコマンドの実行が失敗すると、冗長なコマンド実行となり得ます。cron ではコマンドの実行が失敗し続けるとメールが運営者に繰り返し送信され続けます。 crontab にコマンドが1分毎に実行される様に投入してひとまず正常起動を確認、仕事を終えて家に返ってビールでも飲んで、さぁ寝ようかなと思った頃にコマンドが失敗し始めると、朝までメールが飛び続けます。 またウェブサービスの API を呼び出す cron ジョブを投入していたらそのウェブサービスがメンテナンスに入った、なんて事もあると思います。メンテナンス中にも関わらず無限に失敗し続ける API 呼び出しはもしかしたら BAN の対象になってしまうかもしれません。 全ては cron に exponential backoff する機能がないのが問題です。 systemd tim

    cron で exponential backoff するツール作った
    tuki0918
    tuki0918 2023/12/26
  • 【Next.js】Google Analytics も YouTube iframe 埋め込みも公式ライブラリでいけるようになるぞ

    Next.jsGoogle Analytics も YouTube iframe 埋め込みも公式ライブラリでいけるようになるぞ ちょっと株式会社 Advent Calendar 2023 12 月 24 日の記事です。 みなさんこんにちは、chot Inc. の Web エンジニアです。 Next.jsGoogle Analytics を導入するとき、どうしていますか?僕は毎度「nextjs google analytics」でググって「こうやるのか〜」と適当に作っています。当にちゃんと計測されているのか疑心暗鬼です。 また、YouTube の iframe 埋め込みはどうでしょう。普通に iframe を埋め込むと PageSpeed Insights のスコアをごっそり奪っていきます。恐ろしいですね。 これらのサードパーティリソースを SPA である Next.js に導入

    【Next.js】Google Analytics も YouTube iframe 埋め込みも公式ライブラリでいけるようになるぞ
    tuki0918
    tuki0918 2023/12/25
  • RAGにおけるドキュメント検索精度向上について(実践編)

    損害保険ジャパン株式会社 DX推進部の眞方です。この記事では、RAG(Retrieval Augmented Generative)の構築時に、ドキュメント検索精度の向上を目指して検索モデルの改善を行った際の手法、および結果について解説させていただきます。 概要を知りたい、という方は以前書いた前回の記事を読んでください。 はじめに 今回はRAGにおける検索モデルの改善を目的として、独自のデータを使用してfine-tuneを行いました。 RAGにおける検索(赤枠)の部分を改善する取り組みを行いました。 検索モデル 学習のためのライブラリとしては、sentence transformersを使用しました。また、モデルは日語BERTを使用しています。 データ 今回RAGの対象となるドキュメントは、大きく次の2つが存在しています。 規定集 保険商品の説明等が書かれているドキュメントです(詳細は前

    RAGにおけるドキュメント検索精度向上について(実践編)
    tuki0918
    tuki0918 2023/12/25
  • Node.js でメモリ肥大化の原因を特定してみた

    はじめに ユビーでエンジニアをしているおおいしつかさです。 これは、Ubie Engineering Advent Calendar 2023の12月7日の記事になります。 何を書こうかなー、最近はユビーの根幹システムのリアーキテクチャをやっているのでその辺かなーと思ったのですが、まだ仕掛かり中だということと具体な業務に直結しそうな内容なので抽象化して書くのが面倒そうだなーと思ってたところに軽いトピックが飛び込んできたので、そのことを書くことにしました。 ChatGPTはみなさん使われていると思いますが、ぼくも別の業務でOpenAI関連の機能開発に携わっています(ユビーで働くといろんな業務に携われるのがいいところです) 。 その仕事の中で、Node.js環境でメモリ肥大化の事象に遭遇したので、それをどのように発見して改善したかについてお話します。 ぼくは今も昔もRubyが大好きですが、ふだ

    Node.js でメモリ肥大化の原因を特定してみた
    tuki0918
    tuki0918 2023/12/24
  • NextAuthで指定したギルドユーザー限定のDiscordログインを実装する

    概要 こんにちは!現在仕事で東京で 1 ヶ月ホテル生活をしていますユウトです! 今回は自分の所属しているコミュニティで、NextAuth を使って Discord ログイン機能を実装し、その中で特定のギルドに入っていないとログインできないような機能を作りました! 実装していく中であんまり参考になるような記事がなかったので、メモがてら書きます! 使用技術 React v18.2.0 Next.js v13.1.1 (app ディレクトリは使ってないです) next-auth v4.18.7 …etc 早速Discord OAuth2 の設定 まずは Discord ログインの機能を使用するために、Discord の OAuth2 の設定をします。 https://discord.com/developers/applications にアクセスをして、Discord ログインをする N

    NextAuthで指定したギルドユーザー限定のDiscordログインを実装する
    tuki0918
    tuki0918 2023/12/24
  • ZodのスキーマとPrismaのスキーマの二重管理は避けられないもの?

    2023年4月頃からTypeScriptでWebアプリを作り始めており、一番悩んでいるのが、Formの実装です。人生で、初めてのFullStack TypeScriptReactHookFormをTypeSafeに使い回すための設計 ZodとPrismaのスキーマの二重管理 1のRHFについては、色々参考になる記事があるのでなんとなく方向性は見えたんですが、2のZodとPrisma(要はDBテーブルのスキーマ)が二重管理になるのは、どうしようもなさそうな気配を感じています。 以下の event というテーブルがあるとします。 CREATE TABLE `event` ( `id` int(11) unsigned NOT NULL AUTO_INCREMENT, `event_name` varchar(60) NOT NULL DEFAULT '', `startDate` date

    ZodのスキーマとPrismaのスキーマの二重管理は避けられないもの?
    tuki0918
    tuki0918 2023/12/22
  • Web フロントエンドの推しディレクトリ構成と Next.js App Router なコードベース | Offers Tech Blog

    Offers を運営している株式会社 overflow の あほむ でございます。暖冬と言われつつもすっかり寒い季節ですね。おかげさまで割と走っているほうの師です。(師走) n 年ぶり n 回目の Web フロントエンド 最後にメイン開発者の立場でコードをスクラッチしたのいつだったっけ?と遡ると 2018年ごろのブログ記事 がでてきました💀 実際には 2017 年から 2018 年にかけての作品ですかね。当時の構想から読み取れる重厚かつ自己表現の感に内心苦笑いしつつ久々の新規建立です。 今回はディレクトリ構造の面から紹介していきます。 推しディレクトリの先達たち 推しディレクトリという言葉に乗っかってみたものの、ゴメンそこまでの熱感は持っていないかもしれない🥺 とはいえ先達の記事もご紹介しておきます。 今回の前提 稿において、これらの前提に依存した論はほとんど含まれない認識ですが一応

    Web フロントエンドの推しディレクトリ構成と Next.js App Router なコードベース | Offers Tech Blog
    tuki0918
    tuki0918 2023/12/19
  • 認可のベストプラクティスとDDDでの実装パターン

    最近、少々複雑な権限機能の開発を担当している中で、対応方針を悩んでいたことがありました。 権限機能というものは取り扱いが難しく、影響範囲が広いにも関わらず、対応漏れや考慮不足があると情報漏洩に繋がってしまいます。 また、機能拡張をしてく中でも対応漏れを起こさないようにする必要があるなど、考えることも多く頭を悩ませておりました。 そこで、認可処理の設計のベストプラクティスやDDDの実装パターンに認可処理を組み込む方法など、色々と調べていたのですが、その中でいくつか知見を得られたのでまとめようと思います! 権限と認可 権限と切っては切れない関係にあるのが認可です。 権限はある操作を実行できる権利を指します。 それに対して、認可は操作を実行する許可を出すため仕組みのことを指します。 例えば、ブログ投稿サービスで考えてみると、以下のような感じです。 権限: 投稿者はポストを編集できる。 認可: ユ

    認可のベストプラクティスとDDDでの実装パターン
    tuki0918
    tuki0918 2023/12/17
  • 1年かけてNext.jsのapp routerへ完全移行した話

    App Router移行は進んでいますか? Next.js v13から一年以上経過しました。 ReactNext.jsは、React Server Component(以下RSC)やServer Actionを筆頭にどんどん新機能がリリースされています。 私も仕事Next.jsを採用しています。 App Router移行するか。するとしたらいつするか。 どのようなアーキテクチャにするか考えついに先日、全ページApp Router移行できました。 一緒に働くフロントエンドエンジニアのみなさま、工数を確保してくださったPMありがとうございました。 対象読者 Next.jsで開発しており、Pages Routerの資産を持っている人 これからApp Routerに移行したい人 App Routerの移行で困っている人 なぜ移行しようと思ったか App Routerが公開されましたがPages

    1年かけてNext.jsのapp routerへ完全移行した話
    tuki0918
    tuki0918 2023/12/16
  • Gmailの新スパム規制対応全部書く

    [2024年1月10日、19日追記] GmailとYahoo!側のアップデートに合わせていくつか細かい説明を追加しています(大筋は変わっていません)。変更点だけ知りたい方は「追記」でページ内検索してください。 2023年10月3日、Googleはスパム対策強化のため、Gmailへ送るメールが満たすべき条件を2024年2月から厳しくすると発表しました。また米国Yahoo!も、2024年2月 第一四半期[1] から同様の対策を行うと発表しています。端的に言えば、この条件を満たさないと宛先にメールが届かなくなるという影響の大きな変更です。 この記事では、Gmailや米国Yahoo!の規制強化への対応方法を解説します。ただし米国Yahoo!にメールを送る人は多くないと思うので、フォーカスはGmail寄りです。また、メール配信サービス(海外だとSendGridやAmazon SES、国産だとblas

    Gmailの新スパム規制対応全部書く
    tuki0918
    tuki0918 2023/12/09
  • Magic animate論文解説

    世の中の進みが早すぎてついていけません はじめに Animate Anyoneが出てきて数日、まだコードもモデルも公開されていないうちに新しい高精度動画生成手法が発表されました。 名前はMagic animate、TickTok運営元が研究開発した生成モデルとのこと。 しかも今回はモデルもコードも公開されており、すでに誰でも触れる状況にあります。 僕も早速弄り倒そうかと思ったのですが、モデルインプレは別に僕がやらなくても誰かが書くだろうと思い直したので、とりあえず論文から読もうかなと思います。 という訳で今回も速報論文解説をやっていきます(論文紹介の味を占めただけ) 元論文はこちら(https://arxiv.org/pdf/2311.16498.pdf) 論文解説 概要 この研究は、ある特定の動作シーケンス(デモ動画見る限りはセグメント情報を主に使っていそう。ただ機構的にいろいろな動作シ

    Magic animate論文解説
    tuki0918
    tuki0918 2023/12/07
  • Embulkのcoreのソースコードから紐解くデータ転送のしくみ

    この記事は trocco Advent Calendar 2023 の6日目の記事となります。 はじめに 今回はtroccoの内部でも利用されているETLのためのOSSであるEmbulkについて、core部分のソースコードリーディングを通して、そのしくみを紐解いていきたいと思います。 おことわり Embulkの基的な使い方などについては解説しません。 筆者はembulk-coreにコントリビュートしているわけではないので、間違いなどがあればお気軽にご指摘ください。 今回見ていくcoreの実装自体は、比較的変更が少ないとされる各種プラグインが従うべきインターフェース部分(embulk-spi)から隠蔽されているため、今後この記事の内容が正しくなくなる可能性は容易にあります。 Embulkにはguessやpreviewやresumeといった機能も含まれていますが、今回は単純なembulk r

    Embulkのcoreのソースコードから紐解くデータ転送のしくみ
    tuki0918
    tuki0918 2023/12/06
  • Next.jsのIntercepting Routesを使ってみた

    こんにちは、hanetsukiです。 今回は、Next.js v13.3のAppRouterで利用できるようになっているIntercepting Routesを使って、モーダルと詳細画面を別々に作成できるようになりました。 記事では、実際に作成したサイトを元にIntercepting RoutesとParallel Routesについてお話しします。 今回作ったもの Interceptiong RoutesとParallel Routesの試験用に、簡単なWebサイトを作成しました。 リポジトリも公開しているので、詳細な実装が気になる方はそちらをご覧ください。 主な利用技術 Node.js(v18.18.2) Next.js(v14.0.2) React(v18.2.0) スクリーンショット画面 TOP画面 https://midjourney.tsuki-lab.net/ 詳細モーダル

    Next.jsのIntercepting Routesを使ってみた
    tuki0918
    tuki0918 2023/12/04
  • Ubie は Go と Node.js の会社になります

    Ubie では、創業当初から Server-Side Kotlin を推進してきましたが、全社的な技術選定を再度行い、これからは Go と Node.js を中心とすることにしました。 記事では、Go と Node.js を選定した理由や、それを普及させる取り組み、そして選定の流れを紹介します。 経緯 これまで Ubie では技術スタックを発散させてきていて、現在は KotlinGo、Node.js、RubyPython のバックエンドサービスが動いています。以前は新規開発が多く、それぞれに携わるメンバーが技術選定をすることにより、最大瞬間風速を出せるなどのメリットがありました。しかし、現在では弊害が目立ってきています。 まず、事業成長に伴って運用の重要性が増しています。人材が潤沢とは言えないスタートアップにおいて、様々な技術スタックを安定運用することはコストが高すぎると感じています

    Ubie は Go と Node.js の会社になります
    tuki0918
    tuki0918 2023/12/04
  • 【個人開発】Next.js 13 (App) × GCP × Cloudflare × microCMSを駆使してブログをリニューアルする

    はじめに 私は https://rl-japan.com というサイトを運営しています。 これは「ロケットリーグ」というゲームに関するニュースや攻略情報をまとめたサイトです。 日において、このゲームの情報は限られているため、2021年よりロケットリーグ専門の情報ポータルサイトとして運営を開始しました。現状、ページビュー(PV)やユニークユーザー数(UU)も安定しており、コミュニティへの貢献を実感している今日この頃です。 プロジェクトの背景と目的 以前の「RL Japan」のトップページでは、microCMS様が公式で提供しているオープンソースのテンプレート[1]を採用していました。このテンプレートは複製・改変・商用利用が可能で、ブログ公開に必要な機能が網羅されているため、すぐに公開でき非常に助かりました。技術的にはNuxt.js (Vue2) と Netlify/Netlify Func

    【個人開発】Next.js 13 (App) × GCP × Cloudflare × microCMSを駆使してブログをリニューアルする
    tuki0918
    tuki0918 2023/12/01
  • 【AI動画生成】Animate Anyone 論文解説

    はじめに 11月も終わり、今年も残るところあと一か月となりました。 今年ももう終わるから今年中に成果を上げとけ!と言わんばかりに最近は新技術の登場が多いです。 今回取り上げるのも11月最後の大砲として出てきた新技術、その名もAnimate Anyone Animate Anyoneとはなんぞや 文字で説明するより見たほうが早い 凄くざっくり説明すると、一枚の絵と動きをボーン動画として入力すると、入力した絵がボーン動画と同じ動きをしてくれるよ!というもの。 似たようなものは今までもReferenceOnly × openpose × animatediffとかで出来ましたが、特筆すべきはその精度。 動画生成の大敵であるちらつきは一切なく、入力画像にかなり忠実な動画を生成しています。 さてこの技術、動画生成にずっと注目している自分としてはいますぐにでも弄り倒したいのですが、残念ながらコードとモ

    【AI動画生成】Animate Anyone 論文解説
    tuki0918
    tuki0918 2023/11/30
  • Next.js 13 の cache 周りを理解する - revalidate

    Next.js 13 App Router の cache 周りを理解したい記事シリーズです。 Automatic fetch() Request Deduping revalidate ← この記事 fetchCache (後日公開) Incremental Static Regeneration / ISR Next.js では、もともとレンダリング方法のひとつとして、Incremental Static Regeneration = ISR が利用可能でした。 静的なページ生成を前提としながらも、一定間隔を超えた時点でページを再生成してくれる仕組みで、間隔は、getStaticProps の revalidate オプションで指定可能でした。 export async function getStaticProps() { const res = await fetch("https

    Next.js 13 の cache 周りを理解する - revalidate
    tuki0918
    tuki0918 2023/11/30
  • Next.js 13 の cache 周りを理解する - Automatic fetch() Request Deduping

    Next.js 13 App Router の cache 周りを理解したい記事シリーズです。 Automatic fetch() Request Deduping ← この記事 revalidate fetchCache (後日公開) Next.js 13 App Router の cache はむずかしい Next.js 13 以降 App Router と呼ばれる、app/ ディレクトリを起点とする新たなレイアウト・レンダリング機能が導入されました。 併せて、レンダリングを効率化するためのキャッシュ機構も大きく手を加えられました。 基的には意識せずとも恩恵を受けられるものが多いですが、把握しておかないと意図しない描画に繋がる可能性もあるため、App Router を利用する場合には抑えておきたいところです。 App Router に対応している beta 版ドキュメント[1]に基

    Next.js 13 の cache 周りを理解する - Automatic fetch() Request Deduping
    tuki0918
    tuki0918 2023/11/29