vue-mqでレスポンシブ対応

Vue

vue-mqをインストール $ yarn add vue-mq vue-mqをインポートしてブレイクポイントを設定 // hello_vue.js import VueMq from 'vue-mq' Vue.use(VueMq, { breakpoints: { sm: 600, md: 900, lg: Infinity }, defaultBreakpoint: 'lg' }); テンプレートで使う <template></template>…

v-ifで空配列時に表示を変える

Vue

<div v-if="article.length"> <p>記事は空ではありません</p> </div> <div v-else> <p>記事は空です</p> </div> 参考記事: 【Vue.js入門】v-ifを活用して空配列時にToDoアプリに「Todoはありません」と表示しよう! - Qiita

vuex-persistedstateでリロードしてもvuexのステートデータを保持

Vue

vuex-persitedstateをインストール $ vuex-persistedstate storeファイルにインポートして設定を記載 import Vue from 'vue' import Vuex from 'vuex' import createPersistedState from 'vuex-persistedstate' import articles from './modules/articles' i…

active_model_serializersで同じモデルから出力結果の違う2つのコントローラーを設定する

API

article_serializers.rb class ArticleSerializer < ActiveModel::Serializer attributes :id, :title, :description has_one :region has_many :info_blocks # article has one region, region has one countryの関連を返す。 class RegionSerializer < Act…

vue-routerで遷移時にデータを渡す

Vue

router { path: '/article', component: ArticleShow, name: 'ArticleShow', props: true } 遷移元 <script> export default { props: { article: { type: Object, required: true } }, methods :{ showArticleDetail() { this.$router.push({ name: 'ArticleShow', </script>…

vue-momentで日時データをフォーマット

vue-momentをインストール $ yarn add vue-moment vue-momentを取り込む hello_vue.js Vue.use(require('vue-moment')); メソッドを設定 index.vue <script> export default { data() { return { date: this.$moment().format() } } } </script> テンプレートで使う index.vue <div id="app"></div>…

active_model_serializersで関連テーブルを扱う

API

テーブル class Country < ApplicationRecord has_many :regions end class Region < ApplicationRecord has_many :articles belongs_to :country end class Article < ApplicationRecord belongs_to :region end gemをインストール gem 'active_model_seria…

プルリクエストのテンプレートファイルを作成

git

①プロジェクトのルートディレクトリに.githubディレクトリを作成する。 $ mkdir .github ②.githubディレクトリ配下にPULL_REQUEST_TEMPLATE.mdファイルを作成する。 $ touch PULL_REQUEST_TEMPLATE.md ③PULL_REQUEST_TEMPLATE.mdファイルにプルリクエストの…

RailsアプリをAWSでデプロイしてみた時のエラー色々

AWS

AWSへのデプロイの方法が分からなかったので、簡単なRailsアプリを作って、以下の記事を参考に実際にデプロイしてみた。 【画像付きで丁寧に解説】AWS(EC2)にRailsアプリをイチから上げる方法【その1〜ネットワーク,RDS環境設定編〜】 - Qiita ほとんど問題…

docker_compose.ymlで環境変数を使う

いくつかやり方があるがここでは.envを使う。 プロジェクトのルートディレクトリに.envファイルを作成して書き込む。 $ touch .env .env PASSWORD=thisispassword docker_compose.ymlで.envの変数を使う。 db: image: postgres environment: POSTGRES_PASSWO…

リアルタイム検索フォーム

Vue

<template> <div class="container-fluid"> <div id="search-form" class="form-row p-3" > <div class="form-group col-lg-6 offset-lg-3"> <label for="search">絞り込み</label> <input id="search" // 入力された値をdataに取得。 v-model="searchTask" type="text" placeholder="タスク名を入力してください" class="form-control" > </div> </div>…</div></template>

SQLite3::BusyException: database is locked

解決策 rails consoleで以下を打つ。 ActiveRecord::Base.connection.execute("BEGIN TRANSACTION; END;") 参考記事:SQLite3::BusyException: database is locked:のエラーの解決 - Qiita

ActiveStorageで画像アップロード

Vue

プロフィールページを作成し、ユーザーの名前の変更とプロフィール画像のアップロードをできるようにする。 ①ActiveStorageをインストール。 $ bundle exec rails active_storage:install $ bundle exec rails db:migrate ②ActiveStorage用のカラムをモデル…

VeeValidateでバリデーション

Vue

①vee-validateをインストール。 $ yarn add vee-validate ②pluginsディレクトリ配下にファイルを作成してインスタンスに登録する。 $ touch app/javascript/plugins/veevalidate.js javascript/packs/hello_vue.js import '../plugins/veevalidate' ③veevali…

param is missing or the value is empty: user

該当コード class Api::UsersController < ApplicationController . . . private def user_params params.require(:user).permit(:email, :password, :password_confirmation, :name) end end 解決方法 class Api::UsersController < ApplicationController …

JWTを用いてトークンベースの認証を実装

Vue

前回:ユーザー登録機能の実装 - Rails技術ブログ ①ruby-jwtをインストール。 gem 'jwt' $ bundle install ②ルーティングを設定。 Rails.application.routes.draw do root to: 'home#index' namespace :api, format: 'json' do resources :tasks resources :…

ユーザー登録機能の実装

Vue

①sorceryをインストール。 gem 'sorcery' $ bundle exec rails g sorcery:install class SorceryCore < ActiveRecord::Migration[6.0] def change create_table :users do |t| t.string :name, null: false t.string :email, null: false t.string :crypted_…

eslintで構文チェック

Vue

eslintをインストール $ yarn add --dev eslint eslint-plugin-vue プロジェクトのルートディレクトリに.eslintrc.jsを作成して、以下の設定を追記。 module.exports = { "extends": [ "plugin:vue/recommended", ] }; eslintのコマンドをpackage.jsonに登録…

vuexをnamespacedでモジュールに分割

Vue

store/index.js import Vue from 'vue' import Vuex from 'vuex' import tasks from './modules/tasks' import users from './modules/users' Vue.use(Vuex) export default new Vuex.Store({ modules: { tasks, users } }) modules/tasks.js import axios f…

slotで親コンポーネントから子コンポーネントにテンプレートを差し込む

Vue

親コンポーネント <template> <TaskList> <template v-slot:header> <div class="h4">TODO</div> </template> </TaskList> <TaskList> <template v-slot:header> <div class="h4">DOING</div> </template> </TaskList> <TaskList> <template v-slot:header> <div class="h4">DONE</div> </template> </TaskList> </template>

孫コンポーネントから親コンポーネントにデータを渡す

Vue

孫コンポーネント(javascript/pages/task/components/taskItem.vue) <template> <div @click="grandChildMethod(task)"> <button>ボタン</button> </div> </template> <script> export default { name: 'TaskItem', data () { return { task: 'Hello' } }, methods: { grandChildMethod(task) { this.$emit('child', task) } } }

Vueのフォームでセレクトボックスを使う

Vue

<template> <div class="form-group mb-3"> <label for="status">ステータス</label> <select class="form-control" id="status" v-model="task.status"> <option value="todo">TODO</option> <option value="doing">DOING</option> <option value="done">DONE</option> </select> </div> </template> <script> export default {…

vuexとaxiosでタスクを削除。

Vue

前回:vuexとaxiosでタスクを更新 - Rails技術ブログ ①タスク詳細モーダルに削除ボタンと親コンポーネントにデータを渡すメソッドを記載。 詳細モーダル <template> <div :id="'task-detail-modal-' + task.id"> <div class="modal" @click.self="handleCloseModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">{{ task…</h5></div></div></div></div></div></template>

vuexとaxiosでタスクを更新

Vue

前回:vuexとaxiosでタスクを追加 - Rails技術ブログ ①タスク編集モーダルを作成・記載して親コンポーネントから読み込む。 編集モーダル <template> <div :id="'task-edit-modal-' + task.id"> <div class="modal" @click.self="handleCloseModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <div class="from-group mb-3"> </div></div></div></div></div></div></template>

vuexとaxiosでタスクを追加

Vue

前回:vuexとaxiosでタスク一覧を取得 - Rails技術ブログ ①storeにタスク追加処理を記載。 store/index.js import Vue from 'vue' import Vuex from 'vuex' import axios from '../plugins/axios' Vue.use(Vuex) export default new Vuex.Store({ state: { t…

vuexとaxiosでタスク一覧を取得

前回:タスク追加モーダルの実装 - Rails技術ブログ ①vuexをインストールしてインポート。 $ yarn add vuex packs/hello_vue.js import Vue from 'vue' import App from '../app.vue' import router from '../router' import axios from '../plugins/axios' …

タスク追加モーダルの実装

Vue

前回:タスク詳細モーダルの実装 - Rails技術ブログ ①モーダルのコンポーネントを作成して表示非表示を切り替えられるようにする(前回参照)。 $ touch app/javascript/pages/task/components/TaskCreateModal.vue 親コンポーネント <template> <div> <div class="d-flex"> <div class="col-4 bg-light rounded shadow m-3 p-3"> <div class="h4">TODO</div> </div></div></div></template>

タスク詳細モーダルの実装

Vue

前回:APIでデータを取得してVueで呼び出す - Rails技術ブログ ①モーダルのコンポーネントを作成。 $ touch app/javascript/pages/task/components/TaskDetailModal.vue bootstrapを活用してデザインを記載。 <template> <transition name="fade"> <div class="modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> </div></div></div></div></transition></template>

APIでデータを取得してVueで呼び出す

Vue

前回:ヘッダー・フッターをコンポーネントに分割 - Rails技術ブログ ①モデルを作成。 $ bundle exec rails g model Task title:string class CreateTasks < ActiveRecord::Migration[6.0] def change create_table :tasks do |t| t.string :title, null: fa…