こんにちは、steshima です。業務で React Flow に触る機会があったので、今回 React Flow の基本的な使い方を記事にしました。React Flow のバージョンは 12.6.4 です。 React Flow についてReact Flow は、React アプリ上でノードベースの UI を構築できるライブラリです。ドラッグ＆ドロップ・ズーム・ノード間接続など、インタラクティブなフローチャートが比較的簡単に作れます。https://reactflow.dev/ 基本的な使い方React Flow の基本的な使い方を紹介します。 Controll...

こんにちは Social PLUS のフロントエンドエンジニアのまっくすです。弊社の開発環境の課題であった「VRTのブレ」に立ち向かった話を共有したいと思います。Storybook v6＋Storycap 環境で頻発していた VRT のブレに対してMSW でダミー画像をモック化storycap から storycap-testrun への移行で対策しました。撮影時間はやや伸びましたが、レビュー負荷が大幅に下がり、開発者体験が確実に向上したので、その手順とポイントを共有します。私たちと同様に、VRTのブレの悩みを少しでも解消することができれば幸いです！ 用語の整理...

はじめに初めまして、バックエンドエンジニアの otsubo です 🙇‍♂️この記事では Rails の本番作業を便利にしてくれる maintenance_tasks gem を紹介します！実際に Rails アプリケーションに導入して本番作業が快適になったため、利用して分かったことや注意点をまとめました。https://github.com/Shopify/maintenance_tasksmaintenance_tasks は本番作業の実行環境を整えてくれる gem です。特に、下記のように DB や CSV のレコード単位で処理を行う単発の作業に向いています。DB ...

こんにちは、st-1985 です。弊社のサービスの一つである Message Manager では、管理画面でアップロードされた画像を保存し、LINE 用のフォーマットに変換した上で配信していますが、その配信された画像に関してユーザーから「文字がつぶれて読みにくくなった」との声を頂きました。調査の結果、 ActiveStorage で指定している画像加工プロセッサ(libvips) の JPEG におけるデフォルトの品質(quality)が低めに設定されていることがわかりました。この記事ではその詳細と改善策について紹介します。 libvips についてlibvips は、大量...

はじめに弊社では Ruby on Rails を使用しており、ActiveStorage を用いて画像やファイルを扱っています。BtoBtoC のサービスを運営しているので、エンドユーザには CDN を通して配信し、顧客企業向けには S3 の署名付き URL を発行してアクセスを制限した配信を行っています。S3 には CDN 用と署名付き URL 用の 2 種類のバケットを用意しています。先日ある機能を開発しているときに、全顧客で同一の画像（グローバルな画像）をエンドユーザ向けに配信したいという要件が出てきました。具体的な要件は次の通りです。エンドユーザ向けの画像なので、C...

はじめにこんにちは、koyablueです。この前久々にリーダブルコードを読み直しました。リーダブルコードの内容をルール化してAIに任せるといい感じに適用できるのでは？と思ったのでやってみます。具体的なコーディング規約準拠かどうか、というルールを適用させている例はわりとある気がしますが、可読性を担保するための汎用的なルールを正しく適用することは可能なのでしょうか（結果はタイトル通りなわけですが）。 やることリーダブルコードからルールにできそうなものを地道に抽出し、マークダウンにするルールのマークダウンをCursorのProject Rulesに設定するCursorに...

はじめにこんにちは、@zomysan です。Storybookの代替として評判のLadleを触ってみたので簡単な記事にまとめます。Ladle の UI はざっくりこんな感じ。右側に並んでいるのはコンポーネントの一覧です。見た目はスッキリしており、動作も軽いです。 この記事について 対象読者フロントエンドエンジニアStorybook を使っているが、Ladle が気になっている人コンポーネントカタログを使ってみたい人 書いてあることプロジェクトへの Ladle の導入手順React を使ったフロントエンドアプリケーションで Ladle を使ってみた感想...

はじめにこんにちは、 okumud です。先日 RubyKaigi 2025 へ参加してきました。弊社は Gold Sponsor として本年初協賛し、私を含めて simomu, terandard, otsubo の 4人で参加しました。https://prtimes.jp/main/html/rd/p/000000138.000085682.htmlこの記事ではそれぞれ印象に残ったセッションについて紹介します。 印象に残ったセッション Make Parsers Compatible Using Automata Learningwriter: s...

3 歳になった子どもが体調不良で嘔吐しました。パジャマも布団カバーもべちゃべちゃです。おそらく風邪だとは思いますが、ノロウイルスなんかに家庭内感染するのも嫌なので、念のためハイターでつけ置き洗いをします。子どもの体をシャワーで洗って、新しいパジャマを着せて、寝かしつけをしている間にふと思いました。つけ置き洗いが不十分だったとしても、乾太くんで乾かせばある程度除菌できたりするんだろうか…？ 🤔子どもが腕に乗っていて動けないので、スマホ片手に ChatGPT に聞いてみます。最近また賢くなった気がしますが、どこまで答えてくれるんでしょうか。!この記事のシミュレーション結果を信用しない...

どうもこんにちは、たくびーです。弊社では生成AIを業務に取り入れる流れが活発です。また、Roo CodeやChatGPT、Cursor等の生成AI使用に関して補助制度があるので気軽に使うことができます。その中で今回はフロントエンドチームではどのように生成AIが使われているのか意見を募集してみました。メンバーそれぞれが独自の使い方を試行錯誤しながら、日々の業務効率化に活用しています。ここでは、実際の利用例や悩み、工夫した点についてご紹介します。 Cursorを使っているメンバーの使い方まずはフロントエンドチームでCursorを導入している私を含めたメンバーの使い方についてご...

はじめにこんにちは、hamaguchi です今回は Web アプリとして遊べるマインスイーパーについての2回目の記事です盤面の拡張と改善、データ層の分離を行いましたhttps://zenn.dev/socialplus/articles/ea0502a3b30ecf 前回のまとめ無限の広さの盤面でマルチプレイできるマインスイーパーにするためにはどのようなデータ構造にしたら良いか考えた盤面をブロックという単位で区切り、ブロックにセルがあるという構造を考えたとりあえずブロックの分割なし、100x100 セルの盤面でマルチプレイできるマインスイーパーを作ったフラ...

Church Encoding は、λ計算（Lambda Calculus）由来のテクニックで、Number、Boolean、データ構造を関数だけで表現できる驚きの手法です！つまり、プリミティブな型を一切使わずに計算ができるんです。この考え方は関数型プログラミングの基礎となっており、「計算とは何か？」を純粋に示してくれます。今回は、NumberとBooleanを関数のみで表す方法を一緒に見てみましょう！ Church Numerals: 数を関数でカウントするもし、Numberがただの値ではなく、「何回何かをするか」を決める関数だったら…？それがChurch Numeralsの考...

はじめに既存の機能を参考に新規の機能を開発するケースは割とよくあると思いますが（キーワード検索があり、それを参考にタグやカテゴリーでの検索機能を追加するようなケースなど）このような場合で既存の機能の実装にリファクタリングの余地がある際、その対応に悩んだことはありませんか？ 🤔実際、私はこのようなケースの場合どのようなステップを踏んで取り組めば効率的、効果的に対応できるのかあまり分かっておらず、既存の機能の実装と新規の機能の実装を同時にリファクタリングしようとしてレビュワーの方から下記のようなコメントをいただいたことがありました 👇もともとの既存の機能の実装が、そもそもリファ...

masaki です。この記事では、Rails 8.0（Active Support）の変更点について、CHANGELOG をざっと読んで気になったところをまとめてみました。メインとなる新機能や大きな変更点についてはすでに色々なブログなどで紹介されていますが、細かいメソッドまわりの小さな変更ってあまり話題にならないですよね。そこで、自分自身の勉強も兼ねて、そういった細かなところを中心にまとめてみました。少しでも参考になれば嬉しいです！本記事の執筆にあたり以下の Rails 8.0.2 の ActiveSupport の CHANGELOG を参照しています。また、記事中の動作...

はじめにAWS WAF を導入する際、注意すべき点として「AWS WAF 導入によって正常なパスが意図せず BLOCK されてないか」が挙げられます。正常なパスが AWS WAF によって BLOCK されないようにするには、マネージドルールグループに対して正常なパスを判定させないようにするのが一般的です。例えば /hoge による正常なリクエストが AWSManagedRulesCommonRuleSet の SizeRestrictions_BODY ルールによって弾かれてしまうとしましょう。この場合、スコープダウンステートメントを利用して正常なパスを AWSManage...

こんにちは、simomu です。今日は redis-objects gem を継承関係の親子で利用すると、Redis の保存先の key が変わってしまうことがある話をします。以後断りの無い場合はredis-objects 1.7.0環境下での話とします。 redis-objectsredis-objects gem は Redis のデータ型を Ruby のオブジェクト ( e.g. String, Integer, Array...）にマップする機能と、Redis へのアクセスをモデルクラスに組み込むことができる機能を備えた gem です。ActiveRecord ...

最近、奈良県民になったほっしゃん(https://github.com/hotsum92)です!!!VitestをCircleCI上で動作させる上でメモリ不足でテストが落ちることに遭遇したので、記事にしてみました。 問題VitestのCircleCIで時折、テスト失敗し、動作が不安定になっていました。具体的には…Nodeで JavaScript heap out of memory が発生。Worker exited unexpectedly でテストの実行が失敗する。 検証CircleCI: How-To-Record-a-Job-s-Memory-...

開発現場で、「自分のプルリクエストだけなかなかクローズされないぞ…」と思った経験ありませんか？プルリクエストについてフィードバックをいただき、書籍やブログを読み、プルリクエストの本質や運用方法について考える中で、その改善策を模索してきました。この記事はそんな私と同じ悩みを抱える方へ向けた記事となっております。内容自体は理解できても実際に実現するのが難しい側面もあります。それでも、プルリクエストを通じてプロセスを改善し、より良い開発環境を追求するための一助となれば幸いです！🧑‍💻 対象読者プルリクエストを書く経験が浅い方プルリクエストがなかなかクローズされずに悩んでいる方...

Ruby でエラー処理を行う場合、元々 Ruby で定義されているエラークラスに加えて、以下のようにカスタムエラークラスを定義して使用できます。class CustomError < StandardError; end今回はカスタムエラークラスを使用したエラー処理の実装方法について説明します。一例として Rails のアプリケーションにおいて、エラーの内容に応じたエラーレスポンスを生成し返すことを考えてみます。以下のバージョンを前提としています。Ruby 3.3.7Rails 7.2.2 実装する要件あるエンドポイントにおいて、以下の要件を満たすよう実装して...

去年10月から ソーシャルPLUS にフロントエンドエンジニアとして業務委託で参画しているほっしゃん(https://github.com/hotsum92)です!!!あまりログイン関連の技術については、触ったことがなかったのですが、ソーシャルPLUSに参画してから、OIDCを勉強させていただきました。今回は、その基本となるOAuth演舞を舞ってやろうとおもいます。勉強はしてみたけど、よくわからないみたいな状況をぬけだすために、とりあえず動くものを作ってみることにします。なるべくシンプルな環境で動作確認をしていきたいので、curlとphpで、OAuthの動きを真似してみようとおもいま...