はじめに namespacedを使ってvuexをモジュール化する方法について 前提 現在、vuexストアの構成はapp/javascript/store/index.jsファイルがあるだけで、そこにタスク関連の状態管理を記述しています。 今後ユーザーなどの状態管理もするために、設定ファイル…

はじめに eslintを使ってvue.jsの構文チェックを自動化する方法について eslintの設定 まずは下記のコマンドでeslintをインストールします。 $ yarn add --dev eslint eslint-plugin-vue 続いてアプリケーションのルートディレクトリに.eslintrc.jsファイル…

はじめに v-slotを使って親コンポーネントから子コンポーネントにテンプレートを差し込む方法について 親コンポーネント <template> <div class="row"> <childComponent :tasks="todoTasks" taskListId="todo-list" @handleShowTaskDetailModal="handleShowTaskDetailModal"> <template v-slot:header> // v-slotで任意の名前を指定 <div class="h4">TODO</div> // この記述が差し込まれる </template></childcomponent></div></template>

はじめに 孫コンポーネントから親コンポーネントにデータを渡す方法について データを渡す方法 孫コンポーネントから親コンポーネントにデータを渡すには、孫コンポーネントと子コンポーネントで$emitメソッドを使う方法でもできますが、 子コンポーネントで…

はじめに vuexを使ってタスクの更新と削除機能を実装します。 親コンポーネントから詳細ページモーダルを呼び出して、 その詳細ページに編集ボタンと削除ボタンがあり、 編集ボタンを押すと、編集ページのモーダルが表示される。 タスク編集ページを作成 <template> <div :id="'task-edit-modal-' + task.id"> <div class="modal" @click.self="handleCloseModal"> <div class="modal-dialog"> <div class="modal-content"></div></div></div></div></template>…

Object.assign Object.assignはオブジェクトをマージすることができます。 const object_1 = { a: 1, b: 2 } const object_2 = { c: 3, d: 4 } const united_object = Object.assign(object_1, object_2) console.log(object_1) => { a: 1, b: 2, c: 3, d: 4…

はじめに 状態管理ライブラリのvuexを使ってデータを管理します。 vuexの設定 まずはvuexをインストールします。 $ yarn add vuex vuexの設定ファイルを作成します。 $ touch app/javascript/store/index.js import Vue from 'vue' import Vuex from 'vuex' …

はじめに タスクを追加するページのモーダルをコンポーネントとして作成します。 タスク追加ページを作成 $ touch app/javascript/pages/task/components/TaskCreateModal.vue <template> <transition name="fade"> <div id="task-create-modal"> <div class="modal" @click.self="handleCloseModal"> // モーダル以外の部分をクリックした時にモーダルを閉じる <div class="modal-dialog"> </div></div></div></transition></template>

はじめに タスクの詳細ページをモーダルで表示する。 前提 前提として下記のtaskテーブルがあります。 class Task < ApplicationRecord validates :title, presence: true validates :description, length: { maximum: 1000 } end create_table "tasks", for…

はじめに Vue.jsでRailsApiからjson形式のデータを取得する方法について。 前提 下記のようなtaskモデルがあります。 class CreateTasks < ActiveRecord::Migration[6.0] def change create_table :tasks do |t| t.string :title, null: false t.timestamps …

はじめに ヘッダーとフッターをコンポーネントとして分ける。 前提 下記のヘッダーとフッターの部分をコンポーネントとして分けます。 <template> <div class="d-flex flex-column min-vh-100"> <header class="mb-auto"> <nav class="navbar navbar-dark bg-dark"> <span class="navbar-brand mb-0 h1">{{ title }}</span> </nav> </header> <div class="text-center"> <h3>タスクを管理しよう！</h3></div></div></template>

はじめに vue.jsでVueRouterを使ってルーティングを作成する。 yarnを使ってVueRouterをインストール $ yarn add vue-router VueRouterの初期設定 import Vue from "vue"; import Router from "vue-router"; import TopIndex from "../pages/top/index"; imp…

はじめに bundle install実行時に下記のエラーに遭遇したのでその対処法。 Your bundle is locked to mimemagic (0.3.4), but that version could not be found in any of the sources listed in your Gemfile. If you haven't changed sources, that means …

はじめに トークンを発行してapiの認証機能を実装する方法について。 構成 userモデルに関連づけたApiKeyモデルを作成。 user登録時とログイン時に期限つきのトークンを作成。 (userがすでに有効なトークンを持っている場合はそれを使用) レスポンスヘッダー…

はじめに sorceryを使ってユーザー認証機能のapiを作る準備。 前提 fast_jsonapiというserializerを使用 class UserSerializer include FastJsonapi::ObjectSerializer has_many :articles attributes :name, :email end sorceryをインストール gem 'sorcery…

はじめに railsで複数カラムに対して、検索されたワードが部分一致したレコードのみを取得する検索機能を実装する。 また、複数ワードで検索された場合は、そのワードが全てどこかのカラムに入っているレコードのみを取得する。 構成 機能の構成としては、 …

はじめに Rspecで画像を添付する方法と、その画像が添付されたかどうかを確認する方法について。 画像を添付する Rspecで画像を添付するには、attach_fileというメソッドを使います。 このメソッドは、第一引数にinputタグのname属性を指定し、第二引数に画…

はじめに 自分が使っている言語のコメントアウトの方法のメモ html css /* コメントアウト */ javascript 一行の場合 // コメントアウト **複数行の場合 /* コメントアウト コメントアウト */ ruby 1行の場合 # コメントアウト 複数行の場合 =begin コメン…

はじめに railsでjQueryを使ってタブメニューを実装した際に、リロードしないとjQueryが動かない現象が起きたのでその対処法について。 原因 原因はrailsにデフォルトでインストールされているturbolinksというgemです。 このgemはjavascriptなどの変換等を…

はじめに jQueyを使ってタブメニューを作る方法について HTML まずはhtmlを下記のように記述します。 <ul class="tab-title"> <li class="tab tab-active">タブタイトル1</li> <li class="tab">タブタイトル2</li> <li class="tab">タブタイトル3</li> </ul> <div class="tab-contents"> <div class="tab-body body-active"> <p>コンテンツ1</p> </div> <div class="tab-body"> <p>コンテンツ2</p></div></div>

はじめに 掲示板のようなアプリの一覧画面などで、本文の最初の部分だけを表示させたい時の方法についてご紹介します。 こんな感じにするやつ↓ 掲示板のようなアプリの一覧画面などで、 本文の最初の部分だけを表示させたい時の方法について ご紹介します。…

はじめに railsでtextareaを使って比較的長い文章を入力してもらったとき、 それをビューで表示しようとすると、改行も空白も無視されてすごく読みづらくなってしまったので、 その対処法についてご紹介します。 問題点 例えば、下記のようなtextareaがあっ…

はじめに rails6系にwebpackerを使って、bootstrap5をインストールして使おうとしたときにclassで指定したデザインが反映されなかったので、 サーバーのログを確認してみたところ、下記のようなエラーが出ていました。 Module not found: Error: Can't resol…

はじめに Rails6系からは「yarn + webpacker」でBootstrapを導入するのが標準のようなので、こちらの方法で導入していいきます。 設定方法 まずはwebpackerをインストールします。 $ rails webpacker:install ... Webpacker successfully installed 続いて、…

はじめに ローカルとリモートのブランチ名を変更する方法について ローカルのブランチ名の変更 $ git branch -m <既存のブランチ名> <変更後のブランチ名> # 変更したいブランチ名にいる場合は下記でもOK $ git branch -m <変更後のブランチ名> リモートのブ…

ターミナルで隠しファイルも含めて表示する方法 該当のディレクトリに移動してから下記コマンドを実行。 $ ls -a finderで隠しファイルを表示する方法 下記ショートカットキーで、表示・非表示を変更できる。 command + shift + . (コマンド + シフト + ピリ…

はじめに railsでgemmysql2をインストール時に遭遇したエラーの解決法。 エラー遭遇 railsでbundle installを実行したときに下記エラーに遭遇。 Gem::Ext::BuildError: ERROR: Failed to build gem native extension. current directory: /Users/name/worksp…