エンジニア目指すほしこのブログ

エンジニアめざすほしこが学んだことや考えていることをアウトプットするブログです。現在27歳、小売業従事者。『アマゾンエフェクト!: 「究極の顧客戦略」に日本企業はどう立ち向かうか』著者: 鈴木 康弘 を読んでプログラミングに興味を持ちました。

enumでフォームのプルダウンを作る!

enumを使ってプルダウンメニューを作る方法です。

今日理解できたと思うので、忘れないようにメモ!

 

f:id:hossy03:20200302201651p:plain

↑ゴールはこれです。こんな感じのプルダウンメニューを作ります。

手順は以下の通りです。

1. モデルにenumを使って選択肢を記述(選択肢は英語で記述)

2. 選択肢を日本語化する場合はgem 'enum_help'を導入→ja.ymlに日本語を書く

3. f.selectでプルダウンさせる

 

1. モデルにenumを使って選択肢を記述(選択肢は英語で記述)

モデルに、

enum [:選択肢1, :選択肢2, :選択肢3] と書く

もしくは

enum: {選択肢1: 0, 選択肢2: 1, 選択肢3: 2} と書く

前者の書き方だと、選択肢1→0、選択肢2→1、、、と書いた順で番号が与えられる。

 

という訳で、私は前者の方法でmodel/product.rbに以下のように記述しました。

f:id:hossy03:20200302203525p:plain

(適切な英語がわからなかった・・・後でも変えられるから気にせず進みます)

 

2. 選択肢を日本語化する場合はgem 'enum_help'を導入→ja.ymlに日本語を書く

便利なgem 'enum_help'というのがあるらしい!

Gemfileにgem 'enum_help'って書いてbundle installすればOK

そしたらconfig/locales/ja.ymlをこんな感じで編集します。

enum:

    モデル名:

         カラム名:

               選択肢:

f:id:hossy03:20200302203849p:plain

そしたら●●_i18nで呼び出せるらしい。

上記のコードの場合、product.product_condition_i18n → "新品、未使用"(product_condition: 0の場合)となるようです。

これで日本語化できたので、あとはビューでselectでプルダウンします!

 

3. f.selectでプルダウンさせる

コードは以下の通りになります。

= f.select :カラム名, モデル名.カラム名s_i18n.keys.map{|k|[I18n.t("enum.モデル名.カラム名.#{k}"), k]}

カラム名s(ここではproduct_conditions)というのはproduct_conditionsという配列で、keysメソッドを使って.keysとすることでキーだけ("brand_new"などだけ)を配列にして取り出しているということみたいです。さらにmapメソッドにより一つ一つの値が処理されています。

mapメソッド:https://uxmilk.jp/21695

 最終的なコードは以下のようになりました。

= f.select :product_condition, Product.product_conditions_i18n.keys.map{|k| [I18n.t("enum.product.product_condition.#{k}"), k]}, {prompt: true}, {class: "〜"}

prompt: trueとすることで"選択してください"と表示ができます。

またクラス名をつけるならpromptの後に{class: "〜"}って書いたらOKです。


 

 

入力したフォームの中身を空にする方法(jQuery、ajax)

グループチャットのようなアプリケーションにてajaxでコメントを投稿できるように実装しました。フォームにコメントを入力して送信した際に、デフォルトでは入力した内容がフォームの中に残ったままです。このフォームを空にするところが難しかったので今後のためにまとめておきます。

 

フォームを空にする方法は2種類ある。

①valメソッドを使う

②resetメソッドを使う

 

以下それぞれの説明。

①valメソッドを使う

 valメソッドはvalueの値を取得したり、変更したりできるメソッド。

 値を変更する場合は、$('対象要素').val('変更後の値')と記述すればOKなので、

 .val('')とすれば値は空になる。

 → $('フォームの要素'),val('') これでフォームを空にできる

 

②resetメソッドを使う

 resetメソッドは初期値に戻すメソッドなので、

 $('対象要素').reset( )とすればフォームは空になる。

 ※注意すべきポイント1

  $('対象要素')[0].reset( )のように[0]をつける

 ※注意すべきポイント2

  ここでの対象要素はフォーム全体になる

  (valはinputの要素でOK、resetはフォーム全体の要素にする)

 

 

val('')でできたのにresetに書き換えたら動かなくなったのはメソッドを使う要素が間違っていたからでした。

 

 

 

 

インデックスについて(rails、MySQL)

インデックスとは検索を高速化できるもの。カラムに貼ることができ、インデックスを貼ったカラムでの検索が高速になる。

【インデックスの貼り方

ターミナルにて、rails g migration AddIndexToテーブル名

これでインデックスを追加するためのマイグレーションファイルができる。

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

 

class AddIndexToテーブル名 < ActiveRecord::Migration

  def change

    add_index :テーブル名, :カラム名

  end

end

 

上記のように記述して、ターミナルでマイグレーションを実行する。

ちなみに複数のカラムにインデックスを貼る場合は、

add_index :テーブル名, [:カラム名, カラム名:]

このように記述。ただし、この方法でインデックスを貼った場合、カラム単体での検索では速度は向上しないので注意!

 

【インデックスのオプション】

以下のようなオプションもある。

length: 

インデックスの長さを指定できる(先頭からその文字数だけがインデックスの対象となる)

unique:

一意性制約ができる。ちなみに、一意性制約はインデックスが必須となる(全てのデータを検索しないと、過去のデータと重複しているかわからないため)

add_index :テーブル名, :カラム名, unique: true

このように記述すれば一意性制約もかけられる

 

【インデックスのデメリット】

①データを保存、更新する速度が遅くなる

②データベースの容量を使う

以上のようなデメリットもあるので、安易にインデックスを貼ることはしない。DB設計の際に、どのカラムにインデックスを貼る必要があるかを考えなければならない。

devise使い方まとめ

まず、deviseとは、、、

railsで作ったwebアプリケーションに簡単に認証機能(=ログイン、ログアウト機能)を実装できるgemのこと。

これは今後も使いそうなので、使い方をまとめてみます。

 

① Gemfileに gem 'devise'と追加 → bundle install

② ターミナルにて、 rails g devise:install 

  これでインストールできる!

  そしたら以下のような文が現れる 

Some setup you must do manually if you haven't yet:

  1. Ensure you have defined default url options in your environments files. Here
     is an example of default_url_options appropriate for a development environment
     in config/environments/development.rb:

       config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }

     In production, :host should be set to the actual host of your application.

  2. Ensure you have defined root_url to *something* in your config/routes.rb.
     For example:

       root to: "home#index"

  3. Ensure you have flash messages in app/views/layouts/application.html.erb.
     For example:

       <p class="notice"><%= notice %></p>
       <p class="alert"><%= alert %></p>

  4. If you are deploying on Heroku with Rails 3.2 only, you may want to set:

       config.assets.initialize_on_precompile = false

     On config/application.rb forcing your application to not access the DB
     or load models when precompiling your assets.

  5. You can copy Devise views (for customization) to your app by running:

       rails g devise:views

===============================================================================

 

順番に、、、

1はデフォルトのURLを設定してくださいということ。ひとまずlocalhost:3000にしといてOK。

2はrootを設定してくださいということなので、routes.rbにroot to: 〜〜を書く。

3はflashメッセージ(ログインしましたなど)を表示するためのタグをapplication.html.erbに書きなさいということ。

4はビューをカスタマイズするにはrails g devise:viewsをターミナルで実行しなさいということ→実行したら、app/view/のなかにdeviseフォルダーができるので、ここを編集してビューを作ったらOK

 

③ 以上ができたら、ユーザー管理にはテーブルが必要なのでモデルを作る

  ターミナルでrails g devise モデル名 を実行。

  これができたら、マイグレーションファイルに必要なカラム(およびその型やオプション)を書いてrails db:migrateを実行!

 

わからなくなったらGitHubのREADMEを頑張って読もう。

https://github.com/plataformatec/devise

応用カリキュラムに入って1週間たちました。

11/7〜よりTECH::EXPERTの応用カリキュラムに入りました。

この1週間で学んだことまとめ

【検索力】

検索力=エンジニアにとって重要なスキルの一つ。

①目的の情報を得るための検索ワード選び 

②検索結果から情報を選び出すスキル

① →googleの検索ツールから期間指定できる(古すぎる情報排除!)

  →マイナス検索 マイナスつけるとそのワードを除外して検索できる

  →フレーズ検索 完全一致で検索したいワードを””で囲む

② →信頼できるサイトを選ぶ(これはエンジニアに限らずそうよね)

  →一次ソースをみる

 

正規表現

subとmatch

subは文字列の指定した部分を別の文字列に置き換えするメソッド。

電話番号(例えば123-456-7890)の-(ハイフン)を抜きたい時とかは、.sub(/-/,'')こう書く。そしたら - が置き換わる。ただこれだと1個目の-しか置き替わらず、123456-7890ってなるからそういう時は.gsub使う。そしたら全部置き換わって1234567890になる。

matchは引数に指定した文字列がレシーバの文字列に含まれているか否かチェックするメソッド。[a-z]って書くとアルファベットのa〜zのいずれかにマッチという意味になるらしい。数字は\dって書く。

この正規表現のsubとmatchによって、パスワードが条件にあっているとかがわかるようになってるんやな〜って思いました。

 

JavaScript / jQuery

これはWEBサイト上の動作(クリックしたら色が変わるとか)を作ることができる。

イベント(クリックするなど)に応じてHTML書き換えられる(クラスを追加したり削除したり)。

これはとても面白かったのでもっとできるようになりたいです。

 

【Git / GitHub

バージョンごとに保存できて便利。ブランチを作成することで複数人での開発がスムーズにできるようになるツール。さらにコードレビューしてもらったりできる。(コードにコメントがつけられる)

流れとしてはコード書く→コミットする(この時に何したかコメント書く)→プッシュする(リモートリポジトリへ)→プルする(ローカルリポジトリへ)

 

めっちゃ浅い(笑)それぞれの理解度は全然ですが、これから少しずつマスターしていきます!

 

ちなみに学習時間を確保したい一心で仕事してたら、残業しなくなりました。これまでも残業しようと思ってしてたわけでもなく、むしろ早く帰りたいと思っていたはずなのに仕事が終わらなかったです。なのに今は多少強引に終わらせて帰っています。今週に入ってまだ残業してません。すごい。毎日残業せずに帰るなんて無理だよね、ってなんで思っていたんだろう????

エンジニアめざすほしこです。

私は小売業従事者です。

ある日、『アマゾンエフェクト!:「究極の顧客戦略」に日本企業はどう立ち向かうか』(著者:鈴木康弘)を読みました。

本の内容をざっくりまとめると以下の通りでした。

・アマゾンエフェクトとは、アマゾン・ドット・コムの快進撃の陰で、苦境に追い込まれるアメリカ企業が増えている現象のこと。アマゾンエフェクトは日本にも押し寄せている。

リアル店舗が売り場面積や陳列棚など多くの制約があるのに対し、ネットの世界には制約が少ない。(例えば、リアル店舗だと売り場面積が限られているため、在庫(すなわち品揃え)に限界がある。アマゾンの場合は物流センターがあり、リアル店舗とは比べ物にならない膨大な在庫を抱えることができ、Eコマースのサイト上では幅広い品揃えができる。)

セブン&アイグループやイオングループなどの日本の流通企業も様々なデジタルシフトを進めている。デジタルシフトが企業価値を高める。

・インターネットの急速な普及により、流れる情報量はかなり増大→情報過剰時代。これに伴って、消費者の行動もかなり変化しているため、小売業も変化(ネットとリアルの融合によるカスタマーファースト思考)が必要。

・社会のデジタルシフトが進みアマゾンエフェクトが押し寄せるが、日本には課題がある。それはIT人材の育成。アメリカの場合、企業が自ら優れたIT人材を多く抱えているが、日本企業はシステム開発を外部のITベンダーに丸投げするケースが多い。

・デジタルシフトの時代は、アマゾンのように自前でシステム開発ができることが必要であり、いかに社内にIT人材を確保し育成できるかが競争力を左右する。

 

これを読んで、、、、

・今の小売の仕事は楽しいけど、このまま、のほほんと小売業界にいて大丈夫なのかしら???

・ネットとリアルの融合に関わっていけたら、仕事がもっと楽しくなりそう!

・日本はIT人材が不足しているなら、今からでもチャンスなのでは???

・小売業に従事しながら、システム開発のこともわかるIT人材になってみたい!!

と思ったので、とりあえずプログラミングの勉強を始めました。独学は自信がなかったので、TECH::EXPERTというプログラミングスクールに通っています。

そして、アウトプットが大事と聞いたので、アウトプットのツールとしてこのブログを始めました。これからは学んだ内容や考えたことをまとめていこうと思っています。