$emitとは親コンポーネントのイベントを発火させる起動スイッチのようなもの。それに便乗して値を渡す。 つまり、カスタムイベント（ここではmy-click）を作れるメソッド。 子コンポーネント側（クリック時の例） <button @click="incriment"></button> export default { methods: { incriment() …

親コンポーネント側 子のtotal-number属性として値を渡す <Child :total-number="number"></Child> // Child.vueに渡す export default { data() { return { number: 10 } } } 子コンポーネント（Child.vue）側 totalNumberとして受け取る <p>{{ totalNumber }} export default { props: { 'totalNumbe</p>…

配列 v-for="要素 in 配列" :key="要素" <li v-for="fruit in fruits" :key="fruit">{{ fruit }}</li> // 第二引数として配列のインデックスをとることも可 data: { fruits: ['apple', 'mango', 'banana'] } apple mango banana オブジェクト v-for="value in オブジェクト" <li v-for="value in object" :key="value">{{ value }}</li> // 第二引数として…

computed: リアクティブな依存関係が更新されたときのみ実行される。 method: リアクティブな値の更新とか関係なく、再描画＝ページの内容が少しでも変わるたびに実行されてしまう。

バインドした値がtrueの時のみ要素を表示させる。 v-if 切り替えのコストが大きい。 <p v-if="ok"> <p v-else-if="maybe-ok"> <p v-else> data: { ok: true maybe-ok: false } v-show v-ifと同じ挙動だが、頻繁に何かを切り替える処理に適する templateタグ内で使えない 初期描画のコストが大きい v-ifは要素</p></p></p>…

ブラウザからの入力値をdataと紐付ける（バインドする） <template> <input v-model="message"> // 入力値がmessageに代入される <h1>{{ message }}</h1> // messageが表示される </template> <script> data: { message: "こんにちは" } // デフォルト値 イベント修飾子 v-model.lazy="message" // フォームからフォーカスが…

特定のイベントが起こったときにメソッドを発火させる <a v-on:DOMイベント="処理内容 or メソッド"> <a @DOMイベント="処理内容 or メソッド "> // 省略形 メソッド内でイベントオブジェクト（$event）を取得する <p @mousemove="changeMousePosition($event, number)" > // イベント引数以外の引数をとるときは$マークをつける changeMousePosition(event, number) { this.x = event.clientX / number </p></a></a>…

各HTML要素の属性と値を動的に指定する <a v-vind: "twitterObject"></a> data: { twitterObject: { href: 'https://twitter.com' id: 32 } } 省略した記法 <a :href="url"></a> <a :[attribute]="https://example.com"></a> data: { url: 'https://example.com' attribute: 'href' }

select コレクションのサブセット（部分集合）を取得する。select!では元のコレクションが改変される。 i = [1,2,3,4,5] i.select {|x| x % 2 == 0} # => [2, 4] map コレクションの各要素に操作を実行し、更新されたコレクションを取得する。map!では元のコ…

find idを引数にとり、マッチした一件を返す 例外を起こす find_by キーと値を引数にとり、マッチした最初のレコードを返す nilを返す（find_by!は例外を起こす） where キーと値を引数にとり、マッチしたレコードのコレクション（ActiveRecord::Relationの…

インスタンス変数 クラス定義内で定義しない（するとクラスインスタンス変数になる） インスタンスに関連付けられる変数（インスタンスごとに独立した変数）なのでクラスメソッドからはアクセスできない あるインスタンスで属性値を変更しても、他のインスタ…

include インスタンスメソッドとしてアクセスできる。 クラスのインスタンスメソッドをモジュールで拡張する場合。 extend クラスメソッドとしてアクセスできる。 クラスメソッドなどの拡張だけが目的である場合 module Greetings def hello puts 'hello' en…

メソッドに渡される引数の数を事前に決めておきたくない場合に使う。可変長引数を取れるようにする。 def do_sth(*input) input.each {|x| puts x } end do_sth(3,4,5) # => 3 # => 4 # => 5 double splat演算子：キーバリューを引数にとる def do_sth(**inp…

yield メソッドに渡されたブロックにアクセスする。 def puts_stuff puts 'first line' yield if block_given? puts 'third line' yield if block_given? end puts_stuff { puts 'its me' } # => first line # => its me # => third line # => its me

Rackとは アプリケーションサーバとRubyフレームワークをつなぐインターフェースを提供しているライブラリ。 Rack登場以前はアプリケーションサーバとフレームワークが密結合しており、組み合わせによってはデプロイ方法が複雑になってしまっていた。Rackの…

オブジェクトのライフサイクルの中でメソッドを実行するフック。

count レコードの件数をカウントするSQLクエリを実行する。DBとメモリでレコード数が違う可能性がある場合に有用。 length メモリ上のコレクションに含まれるアイテムの件数を返す。データベーストランザクションを実行しない分、countより高速。 size lengt…

マイグレーションの概要 一つ一つのマイグレーションはデータベースの新しいバージョンとみなすことができる。スキーマは最初空の状態から始まり、マイグレーションによる変更が加わるたびにテーブル、カラム、エントリが追加される。マイグレーションの実行…

ServiceObjectを導入するケース アクションが複雑になる場合 (決算期の終わりに帳簿をクローズする、など) アクションが複数のモデルにわたって動作する場合 (eコマースの購入でOrder, CreditCard, Customer を使用する、など) アクションから外部サービスと…

Rubyのオブジェクトをnewで生成する時、そのオブジェクトのinitializeメソッドが実行される。 class User # 初期値の設定などに使う def initialize(name, email, address) # 初期値 @name = name @email = email @address = address end end

HTMLとERBが混在する場合などに使用するとすっきり表現できる <%= content_tag (:i, nil, class: 'fa fa-youtube-play') %> <%= content_tag (:div, "Hello world!", class: "strong") %>

gem 'simple_form'で最低限の記述でフォームを作成できる。 gem 'simple_form' % bundle install % rails generate simple_form:install <%= simple_form_for @user do |f| %> <%= f.input :username, error: '半角英数字で' %> <%= f.input :email, placeho…

ユーザーのロールによって使えるアクションを制限する。 pundit pundit: 各アクションがどのユーザーに認可されているかをポリシーファイルで管理する (cancancan: ユーザーごとにどのような権限を持っているかを管理する) gem "pundit" % bundle install % …

FormObject form_withのmodelオプションにActiveRecord以外のオブジェクトを渡す時（複数のモデルを扱うときなど）のデザインパターン。ActiveModelをインクルードすることで実現。 DBを使わないフォームでも、ActiveRecordを利用した場合と同じお作法を利用…

cron: 定期的に何かのプログラムを実行するためのLinuxの機能。 既存のrakeタスクをcronで一定間隔で実行するため、gem 'whenever'を用いる。 whenever インストール gem 'whenever', require: false $ bundle install $ bundle exec wheneverize . # config…

rake: rubyで処理内容を定義できるビルドツール。アプリを起動せずCUIから処理を行える。 rakeタスクの作成 rakeタスクのファイルを作成 $ rails g task student_grade lib/tasks配下に作成されたファイルにタスクを記述する。 # lib/tasks/student_grade.ra…

gem 'gretel'でパンくずを実装する。 gretel gem 'gretel'をインストール。 gem "gretel" $ bundle install $ rails generate gretel:install パンくずの設定 設定ファイルconfig/bradcrumbs.rbに記述する。 # config/bradcrumbs.rb # 例 # crumb :クラム名 …

リクエストのテスト spec/requests配下にAPIのディレクトリをつくり、そこに各エンドポイントのファイルを作る。 # spec/requests/api/v1/articles_spec.rb RSpec.describe 'Api::V1::Articles', type: :request do describe 'GET /articles' do let(:articl…

factoriesファイルを編集 以下のようにデフォルト値を設定する # spec/factories/students.rb FactoryBot.define do factory :student do sequence(:name) { |n| "Student#{n}" } sequence(:email) { |n| "student#{n}@test.com" } password { '12345678' } …

バリデーションに関するテストを書く。 require 'rails_helper' RSpec.describe User, type: :model do it 'メールアドレスは必須項目であること' do user = build(:user) user.email = nil user.valid? expect(user.errors[:email]).to include("can't be b…