シンプルなフォームでRuby on Railsのフォーム作成をマスターする

Ruby on Rails は、Web アプリケーションの構築方法を変えました。初期のフレームワークには、堅牢なアプリケーションを開始して構築するのに役立ついくつかの優れた機能が付属していました。

ただし、フォームを構築して処理するのは依然として難しい場合があります。シンプルフォームは素晴らしいオプションです。シンプル フォームとは何か、なぜそれが必要なのか、実際の使用例をいくつか見てみましょう。

フォームと Ruby on Rails

Ruby on Rails はアプリケーションの構築を本当に簡素化します。ただし、コードベースを合理化して一貫性を保つためには、常に注意を払う必要もあります。 1 つの戦略は、たとえば抽象化を使用してコードを作成しないことです。実際のアプリケーションにないコードは、管理する必要のないコードです。だからこそ、私たちは抽象化をとても好むのです。シンプル フォームは、Web ページのフォームの構築を簡素化する抽象化です。

Ruby on Rails を使用した場合でも、フォームの構築は一般に複雑です。各フィールドでは、正しいタイプを定義し、それを正しい属性に付加するように注意する必要があります。シンプル フォームを使用すると、各フィールドに必要な正確な型を見つける必要がないため、その煩わしさが軽減されます。

name を使用して、ユーザーの詳細を取得するフォームを考えてみましょう。 、username 、email フィールド。 User があると考えてください。 類似の関連属性を持つモデル。シンプル フォームでは、属性を入力するフォームは次のようになります。

各フィールドのタイプは指定していないことに注意してください。シンプル フォームは、列のタイプに基づいて各フィールドの正しい入力タイプを選択します。

これにより時間を節約し、コードを読みやすく維持しやすくします。

簡易フォームのインストール

プロジェクトに Simple Form をインストールするには、simple_form を追加します。 gem を Gemfile に追加します。 bundle install を実行したら 、付属のジェネレーターを使用して、アプリケーションに合わせて正しく設定できます。

Bootstrap と Zurb Foundation に関するメモ: Bootstrap と Zurb Foundation 5 はどちらも Simple Form 内でサポートされています。したがって、これらのいずれかを使用している場合は、--bootstrap を使用できます。 または --foundation パラメーターをジェネレーターで使用して、インストール中に追加の構成を含めます。ブートストラップの場合、これは次のようになります:

シンプルフォームの基本的な使用法

前に指摘したように、Simple Form は主にオブジェクトに関連するデータに基づいて完全なフォームを生成します。ただし、シンプル フォームは各属性に適切なフィールドを生成するだけでなく、ラベルを提供し、入力フィールド自体の上にエラー ヒントを表示することも理解することが重要です。

新しい Ruby on Rails 7.x アプリケーションを考えてみましょう。ユーザー モデルを生成し、Simple Form を使用してそのフォームを構築します。

これで、new を使用してコントローラーを生成できるようになりました。 、create 、index アクション。目的は、フォーム内で遊べるものを用意することです。

これらのアクションには関連するビューが必要です。ユーザーのサインアップまたは追加を処理するフォームは次のとおりです。

この場合、username にカスタム ラベルとエラーを指定します。 入力。そのようなカスタマイズが渡されない場合、属性の名前に基づいてラベルに何が必要かを最善を尽くして推測します。

password のカスタム ヒントを設定しました。 フィールドとカスタム placeholder email の場合 フィールド。また、フィールドの上にあるラベル (フォームの通常のデフォルト) の代わりに、「インライン ラベル」を指定できることにも注目してください。

false を渡すことで、ラベル、ヒント、エラーを無効にすることもできます。 これらの属性の値:<%= f.input :password_confirmation, label: false %> .

これを使用できるようにするには、もう 1 つのビューでこれを補完する必要があります。

rails s を使用してアプリケーションを起動できます。 。 localhost:3000/users/new に進みます。 フォームを確認して使用するには、フォームが従来の Ruby on Rails フォームとどのように異なるかに焦点を当てましょう。

検証に関する注意 :シンプル フォームは、すぐに必須フィールドを使用できます。たとえば、 User モデルに次の存在検証を追加するとします。

これは、username の横に小さな「*」を追加するために Simple Form によって使用されます。 フィールドに、必須であることを指定します。これはエラーを自動的に管理しないため、コントローラーのアクションで処理する必要があります。エラーのある適切なフィールドに戻り、 エラーに対処します。

列タイプとフォームフィールドについて

前述したように、各フィールドの型は指定していません。 Simple Form README には、使用可能なすべての入力タイプと各列タイプのデフォルトの完全なリストが含まれています。最もよく使用されるものは次のとおりです:

ブール値

上の表からわかるように、ブール属性はデフォルトでチェックボックスとして表されます。多くの場合、それが私たちが望むことです。しかし、そうでない場合は、as を使用して単純なフォームでこれをカスタマイズする方法があります。 属性を使用すると、代わりにラジオ ボタンまたはドロップダウンを表示するかどうかを指定できます。

代わりにラジオ ボタンを指定する方法は次のとおりです。

これにより、次の HTML が生成されます。

これほど小さな Ruby コードでこれほど完全な HTML が得られるのは感動的です!

HTML

前の例から、Simple Form がフィールドごとに大量の HTML を生成する様子がわかります。これには、入力フィールドの HTML と、ラベルと入力フィールドの周囲のラッパー div が含まれます。 input_html を使用してカスタム クラスと ID を指定することで、これらをカスタマイズできます。 および wrapper_html 属性。以下に例を示します。

これは、関連する HTML の属性 (maxlength など) を設定する方法でもあります。 または value 。ユーザーフォームからパスワードフィールドを取得しましょう。 maxlength を使用してフィールドのサイズと長さを制限できます。 属性。

カスタム入力と追加オプション

Simple Form は、HTML ノードを準備する Ruby ライブラリです。一連のフィールドが付属していますが、独自のフィールドを追加することもできます。これを行うには、Simple Form のクラスを継承するクラスを作成できます。実際のフィールドの前に小さな「@」プレフィックスを付けたカスタム ソーシャル ネットワーク入力フィールドを定義することを考えてみましょう。

これで、次の方法で使用できるようになります。

User モデルに network_handle がない場合は注意してください。 属性を使用するには、移行または attr_accessor を使用したチートを通じて追加する必要があります。

i18n のサポート

すでに述べたように、フォームの構築は多くの場合問題点です。しかし、複数の言語をサポートする Web サイトやアプリケーションとなると、事態はさらに困難になります。ありがたいことに、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 を含む、より高速な方法があります。 クラス内のモジュール:

そして、User モデルを通じてそれを使用してみましょう。

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

もちろん、この属性はテーブルには保存されません。ただし、同じ概念を適用して、複数のモデルから取得した属性を使用して値オブジェクトを構成することもできます。

まとめ

この投稿では、Simple Form は簡単にインストールして Ruby on Rails アプリケーションに統合できることがわかりました。シンプル フォームは、フォーム内の各フィールドの詳細を処理するだけでなく、複雑で完全な HTML も生成するため、フォームのスタイルや形状を簡単に設定できます。

Simple Form のドキュメントを読んで、それがどれほど強力であるかを確認することをお勧めします。

コーディングを楽しんでください!

追記Ruby Magic の投稿を報道後すぐに読みたい場合は、Ruby Magic ニュースレターを購読して、投稿を 1 つも見逃さないようにしてください。

トーマス・リブーレ

ゲスト著者の Thomas は、フランスを拠点とするバックエンド コンサルタント兼クラウド インフラストラクチャ エンジニアです。 13 年以上にわたり、スタートアップや企業と協力してチーム、製品、インフラストラクチャを拡張してきました。彼は、フランスの GNU/Linux マガジンやブログにも何度か掲載されています。

Thomas Riboulet によるすべての記事