バリデーションでエラーになった際に、エラーメッセージを各テキストフィールド等の下部に表示したい時があると思います。 今回はそんな時に便利な各attributeごとにエラーメッセージを抜き出す方法を紹介します。 手順 例えば User の email のエラーは以下…
こんにちは。豊泉です。 データベースはPostgreSQLを使うことが多いのですが、最近実行計画をあまり見ていないなと思ったので、PostgreSQLでいくつかクエリを試しながら実行計画を見てみようと思います。 検証環境 検証データ クエリを試してみる Accountテ…
Biome v1.7からPrettierとESLintから移行するためのコマンドが追加されたので、既存のNext.jsプロジェクトで試しに移行コマンドを叩いてみました。 biomejs.dev Biomeのインストールと初期設定 ESLintからの移行コマンド Prettierからの移行コマンド package…
「ここのページだけReact使いたいんだよな〜」とか「ページのここの部分にReact入れ込みたいんだよな〜」ということはありませんか？ 今回はそんなあなたにReactを部分的に使用する方法を紹介します。 こちらの記事を応用していきます。↓ www.mof-mof.co.jp …
こんにちは。豊泉です。 少し前に良い個人開発のアイデアが浮かんだので開発していたのですが、アプリのビルドやアップロードなどは少しややこしく以前から面倒に感じていたので、せっかくならビルドとアップロードを自動化しようと思いGithub Actionsを使っ…
このviewsだけにこのJSを読み込みたい・・・！ という時があると思います。 今回はそんな時のためにJSファイルを個別に読み込む方法を紹介します。 （esbuildを使用している前提で進めていきます） 手順 1. package.json に記載されているビルドスクリプトの…
Rails7のアプリでJSのビルドツールはesbuildを使用します。 環境構築の方法はこちらを参照ください↓↓ www.mof-mof.co.jp ReactとTypeScriptをインストールする 1. 以下のコマンドで必要なパッケージをインストール yarn add typescript react react-dom reac…
勉強し始めたきっかけ もっと低レイヤーのことを勉強したい！と先輩エンジニアに相談した結果、「学びたい内容は基本情報勉強すれば大体網羅できるよ！」と言われたのがきっかけです。 使用した書籍 こちらの書籍で学習しました。 令和06年 基本情報技術者 …
はじめに 準備 create-next-app tanstack-form インストール フォーム実装 zod のスキーマを定義 FormFactory オブジェクトを作成 Server Action を定義 フォームコンポーネントを作成 ページでフォームコンポーネントを使用する 動作確認 クライアントサイ…
Railsプロジェクトを新規作成する機会は多くないため意外とオプションって忘れがちだと思います。 rails new コマンドのオプションなんだったっけかな〜という時のために よく使うオプション、知ってると便利なオプションをまとめてみました。 DB編 使用する…
Rails7以前で Tailwind CSS を使用したい場合はWebpackerを使って yarn add tailwindcss して ほげほげファイルを追加して〜〜としていたと思います。 Rails7からはWebpackerが標準ではなくなったので、導入方法が変わりました。 プロジェクト作成時に導入す…
以前、Rails7 + PostgreSQLの環境構築をしました。 www.mof-mof.co.jp www.mof-mof.co.jp 今回は、MySQLを使ったRails7の環境構築をしてみます。 本記事ではビルドにimportmapを使用した場合の環境構築を行なっていきます。 esbuildを使用する場合は こちら…
Rails7がリリースされてから、環境構築で躓いた経験がある方は少なくないのではないでしょうか。 今回は、Rails7 + PostgreSQL + esbuild の環境を docker-compose で構築していきたいと思います。 Rails7 + PostgreSQL + importmap の環境構築については以…
Rails7がリリースされてから、環境構築で躓いた経験がある方は少なくないのではないでしょうか。 今回は、Rails7 + PostgreSQL + importmap の環境を docker-compose で構築していきたいと思います。 Rails7 + PostgreSQL + esbuild の環境構築については以…
調査ストーリーとは、ユーザーストーリーが実現可能かを調査するためのタスクです（ユーザーストーリーはアジャイル開発でよく用いられる作業の最小単位）。プロジェクトを進めていると、調査ストーリーを作成することがよくありますが、調査ストーリーを作…
こんにちは。出口です。 mofmofでは開発生産性を改善する取り組みを2023年7月にスタートさせ、これまで数社の受託開発案件で導入を行ってきました。 改善の取り組みを通じて、デプロイ頻度、リードタイムが見える化され、さらに改善が進んだプロジェクトにつ…
こんにちは。出口です。 タイトルにある通り、技術ブログをはてなブログに移行しました。 この記事では、なぜ移行することになったのか、どうやって移行したのか、移行で苦労したところなどをまとめておきたいと思います。 もし脱セルフホストブログ、脱Cont…
はじめに mofmofではDevOpsを推進しており、たくさんのプロジェクトに導入が進んでいます。 ここでは、そのうち2つの異なるプロジェクトの振り返りを通じて、私たちが直面した課題、取り組んだ改善策、そして得られた教訓を共有します。 2つのプロジェクトの…
https://docs.github.com/ja/copilot/github-copilot-chat/using-github-copilot-chat-in-your-ide GitHub CopilotのCLI版です。 2023年12月5日現在パブリックベータで公開されています。 インストール gh auth login gh extension install github/gh-copilo…
タイトルのとおりですが、NestJSのGraphQL利用時に、Firebase Authenticationの idToken を使って認証する実装方法について考えました。 前提 以下のようなデータベーステーブルを定義しています。 // Firebaseアカウントと同期されるテーブル model Account…
NestJS はNode.jsでサーバーサイドアプリケーションを構築するためのフレームワークです。 mofmofではNestJSに力を入れています。 今回は、他のフレームワークでサーバーサイドアプリケーション構築経験のあるエンジニアが、NestJSに入門する際に何を知って…
JavaScript版のLangChainを触る機会があったので、備忘録も兼ねて簡単なチャットBOTを作ってみます。 構成 さくっと動かしたいのでNext.jsのAPI Routes上でLangChainを使います。 簡略化のためにチャット履歴はメモリ上に保存します。※Nextを再起動するとチ…
こんにちは エンジニアのshwldです。 「LIKE検索で引っかからないような検索ワードでも関連性が高いなら検索結果に出したい」 このようなニーズは多くあると思いますが、実装するのは結構大変です。 mofmofが提供しているMy-opeでは、チャットボットに質問す…
mofmofでは fourkeys を用いて開発生産性を計測しています。 あるプロジェクトチームが、複数のサービスを管理していました。 コードレビュー、マージ、検証というフローを辿ってリリースされるのですが、 検証完了後にリリース作業が漏れてしまうケースが有…
こんにちはmofmofでエンジニアをしているshwldです。 最近仕事で既存のシステムと連携する新しいプロダクトの設計をEventStormingで行いました。 はじめに 新しいプロジェクトの設計に悩んでいるチームメンバーがいました。 そのプロジェクトの状況は、以下…
mofmofのメンバーに向けてDevOps活動を浸透させるために、DevOpsで解決したい課題や計測方法などを書き出してみます。 課題 mofmofでの導入の背景・ニーズについて。 mofmofはアジャイル開発を得意としており、開発と運用の連携を目指す体制の下地はある。 …
graphqlでエラーを返す方法はいくつかあり、それぞれメリデメありますが、Unionで返すのが好みです。 例えば、以下のようにmutationで実行時のバリデーションエラーを共通のフォーマットで返すことを考えてみました。 mutation createPost($input: CreatePos…
イベントストーミングとユーザーストーリーマッピングの違い、使い分けについて考えました。 また、似てるので実際に両方やってみました。その感想も書いています。 イベントストーミングとは? ドメインイベントや、イベントの発生条件、集約、外部システム…
今回はTypeScriptで「DateRange型」のような型を作る利点とその正しさを保証する方法を書きます。 DateRange型の例 type DateRange = Readonly<{ since: Date; until: Date; }>; 利点について Domain Modeling Made FunctionalはF#で関数型によるDDDを実践す…
mofmofでは最近、「LeanとDevOpsの科学」という本の輪読会を行っています。 この本の輪読会は定期的に開催し、第一部である11章までを読みました。 過去の記事はこちら 第1章：なぜケイパビリティに着目するのか。LeanとDevOpsの科学を読んだ記録（1章） 第2…
