もふもふ技術部

IT技術系mofmofメディア

既存プロジェクトでPrettier・ESLintをBiomeに移行してみた

Biome v1.7からPrettierとESLintから移行するためのコマンドが追加されたので、既存のNext.jsプロジェクトで試しに移行コマンドを叩いてみました。 biomejs.dev Biomeのインストールと初期設定 ESLintからの移行コマンド Prettierからの移行コマンド package…

【Rails7】特定のviewsで部分的にReactを使う

「ここのページだけReact使いたいんだよな〜」とか「ページのここの部分にReact入れ込みたいんだよな〜」ということはありませんか? 今回はそんなあなたにReactを部分的に使用する方法を紹介します。 こちらの記事を応用していきます。↓ www.mof-mof.co.jp …

FlutterでiOSアプリのビルドとデプロイを自動化した話

こんにちは。豊泉です。 少し前に良い個人開発のアイデアが浮かんだので開発していたのですが、アプリのビルドやアップロードなどは少しややこしく以前から面倒に感じていたので、せっかくならビルドとアップロードを自動化しようと思いGithub Actionsを使っ…

【Rails7】任意のviewsからJSファイルを個別に読み込む

このviewsだけにこのJSを読み込みたい・・・! という時があると思います。 今回はそんな時のためにJSファイルを個別に読み込む方法を紹介します。 (esbuildを使用している前提で進めていきます) 手順 package.json に記載されているビルドスクリプトのビ…

Rails7 に React + TypeScript を導入する

Rails7のアプリでJSのビルドツールはesbuildを使用します。 環境構築の方法はこちらを参照ください↓↓ www.mof-mof.co.jp ReactとTypeScriptをインストールする 以下のコマンドで必要なパッケージをインストール yarn add typescript react react-dom react-r…

基本情報技術者試験の勉強してみた

勉強し始めたきっかけ もっと低レイヤーのことを勉強したい!と先輩エンジニアに相談した結果、「学びたい内容は基本情報勉強すれば大体網羅できるよ!」と言われたのがきっかけです。 使用した書籍 こちらの書籍で学習しました。 令和06年 基本情報技術者 …

TanStack FormでNext.jsのServer Actionsを使ってみた

はじめに 準備 create-next-app tanstack-form インストール フォーム実装 zod のスキーマを定義 FormFactory オブジェクトを作成 Server Action を定義 フォームコンポーネントを作成 ページでフォームコンポーネントを使用する 動作確認 クライアントサイ…

よく使う・知ってると便利な rails new コマンドのオプション

Railsプロジェクトを新規作成する機会は多くないため意外とオプションって忘れがちだと思います。 rails new コマンドのオプションなんだったっけかな〜という時のために よく使うオプション、知ってると便利なオプションをまとめてみました。 DB編 使用する…

Rails7 に Tailwind CSS を導入する

Rails7以前で Tailwind CSS を使用したい場合はWebpackerを使って yarn add tailwindcss して ほげほげファイルを追加して〜〜としていたと思います。 Rails7からはWebpackerが標準ではなくなったので、導入方法が変わりました。 プロジェクト作成時に導入す…

Rails7 + MySQL を docker-compose で環境構築する

以前、Rails7 + PostgreSQLの環境構築をしました。 www.mof-mof.co.jp www.mof-mof.co.jp 今回は、MySQLを使ったRails7の環境構築をしてみます。 本記事ではビルドにimportmapを使用した場合の環境構築を行なっていきます。 esbuildを使用する場合は こちら…

Rails7 + PostgreSQL + esbuild を docker-compose で環境構築する

Rails7がリリースされてから、環境構築で躓いた経験がある方は少なくないのではないでしょうか。 今回は、Rails7 + PostgreSQL + esbuild の環境を docker-compose で構築していきたいと思います。 Rails7 + PostgreSQL + importmap の環境構築については以…

Rails7 + PostgreSQL + importmap を docker-compose で環境構築する

Rails7がリリースされてから、環境構築で躓いた経験がある方は少なくないのではないでしょうか。 今回は、Rails7 + PostgreSQL + importmap の環境を docker-compose で構築していきたいと思います。 Rails7 + PostgreSQL + esbuild の環境構築については以…

「調査ストーリー」について社内テックトークで話してみた

調査ストーリーとは、ユーザーストーリーが実現可能かを調査するためのタスクです(ユーザーストーリーはアジャイル開発でよく用いられる作業の最小単位)。プロジェクトを進めていると、調査ストーリーを作成することがよくありますが、調査ストーリーを作…

みんなで開発生産性改善をやってみた

こんにちは。出口です。 mofmofでは開発生産性を改善する取り組みを2023年7月にスタートさせ、これまで数社の受託開発案件で導入を行ってきました。 改善の取り組みを通じて、デプロイ頻度、リードタイムが見える化され、さらに改善が進んだプロジェクトにつ…

技術ブログをNuxt + Netlify + Contentfulから、はてなブログ for DevBlogに移行しました

こんにちは。出口です。 タイトルにある通り、技術ブログをはてなブログに移行しました。 この記事では、なぜ移行することになったのか、どうやって移行したのか、移行で苦労したところなどをまとめておきたいと思います。 もし脱セルフホストブログ、脱Cont…

DevOps活動の半年間の振り返り

はじめに mofmofではDevOpsを推進しており、たくさんのプロジェクトに導入が進んでいます。 ここでは、そのうち2つの異なるプロジェクトの振り返りを通じて、私たちが直面した課題、取り組んだ改善策、そして得られた教訓を共有します。 2つのプロジェクトの…

GitHub Copilot CLIを試してみた

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認証結果をデコレーター@CurrentUserで取得できるようにする

タイトルのとおりですが、NestJSのGraphQL利用時に、Firebase Authenticationの idToken を使って認証する実装方法について考えました。 前提 以下のようなデータベーステーブルを定義しています。 // Firebaseアカウントと同期されるテーブル model Account…

NestJSを学ぼう

NestJS はNode.jsでサーバーサイドアプリケーションを構築するためのフレームワークです。 mofmofではNestJSに力を入れています。 今回は、他のフレームワークでサーバーサイドアプリケーション構築経験のあるエンジニアが、NestJSに入門する際に何を知って…

LangChainとNext.jsで簡単なチャットBotを作ってみる

JavaScript版のLangChainを触る機会があったので、備忘録も兼ねて簡単なチャットBOTを作ってみます。 構成 さくっと動かしたいのでNext.jsのAPI Routes上でLangChainを使います。 簡略化のためにチャット履歴はメモリ上に保存します。※Nextを再起動するとチ…

LangChainとpgvector(Postgres)を用いて関連性の高いドキュメントを手軽に検索する

こんにちは エンジニアのshwldです。 「LIKE検索で引っかからないような検索ワードでも関連性が高いなら検索結果に出したい」 このようなニーズは多くあると思いますが、実装するのは結構大変です。 mofmofが提供しているMy-opeでは、チャットボットに質問す…

デプロイ漏れを検知して通知するGitHub Actionを作った話

mofmofでは fourkeys を用いて開発生産性を計測しています。 あるプロジェクトチームが、複数のサービスを管理していました。 コードレビュー、マージ、検証というフローを辿ってリリースされるのですが、 検証完了後にリリース作業が漏れてしまうケースが有…

EventStormingを用いて複雑なシステムの設計に挑む

こんにちはmofmofでエンジニアをしているshwldです。 最近仕事で既存のシステムと連携する新しいプロダクトの設計をEventStormingで行いました。 はじめに 新しいプロジェクトの設計に悩んでいるチームメンバーがいました。 そのプロジェクトの状況は、以下…

mofmofのDevOps活動

mofmofのメンバーに向けてDevOps活動を浸透させるために、DevOpsで解決したい課題や計測方法などを書き出してみます。 課題 mofmofでの導入の背景・ニーズについて。 mofmofはアジャイル開発を得意としており、開発と運用の連携を目指す体制の下地はある。 …

GraphQL RubyでバリデーションエラーをUnion Typeで返す

graphqlでエラーを返す方法はいくつかあり、それぞれメリデメありますが、Unionで返すのが好みです。 例えば、以下のようにmutationで実行時のバリデーションエラーを共通のフォーマットで返すことを考えてみました。 mutation createPost($input: CreatePos…

イベントストーミングとユーザーストーリーマッピングをスムーズに連携させる

イベントストーミングとユーザーストーリーマッピングの違い、使い分けについて考えました。 また、似てるので実際に両方やってみました。その感想も書いています。 イベントストーミングとは? ドメインイベントや、イベントの発生条件、集約、外部システム…

TypeScriptで「DateRange型」の正しさを保証する

今回はTypeScriptで「DateRange型」のような型を作る利点とその正しさを保証する方法を書きます。 DateRange型の例 type DateRange = Readonly<{ since: Date; until: Date; }>; 利点について Domain Modeling Made FunctionalはF#で関数型によるDDDを実践す…

LeanとDevOpsの科学を読んだ記録(10章〜11章)

mofmofでは最近、「LeanとDevOpsの科学」という本の輪読会を行っています。 この本の輪読会は定期的に開催し、第一部である11章までを読みました。 過去の記事はこちら 第1章:なぜケイパビリティに着目するのか。LeanとDevOpsの科学を読んだ記録(1章) 第2…

LeanとDevOpsの科学を読んだ記録(8章〜9章)

mofmofでは最近、「LeanとDevOpsの科学」という本の輪読会を行っています。 この本の輪読会は定期的に開催し、順次後ろの章についてもログを投稿する予定です。 過去の記事はこちら 第1章:なぜケイパビリティに着目するのか。LeanとDevOpsの科学を読んだ記…

LeanとDevOpsの科学を読んだ記録(5章〜7章)

mofmofでは最近、「LeanとDevOpsの科学」という本の輪読会を行っています。 この本の輪読会は定期的に開催し、順次後ろの章についてもログを投稿する予定です。 過去の記事はこちら 第1章:なぜケイパビリティに着目するのか。LeanとDevOpsの科学を読んだ記…