未経験からのフルスタックエンジニア

スキルをつけよう!未経験からフリーランスエンジニアへの成長記録

【Ruby入門】変数と制御構文~変数・getsによる入力・文字列と数値・if~

以下の記事で簡単な計算を扱えるようになったと思います。

atora1992.hatenablog.com

でも、これだけでは電卓と同じですよね?

やっぱりプログラミングなんだから、「こんな場合はホニャララして、、」とか「何回も繰り返して計算させる」とかしたいです!

そこで、よく使われるのが(よく使ってきたのが)以下の3つです。 この他にも色々種類はありますが、基本は以下の3つかと思います。以下のリンクで他の制御構文も見れますので、気になったかたはどうぞ!

docs.ruby-lang.org

  • 条件分岐のif
  • 繰り返しのwhile(次の記事で書きます)
  • 繰り返しのfor(次の記事で書きます)

本題に入る前に

Macユーザーなので、Mac向けの内容となっています。

以下のコードは、適当なテキストエディタ上で"test.rb"という名前でファイルを作り、ターミナル上でそのファイルを実行する形をとります。

以下の最後のコマンドは、"test.rb"のあるディレクトリに移動してから実行してください。

#Desktopに保存した場合を仮定
#ターミナルを起動した初期状態で

$ cd Desktop  #Desktopにディレクトリを移動する
$ ruby test.rb  #test.rbを実行する

変数

コードを書いていて、同じ内容・値のものを何回も書くのは面倒ですよね?さらに、値を全てベタ打ちで書くと、なんの値なのか(値段?大きさ?、、、)がわからなくなりませんか?

そこで登場するのが変数です。変数は、値を入れる箱のようなものだと考えてください。その箱に任意の値を入れて(代入)、使いたいときにその箱から取り出すイメージです。また、値は数値だけじゃなく、文字列でもOKです。

イコール=の左辺に変数名を書き(小文字)、右辺に代入したい値を書くことで、変数に値を格納できます。

price = 1000  #priceという変数に、1000という値を入れる
puts price  #ターミナルに1000が表示される

name = "Yamada"  #nameという変数に、Yamadaという文字列を入れる
※文字列は"文字列"'文字列'といったようにクォーテーションで囲ってください。そうすることで、文字列として認識されます。
puts name  #ターミナルにYamadaが表示される

また、定数(円周率とか)は、変数名の頭文字を大文字のアルファベットにしてください。そうすることで、定数の値を変えようとすると警告が出るようになります。

Pi = 3.14

docs.ruby-lang.org

ユーザーからの入力を可能にしよう(gets)

上記では、コード内で手打ちで変数に値を格納しましたが、ユーザーの入力値を取得する方法があります。それがgetsメソッドです。

このメソッドでは、ユーザーがキーボードで入力した値を文字列として取得できます。

以下のように書いて実行すると、実行後にカーソルのみ表示される状態になると思います。そこで、適当な数値や文字列を入力して、Enterキーを押すと入力した値が変数inputに代入され、putsメソッドでターミナル上に入力した内容が表示されるはずです。

input = gets
puts input

コードは基本上から下に順に実行されていきますが、このようにgetsメソッドを使うと、ユーザーが入力するまでgetsメソッド以下のコードが読まれない状態になります(ユーザー入力完了を待機する状態になる)。

赤文字で、文字列として取得できると書いたように、キーボードの数字を打ち込んでEnterを押しても、プログラム上は文字列として認識されることに注意してください。だから、以下のコードを書いて、数値を入力したとしてもエラーが出てしまいます。というのも、四則演算の式が使えるのは数値に対してのみだからです。

input = gets  #数値を入力
puts input+100

そこで、文字列(オブジェクト)を数値(オブジェクト)に変換するメソッドがあります。それが".to_i"です。(逆に数値オブジェクトを文字列に変換するのは".to_s"です)

このメソッドを、数値オブジェクトに変換したい文字列オブジェクトの後ろにつけるだけで、それは数値オブジェクトになります。なので、先ほどのコードを正しくすると、以下のようになります。

input = gets.to_i
puts input+100

条件分岐のif

英単語のifの意味どおり、「もし〜だったらこうして、そうじゃなかったらこうする」といった条件による実行内容の分岐に使える構文です。

例えば、入力した値が奇数なら"odd"、偶数なら"even"と出力するプログラムを書いてみましょう。まずは日本語で考えてみると、このプログラムは「入力した数値が2で割り切れれば偶数なので"even"と出力し、それ以外(2で割り切れないのは奇数なので)は"odd"と出力する」と言い換えることができます。

割り切れるとは、あまりがゼロということなので、"入力した値%2==0"が条件として書けますね。これを使ってif構文で書くと以下のようになります。

input = gets.to_i
if input % 2 == 0
  puts "even"  #条件がtrueの場合実行される
else 
  puts "odd"  #条件がfalseの場合実行される
end

まずは、getsメソッドで入力を可能にし、数値に変換します。

次に、入力された値を2で割ったあまりが0かどうかを判断します。trueの場合、1行下のコードが実行されて終了です。

falseの場合、elseと書かれた行の1行下のコードが実行されます。

このように、ifの隣に書いた条件が満たされるtrueの場合と、そうでないfalseの場合とで実行するコードを変更できるのがifによる条件分岐です。

まとめ

今回は

  • 変数
  • getsによるユーザー入力
  • 文字列と数値オブジェクト
  • if条件分岐

を扱いました。次回は、他の制御構文(while・for)について書きます!

コードを色々いじったりして試すことが重要です!色々試してみてくださいね!

【Ruby】rubyの基礎~irb・四則演算(+α)・比較演算子~

以下の記事でRubyをインストールできたかと思います。

atora1992.hatenablog.com

それでは実際にRubyを触ってみましょう。

irb

いちいちファイルを作成して、それをターミナルで実行するのもいいのですが、irb(Interactive Rubyの略)を使えば、対話的にプログラムを実行することができます。つまり、ファイルを準備する必要がなく手軽にRubyの動作を確認できます。

ターミナルを開いて、そこでirbと打ってみてください。すると以下のようになるはずです。

$ irb
irb(main):001:0> 

この状態で、ターミナルから直接Rubyのプラグラムを実行できます。終了するときにはexitと打ち込みます。

irb(main):001:0> exit

四則演算

基本の基本となる、四則演算をirbを用いて確認してみましょう。

  • 足し算
  • 引き算
  • 掛け算
  • 割り算
  • 割り算のあまり
  • 累乗

式を書いたらEnterを押すだけで結果を見ることができます。

足し算
irb(main):001:0> 11+4
=> 15

引き算
irb(main):002:0> 11-4
=> 7

掛け算
irb(main):003:0> 11*4
=> 44

割り算(商)
irb(main):004:0> 11/4
=> 2

割り算のあまり
irb(main):005:0> 11%4
=> 3

累乗
irb(main):006:0> 11**4
=> 14641

もちろん組み合わせることも可能です。

irb(main):007:0> 11+2*3
=> 17

比較演算子

値同士を比較する方法です。例えば、「10は5より大きい」は"10>5"とかけますが、この時の">"が比較演算子にあたります。結果は比較の式が正しければtrue、間違っていればfalseが得られます。

等値
#2×5は10と等しいか?
irb(main):001:0> 2*5==10
=> true
#2×5は12と等しいか?
irb(main):002:0> 2*5==12
=> false

比較
#2×5は10より小さいか?
irb(main):003:0> 2*5<10
=> false
#2×5は10以下か?
irb(main):004:0> 2*5<=10
=> true

#2×5は10より大きいか?
irb(main):005:0> 2*5>10
=> false
#2×5は10以上か?
irb(main):006:0> 2*5>=10
=> true

次回は、条件分岐などの制御構文(if・while)についてまとめたいと思います。

【WordPress】WordPressレッスンブックを読んでみた

WordPressを勉強するにあたり、上記の本を購入してみました。今回は、実際に1冊実践してみた感想を書きたいと思います。

この本で学べること

  1. WordPressのインストールなどの方法
  2. 基本的なブログサイトの作成方法
  3. ビジネスサイト風のサイト構造の作成方法
  4. 一からテーマを作成する方法

自分は、WordPressの構文の書き方を知りたくて本を探していたので、4番の一からテーマを作成できる所に魅力を感じました。

本通りに進めた時の完成HP

以下が実装した機能のざっくり一覧です

  • 固定ページ作成
  • カスタムヘッダー
  • メニュー
  • トップページからのリンク
  • カスタムフッター
  • 記事一覧
  • サムネイル設定
  • ペジネーション
  • サイドメニュー
  • コメント機能
  • 問い合わせ機能
  • レスポンシブ対応

f:id:AtlasLife:20190918152904p:plain
トップページ

f:id:AtlasLife:20190918153005p:plain
ブログ記事一覧ページ

f:id:AtlasLife:20190918153109p:plain
ブログ記事個別ページ

f:id:AtlasLife:20190918153252p:plain
サイト説明ページ

f:id:AtlasLife:20190918153325p:plain
問い合わせページ

総評

すでにあるテーマを利用するのではなく、一からテーマを作成していくので、どういった仕組みでWordPressではビューを表示しているのか(PHPがどのように使われているのか)の大枠が理解できるかと思います。

一から作成するので、自由度が高く、思い通りのHPにする基礎力がつくと思いました。

ただし、HTMLやCSSを割と書いていくので、これらの基礎がないとテンヤワンヤになるかもしれません。

また、自分はRubyRails)という他のプログラミング言語の知識があったので、「PHPってこんな感じなんだな〜」「WordPressのファイル構造はこんな感じなのか〜」というのが直感的にわかりやすかった(気づきやすかった)のですが、何も知らないと「何をしているのか全くわからない」となってしまうかもしれません。

ですので、WordPressの基礎はある程度わかって、次のステップに進みたい(自分でテーマをカスタマイズしたい)人にはおすすめかと思います。

【Wordpress】Wordpressをローカル環境で動かす~MAMP~

Wordpressを試してみたいと思っている時から、いきなり「サーバー契約して」「ドメイン取って」・・とお金がかかるのは嫌ですよね?

そんな時には、ローカル環境でWordpressを触ってみればイイんです!

自分も「実際に使うかわからないけど、どんなものか知りたい・試したい」と思い、ローカル環境を構築して作業しました。

環境構築といっても10分もあれば終わるくらい簡単なものです!

MAMP

MAMPとは「Macintosh」「Apache」「MySQL」「PHP」の頭文字を取ったもので、MySQLPHPの開発環境を簡単に構築できるパッケージソフトです。

Macしか使えないわけではなく、Windowsでも使用可能です。

無料と有料がありますが、無料のものだけでWordpressをローカルで動かせる環境を構築できます。

www.mamp.info

MAMPのダウンロード

以下のページから、あなたにあったOSを選んでダウンロードしてください。

www.mamp.info

ダウンロードしたインストーラの指示に従えばインストール完了です。

MAMP設定(Macユーザーなので環境によっては表示が違うかもしれません)

インストールしたMAMPを立ち上げてください。そうすると以下のようなインターフェースが出てくると思います。 f:id:AtlasLife:20190911151452p:plain

MAMPのインターフェースがアクティブな状態で、PCの上部にある"MAMP"→"Preference"をクリックしてください。

f:id:AtlasLife:20190911151814p:plain
設定メニューを開く

クリックして出てきた設定メニューから、まずは"Ports"を選んでください。すると以下の画面になりますので、画像通り値を記入してください。

f:id:AtlasLife:20190911152016p:plain
ポートの設定

続いてPHPのバージョンを指定します。バージョンは5.6に近いものを選んでください

f:id:AtlasLife:20190911152142p:plain
PHP設定

これでMAMPの設定は完了です。設定メニューを閉じ、Start Serversをクリックしてください。すると、右上の"Apach Server"と"MySQL Server"の右側の丸が緑色になるはずです。緑になったら正常にサーバーが起動しています。

f:id:AtlasLife:20190911152421p:plain
サーバーが正常に起動しているかチェック

PHPが正常に動いているかどうかも確認します。まず、以下の画像の"Show in Finder"をクリックします。するとMAMP>htdocsというフォルダに行き着くかと思います。のちにこのフォルダにWordpressをインストールしますので、場所を覚えておいてください。

f:id:AtlasLife:20190911153150p:plain
htdocsへとぶ
続いて、適当なテキストエディタを開き、以下のコードをコピペした"test.php"というファイルを作ってください。そのファイルをhtdocsのフォルダに格納します。

<?php
echo 'test';

格納したら、ブラウザのアドレスバーに
localhost:8888/test.php
と入力してください。PHPが正常に動作していれば、以下のように表示されるはずです。 f:id:AtlasLife:20190911153739p:plain

WordpressMAMPに導入する(以下全てMAMPでサーバーを起動した状態で行います)

まずは、WordpressのサイトからWordpressをダウンロードします。zip形式でダウンロードされるので解凍してください。

ja.wordpress.org

解凍したファイルを全て、MAMP>htdocsフォルダにいれます(先ほど作成した"test.php"は削除してください) f:id:AtlasLife:20190911154059p:plain

データベースの作成

ブログなど投稿した内容などを保存するためのデータベースを作成します。まずは以下のアドレスをブラウザのアドレスバーに入力してください。 localhost:8888/phpmyadmin
以下のような画面になれば成功です。 f:id:AtlasLife:20190911154348p:plain

サイドバーの新規作成をクリックし、以下の画像のようにデータベース名を「wpdb」として作成ボタンを押してください。 f:id:AtlasLife:20190911154629p:plain

サイドバーに「wpdb」が作成されていれば成功です。 f:id:AtlasLife:20190911154705p:plain

Wordpress起動

以下のアドレスをブラウザのアドレスバーに入力してください。
localhost:8888
表示された画面で「さあ、始めましょう!」をクリックしてください。 f:id:AtlasLife:20190911155648p:plain

クリックして表示された画面で、以下の画像通り入力し、送信ボタンを押してください。 f:id:AtlasLife:20190911155805p:plain

すると以下の画面になりますので、インストールを実行してください。 f:id:AtlasLife:20190911155926p:plain

すると以下の画面になりますので、サイトのタイトル、ユーザー名、パスワード、メールアドレスを入力してください。ユーザー名とパスワードはWordpressダッシュボードへのログインで必要になります。入力し終えたら、「Wordpressをインストール」をクリックしてください。 f:id:AtlasLife:20190911160158p:plain

インストールが完了すると以下のような画面に移行します。ここで、ダッシュボードにログインします。ここで、先ほど登録したユーザー名とパスワードが必要になります。 f:id:AtlasLife:20190911160821p:plain

ログインできれば完了です!
お疲れ様でした!!

まとめ

一回構築してしまえば、MAMPでサーバーを起動させるだけでローカル環境でWordpressを触ることができます。

もう公開しているサイトの改修などでも、ローカルでちゃんと動くか確認してからデータを移行するなどした方が安全かもしれませんね!

おまけ

ダッシュボードのページに行くには、以下のアドレスを使用します。 localhost:8888/wp-admin/

【Wordpress】Wordpressを初めて使ってみた~Wordpressって何?・何ができそう?~

イベントに参加したりして個人と直接繋がると、ホームページの作成や修正はほとんどWordpressに関するものな気がしています。

そこで、Wordpressを触ってみようと思い立ち、使ってみた感想を記録したいと思います。

まだほんの初歩しかわかっていないですが、Wordpressって何ができるの?」と漠然と思っている方の参考になればと思います!

Wordpressとは

WordPress は美しいサイトやブログ、アプリを作るためのオープンソースソフトウェアです。

ja.wordpress.org

手軽に簡単に、ブログからビジネスサイト、ECサイトなどを構築できるソフトウェアです。基本無料で開始可能(サーバー代などはかかります)。使われている言語はPHPです。

インストールすれば、下記の画像のようなインターフェースを使って、記事の投稿や見た目の編集などが可能になります。 f:id:AtlasLife:20190911143211p:plain

テーマという外観の大枠を決めてくれるものがあり(無料と有料がある)、それを使って中身をいじれば、カッコイイサイトもすぐにできます。

f:id:AtlasLife:20190911143504p:plain
テーマを選んで有効化するだけで、いろんな見た目のサイトに切り替えられる

また、プラグインという機能を追加するプログラムを使えば、問い合わせフォームなど本来ならバックエンド側で色々書く必要のあるものも、プラグインインストール→有効化→コピペですぐに実装可能です。

以下の画像は、"Contact From 7"というプラグインを入れた場合の問い合わせページの例です。プラグインを追加すると、サイドメニューに「お問い合わせ」が表示されるようになり、そこでフォームを編集できます(メールの送信先などもGUI上で簡単に設定できます)。

f:id:AtlasLife:20190911143809p:plain
Contact Form 7というプラグイン追加で表示されるカスタムメニュー

f:id:AtlasLife:20190911144143p:plain
1枚目の画像内にある、ショートコードをコピペする

f:id:AtlasLife:20190911144250p:plain
上記のショートコードが実際にはこの画像のようなフォームとして表示される

使ってみた感想

Webの情報や本を買って触ってみた感想ですが。

⭕️

  • 簡単なブログ作成はとても簡単
  • プラグインを使いこなせば、ECサイトなど発展的なことも可能
  • ブログだけじゃなくて、固定ページの多いサイトでも使える
  • GUI上で見ながら編集できてラク

  • Wrodpressのルール(仕様)が独特で意外と簡単じゃない
  • HTMLやCSS、さらにバックエンドの言語を知っている人にとってみると、自分の好きなようにカスタマイズがしにくい

まとめると、
Wordpressの仕様になれてしまえば、簡単。逆にいうと、仕様に慣れるには時間がかかりますし、もともとあるテーマからのカスタマイズだったりとなると、一ついじったら全体崩れるなど、自由度は低くなる気がします。

自分で一からテーマを作成することもできるので、そうすればカスタマイズはしやすいかもしれません。

最後に

脅しではないですが、Wordpressは簡単!っていうほど簡単ではないと感じました。やっぱり何事も始める一歩目は知らないことだらけで難しいと感じるものですね。

でも始めないと成長しないので、気になっている方はぜひ挑戦して実際に自分の感覚で味わってみてください。

自分が参考にした本の感想と、ローカル環境での開発の仕方はまた別記事にまとめたいと思います。

読んでいただきありがとうございました!!

atora1992.hatenablog.com

atora1992.hatenablog.com

MacへのRubyのインストール・管理~Homebrew・rbenv~

Ruby on Railsをはじめたい!」と思っても、そもそもRubyの環境がないと始められません。

Rubyには様々なバージョンがあり、現在も日々更新されています。もともとMacにはRubyが標準でインストールされていますが、バージョンの管理などがしにくいです。

そこで、Rubyを管理しやすいようにインストールする方法をお教えします。

Macへのインストール向けに書きますのでご承知おき下さい。

目次

  1. Homebrewのインストール
  2. rbenvのインストール
  3. rubyのインストール
  4. おまけ(Hello World!をターミナル上に表示してみる)

Homebrew

HomebrewはmacOS用のソフトウェア管理ソフトウェアです。Homebrewを使ってrbenv(後述:Rubyを管理する)というソフトウェアをインストールしていきます。

Homebrewのサイト brew.sh

インストール

ターミナルで以下のコマンドを実行します。($はターミナルのコマンド開始位置を表しています。実際にターミナル上で打ち込む必要はありませんのでご注意下さい

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

確認

ターミナルで以下のコマンドを実行して、バージョンが表示されれば正常にインストールされています。

$ brew -v

アップデート

以下のコマンドでアップデートが可能です。

$ brew update

上記以外にもコマンドはありますので、サイトを参照してみてください。

rbenv

rbenvとはRubyのバージョンを管理・変更できるソフトウェアです。rbenvを入れることで自由にRubyのバージョンを変更できるようになります。

rbenvサイト

github.com

インストール

以下のコマンドでインストールできます(Homebrewをインストールしたので、brewコマンドが使えます)。Rubyの様々なバージョンをインストールするためのプラグインruby-buildもこのコマンドで同時にインストールされます。

$ brew install rbenv

セットアップ

パスを通すために以下のコマンドを実行します。

※「パスを通す」:アプリケーションを実行するには、そのアプリケーションの実行ファイルのあるディレクトリまで移動するか、そのディレクトリの場所をコンピュータに教える必要があります。そうではなくて、どこのディレクトリからでもアプリケーションの実行ファイルを呼び出せるようにすることを「パスを通す」と言います。

$ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile

上記のコマンドで書き込んでいるファイル.bash_profileはシェルの環境設定ファイルです。Linux系の知識が必要なので、以下の記事を参考にしてみてください。

atora1992.hatenablog.com

atora1992.hatenablog.com

続けて以下のコマンドを実行し、上記のコマンドで書き込んだ設定を有効にします(.bash_profileを読み直す)。

$ source ~/.bash_profile

確認

rbenv-doctorを用いてセットアップが適切かどうか確認できます。

$ curl -fsSL https://github.com/rbenv/rbenv-installer/raw/master/bin/rbenv-doctor | bash

次のような表示がされればOKです。

Checking for `rbenv' in PATH: /usr/local/bin/rbenv
Checking for rbenv shims in PATH: OK
Checking `rbenv install' support: /usr/local/bin/rbenv-install (ruby-build 20190423)
Counting installed Ruby versions: 1 versions
Checking RubyGems settings: OK
Auditing installed plugins: OK

ruby

インストール

以下のコマンドでインストール可能なバージョン一覧が表示されます。表示されたバージョン名を指定すればインストール完了です。

$ rbenv install -l #バージョン一覧

$ rbenv install バージョン名 #バージョン名で指定したバージョンのrubyをインストール
(具体例)
$ rbenv install 2.6.3

最後に、インストールしたrubyを使用できるようにするために、以下のコマンドを実行します。

$ rbenv rehash

確認

rbenvでインストールしたrubyのバージョン一覧を確認できます。

$ rbenv versions

バージョンの指定

以下のコマンドを使用することで、デフォルトで使用するRubyのバージョンを指定できます(インストールされているバージョンに限る)。

globallocalにすれば、フォルダごとにバージョンを指定できます。

$ rbenv global バージョン名 #バージョンをデフォルトに設定する

$ ruby -v   #設定したバージョンが確認できる

おまけ

適当なテキストエディタを開いて、hello.rbという名前のファイルを以下のコマンドをコピペして作成してください。rbという拡張子はRubyファイルであることを表しています。

保存先は一旦デスクトップがわかりやすいと思います。

puts "Hello World!"

ターミナルを開き直し、以下のコマンドを実行します。このコマンドで、デスクトップに作業場所を移動することができます。pwdコマンドで"/Users/ユーザー名/Desktop"となっていれば移動できています。

$ cd Desktop

$ pwd #現在いるディレクトリの確認

移動できたら以下のコマンドを実行すると、ターミナルに"Hello World!"と表示されるはずです。rubyコマンドでRubyファイルをプログラムとして実行できます。

$ ruby hello.rb

まとめ

色々インストールしたり設定したり面倒だったかと思いますが、一旦やってしまえば、あとはRubyのバージョン管理が楽になります。

エラーが起こった場合にも、公式HPのリンクも貼ってありますので、そちらを参考にして頑張ってみてください!

【Rails】enumでのセレクトボックス 作成~都道府県など~

できるようになること

都道府県などのセレクトボックスを、HTMLにベタ打ちしなくても作成できるようになります。

Image from Gyazo

enumとは

enumは文字列とint型、boolean型とを対応させることができる機能です。

つまり、enumを利用すると、データベースに保存された数字(int型を想定)と対応した文字列を返り値として出力できるようになります。

enumはモデルに定義して使います。モデルに数字と文字列との対応を定義することで、ビュー側にセレクトボックス の中身を全て記述しなくとも、enumを介して文字列を呼び出すことで、47都道府県のセレクトボックスでも1行のコードで記述することが可能になります。

具体例(都道府県セレクトボックス)

マイグレーションファイル

class CreateProducts < ActiveRecord::Migration[5.2]
  def change
    create_table :products do |t|
      t.integer :delivery_area, null: false, default: 0
    end
end

デフォルト値は0として定義する想定です。integer型でenum用のカラムを定義していきます。

モデル

class Product < ApplicationRecord
   enum delivery_area:{
     "---":0,
     北海道:1,青森県:2,岩手県:3,宮城県:4,秋田県:5,山形県:6,福島県:7,
     茨城県:8,栃木県:9,群馬県:10,埼玉県:11,千葉県:12,東京都:13,神奈川県:14,
     新潟県:15,富山県:16,石川県:17,福井県:18,山梨県:19,長野県:20,
     岐阜県:21,静岡県:22,愛知県:23,三重県:24,
     滋賀県:25,京都府:26,大阪府:27,兵庫県:28,奈良県:29,和歌山県:30,
     鳥取県:31,島根県:32,岡山県:33,広島県:34,山口県:35,
     徳島県:36,香川県:37,愛媛県:38,高知県:39,
     福岡県:40,佐賀県:41,長崎県:42,熊本県:43,大分県:44,宮崎県:45,鹿児島県:46, 
     沖縄県:47
   }
end

delivery_areaという名称でenumをモデルに定義します。ハッシュのキーがセレクトボックスに表示したい値。ハッシュのバリューがデータベースに保存される値です。

ビューファイル

= f.select :delivery_area, Product.delivery_areas.keys, {}, {class: 'hoge'}

第二引数でenumで定義した文字列を取り出しています。もう少し詳しく分解すると以下のようになります。

Product.delivery_areas
=>{"---"=>0, "北海道"=>1, "青森県"=>2, ...., "沖縄県"=>47}

ここまでで、モデルで定義したハッシュを取り出しています。名称が複数形になっていることに注意してください。

Product.delivery_areas.keys
=>["---", "北海道", ... "沖縄県"]

さらに.keysを加えることで、ハッシュのキーだけの配列を取り出せます。この配列を元にセレクトボックスを作成しています。

実際にhtmlに変換されたものが以下となっております。配列で指定した都道府県が

<select class="hoge" name="product[delivery_area]" id="product_delivery_area">
   <option selected="selected" value="---">---</option>
   <option value="北海道">北海道</option>
   <option value="青森県">青森県</option>
   <option value="岩手県">岩手県</option>
   <option value="宮城県">宮城県</option>
   <option value="秋田県">秋田県</option>
   <option value="山形県">山形県</option>
   <option value="福島県">福島県</option>
   <option value="茨城県">茨城県</option>
   <option value="栃木県">栃木県</option>
   <option value="群馬県">群馬県</option>
   <option value="埼玉県">埼玉県</option>
   <option value="千葉県">千葉県</option>
   <option value="東京都">東京都</option>
   <option value="神奈川県">神奈川県</option>
   <option value="新潟県">新潟県</option>
   <option value="富山県">富山県</option>
   <option value="石川県">石川県</option>
   <option value="福井県">福井県</option>
   <option value="山梨県">山梨県</option>
   <option value="長野県">長野県</option>
   <option value="岐阜県">岐阜県</option>
   <option value="静岡県">静岡県</option>
   <option value="愛知県">愛知県</option>
   <option value="三重県">三重県</option>
   <option value="滋賀県">滋賀県</option>
   <option value="京都府">京都府</option>
   <option value="大阪府">大阪府</option>
   <option value="兵庫県">兵庫県</option>
   <option value="奈良県">奈良県</option>
   <option value="和歌山県">和歌山県</option>
   <option value="鳥取県">鳥取県</option>
   <option value="島根県">島根県</option>
   <option value="岡山県">岡山県</option>
   <option value="広島県">広島県</option>
   <option value="山口県">山口県</option>
   <option value="徳島県">徳島県</option>
   <option value="香川県">香川県</option>
   <option value="愛媛県">愛媛県</option>
   <option value="高知県">高知県</option>
   <option value="福岡県">福岡県</option>
   <option value="佐賀県">佐賀県</option>
   <option value="長崎県">長崎県</option>
   <option value="熊本県">熊本県</option>
   <option value="大分県">大分県</option>
   <option value="宮崎県">宮崎県</option>
   <option value="鹿児島県">鹿児島県</option>
   <option value="沖縄県">沖縄県</option>
</select>

取得値

railsでカラムの値を取得した際の返り値は、数値ではなくて文字列となります。

product = Product.new
#Productインスタンス作成

product.delivery_area = 47
#delivery_areaの値を47にする

product.delivery_area = "沖縄県"
#delivery_areaの返り値を取得

注意点

同じモデル内で複数のenumを定義するとき、複数のenumで同じキー名を指定する場合注意が必要です。上記の書き方ではエラーが出てしまいます。

その時は、enumの定義の後、_suffixまたは_prefixというオプションを指定します。このオプションを指定することで、enum同士の区別がつくこととなり、エラーが無くなります。

enum hoge: {
   default:0, hoge:1
},_suffix: true

enum fuga: {
   default:0, fuga:1
},_suffix: true

詳細は以下の公式ページを参照してください。

api.rubyonrails.org

まとめ

enumを用いることで、セレクトボックスがスッキリ記述できます。

ぜひ活用していきましょう。