Railsユーザーモデルバリデーションテスティング(name/email/password)
  • 2020.07.15に公開
  • Udemy
  • 8. ユーザーモデル開発
  • No.7 / 8

今回達成すること

ユーザーモデルに設定したバリデーションが正しく動いているかテストを行います。

実装に入る前に、この回で設定したバリデーションをおさらいしておきましょう。

カラム 内容 入力 最小文字数 最大文字数 書式チェック 一意性
name ユーザー名 必須 30 しない なし
email メースアドレス 必須 255 する メソッド
password_digest パスワード 必須 8 72(bcryptの仕様) する なし
activated メール認証フラグ - - - -
admin 管理者フラグ - - - -

この表に沿ってテストを実行していきます。

共通ユーザーを作成する

まず今後のテストに使用する共通のユーザーをtest_helpter.rbに宣言しましょう。

api/test/test_helper.rb
...
class ActiveSupport::TestCase
  ...

  # 追加
  def active_user
    User.find_by(activated: true)
  end
end
  • active_user ... ユーザーテーブルからアクティブなユーザーを一人取り出す。

共通ユーザーの宣言

user_test.rb内で使用するユーザーオブジェクトを宣言します。

api/test/models/user_test.rb
require 'test_helper'

class UserTest < ActiveSupport::TestCase
  # 追加
  def setup
    @user = active_user
  end
end

このように、test_helpter.rbに記述したメソッドはテスト内のどこからでも呼び出せます。

コードを簡略化したい場合には積極的に使用しましょう。

user.nameバリデーションテスト

チェックする内容
  • 入力必須
  • 最大30文字まで

入力必須をテストする

まずテスト項目のname_validationブロックを作成し、その中でユーザーオブジェクトを作成・保存します。

api/test/models/user_test.rb
require 'test_helper'

class UserTest < ActiveSupport::TestCase
	...
	# 追加
  test "name_validation" do
    # 入力必須
    user = User.new(email: "test@example.com", password: "password")
    user.save
  end
end

このユーザーはnameを空の状態で保存したので「名前を入力してください」というエラーメッセージが期待されます。

バリデーションエラーは、配列で返されるので期待されるエラーメッセージを配列で宣言しましょう。

api/test/models/user_test.rb
require 'test_helper'

class UserTest < ActiveSupport::TestCase
	...
  test "name_validation" do
    # 入力必須
    user = User.new(email: "test@example.com", password: "password")
    user.save
    required_msg = ["名前を入力してください"]  # 追加
  end
end

最後にRailsのテストメソッド、assert_equal(アサート イコール)を実行します。

第一引数と第二引数が一致した場合にtrueを返しテストが通ります。

api/test/models/user_test.rb
require 'test_helper'

class UserTest < ActiveSupport::TestCase
	...
  test "name_validation" do
    # 入力必須
    user = User.new(email: "test@example.com", password: "password")
    user.save
    required_msg = ["名前を入力してください"]
    assert_equal(required_msg, user.errors.full_messages)  # 追加
  end
end
  • user.errors.full_messages ... バリデーションのエラーメッセージを取得する。

これで入力必須バリデーションのテストが完成しました。実行してみましょう。

root $ docker-compose run --rm api rails t

...
1 tests, 1 assertions, 0 failures, 0 errors, 0 skips
  • 1 tests ... 1つのテストブロックの
  • 1 assertions ... 1つのassertを実行した結果、
  • 0 failures ... テストの失敗は0
  • 0 errors ... エラーは0
  • 0 skips ... 飛ばしたテストは0

と読みます。

30文字制限をテストする

考え方は同じです。

31文字の名前を用意し保存して見た場合、エラーメッセージは正しく出力できているかを確認しています。

api/test/models/user_test.rb
require 'test_helper'

class UserTest < ActiveSupport::TestCase
	...
  test "name_validation" do
    ...
    # 追加
    # 文字数制限
    max = 30
    name = "a" * (max + 1)
    user.name = name
    user.save
    maxlength_msg = ["名前は30文字以内で入力してください"]
    assert_equal(maxlength_msg, user.errors.full_messages)
  end
end

逆に30文字は保存できているか

念のため成功事例の場面もテストします。

api/test/models/user_test.rb
require 'test_helper'

class UserTest < ActiveSupport::TestCase
  ...
  test "name_validation" do
   ...
		# 追加
    # 30文字以内は正しく保存されているか
    name = "あ" * max
    user.name = name
    assert_difference("User.count", 1) do
      user.save
    end
  end
end

assert_difference("User.count", 1)

assert_difference(アサート ディファレンス)は、ブロック内の処理を実行した結果、第一引数が第二引数の数だけ変化していればテストが通ります。

ユーザーが正しく保存できた場合、User.countが1増えるはずなので第二引数に「+1」を渡しています。

user.nameのテストを実行してみる

以上でnameのバリデーションテストが完了です。実行してみましょう。

root $ docker-compose run --rm api rails t

...
1 tests, 3 assertions, 0 failures, 0 errors, 0 skips

うまくいきました!

以下省略。このコマンドは適時実行してください。

user.emailバリデーションテスト

チェックする内容
  • 入力必須
  • 最大255文字まで
  • 正しい書式は保存できているか
  • 間違った書式はエラーを吐いているか

入力必須

新たなテストブロックemail_validationを作成し、その中にテストを書いていきます。

内容が重複する説明は飛ばします。

api/test/models/user_test.rb
require 'test_helper'

class UserTest < ActiveSupport::TestCase
  ...
  # 追加  
  test "email_validation" do
    # 入力必須
    user = User.new(name: "test", password: "password")
    user.save
    required_msg = ["メールアドレスを入力してください"]
    assert_equal(required_msg, user.errors.full_messages)
  end
end

文字数制限

api/test/models/user_test.rb
require 'test_helper'

class UserTest < ActiveSupport::TestCase
  ...
  test "email_validation" do
    ...
    # 追加
    # 文字数制限
    max = 255
    domain = "@example.com"
    email = "a" * ((max + 1) - domain.length) + domain
    assert max < email.length

    user.email = email
    user.save
    maxlength_msg = ["メールアドレスは255文字以内で入力してください"]
    assert_equal(maxlength_msg, user.errors.full_messages)
  end
end

正しい書式は保存できているか

api/test/models/user_test.rb
require 'test_helper'

class UserTest < ActiveSupport::TestCase
  ...
  test "email_validation" do
    ...
    # 追加
    # 書式チェック format = /\A\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*\z/
    ok_emails = %w(
      A@EX.COM
      a-_@e-x.c-o_m.j_p
      a.a@ex.com
      a@e.co.js
      1.1@ex.com
      a.a+a@ex.com
    )
    ok_emails.each do |email|
      user.email = email
      assert user.save
    end
  end
end
  • assert user.save ... 引数がtrueの場合にテストを通す。

    user.saveが成功した場合はtrueが返ってきます。

間違った書式はエラーを吐いているか

api/test/models/user_test.rb
require 'test_helper'

class UserTest < ActiveSupport::TestCase
  ...
  test "email_validation" do
    ...
    # 追加
    ng_emails = %w(
      aaa
      a.ex.com
      メール@ex.com
      a~a@ex.com
      a@|.com
      a@ex.
      .a@ex.com
      a@ex.com
      A@ex.com
      a@?,com
      1@ex.com
      "a"@ex.com
      a@ex@co.jp
    )
    ng_emails.each do |email|
      user.email = email
      user.save
      format_msg = ["メールアドレスは不正な値です"]
      assert_equal(format_msg, user.errors.full_messages)
    end
  end
end

email小文字化テスト

ユーザーモデルにはバリデーション実行前にメールアドレスを小文字化するメソッドがあります。

api/app/models/user.rb
before_validation :downcase_email

このメソッドが正しく動いているかテストをしておきましょう。

api/test/models/user_test.rb
class UserTest < ActiveSupport::TestCase
  ...
	# 追加
  test "email_downcase" do
    # email小文字化テスト
    email = "USER@EXAMPLE.COM"
    user = User.new(email: email)
    user.save
    assert user.email == email.downcase
  end
end

assert user.email == email.downcase

バリデーション実行後のユーザーメールアドレスと、小文字にしたemailが一致していればテストが通ります。

アクティブユーザーの一意性テスト

チェックする内容
  • アクティブユーザーがいない場合、同じメールアドレスが登録できているか
  • ユーザーがアクティブになった場合、バリデーションエラーを吐いているか
  • アクティブユーザーがいなくなった場合、ユーザーは保存できているか
  • 最終的に一意性は保たれているか

前回までのおさらい

この回でアクティブなユーザーのメールアドレスが重複しないようemail_activated?メソッドを作成しました。

api/app/models/user.rb
# 自分以外の同じemailのアクティブなユーザーがいる場合にtrueを返す
def email_activated?
  users = User.where.not(id: id)
  users.find_activated(email).present?
end

このメソッドは、

  • ユーザーオブジェクトのemail
  • 既にユーザーテーブルに存在し、かつ
  • そのユーザーがactivated: trueの場合

trueを返すメソッドです。

そしてこのメソッドがtrueの場合に、バリデーションエラーとなります。

api/lib/validator/email_validator.rb
record.errors.add(attribute, :taken) if record.email_activated?

これらが正しく動いているかを検証していきます。

アクティブユーザーがいない場合

何度でも同じメールアドレスが登録できているかを検証します。

これは、メール認証の期限切れユーザーに対応するものです。

api/test/models/user_test.rb
require 'test_helper'

class UserTest < ActiveSupport::TestCase
  ...
  # 追加
  test "active_user_uniqueness" do
    email = "test@example.com"

    # アクティブユーザーがいない場合、同じメールアドレスが登録できているか
    count = 3
    assert_difference("User.count", count) do
      count.times do |n|
        User.create(name: "test", email: email, password: "password")
      end
    end
  end
end

ユーザーがアクティブになった場合

ユーザーがアクティブになった場合、もう同じメールアドレスは登録できません。

バリデーションエラーを吐いているか検証しましょう。

api/test/models/user_test.rb
require 'test_helper'

class UserTest < ActiveSupport::TestCase
  ...
  test "active_user_uniqueness" do
    ...
    # 追加
    # ユーザーがアクティブになった場合、バリデーションエラーを吐いているか
    active_user = User.find_by(email: email)
    active_user.update!(activated: true)
    assert active_user.activated

    assert_no_difference("User.count") do
      user = User.new(name: "test", email: email, password: "password")
      user.save
      uniqueness_msg = ["メールアドレスはすでに存在します"]
      assert_equal(uniqueness_msg, user.errors.full_messages)
    end
  end
end

assert_no_difference("User.count")

assert_differenceとは逆のテストメソッドです。

ブロック内の処理を実行した結果、引数の数に変化がなければテストを通します。

つまりユーザーが保存されていないことをテストしています。

アクティブなユーザーがいなくなった場合

アクティブユーザーが削除された後の事も考えておきましょう。

正しく保存されているかテストします。

api/test/models/user_test.rb
require 'test_helper'

class UserTest < ActiveSupport::TestCase
  ...
  test "active_user_uniqueness" do
    ...
    # 追加
    # アクティブユーザーがいなくなった場合、ユーザーは保存できているか
    active_user.destroy!
    assert_difference("User.count", 1) do
      User.create(name: "test", email: email, password: "password", activated: true)
    end
  end
end

一意性は保たれているか

最後に一意性は保たれているかをテストします。

アクティブユーザーの数が1人の場合だとOKですね。

api/test/models/user_test.rb
require 'test_helper'

class UserTest < ActiveSupport::TestCase
  ...
  test "active_user_uniqueness" do
    ...
    # 追加
    # 一意性は保たれているか
    assert_equal(1, User.where(email: email, activated: true).count)
  end
end

これでアクティブユーザーの一意性テストが完了です。

user.passwordバリデーションテスト

チェックする内容
  • 入力必須
  • 8文字以上
  • 最大72文字まで
  • 書式チェック

パスワードはメールアドレスと同じようなテストとなります。

api/test/models/user_test.rb
require 'test_helper'

class UserTest < ActiveSupport::TestCase
  ...
  # 追加
  test "password_validation" do
    # 入力必須
    user = User.new(name: "test", email: "test@example.com")
    user.save
    required_msg = ["パスワードを入力してください"]
    assert_equal(required_msg, user.errors.full_messages)

    # min文字以上
    min = 8
    user.password = "a" * (min - 1)
    user.save
    minlength_msg = ["パスワードは8文字以上で入力してください"]
    assert_equal(minlength_msg, user.errors.full_messages)

    # max文字以下
    max = 72
    user.password = "a" * (max + 1)
    user.save
    maxlength_msg = ["パスワードは72文字以内で入力してください"]
    assert_equal(maxlength_msg, user.errors.full_messages)

    # 書式チェック VALID_PASSWORD_REGEX = /\A[\w\-]+\z/
    ok_passwords = %w(
      pass---word
      ________
      12341234
      ____pass
      pass----
      PASSWORD
    )
    ok_passwords.each do |pass|
      user.password = pass
      assert user.save
    end

    ng_passwords = %w(
      pass/word
      pass.word
      |~=?+"a"
      12345678
      ABCDEFGH
      password@
    )
    format_msg = ["パスワードは半角英数字•ハイフン•アンダーバーが使えます"]
    ng_passwords.each do |pass|
      user.password = pass
      user.save
      assert_equal(format_msg, user.errors.full_messages)
    end
  end
end

以上でバリデーションテストが実装できました。

テストコマンドを実行して確認しておいてください。

root $ docker-compose run --rm api rails t

...
5 tests, 47 assertions, 0 failures, 0 errors, 0 skips

コミットする

以上でユーザーモデルのバリデーションテストを終了します。

ここまでの変更をコミットしておきましょう。

root $ cd api
api  $ git commit -am "add_user_model_test"
api  $ cd ..
root $ 

まとめ

今回はユーザーモデルに追加したバリデーションが正しく動いているかテストを実行しました。

  • user.name
    • 入力必須
    • 30文字まで
  • user.email
    • 入力必須
    • 255文字まで
    • 書式チェック
  • メールアドレスが小文字になっているか
  • アクティブユーザーの一意性テスト
  • user.password
    • 入力必須
    • 8文字以上
    • 72文字まで
    • 書式チェック

あ...。共通ユーザー使わなかったね。

次回予告

さて次回は、ユーザーテーブルを本番環境に表示していきます。

Herokuへのユーザーテーブルデプロイ方法を学びましょう。

▶︎ 次の記事へGO↓

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる。そんな方に向けた単発・短期間メンターサービスを行っています。
独学プログラマのサービス
Udemyの投稿
1
  • このカテゴリーの歩き方
  • /
  • #01
【お知らせ】UdemyでRails × Nuxt.jsの動画を公開することになりました
2
  • このカテゴリーの歩き方
  • /
  • #02
アプリケーション仕様書
3
  • このカテゴリーの歩き方
  • /
  • #03
このカテゴリーの歩き方(まずはここをチェック)
4
  • このカテゴリーの歩き方
  • /
  • #04
(Docker+Rails6+Nuxt.js+PostgreSQL)=>Heroku 環境構築~デプロイまでの手順書
1
  • Docker入門
  • /
  • #01
Docker for Macをインストールする手順
2
  • Docker入門
  • /
  • #02
分かるDocker解説。仮想環境・コンテナ・Dockerイメージ・Dockerfileとは何か?
3
  • Docker入門
  • /
  • #03
分かるDocker解説。DockerComposeとは何か?
1
  • Dockerを使ったRails+Nuxt.js環境構築
  • /
  • #01
【Docker+Rails6+Nuxt.js】今回作成するアプリの開発環境の全体像を知ろう
2
  • Dockerを使ったRails+Nuxt.js環境構築
  • /
  • #02
【MacOS】Homebrew経由でGitをインストールする方法
3
  • Dockerを使ったRails+Nuxt.js環境構築
  • /
  • #03
Rails6を動かすAlpineベースのDockerfileを作成する(AlpineLinuxとは何か)
4
  • Dockerを使ったRails+Nuxt.js環境構築
  • /
  • #04
Nuxt.jsを動かすAlpineベースのDockerfileを作成する(C.UTF-8とは何か)
5
  • Dockerを使ったRails+Nuxt.js環境構築
  • /
  • #05
.envファイルを使ったdocker-compose.ymlの環境変数設計
6
  • Dockerを使ったRails+Nuxt.js環境構築
  • /
  • #06
Rails6・Nuxt.js・PostgreSQLを動かすdocker-compose.ymlファイルを作成する
7
  • Dockerを使ったRails+Nuxt.js環境構築
  • /
  • #07
docker-compose.ymlを使ってRails6を構築する(PostgreSQLパスワード変更方法)
8
  • Dockerを使ったRails+Nuxt.js環境構築
  • /
  • #08
docker-compose.ymlを使ってNuxt.jsを構築する
1
  • 複数プロジェクトのGit管理
  • /
  • #01
複数プロジェクトで行うGit管理の全体像を理解しよう(Gitサブモジュール解説)
2
  • 複数プロジェクトのGit管理
  • /
  • #02
【Git】既存の子ディレクトリをサブモジュール管理に変更する手順
3
  • 複数プロジェクトのGit管理
  • /
  • #03
【GitHub】秘密鍵の生成・公開鍵を追加・SSH接続するまでを画像で分かりやすく
4
  • 複数プロジェクトのGit管理
  • /
  • #04
【GitHub】リモートリポジトリの追加・サブモジュールのリンク設定を行う
1
  • RailsAPI×Nuxt.js初めてのAPI通信
  • /
  • #01
【Rails6】"Hello" jsonを返すコントローラを作成する
2
  • RailsAPI×Nuxt.js初めてのAPI通信
  • /
  • #02
【Nxut.js】axiosの初期設定を行う(baseURL・browserBaseURLを解説)
3
  • RailsAPI×Nuxt.js初めてのAPI通信
  • /
  • #03
【Rails6】Gem rack-corsを導入してCORS設定を行う(オリジン・CORSとは何か)
1
  • Heroku.ymlを使ったDockerデプロイ
  • /
  • #01
デプロイ準備。Herokuへ新規会員登録を行いHerokuCLIをインストールする
2
  • Heroku.ymlを使ったDockerデプロイ
  • /
  • #02
heroku.yml解説編。Docker環境のRails6をHerokuにデプロイする(1/2)
3
  • Heroku.ymlを使ったDockerデプロイ
  • /
  • #03
HerokuCLI-manifestのデプロイ解説編。Docker環境のRails6をHerokuにデプロイする(2/2)
4
  • Heroku.ymlを使ったDockerデプロイ
  • /
  • #04
Dockerfile解説編。Docker環境のNuxt.jsをHerokuにデプロイする(1/2)
5
  • Heroku.ymlを使ったDockerデプロイ
  • /
  • #05
デプロイ完結編。Docker環境のNuxt.jsをHerokuにデプロイする(2/2)
1
  • モデル開発事前準備
  • /
  • #01
【Rails6】application.rbの初期設定(タイムゾーン・I18n・Zeitwerk)
2
  • モデル開発事前準備
  • /
  • #02
【Rails6】モデル開発に必要なGemのインストールとHirb.enableの自動化
3
  • モデル開発事前準備
  • /
  • #03
【Docker+Rails】A server is already running. Check /tmp/pids/server.pidエラーの対応
4
  • モデル開発事前準備
  • /
  • #04
【Docker】<none>タグのイメージを一括削除する & Rails .gitignoreの編集
1
  • ユーザーモデル開発
  • /
  • #01
Railsユーザーモデル作成。テーブル設計・ユーザー認証設計を理解する
2
  • ユーザーモデル開発
  • /
  • #02
Railsユーザーモデルのバリデーション設定(has_secure_password解説)
3
  • ユーザーモデル開発
  • /
  • #03
Railsバリデーションエラーメッセージの日本語化(ja.yml設定方法)
4
  • ユーザーモデル開発
  • /
  • #04
EachValidatorクラスのカスタムバリデーション設定(Rails6/lib以下読込)
5
  • ユーザーモデル開発
  • /
  • #05
Rails環境ごとにSeedデータ切り替えるseeds.rbの書き方
6
  • ユーザーモデル開発
  • /
  • #06
Rails6から導入された並列テストを理解する
7
  • ユーザーモデル開発
  • /
  • #07
Railsユーザーモデルバリデーションテスティング(name/email/password)
8
  • ユーザーモデル開発
  • /
  • #08
Nuxt.jsからRailsのユーザーテーブルを取得しHerokuにデプロイする
1
  • Nuxt.jsフロント開発事前準備
  • /
  • #01
【Nuxt.js2.13超解説】バージョンアップ手順と6つの新機能+2つの変更点
2
  • Nuxt.jsフロント開発事前準備
  • /
  • #02
Docker AlpineベースのNode.js上で動くNuxt.jsにVuetifyを導入する
3
  • Nuxt.jsフロント開発事前準備
  • /
  • #03
VuetifyにカスタムCSSを導入してオリジナルブレイクポイントを作る
4
  • Nuxt.jsフロント開発事前準備
  • /
  • #04
Nuxt.jsにnuxt-i18nを導入して国際化に対応する
1
  • ログイン前のレイアウト構築
  • /
  • #01
Nuxt.jsのレイアウト・ページ・コンポーネントの役割を理解しよう
2
  • ログイン前のレイアウト構築
  • /
  • #02
Nuxt.js ウェルカムページを構成するコンポーネントファイル群を作成しよう(1/4)
3
  • ログイン前のレイアウト構築
  • /
  • #03
Nuxt.js ウェルカムページにアイキャッチ画像・アプリ名・メニューボタンを表示しよう(2/4)
4
  • ログイン前のレイアウト構築
  • /
  • #04
Nuxt.js addEventListenerでスクロールを検知しツールバーの色を変化させよう(3/4)
5
  • ログイン前のレイアウト構築
  • /
  • #05
Nuxt.js ウェルカムページをレスポンシブデザインに対応させよう(4/4)
6
  • ログイン前のレイアウト構築
  • /
  • #06
Nuxt.js 会員登録ページのレイアウトファイルを作成しよう(1/4)
7
  • ログイン前のレイアウト構築
  • /
  • #07
Nuxt.js 名前、メール、パスワードのコンポーネントファイルを作成しよう(2/4)
8
  • ログイン前のレイアウト構築
  • /
  • #08
Nuxt.js 親子コンポーネント間の双方向データバインディングを実装する(3/4)
9
  • ログイン前のレイアウト構築
  • /
  • #09
Nuxt.js Vuetifyのv-text-fieldを使った会員登録フォームのバリデーション設定(4/4)
10
  • ログイン前のレイアウト構築
  • /
  • #10
Nuxt.js ログインページ実装とHerokuデプロイまで(router. replaceとpushの違いとは)
1
  • ログイン後のレイアウト構築
  • /
  • #01
Nuxt.js ログイン後のツールバーを作成しよう(inject解説)
2
  • ログイン後のレイアウト構築
  • /
  • #02
Nuxt.js アカウントメニューページ・ログアウト機能を実装しよう(nuxt-child解説)
3
  • ログイン後のレイアウト構築
  • /
  • #03
Nuxt.js ログイン後のトップページにプロジェクト一覧を表示しよう
4
  • ログイン後のレイアウト構築
  • /
  • #04
Nuxt.js プロジェクトページにVuetifyのナビゲーションドロワーを追加しよう
5
  • ログイン後のレイアウト構築
  • /
  • #05
Nuxt.js paramsIDからプロジェクトを検索してVuexに保存しよう
1
  • サーバーサイドのログイン認証
  • /
  • #01
JWTとは何か?(ruby-jwtのインストール)
2
  • サーバーサイドのログイン認証
  • /
  • #02
【Rails×JWT】ログイン認証解説とJWT初期設定ファイルの作成
3
  • サーバーサイドのログイン認証
  • /
  • #03
【Rails×JWT】トークン発行とデコードを行うAuthTokenクラスの作成
4
  • サーバーサイドのログイン認証
  • /
  • #04
【Rails×JWT】 ログイン判定を行うAuthenticatorモジュールの作成
5
  • サーバーサイドのログイン認証
  • /
  • #05
【Rails×JWT】UserクラスからJWTを扱うTokenizableモジュールの作成
6
  • サーバーサイドのログイン認証
  • /
  • #06
【Rails×JWT】AuthTokenクラスとAuthenticatorモジュールをテストする
7
  • サーバーサイドのログイン認証
  • /
  • #07
【Rails×JWT】JWTをCookieに保存するログインコントローラーの実装
8
  • サーバーサイドのログイン認証
  • /
  • #08
【Rails×JWT】ログインコントローラーのテストとHerokuデプロイ
1
  • フロントエンドのログイン認証
  • /
  • #01
【Rails×Nuxt.js】クロスオリジン通信でのCookie共有設定
2
  • フロントエンドのログイン認証
  • /
  • #02
【Nuxt.js】Railsからのログイン成功レスポンスをVuexに保存する
3
  • フロントエンドのログイン認証
  • /
  • #03
【Nuxt.js】ローカルストレージの有効期限を暗号化する(crypto-js解説)
4
  • フロントエンドのログイン認証
  • /
  • #04
【Nuxt.js】JWT有効期限内のユーザーをログインしたままにする実装
5
  • フロントエンドのログイン認証
  • /
  • #05
【Nuxt.js】ログイン前後のリダイレクト処理をミドルウェアで実装する
6
  • フロントエンドのログイン認証
  • /
  • #06
【Nuxt.js】ログイン失敗時のトースターをグローバルイベントとして作成する
7
  • フロントエンドのログイン認証
  • /
  • #07
【Nuxt.js】エラーページを作成する
8
  • フロントエンドのログイン認証
  • /
  • #08
【Rails×Nuxt.js】デモプロジェクトの作成とHerokuデプロイ(ログイン認証完)
1
  • 本番環境への対応
  • /
  • #01
【Rails×Nuxt.js】SafariのクロスサイトCookie保存拒否に対応する
独学プログラマ
独学でも、ここまでできるってよ。
CONTACT
Nuxt.js制作のご依頼は下記メールアドレスまでお送りください。