photo
photo
  1. トップ
  2. システム開発
  3. Rails check_box_tagでcheckboxを生成!初心者でもわかる!

Rails check_box_tagでcheckboxを生成!初心者でもわかる!

Webアプリケーションを開発するためのフレームワーク、Ruby on Railsでcheckbox(チェックボックス)を生成する方法について解説します。

Ruby on Railsでcheckboxを生成するには、check_box_tagを使用します。

Ruby on Rails初心者向けにcheck_box_tagを使う方法を解説しているので、Rails初心者もぜひ読んで、check_box_tagの使い方を学んでください!

※Rails初心者の人は、Railsの概要について解説した記事もぜひ合わせてご覧ください。

では、Rails check_box_tagを学んでいきましょう!

 

Rails check_box_tagの書き方

では、Rails check_box_tagの書き方を紹介します。check_box_tagは以下のように書きます。

checkboxを生成するには、check_box_tagとlabel_tagを使うことに注意しましょう。

上記のようなソースコードを記述すると、以下のようなcheckboxが生成されます。

Rails checkboxの画像

checkboxやラベル(label)をクリックすると、checkboxにチェックが入ります。Rails checkboxの画像

 

実際にcheck_box_tagを使おう!

では、実際にRailsでcheck_box_tagを使ってみましょう。

まず、わかりやすいようにデスクトップに新たなプロジェクトを作成します。

ターミナルを開いて、デスクトップのディレクトリに移動し、「sample」というプロジェクトを作成します。

その後、新たに作成したプロジェクトのディレクトリに移動します。

ターミナル以下のコマンドを打ち込んでください。

以上のコマンドを打つことで、「sample」プロジェクトのディレクトリに移動できているかと思います。

とコマンド打ち込み、「http://localhost:3000/」というURLにアクセし、以下の画面になれば下準備は終了です。

http://localhost:3000/の画面

では、次にコントローラー(contorller)を作成します。

※controllerの基礎が理解できていない人は、Rails controllerについて解説した記事をご覧ください。

以下のコマンドをターミナルに打ち込みます。サーバーを起動したままになっている人は、「control+C」でサーバーを切断してください。

すると、ターミナルが以下のようになり、たくさんのファイルが生成されています。

rails g controllerで作成されたファイル

では、テキストエディタで、config/routes.rbを開き、以下のようにソースコードを記述します。

【routes.rb】

これは、ルートパス(今回は「http://localhost:3000/」)にアクセスした時、checksコントローラーのindexアクションを起動させるためのソースコードです。

そして、app/controllers/checks_controller.rbを開き、以下のようにソースコードを記述します。

【checks_controller.rb】

これでindexアクションが定義できました。次に、app/views/checksフォルダに、新たに「index.html.erb」を作成し、以下のソースコードを記述しましょう。いよいよcheck_box_tagの登場です。

【index.html.erb】

では、以下のコマンドを打ち込み、サーバーを起動させます。

そして、「http://localhost:3000/」にアクセスします。すると、以下の画面が出力されます。

Rails check_box_tagの生成結果

check_box_tagでcheckboxが生成されていることがわかります。

checkboxの動作確認として、「PHP」のcheckboxをクリックしてみます。checkboxにチェックが入りました。

rails check_box_tag チェックを入れた場合

Railsのcheck_box_tagでcheckboxを生成する方法について解説してきました。

check_box_tagは単体で使うことはあまりなく、label_tagと一緒によく使用されることも知っておきましょう!

エンジニアに役立つ目的別講座

Pythonの基本~応用をマスター

現役シリコンバレーエンジニアが教えるPython 3 入門 + 応用 +アメリカのシリコンバレー流コードスタイル
現役シリコンバレーエンジニアが教えるPython 3 入門 + 応用 +アメリカのシリコンバレー流コードスタイル

現役シリコンバレーエンジニアが教えるPython入門講座。Python3の基本を取得できます。

Webサイトのコーディングができるように

ウェブ開発入門完全攻略コース - プログラミング をはじめて学び創れる人へ!未経験から現場で使える開発スキルを習得!
ウェブ開発入門完全攻略コース - プログラミング をはじめて学び創れる人へ!未経験から現場で使える開発スキルを習得!

HTML, CSS, Bootstrap, JavaScript, MySQL, Ruby, Ruby on Rails, AWS Cloud9, Git, GitHubを用いたWebアプリケーション開発の方法を総合的に学べます。

AWSを基礎から学ぶ

これだけでOK! AWS 認定ソリューションアーキテクト – アソシエイト試験突破講座(SAA-C02試験対応版)
これだけでOK! AWS 認定ソリューションアーキテクト – アソシエイト試験突破講座(SAA-C02試験対応版)

AWSの基本資格「AWS 認定ソリューションアーキテクト – アソシエイト試験」を合格を目指し、そのための知識や経験を獲得できるように!

オリジナルのウェブサイトを作ろう

WordPress開発マスター講座
WordPress開発マスター講座

WordPressのカスタマイズ手法を身につけ、自身のサイト構築や開発案件の受託などを目指しましょう。