こんにちは！Reactを普段使っていて、「これって中で何が起きてるの？」と思ったことありませんか？今回は、Reactの超ミニマル版「MiniReact」を自作してみます。全部JavaScriptで作ります。難しい依存関係はナシ！対応している機能はこちら：関数コンポーネント ✅useState()（複数呼び出し対応）✅JSXっぽい記法（h()関数）✅仮想DOMからの描画 ✅なんと100行以下！ なぜ作るの？Reactはすごく便利だけど、中身はちょっとブラックボックス。シンプルなReactを自作すると、次のような仕組みがスッキリ理解できます：...

Ruby を使用したコーディングではディレクトリに応じた module を定義することが多いと思います。例えば Rails で app/controllers/examples_controller.rb のようなコントローラーがあり、これの置き場所について controllers ディレクトリ直下ではなく、v1 ディレクトリを挟みたいとなったとします。その場合 app/controllers/v1/examples_controller.rb にリネームした後、ファイル内では module V1 の階層を増やすことになると思います。このとき、ファイルのリネームとファイル内の修正で...

リファクタリングをしていて、ガッと数十ファイルにわたって一括で書き換えたいような場面、みなさんもありますよね？ 場合によっては数百かもしれません。（「そんなに広範囲に影響する時点で設計が悪いのでは？」という指摘はあるかもしれませんが、この記事では横に置いておきます。）この記事は、「AI に codemod を書かせて、それを実行すると書き換えが楽ですよ」というお話です。codemod のことを全く知らなくても、AI に書いてもらえば今日から使っていけるはずです。やることは簡単で、要は以下の手順を回すだけです。「これをこう書き換える codemod を作って」と AI にお願いする...

masaki です。先日は「Dev Container で起動した Claude Code から Hooks でホストの Mac に通知する」という記事を書きました。https://zenn.dev/socialplus/articles/ea9be95301ae99今日は先日に引き続き、Claude Code と Dev Container の話題です。先日の記事の内容と共通する部分があるため、先日の記事に興味を持っていただいた方は今日の記事にも興味を持っていただけるかもしれません。 この記事で得られるものClaude Code (コンテナ) と Neovim (ホスト...

こんにちは、ずっきーです！実務の中で「ページの初期表示を速くしたい！」という課題があり、「サイト設定（サイト名、サイトのロゴ画像など）」 の取得を SSR（サーバーサイドレンダリング） で行うようにしました。このアプリは少し特殊で複数のサイトを出し分けるので、 API でサイト設定を取得してます ☝️しかし、取得したサイト設定を Layout や Footer などの非ページコンポーネントでも使いたい場面が多く、props による受け渡しが多くなってしまいました。いわゆるバケツリレー問題に悩まされました、、Next.js の App Router であれば、 Server Co...

masaki です。弊社では生成 AI を業務に積極的に取り入れています。これまでにも以下のような記事を公開してきました。https://zenn.dev/socialplus/articles/d92f1296c8403ahttps://zenn.dev/socialplus/articles/618bc1016bc51c最近はコードアシストにとどまらず、エージェント型 AI ツールを活用する動きが活発になっています。今回は、よく話題にもなり弊社でも利用している Claude Code について、少し便利になる通知設定のテクニックをご紹介します。 はじめにClaude...

概要弊社では USリージョンの Datadog サービスと、ap-northeast-1リージョンの AWS 環境上に起動している Datadog Agent の通信を NAT Gateway 経由のインターネット通信で行っていたのですが、セキュリティ上の理由からインターネットではなく AWS PrivateLink に閉じた接続に切り替えたいと考えていました。ただ、AWS PrivateLink がクロスリージョン接続に対応する前は、Datadog と AWS のリージョンを揃えるか、AWS VPC のリージョン間 VPC ピアリングを使って通信を確立する必要がありました。ど...

こんにちは、simomu です。2025年6月28日 に京都で開催された関西 Ruby 会議 08 に参加してきました。https://regional.rubykaigi.org/kansai08/いわゆる地域 Ruby 会議というもので、東京 Ruby 会議や松江 Ruby 会議など様々な地域で開催されています。https://regional.rubykaigi.org/関西での地域 Ruby 会議は 2024 年に大阪 Ruby 会議 04 ありましたが、関西 Ruby 会議としては 2017 年以来の開催とのことです。 印象に残ったセッション Witchcra...

こんにちは、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の考...