Simple Formを使いこなして、Ruby on Railsのフォーム作成をマスターしよう

Ruby on Railsは、Webアプリケーションの開発のあり方を大きく変えてきました。フレームワークには当初から、開発を素早く始めて堅牢なアプリケーションを構築するための優れた機能が数多く備わっています。

とはいえ、フォームの構築と取り扱いは今なお厄介な作業です。そこで有力な選択肢となるのが「Simple Form」です。この記事では、Simple Formとは何か、なぜ必要なのか、そして実際のユースケースについて詳しく解説します。

フォームとRuby on Rails

Ruby on Railsはアプリケーション構築を大幅に簡素化してくれる一方、コードベースを整理された一貫性のある状態に保つには、常に注意を払う必要があります。その対策の一つが、抽象化を活用して書くべきコードそのものを減らすことです。実際のアプリケーションに存在しないコードは、管理する必要もありません。だからこそ私たちは抽象化を好むのですよね。Simple Formはまさにそうした抽象化の一つであり、Webページ向けフォームの構築をシンプルにしてくれます。

フォームは一般に構築が複雑で、Railsを使っても例外ではありません。各フィールドごとに適切な入力タイプを定義し、正しい属性へ紐付ける必要があるからです。Simple Formはこの手間を軽減し、各フィールドに必要なタイプをいちいち調べる必要をなくします。

例として、name、username、emailの各フィールドを持つユーザー情報入力フォームを考えてみましょう。Userモデルに同名の属性が定義されているものとします。Simple Formを使うと、属性を入力するフォームは次のようになります。

注目すべきは、各フィールドのタイプを一切指定していない点です。Simple Formはカラムの型に基づいて、各フィールドに適切な入力タイプを自動的に選択してくれます。

これにより作業時間を節約できるだけでなく、コードの可読性と保守性も向上します。

Simple Formのインストール

プロジェクトにSimple Formを導入するには、まずGemfileにsimple_form gemを追加します。bundle installを実行した後、付属のジェネレータを使えば、アプリケーションに合わせたセットアップが完了します。

BootstrapおよびZurb Foundationに関する補足： Simple FormはBootstrapとZurb Foundation 5の両方をサポートしています。これらを利用している場合は、ジェネレータの実行時に--bootstrapまたは--foundationパラメータを指定することで、追加設定もまとめて組み込めます。Bootstrapの場合は以下のようになります。

Simple Formの基本的な使い方

前述の通り、Simple Formはオブジェクトに関連するデータをもとに、完全なフォームを自動生成します。さらに重要なのは、各属性に適したフィールドを用意するだけでなく、ラベルやエラーヒントも入力欄とともに出力してくれる点です。

ここでは、新規のRuby on Rails 7.xアプリケーションを想定しましょう。Userモデルを生成し、Simple Formでフォームを作成します。

続いて、new、create、indexアクションを持つコントローラを生成します。フォーム上で実際に操作できるものを用意するのが目的です。

これらのアクションには対応するビューが必要です。以下は、ユーザーの登録（サインアップ）を処理するフォームの例です。

この例では、username入力欄にカスタムラベルとカスタムエラーメッセージを指定しています。カスタマイズを指定しなければ、属性名をもとにラベルが自動的に推測されます。

また、passwordフィールドにはカスタムヒントを、emailフィールドにはカスタムプレースホルダーを設定しました。さらに、通常はフィールド上部に配置されるラベルを、横並びの「インラインラベル」に変更することも可能です。

加えて、falseを渡せばラベル・ヒント・エラー表示を個別に無効化できます。例：<%= f.input :password_confirmation, label: false %>

フォームを実際に使える状態にするため、もう1つビューを追加しておきましょう。

rails sでサーバーを起動し、localhost:3000/users/newにアクセスすれば、フォームの動作を確認できます。ここからは、従来のRailsフォームとの違いに注目してみましょう。

バリデーションに関する補足： Simple Formは必須フィールドをすぐに扱えます。例えば、Userモデルに以下のようなpresenceバリデーションを追加すると、

カラム型とフォームフィールドの対応について

先述の通り、私たちは各フィールドのタイプを指定しませんでした。Simple FormのREADMEには、利用可能な全入力タイプと、各カラム型のデフォルト値の一覧が掲載されています。よく使われるものをいくつか見ていきましょう。

ブーリアン型

上記の表の通り、ブーリアン型の属性はデフォルトでチェックボックスとして描画されます。多くの場合それで十分ですが、そうでないケースもあります。Simple Formではas属性を使えば、ラジオボタンやセレクトボックス（ドロップダウン）へ自由に変更できます。

ラジオボタンに切り替える場合の指定方法は次の通りです。

このコードから生成されるHTMLは以下のようになります。

わずかなRubyのコードから、これほど完成度の高いHTMLが生成されるのは驚きですね！

HTML出力のカスタマイズ

先の例から分かるように、Simple Formは各フィールドに対して大量のHTMLを生成します。これには入力欄本体のHTMLに加え、ラベルと入力欄を包むラッパーdivも含まれます。input_html属性とwrapper_html属性でカスタムクラスやidを指定すれば、これらを出力に反映できます。以下はその例です。

この仕組みは、maxlengthやvalueといったHTML属性の設定にも使えます。ユーザーフォームのpasswordフィールドを例に、maxlength属性でフィールドのサイズと文字数を制限してみましょう。

カスタム入力とその他のオプション

Simple FormはHTMLノードを組み立ててくれるRubyライブラリです。標準で豊富なフィールド群を備えていますが、独自のフィールドを追加することもできます。やり方は、Simple Formのクラスを継承したカスタムクラスを作成することです。例として、入力欄の前に「@」プレフィックスが付く、SNSアカウント名用のカスタム入力フィールドを定義してみましょう。

定義したカスタム入力は、次のように使えます。

なお、Userモデルにnetwork_handle属性が存在しない場合は、マイグレーションでカラムを追加するか、モデル内でattr_accessorを使って擬似的に定義しておく必要があります。

i18n（多言語化）サポート

フォームの構築はもともと手間のかかる作業ですが、複数言語をサポートするサイトやアプリになると、その負担はさらに増します。幸い、Simple FormはRuby on Railsの標準規約に忠実に設計されています。ロケールファイル内にsimple_formキーを定義すれば、すべてのラベル・ヒント・プレースホルダー・プロンプトなどの翻訳を一元管理できます。

簡単な例を示します。

バリューオブジェクトの扱い

フォームの対象となるオブジェクトとして、ActiveRecordではないカスタムクラスを使いたい場面もあります。ビジネスロジック上の都合や、複数モデルの属性を1つのオブジェクトに集約したい場合などに、複数モデルのデータを合成したオブジェクトを作ることがあります。

理由が何であれ、こうしたオブジェクトでもSimple Formでフォームを構築できます。そのために、オブジェクトのクラスには理想的には次の3つのメソッドを実装します：to_model、to_key、persisted?です。

to_modelメソッドはオブジェクト自身を返します。

to_keyメソッドは、オブジェクトの識別子となる属性を指します。通常はidという名前の属性です。

最後のpersisted?メソッドは、オブジェクトが永続化済みかどうかをSimple Formに伝える役割を担います。

このメソッドが存在しない場合、f.submitヘルパーは使用できません。

ただし、もっと手軽な方法があります。クラスにActiveModel::Modelモジュールをincludeするだけです。

これをUserモデル経由で使ってみましょう。

すると、ユーザーフォームに会社名のフィールドを追加できます。

もちろん、この属性はテーブルには保存されません。しかし同じ考え方を応用すれば、複数のモデルから属性を集めたバリューオブジェクトを柔軟に構成できます。

まとめ

この記事では、Simple FormがRuby on Railsアプリケーションに簡単に導入・統合できることを紹介しました。Simple Formはフォーム内の各フィールドの細部を自動的に処理するだけでなく、複雑で完成度の高いHTMLを生成してくれるため、フォームのスタイリングや微調整も格段に楽になります。

ぜひSimple Formの公式ドキュメントを掘り下げて、そのパワフルさを体感してみてください。

それでは、楽しいコーディングを！

P.S. Ruby Magicの最新記事をいち早く読みたい方は、Ruby Magicニュースレターを購読してください。すべての投稿をお見逃しなく！

著者プロフィール：Thomas Riboulet

ゲスト著者のThomas Ribouletは、フランスを拠点とするバックエンドおよびクラウドインフラ領域のコンサルタントエンジニアです。13年以上にわたり、スタートアップや企業のチーム・プロダクト・インフラのスケーリングに携わってきました。フランスのGNU/Linux誌への寄稿経験もあり、自身のブログでも技術記事を発信しています。

Thomas Ribouletの記事一覧