こんにちは！ラブグラフエンジニアのひろです。この記事では、トグルボタンをクリックした際にAPIからデータを取得する処理において、連打によるデータ取得の重複問題を解消した経緯と、その方法について書いていきます。 起きていたこと47都道府県の一覧を表示していて、ユーザーがいずれかの都道府県をクリックすると、その都道府県に関連する市区町村のデータを取得するAPIが走り、結果を一覧表示する。という機能を作っていました。しかし、このトグルボタンを連打すると、市区町村データの取得処理が同時に複数回走ってしまい、結果としてデータが重複して表示されてしまう問題が発生しました。富山県の例。...

ラブグラフのエンジニアの熊谷です。今回は Moment.js から Day.js に移行した話をしていこうと思います。よろしくお願いします。 概要Moment.js のサポート終了に伴い、 Day.js を利用することにしました。Day.js, Moment.js は主に JavaScript 内で時間操作に関する便利なメソッドを用意してくれているライブラリです。例えば現在の日時を取得して、数日後の日付を表示したり、特定の日時を YYYY-MM-DD の形式で表示したりすることができます。 移行の背景: Moment.js の開発が終了していた公式のProject Sta...

みなさん、こんにちは！ラブグラフエンジニアの関口です！突然ですが、みなさんのチームではいくつくらいの定例ミーティングがありますか？定例ミーティングは開発業務に関わるものからチームビルディングに関するものまで、チームや会社の文化が出るものだと思います。今回は、ラブグラフエンジニアチームが１週間でどのような定例ミーティングをしているのかを紹介します。 ミーティング一覧月曜日と金曜日に会議を集中させ、それ以外の曜日では、開発に集中できるようになっています。ミーティングはオフライン開催で、メンバー全員が話しやすい環境を作りつつ、メンバーの状況に合わせ、オンラインも混合して...

こんにちは！ラブグラフエンジニアのひろです。インスタンスに対して指定のメソッドが存在するかどうかを確認したい時に、使える方法を調べたので紹介します。 概要Rails アプリケーションを開発する過程で、特定のメソッドやカラムが存在するかどうかを確認する必要がしばしばあります。Railsはこのための便利なメソッドをいくつか提供しており、今回は respond_to?, defined?, および has_attribute? の使用方法について解説します。メソッド概要respond_to?あるオブジェクトが特定のメソッドに対して応答するかどうかdefi...

ラブグラフでCTOをしております横江( @yokoe24 )です。エンジニアがどうやったら成長するのか、というところに興味があって、この３年で目覚ましい成長を遂げたひろさんにお話を聞いてきました！🌟 いつ入社しましたか？2019年3月に入社しました。最初に業務委託を１年やって、その後に正社員になり、いま５年が経ったところです。最初の１年間は、未経験エンジニアとして、『パーフェクトRuby』を読むなど勉強させてもらいつつ業務をしていました。 その前は何をされていたんでしょう？高校卒業してからは、造船会社で給与計算など総務・経理業務を３年間やっていました。会社の運動会...

こんにちは！ラブグラフでエンジニアをしているけいすけと申します。業務の中でOR条件のクエリを書く機会があったので書き方をまとめておきます。例として、マッチングアプリのようなサービスを扱っていて、その中から特定の条件を満たすユーザーを取得する場合を考えてみます。このサービスにはユーザーの情報を持つ users テーブルがあり、name、address、occupation、hobbyはそれぞれユーザーの名前、住所、職業、趣味を表すとします。usersテーブルnameaddressoccupationhobby一郎tokyoengineerwork...

はじめにラブグラフ 開発チーム インターン の こるく です。私がラブグラフに Join してまず感動したのが、コマンド一発で完了する超お手軽な環境構築でした。普通プロジェクトに Join するときは面倒な環境構築をする必要がありますが、ラブグラフではそれが全くありませんでした。ということで今回は、それを実現している Make と Docker を使って、開発、テスト、CI、本番のすべての環境で、ランタイムの環境と環境変数の設定をすべてコードベース ( IaC というやつ？ ) でラクに共有して開発体験を爆アゲしようと思います。 この構成が目指すところ✅ 環境で悩むこと...

こんにちは！ラブグラフエンジニアのひろです。今回は、複合ユニークインデックスを変更する際にMysql2::Error: Cannot drop index 'index_name': needed in a foreign key constraintというエラーに直面した時の解決策について書きます。例として、 profiles テーブルの user_id と handle_name による複合ユニークインデックスを削除し、 user_id と email による複合ユニークインデックスを作成するプロセスを用いて解説します。 前提条件profiles テーブルには u...

ラブグラフでエンジニアをしております横江( @yokoe24 )です！このあいだ PDF 出力機能の実装をしました！技術選定からその後の反省までをまとめます。 1. 技術選定PDF出力をおこなう Rails の gem は複数あります。まずはどの gem を使うか検討するために比較しました。（※ Ferrum, HexaPDF, Grover は、この記事を書くにあたって見つけたものなので、当時は選定対象ではありませんでした）gem名スター数main,masterへの最終コミット最新バージョンリリース日初回バージョンリリース日Prawn4.6k...

皆さんこんにちは！ラブグラフエンジニアの関口です！突然ですが、皆さんは EXIF をご存知でしょうか？EXIF とは Exchangeable Image File Format の略で撮影日時やカメラの設定などの写真に関するデータを保存したものになります。詳しい説明はこちらの記事が分かりやすいです！https://zenn.dev/lovegraph/articles/559985737db6eaラブグラフのアプリケーションでは写真に関する機能実装をすることが多く、その際に EXIF 情報を利用します。今回の記事では EXIF 情報を扱う際に便利なツール ExifTool ...

こんにちは！ラブグラフ開発インターンの arawi です！Rails の CanCanCan gem を利用していたときに陥った罠についてお話します！https://github.com/CanCanCommunity/cancancan TL;DRCanCanCan では、デフォルトでアクションのエイリアスが設定されているそれを理解しておかないと予期しない挙動をすることがあるまた、CanCanCan のルールはあとに書いたものが優先される 発端あるリソースに対して、show は限られた id のものに絞って、 index はできないという権限を作りたいときがあり...

概要こんにちはラブグラフのエンジニアの熊谷です。今回はHTMLコーディングに関する内容を共有したいと思います。 フローの整理今回は以下の２つの視点から、効率的なスタイルコーディングの説明をしたいと思います。①環境構築（記述する作業のスピードを上げる）②スタイルコーディングする順番（組み立てるスピードを上げる）よろしくお願いします。 環境構築（記述する作業のスピードを上げる）まずは環境構築です。できるだけ考えること少なくしながら作業できるようにしていきましょう。 コード補完機能（Emmet）を使うテンプレートエンジンを使っている場合には、HTMLのコード補...

こんにちは！ラブグラフエンジニアのひろです。Vue.js にて、 props で渡された値を使ってあれこれしたい時の方法を迷ったので、試したことをまとめます。 やりたかったこと親コンポーネントで動的に生成され props で渡される値に応じて、子コンポーネントの表示を切り替えたり、子コンポーネント側で値を変えて表示を切り替えたい。 悩んだこと子コンポーネントで props を直接変更するのは良くない[1]ので、 data で用意したプロパティに代入しようと考えました。しかし、今回 props で渡される値は親コンポーネントで動的に生成されるので、 created, mo...

ラブグラフのエンジニア、横江 (@yokoe24) です。みなさんは git コマンドで merge をしたことがありますか？ありますね！！（※ git を g でエイリアス振っていますが、 git merge develop です）merge をしたときの出力をよく見ると、地味に気になる一文があります。Merge made by the 'ort' strategy.なんでしょう、これ・・・？sort じゃなくて ort ・・・？気になったので調べてみました。https://softantenna.com/blog/git-2-33-released/すぐに出...

こんにちは！ラブグラフの開発チームでインターンシップをしているけいすけと申します。先日、Active RecordでNAND条件、NOR条件を書く機会があったのでまとめておきます。 NAND条件NANDとはNOT ANDの略で、ANDの否定をとったものです。日本語では否定論理積といいます。Aという条件とBという条件があるとき、A AND Bは、AとBがどちらもtrueのときにtrue、それ以外の場合はfalseになりますが、A NAND Bは、AとBがどちらもtrueのときにfalse、それ以外の場合はtrueになります。https://ja.wikipedia.org/...

皆さんこんにちは！ラブグラフエンジニアのDaichiです！皆さんは開発業務の中で ChatGPT を利用していますか？私は日常的に ChatGPT を開発業務に活用しています。今回の記事ではその活用方法をいくつかご紹介しようと思います。!社外秘の情報やプロダクトコードなどはインプットしないことを前提に紹介していきます。ChatGPT を利用する際には社内固有の情報はインプットしないようにお気をつけください。 命名の候補出し利用する場面が圧倒的に多いのは関数や変数、DBに追加するカラムの命名に迷った時です。自分よりAIの方がボキャブラリーが多いため、選択肢の候補を出して...

概要アプリケーションのカラーコード、皆さんどのように書いていますか？一般的には #FF00CC など、hex コードを利用していると思いますが、それでも Named Color のメリットもあると思うので、Named Color の魅力とその理由についてまとめていこうと思います。よろしくお願いします。 「Hex Color」か「RGB(RGBA) Color」が優れているところ元々 CSS では色指定に「Hex Color #00ff99」か「RGB(RGBA) rgb(244, 112, 132)」 などを使ってきていると思います。これらの色指定には、Named Col...

ラブグラフのエンジニア兼CTO、横江 (@yokoe24) です。この間インターンのかたに説明する機会があったので、こちらのブログでも。 3つのバリデーションサーバーサイドアプリケーションの制作にあたっては『３つのバリデーション』が必要になります。バリデーション とは、入力された値をチェックする仕組みのことです。データベースに変な値が保存されてアプリケーションが変な動きをしないために、バリデーションはとても大事なものです。そしてバリデーションは大きく３つ、フロントエンド のバリデーションサーバーサイド のバリデーションデータベース のバ...

こんにちは！ラブグラフエンジニアのひろです。日付を一覧で表示する場所で、通常は 「2024年1月1日、2024年1月3日、2024年1月4日」 と羅列し、連続している日付だったら 「2024年1月1日~2024年1月3日」 のように省略して表示したいケースが出てきました。パッと方法がわからなかったので書き残しておきます。 方法each_cons(2).all? { |a, b| (b - a).to_i == 1 } を使いました。each_cons(2)で2つずつ値を取り出し、差分が1（つまり並んでいる）かどうかを検証していく方法です。（順番がバラバラの配列では機能しな...

こんにちは！ラブグラフ開発インターンのけいすけです。Sassの!defaultの使い所が分からなかったので調べてみました。 !defaultとは変数のデフォルト値を設定するための命令です。次のように変数の定義の後ろに!defaultと書くことで、変数のデフォルト値を設定できます。$black: #000 !default;挙動を細かくみていきましょう。公式のページSass: Variablesには次のように書いてあります。Sass provides the !default flag. This assigns a value to a variable only if ...