📝 ActionText って何？

Rails でリッチテキストを扱うのに便利な ActionText という機能を試してみました。
ActionText を使うと、太字・画像・リンク付きの文章を簡単に入力・保存・表示できる らしく、学ぶ機会があったため、実際に動かしてみました。
例えば、ブログの記事やコメント機能で「装飾付きのテキストを書きたいなあ」ってときにすごく便利です。
実装できた時は、エクセルやワードを思い出しました。

Rails 標準機能の Trixエディタ を自動で組み込んでくれるので、特別な設定は不要なようです。
アウトプットのために、残しておきます。

🔧 ActionText をインストールする

1. ActionText のインストール

まずは、Rails アプリのルートディレクトリで以下のコマンドを実行します。

bundle exec rails action_text:install

これで、

db/migrate/xxxxxx_create_action_text_tables.rb というマイグレーションファイルが作成される
app/javascript に Trix エディタが追加される
app/assets/stylesheets/actiontext.scss が作成される

…といった準備が自動で進むはず。

2. SCSS にスタイルを追加（重要！）

私は、そのままだとなぜか Trix エディタが正しく動かなかったので、以下のコードを app/assets/stylesheets/application.scss に追記。

@import 'actiontext';
@import 'trix/dist/trix.css';

もしエディタがうまく表示されない場合は、これを試してみてください。（参考程度に）

3. マイグレーションを実行

次に、作成されたマイグレーションファイルを適用します。

bundle exec rails db:migrate

これで、リッチテキスト用のデータを保存する action_text_rich_texts テーブルが作成される。

🏗 実際に使ってみる

1. モデルに ActionText を追加

リッチテキストを使いたいモデルに has_rich_text を追加します。

class Article < ApplicationRecord
  has_rich_text :content
end

これで、content というリッチテキストのフィールドが使えるようになりました。

（普通はテーブルに content カラムを追加するけど、ActionText を使うと action_text_rich_texts テーブルに自動で保存されるので、カラム追加は不要！）

2. フォームにリッチテキストエディタを追加

記事を作成するときのフォームにリッチテキストエディタを追加します。

<%= form_with model: @article, local: true do |f| %>
  <div>
    <%= f.label :title %>
    <%= f.text_field :title %>
  </div>

  <div>
    <%= f.label :content %>
    <%= f.rich_text_area :content %>
  </div>

  <%= f.submit "投稿する" %>
<% end %>

rich_text_area を使うだけで、Trixエディタが使えるようになルはず。

3. 記事を表示する

作成した記事を表示するときは、普通に @article.content を出力。

<h1><%= @article.title %></h1>
<div>
  <%= @article.content %>
</div>

これだけでリッチテキストが反映されました。

🗑 ActionText を削除するには？

「やっぱり普通のテキストに戻したい…」ってときのために、ActionText の削除方法もメモしておきます。

1. モデルから削除

まず、has_rich_text の行を削除します。

class Article < ApplicationRecord
  # has_rich_text :content （この行を削除！）
end

2. データベースの変更を元に戻す

以下のコマンドを実行して、action_text_rich_texts テーブルを削除します。

bundle exec rails db:rollback STEP=1

または、マイグレーションファイルを削除した後に、

bundle exec rails db:migrate

を実行してもよい。

3. 関連ファイルの削除

ActionText のインストール時に追加されたファイルを削除します。

rm -rf app/javascript/trix
rm -rf app/assets/stylesheets/actiontext.scss

また、config/importmap.rb に pin "trix" などの記述がある場合は削除。

📌 まとめ

✅ ActionText を使うと リッチテキスト（画像・装飾つきテキスト）を簡単に扱える。
✅ has_rich_text :content を追加するだけで データベースのカラム追加は不要。
✅ Trixエディタ が自動で使えるので、設定いらず。
✅ SCSS に @import を追加すると、エディタが正常に動作する可能性あり。
✅ 不要になったら簡単に削除できる。

🔗 参考リンク

以上、超初学者が ActionText をインストールしてみた記録でした。
引き続き、学習を続けます。