はじめにこんにちは、@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の動きを真似してみようとおもいま...

こんにちは、steshima です。ソーシャル PLUS のフロントエンドでは UI フレームワークに MUI を採用しています。MUI での開発中、時々ブラウザのコンソールにレイアウト関連の warning のログが出力されることがありますが、どういったものがあったかな？とふと思ったので備忘録としてまとめてみました。MUI のバージョンは 5.15.10 です。 validateDOMNesting warningWarning: validateDOMNesting(...): <p> cannot appear as a descendant of <...

事象VSCode の Source Control は、デフォルトだとファイルを保存すれば差分が自動的に Changes に現れてくる。が、ファイルを保存しても Source Control の Changes に差分が出て来なくなることがあった。Refreshのボタンを押せば差分が現れるが、ちょっと不便。モノレポであるなどの理由でリポジトリの規模が大きくなってきたときに、VSCode が読み込んでいるファイルが多すぎるせいでスキャンが終わらないことが原因らしい。 対策Cmd + Shift + P -> >Preferences: Open User Se...

こんにちは、terandard です。今回は Datadog の Monitor で API のレイテンシーを監視しようとした際にハマった話を書きます。 監視を入れた背景弊社のバックエンドチームでは定期的に「Datadog を見る会」を開催しており、Datadog のダッシュボードや APM を見てサービスのパフォーマンスを確認しています。普段 APM を見てパフォーマンスを確認する際は P90 Latency などの指標から異常がないかを見ています。通常よりもレイテンシーが高い場合は Trace で詳細を確認しています。Trace では以下のように Duration が表示...

こんにちは、st-1985 です。最近、ActiveRecord で継承を使用したモデルの実装をしていた際に、~_typeに意図しないクラス名が設定される問題に遭遇しました。この記事では、その経験と、ソースコードを追いかけて分かったことを共有したいと思います。 この記事の対象ActiveRecord で delegated_type や polymorphic: trueを使用している ~_typeに継承先のクラス名が設定されないdelegated_typeを使用した以下のような実装があるとします：class Entry < ApplicationRecor...

はじめに この記事についてこんにちは、zomysan ( https://x.com/zomysan ) です。本日はソーシャルPLUS社のフロントエンドチームで取り組んだ、 Yarn v1 から pnpm への移行の成果について紹介します。従来から使用していたパッケージマネージャーである Yarn v1 には、installに時間がかかるなど、いくつかの課題がありました。そのため、Yarn v1からpnpmへ移行を行いました。結論として、3つの改善につながりました 💪CI / ローカルともにパッケージのインストールが早くなり、開発効率が向上 🚀パッケージの管理が厳格に...

はじめにこんにちは、koyablueです。今まで転職したり社内で異動があったりで、既存のチームに途中参加することを何度か経験しています。そのたびに「最初にあれをやっておくべきだったな」と思って後悔することを繰り返してきた結果、新しいチームに参加したら最初にやることの知見が溜まってきたので、記事にまとめます。この記事の内容は私がこれまで個人的に少しずつ学んできたものですが、決して特殊なものではなく、割と普遍的に役立つtipsだと思っています。なので、新しいチームに参加するときのTODOリストのように使っていただけたら嬉しいです。よければぜひ参考にしてみてください。 情報収集...