2021-07-05

【Rails】Ruby on Railsのディレクトリ階層

【例】pictweet
- yarn.lock

2021-06-26

【rails】link_toメソッドについて

【使用例】

<%= link_to “Yahooへ移動する”, “http://www.yahoo.co.jp/” %>

【link_toでパスを用いる例】

<%= link_to “トップページ”, root_path %>

【例】リンク先をパスで指定する場合

<%= link_to 'リンクに表示する文字', 'パス', method: :HTTPメソッド %>

2021-06-25

【devise】devise_parameter_sanitizerメソッド

・deviseにおけるparamsのようなメソッド。deviseのUserモデルに関わる「ログイン」「新規登録」などのリクエストからパラメーターを取得できる。

・このメソッドとpermitメソッドを組み合わせることにより、deviseに定義されているストロングパラメーターに対し、自分で新しく追加したカラムも指定して含めることができる。

・devise_parameter_sanitizerメソッドは、これまでのストロングパラメーターと同じく、新たに定義するプライベートメソッドの中で使用する。

deviseの提供元では、新たに定義するメソッド名をconfigure_permitted_parametersと紹介していることから、慣習的にこのメソッド名で定義することが多い。

◯定義方法

private

def configure_permitted_parameters # メソッド名は慣習

# deviseのUserモデルにパラメーターを許可

devise_parameter_sanitizer.permit(:deviseの処理名, keys: [:許可するキー])

end

・また、devise_parameter_sanitizerに使用するpermitメソッドの引数がこれまでと異なる点に注目。これは、deviseに定義されているpermitメソッドであり、Railsではじめから使用できたpermitメソッドとは異なるものであるためである。

◯permitメソッドとの違い

# paramsのpermitメソッド

params.require(:モデル名).permit(:許可するキー)

# devise_parameter_sanitizerのpermitメソッド

devise_parameter_sanitizer.permit(:deviseの処理名, keys: [:許可するキー])

◯使用例

class ApplicationController < ActionController::Base

before_action :authenticate_user!

before_action :configure_permitted_parameters, if: :devise_controller?

private

def configure_permitted_parameters

devise_parameter_sanitizer.permit(:sign_up, keys: [:name])

end

↑

このbefore_actionのifというオプションを使用している点に注目。

これは、値にメソッド名を指定することで、その戻り値がtrueであったときにのみ処理を実行するよう設定するもの。

今回は:devise_controller?というdeviseのヘルパーメソッド名を指定して、もしdeviseに関するコントローラーの処理であれば、そのときだけconfigure_permitted_parametersメソッドを実行するように設定している。他のtweetsコントローラーなどでは処理は読み込まれても、実行まではされない。

2021-06-25

【Rails】before_action

・before_actionとは、コントローラの全てのアクションが実行される前に何らかの処理を行う時に使用するもの。

◯定義方法

class UsersController < ApplicationController

before_action :メソッド名

end

コントローラーのファイルにおいて、上記記述を行う。

2021-06-21

【Ruby】特定条件のみに呼応するプログラムの作成

今日の曜日を表示するコードをDateクラスを使用して記述する。

ただし、金曜日だった場合だけ以下のように表示の内容を変えたい！

（出力内容）
「今日は月曜日」
「今日は金曜日だ！！！」

【模範解答】

require "date"

day = Date.today.wday

days = ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"]

if day == 5

puts "今日は#{days[day]}だ！！！"

else

puts "今日は#{days[day]}"

end

【自分への解説】

◯Dateクラス

DateクラスとはRubyの標準ライブラリの機能。Dateクラスを使うには以下一文を記述する。

require "date"

次に、Dateクラスを用いて「今日の曜日」を取得する場合は以下のように記述する。

Date.today.wday

wdayは曜日を0(日曜日)から6(土曜日)の整数で取得することができる、Dateクラスに用意されているメソッドのこと。

require "date"

day = Date.today.wday

puts day

例えば上記コードを入力すると、曜日に合わせた数字がターミナル上で出力される。

◯コードを細かくみていく

require "date"

↑

まずはDateクラスの使用を宣言

day = Date.today.wday

↑

ここで、wdayメソッドを用いて曜日を0（日曜日）から6（土曜日）の整数にしたときの「今日」の値を取得します。

days = ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"]

　　　　　 0. 1. 2 3. 4. 5. 6

↑

ここで、配列daysを定義し、先程の、日曜日（0番）～土曜日（6番目）まで文字列を格納する。

if day == 5

puts "今日は#{days[day]}だ！！！"

else

puts "今日は#{days[day]}"

end

↑

ここからはif文。

配列を取得するためには

配列[添字]

という記述が必要。

ここで、配列[添字]を当てはめると

days[day]となり、puts以降の文が完成する。

2021-06-21

【Ruby】引数の基礎

"晴れ" という文字列を引数で渡した時に

明日の天気は晴れです

とターミナルに表示されるようなメソッドを作成したい！！

【模範解答】

def get_weather_forecast(weather)

puts "明日の天気は#{weather}です"

end

get_weather_forecast("晴れ")

【自分への解説】

・「明日の天気は〇〇です」の「〇〇」に任意の文字列（今回は「晴れ」）を表示したいので、引数を使用する。

「〇〇」にはメソッドの呼び出し元の引数に渡した文字列が表示される。

※今回の呼び出し元の引数とは

get_weather_forecast("晴れ")　の　"晴れ"　の部分のこと

・そして、文字列を出力するためのget_weather_forecastメソッドを定義。

※def get_weather_forecast(weather)　ここで定義されている

引数はなんでもいいが、今回はweatherを使用している。

putsで文字列を出力させる時には＝は使わない！！

＝は代入！！

2021-06-19

【HTMLとCSS】④ChatAppにおける投稿フォームの作成

◯上記のような投稿フォームを実装したい！

【模範解答】

☆app/views/messages/_main_chat.html.erb　のformクラス以下

</div>

</div>

☆app/assets/stylesheets/messages.cssのform部分

.form {

background-color: #DDDDDD;

height: 90px;

padding: 20px 40px;

display: flex;

}

.form-input {

background-color: white;

width: 100%;

}

.form-message {

border: none;

height: 50px;

width: 100%;

padding-left: 10px;

}

.form-submit {

background-color: #38AEF0;

border: none;

color: white;

font-size: 16px;

height: 50px;

margin-left: 15px;

padding: 0 20px;

}

【自分への解説】

　思考手順

１.まずメッセージ入力部分、送信ボタン部分の2つのクラスが必要であると認識する。

２.HTMLにて、入力部分、送信ボタン部分のクラスを定義する

３.CSSを編集する

２.HTMLの編集

↑

フォームのクラスを作成している

↑

input要素のクラスを作成し、"form-message"と命名

placeholder= "type a message"で、初めから"type a message"という文字列が表示されるようにしている。

</div>

↑

送信ボタンのinput要素のクラスを作成

ここではtype属性"submmit"を用いて実際に押すことのできる送信ボタンを作成している

</div>

◯そもそもform要素とは？

form要素とは、フォーム関連要素の集まりを表すブロック要素である。

<form>...</form>のなかに、入力フォームや送信フォームを作成する。

◯input要素とは？

Input要素とは、フォームの入力欄や実行ボタンなどを作成することができるインライン要素である。input要素にはtype属性という設定があり、それを指定することによって様々な種類のフォーム部品を作り出すことができる。

◯type属性とは？

type属性	用途
text	１行のテキスト入力欄を作成します
checkbox	チェックボックスを複数作成することができます
radio	複数の中から１つしか選択できない、ラジオボタンを作ります
submit	送信ボタンを作ります

３.CSSの編集

.form {

background-color: #DDDDDD;

height: 90px;

padding: 20px 40px;

display: flex;

}

↑

フォームの中は横並びのため、親要素でdisplay: flex;を使っている

.form-input {

background-color: white;

width: 100%;

}

↑

入力のボックスのデザイン

横のサイズは親要素に対して100％と指定している

.form-message {

border: none;

height: 50px;

width: 100%;

padding-left: 10px;

}

↑

入力するメッセージ（中身）のデザイン

.form-submit {

background-color: #38AEF0;

border: none;

color: white;

font-size: 16px;

height: 50px;

margin-left: 15px;

padding: 0 20px;

}

↑

marginで外側の余白を表現

paddingで内側の余白を表現