はじめに Vue.jsで下にスクロールした際に、上に戻れるボタンを実装する方法について。 上に戻るボタンを追加 まずはreturnTop()というクリックイベントを設定します。 <div class="return_top_button btn btn-secondary" @click="returnTop()"> <font-awesome-icon icon="chevron-circle-up" /> </div> 続いてreturnTop()メソッドの処理を追加します。 <script> export default { name: 'JokeInde…

はじめに yarnを使ってVue.jsにFontAwesomeを導入する方法について 導入方法 まずはyarnを使ってFontAwesomeをインストールします。 $ yarn add @fortawesome/fontawesome-svg-core $ yarn add @fortawesome/free-solid-svg-icons $ yarn add @fortawesome/v…

はじめに Vue.jsでリアルタイム検索機能をつくる方法について 設定方法 <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> </div></div></div></template>

はじめに VeeValidateを使ってバリデーションをつくる方法について VeeValidateをインストール $ yarn add vee-validate VeeValidateの設定ファイルを作成 $ touch app/javascript/plugins/veevalidate.js 上記のファイルをインクルードします。 javascript/…

はじめに JWTを使ってトークンベースの認証機能をつくる方法について JWTをインストール gem 'jwt' bundle install sessionsコントローラの設定 controllers/api/sessions_controller.rb class Api::SessionsController < ApplicationController def create …

はじめに railsアプリにCircleCIを導入してCI部分のRspecとRubocopを自動化してみました。 設定方法 まずはアプリのルートディレクトリに.circleciというディレクトリを作り、その配下にconfig.ymlというファイルを作ります。 そのファイルにcircleciの設定…

はじめに Mysql2::Error: Incorrect string valueの対処法について 該当のエラー ActiveRecord::StatementInvalid: Mysql2::Error: Incorrect string value: ....... .............. 原因 character_set_databaseとcharacter_set_serverの値がlatin1になって…

はじめに ActiveStorageを使ってAWSのS3に画像を保存する方法について。 ActiveStorageの設定 まずはActiveStorageをインストールします。 $ rails active_storage:install $ rails db:migrate 続いて、該当のモデルと関連付けします。 class Article < Appl…

はじめに railsのcredentials.yml.encを使って環境変数を設定する方法 credentials.yml.enc とは？ credentials.yml.encは環境変数をまとめておく場所です。 credentials.yml.enc自体は暗号化されていて、master.keyファイルによって復号化されます。 どちら…

はじめに railsアプリにGoogleFontsの日本語専用のフォントを導入する方法について 設定方法 まずはGoogleFontsの公式サイトに移動します。 googlefonts.github.io すると下記のようなトップページに遷移すると思います。 すこし下にスクロールすると、日本…

はじめに rubyからBingNewsSearchAPIを使って特定のニュース一覧を表示する方法について 前提 ・MicrosoftAzureアカウントにログインしている リソースを作成する まずAzureアカウントの検索窓でBing Search v7と検索してリソースを作成するページにいきます…

はじめに jqueryを使って、添付した画像をプレビューとして表示する方法について。 画像アップロード画面 画像アップロード画面のビューは下記の通りです。 <%= form_with url: image_search_bugs_path, method: :post, local: true do |f| %> <div class="form-group mb-3"> <p style="color: red;">※ファイル形</p></div>…

はじめに はじめて外部APIを使ってみたのでその内容を書きます。 順序 1：画像を送信する。 2：送信された画像をawsのs3を使って、bucketを指定して保存する。 3：rubyからAmazon RekognitonのAPIを叩いて、先程保存した画像を画像認識して、ラベルを取得す…

はじめに 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属性を指定し、第二引数に画…