Zenn
⌚

【Rails】"約1時間前"のような相対的な時間表示の実装

2023/10/15に公開
Rails
Ruby
ヘルパーメソッド
tech

相対的な時間表示をするにはtime_ago_in_wordsというメソッドを使います。使い方を説明していきます！

time_ago_in_wordsメソッドとは

Railsの日付/時間ヘルパーメソッドの1つで、これを使用すると指定された日時から現在までの時間差を相対的な言葉で表示できます。例えば、"2 minutes ago"（2分前）や"about 1 hour ago"（約1時間前）のように表示できます。

基本的な使い方

`time_ago_in_words'メソッドはビュー内で簡単に使用できます。例えば、表示したいモデルの作成日時を表示したい場合、以下のように記述します。

<%= time_ago_in_words(model.created_at) %>前

例えば、コメントモデルであれば以下のように使用できます。

<%= time_ago_in_words(comment.created_at) %>前

日本語表示

日本語で表示するには、ロケール（国際化設定）をカスタマイズする必要があります。
以下の手順に従って日本語化を行うことができます。

application.rbの記述

以下ファイルに追記する。

config/application.rb
:
:
module NaganoCake
  class Application < Rails::Application  
  :
  :
+ config.i18n.default_locale = :ja
  :
  :
  end
end

この記述により、railsのデフォルト言語が日本語になります。

ymlファイル作成

config/locales ディレクトリに、日本語のロケールファイルを作成します。例えば、ja.yml という名前のファイルを作成し、以下のように記述します。

ja:
  datetime:
    distance_in_words:
      half_a_minute: 半分
      less_than_x_seconds:
        one:   1秒未満
        other: "%{count}秒未満"
      x_seconds:
        one:   1秒
        other: "%{count}秒"
      less_than_x_minutes:
        one:   1分未満
        other: "%{count}分未満"
      x_minutes:
        one:   1分
        other: "%{count}分"
      about_x_hours:
        one:   約1時間
        other: 約%{count}時間
      x_days:
        one:   1日
        other: "%{count}日"
      about_x_months:
        one:   約1ヶ月
        other: 約%{count}ヶ月
      x_months:
        one:   1ヶ月
        other: "%{count}ヶ月"
      about_x_years:
        one:   約1年
        other: 約%{count}年
      over_x_years:
        one:   1年以上
        other: "%{count}年以上"

このように設定することで、time_ago_in_words メソッドの結果が以下のような日本語で表示されます。

  • 1分未満前の場合: "1分未満前"
  • 2分前の場合: "2分前"
  • 30分前の場合: "30分前"
  • 1時間前の場合: "約1時間前"
  • 2時間前の場合: "約2時間前"
  • 1日前の場合: "1日前"
  • 2日前の場合: "2日前"
  • 1ヶ月前の場合: "1ヶ月前"
  • 2ヶ月前の場合: "2ヶ月前"
  • 1年以上前の場合: "1年以上前"
  • 2年以上前の場合: "2年以上前"

まとめ

time_ago_in_wordsメソッドは、Railsで時間差をわかりやすく表示するのに役立つ便利なヘルパーメソッドです。カスタマイズによって、自分のアプリケーションに合わせて調整できますので、このメソッドを上手に活用して、ユーザーに分かりやすい時間表記を実装しましょう！

最後までお読みいただきありがとうございました。

Discussion