はてなブックマーク

はじめに Vitest はデフォルトの設定では、テストファイルごとに分離された環境を使用してテストを並列実行します。 この設定はグローバルな状態や副作用に依存した実装やライブラリなどを含むテストを並列実行するために有効です。 しかし、この設定は各テストファイルごとにテスト環境の起動や破棄を行うためテスト実行時間が長くなります。 この記事では React アプリケーションのテストコードを、環境の分離設定をやめて同一環境で実行することにより、実行速度を向上させた方法とそれに伴って発生した問題の修正方法についてご紹介いたします。 背景 弊社は microCMS というヘッドレス CMS を開発しており、その管理画面は React で開発されています。 大まかな構成としては、Vite を使用した SPA で、テストコードは testing-library/react を使用したコンポーネントテスト

組織が拡大するにつれて、バックオフィス系の対応業務が増えてきました。 以前は担当者一人がすべての問い合わせに対応していましたが、組織拡大とともに業務分担が進んでいます。 そして、業務分担に合わせて行いたいのが問い合わせ先の調整です。 今までは担当者一人になんでもかんでも聞いていましたが、今後は適切な担当者に問い合わせる必要があります。 今回はそんなバックオフィスへの問い合わせをNotion x ChatGPTを使って効率化したOpsを紹介します。 Single Source of Truth（信頼できる唯一の情報源）としてのNotion活用、おすすめです。 🤖 つくったもの slackbotにバックオフィス系の質問を投げると、適切な担当者に引き継いでくれます。 フォームやメールを介すことなく、すべてSlackで完結するのがポイントです。 🕒 業務フローのビフォーアフター 初期（v1）

こんにちは。にっしーです。 microCMSでは、BizOpsチームで業務改善/Ops自動化を担当しています。 ある日、セールスチームから「見積書作成の負荷が高まっている」という課題が上がってきました。 これまでは担当者が個別に顧客からの問い合わせに応じて見積書を作成していましたが、依頼数の増加に伴い、対応がしきれなくなってきたのです。 そこで、見積書作成業務の自動化に取り組むことにしました。 本記事では、その自動化の概要とポイントを書いていきます。 🌱 改善前の業務フロー 顧客からの問い合わせを受けて、セールス担当者が内容を確認し、freeeにログインして手作業で見積書を作成していました。その後、他のメンバーにSlackでレビュー依頼を出し、OKが出たら顧客に送付するというフローでした。 見積書作成業務には、細かいチェックポイントが多数あり、ミスを防ぐために高い集中力が求められます。

生成AIの隆盛に伴い、ベクトル検索やベクトルデータベースが注目されています。 ベクトルについてより理解するために簡単なデモサービスを作ってみました。 この記事では作ったサービスをもとにベクトルについて説明し、後半では生成AIとベクトルの関連について紹介します。 つくったもの 「しもふりサーチ」 - お笑いコンビ「霜降り明星」のYouTubeチャンネル、「しもふりチューブ」の過去動画を検索できるサービスです。 このサービスには以下の2つの機能があります。 1. 文章での動画検索 文章で動画を検索する 「粗品さんがクイズを出題する回」 や　「せいやさんがギターを弾く回」 など、自然言語で動画を検索できます。 2. 関連動画レコメンド 内容の近い動画をレコメンドする 動画を選ぶと、過去動画の中から内容の近い動画をレコメンドします。 これらの機能はベクトル検索で実現されています。詳細を説明していき

はじめに Cloudflare Developer Week 2023にて数々の魅力的な発表がある中、Cloudflare PagesでNext.jsを利用するためのパッケージ@cloudflare/next-on-pagesがv1.0.0となりました。 執筆時の最新版であるv13.4.2のApp Routerにも対応しているということで早速試してみました。 なお、現時点でサポートされている機能については@cloudflare/next-on-pagesのドキュメントにもまとまめられています。 検証環境 Next.js v13.4.2 @cloudflare/next-on-pages 1.0.0 試してみる @cloudflare/next-on-pagesを使ってCloudflare Pagesにデプロイしてみます。 Next.jsのセットアップ まずはNext.jsの環境を用意します

はじめに AWS Lambda レスポンスストリーミングの紹介 | Amazon Web Services ブログ 最近、上記のブログで Lambda でレスポンスをストリーミングできるようになったという話がありました。 自分がこのブログを読んだ時、ここで話されているストリーミングとは HTTP のレイヤで説明すると何者なのだろうか、という疑問を持ちました。 最近この辺りを調査したので、その内容をこの記事でまとめます。 また、他の AWS + サーバレスな構成でストリーミングをする方法もついでに紹介します。 前提: サーバレスの種類について この記事では以下のサービスについて考慮します。 Lambda AppRunner API Gateway AppSync Fargate がサーバレスの文脈で扱われることもあるかと思いますが、ECS と EKS は考慮しません。 手前に ALB がある

microCMSでプロダクトエンジニアをしています。りゅーそうです。 microCMSでは、UIコンポーネントを作成するのにRadix UIを採用しています。 Radix UIはいわゆるヘッドレスUIと呼ばれるUIライブラリで、UIの機能のみを提供します。 ChakraUIやMUIのようなUIライブラリの場合、既成のコンポーネントセットをそのままインポートして使うだけで良いケースも多いのですが、 Radix UIの場合、「Radix UIの機能」に加えて「自社サービスにあったデザイン」などを付与してコンポーネントを作成し使うことがほとんどです。 最近、私はSlider(Range)コンポーネントをRadix UIを使用して作成しました。 その際に意識したことなどをまとめました。 要約 Radix UIを最大限に活用するが、Radix UIの仕様を「なるべく意識しない」で使えるコンポーネント

こんにちは。BizOpsエンジニアのにっしーです。 データ分析やOps自動化の仕事をしています。 昨今世界を賑わせているChatGPTですが、「どう業務で使うのかいまいちわからない。。」と感じている方が多いのではないでしょうか。 そこで今回は、ChatGPTを使った業務改善の実践例を3つ紹介します。 私がお手伝いしているmicroCMS社での実例で、業務をまるっと置き換えるというよりは業務の一部を切り出して担当してもらおう、というお話です。 プロンプトも載せています。参考になれば幸いです。 なお、自動化ツールにはpipedreamを採用していますが、Zapier、makeほか自前実装でも実現可能です。自社に最適なツールを選択してください。 📮 バックオフィス部門の効率化：問い合わせの分類 会社の問い合わせフォームから営業の連絡ばかり来てうんざりしませんか？ できれば必要な問い合わせだけに

この記事では LaunchDarkly を使った Feature Flags の制御について紹介します。 Feature Flags とは そもそも Feature Flags がどういうものであるか、どんな種類のものがあるかについては以下の記事が参考になります。 Feature Toggleについて整理してみました フィーチャーフラグにはタイプ（リリース・実験・運用・許可）がある！ Feature Toggle Types | Unleash LaunchDarkly の用語 LaunchDarkly 上で作った Project には 1 つ以上の Environment があります。 Environment は例えば Production とか Staging とか Test とかそういうものです。 各 Environment には 0 個以上の Feature Flag があります。

🐣 はじめに みなさん、勤怠打刻してますか？ 先日、このようなツイートをしたところ、思わぬ反響がありました。 そこで、この仕組みの全体像や工夫した点などをまとめることにしました。 SlackやGASを使ったOps自動化に興味がある人に読んでもらえたら嬉しいです。 きっかけ そもそもSlackにはfreeeが公式で提供している人事労務用のSlack appがあり、スラッシュコマンドを使って勤怠打刻できます。便利ですね。 ただ、このアプリ、コマンドを打つのがとにかくめんどくさかったりします。 あるとき、同僚が「もっと気軽に勤怠打刻できたらええのになぁ」と言っているのを耳にしました。 そこで、スタンプで勤怠打刻できる仕組みを作り、運用を始めました。 それから数ヶ月後、会社にフレックスタイム制が導入されました。 「ワークライフバランス！！さいこう！」となりつつも「今月はあと何時間働けば良いんだっ

はじめに タイトルで大きくふろしきを広げてしまいましたが、結論から言うといろいろと試してみた結果、現時点ではまだ着地点を見出せていません。現時点での自分なりの最適解として、useQuery、usePrefetch、useMutationと楽観的更新の実装例についていくつか紹介させていただきます。 モチベーション 現在、Redux Sagaをふんだんに利用したアプリケーションのメンテナンス・機能拡張に携わっているのですが、ページ数やAPIエンドポイントが多数あることからコード量が多く構造も複雑になっており、メンテナンスコストの増大が懸念されるようになってきました。そこで今後のメンテナンス性の向上、また新規に参画するメンバーにも入りやすいようRedux SagaをはがしReact Queryへ少しずつ移行してくための検証を兼ねてReact Queryの使い方を探っています。 React Que

こんにちはhiro08です。 現在フロントエンドエンジニアとしてmicroCMS本体の開発に携わっていて、日々サービスの新機能開発や改善を行っています。 そして、先日リリースされたmicroCMSのJavaScript、iOS、Android SDKの3つのうち、JavaScript SDKの開発を担当させて頂きました。リリース時のブログはこちらです。 microcms-js-sdkはnpmで配布されていて、GitHubにオープンソースとして公開されています。 ※現在はGetリクエストのみに対応しています。今後、機能追加や改善していく予定です。 SDKを用いて開発するメリットとしては、Fetch APIやXMLHttpRequest等のネットワーク通信に関する処理を隠蔽できることにあります。冗長的になりがちなリクエスト処理を、メソッド化することによって一貫性があり、クリーンなコードを書くこ