大ちゃんの駆け出し技術ブログ

RUNTEQ受講生のかわいいといわれるアウトプットブログ

【Rails】【Vue】Form Objectとの連携

はじめに こんにちは!大ちゃんの駆け出し技術ブログです。 PF制作で使用したVueからForm Objectを使用した連携方法について記事が少なかったのでここに記事として残しておこうと思いました。 PF制作では以下のようなカードを実装したいと思いました。1つの…

【Vue】vee-Validatorのメッセージをリセット

vee-Validatorの副作用 こんにちは!大ちゃんの駆け出し技術ブログです。 今日は文章量少なめです PF制作時にvee-Validatorのフォームで少し困ったことがありました。 下記のように入力フォームにバリデーションをしていたとします。未入力の場合バリデーシ…

【Gem】ActiveModelSerializers

はじめに こんにちは!大ちゃんの駆け出し技術ブログです。 RailsでAPIモードを使用してJSONデータを受け取る時にActiveModelSerializersというgemがとても重宝したので紹介します。JSONのレンダーを簡易的に行ってくれるので、Vue.jsなどを使用する場合は是…

【Vue】【自戒】computedとmethodsの相違点

過ち こんにちは!大ちゃんの駆け出し技術ブログです。 今回はタイトルに【自戒】とあるように同じ過ちを繰り返さないために書いている記事になります笑 何をやらかしたのかというと、Vueファイルに下記のようなコードを書いた事です。 <template> ・ ・ {{ translateG</template>…

【Gem】Banken

はじめに こんにちは!大ちゃんの駆け出し技術ブログです。 2ヶ月ほど前にPunditの記事を書きましたが、今回はそれとよく似たgemのBankenについて書いていきたいと思います。 こちらのgemを作ってくださったのは日本人の方で英語のドキュメントだけでなく日…

【Vue】moment-js

vue

moment-jsとは こんにちは!大ちゃんの駆け出し技術ブログです。 この記事では日付フォーマットを変換するプラグインのmoment-jsについて紹介します。自分のPF作成で使用したため忘れぬうちにアウトプットさせていただきます。 Moment.js | Home 今回自分が…

【Vue】VeeValidate

はじめに こんにちは!大ちゃんの駆け出し技術ブログです。 本日はveeValidateについてのアウトプットです。 これはフォームを入力時にフロント側でバリデーションしてくれる機能ですね。 これを使うと以下のようにリアルタイムでバリデーションのメッセージ…

【Vue】axios - Base URLの指定方法

Base URLの必要性 こんにちは!大ちゃんの駆け出し技術ブログです。 本日のショートアウトプットはaxiosのbase URLの指定方法です。 axiosとはvue.jsでAPI通信によるJSON取得時に使われるHTTPクライアントです。 axios を利用した API の使用 - Vue.js アプ…

【Vue】slot

はじめに こんにちは!大ちゃんの駆け出し技術ブログです。 今月は主なアウトプットとしてvueを題材にしたものを書きます 大体が短いアウトプットで終わると思うので、いつもみたいな長い記事ではないかなと思います。 基本的な用途 本記事ではslotについて…

【Rspec】devise + slack-omniauthのテスト方法

はじめに こんにちは!大ちゃんの駆け出し技術ブログです。 今回はPFにあたり詰まった「devise + slack-omniauthのテスト方法」を紹介します。 slackログインの正式な方法についてはQiitaにてあげる予定ですが、記憶が新しいうちに紹介しておきたく、、、! …

【Devise】Rememberable

はじめに こんにちは!大ちゃんの駆け出し技術ブログです。 deviseのモデル設定に関する記事も連続投稿3投目! 今回はRememberableについてざっくり理解していきたいと思います! しかし、連続投稿としては今回で最後にします。理由としてはポートフォリオ制…

【Devise】Recoverable

はじめに こんにちは!大ちゃんの駆け出し技術ブログです。 今回も一つ前の投稿と同じようにdeviseのモデル設定についての記事となります。 今回はRecoverableについてざっくりとgemの中身を見ながら理解していきます。 概要 モデルやモデルに対応するテーブ…

【Devise】Database authenticatable

Deviseによるモデル設定 こんにちは!大ちゃんの駆け出し技術ブログです。 最近deviseをなんとなくで使い始めましたが、本当に多機能で理解が追いついていません。なので、何回かに分けて記事にしようと思います。 今回はDeviseのモデル設定についてです。公…

【Gem】taskleafに無理やりdeviseを導入

はじめに こんにちは!大ちゃんの駆け出し技術ブログです! 今回は有名なログインgemであるdeviseについて解説します。 RUNTEQでは基本的にdeviseではなくsorceryというgemを使ってログイン機能を学びます。しかし、今回自分のPFにはdeviseを使うことにしま…

【Gem】dotenv

概要 今回はPFを作成するにあたり使用したgemであるdotenv-railsの紹介です。 github.com 用途としては以下のように説明されてます。 Storing configuration in the environment is one of the tenets of a twelve-factor app. Anything that is likely to c…

devise - You are using an old OmniAuth version, please ensure you have 1.0.0.pr2 version or later installed. (RuntimeError)の修正

deiviseでの外部認証の導入時 現在ポートフォリオ作成でsign in with slack機能を実装しようとしています。twitterログイン等の外部リソースを用いた認証ログインのslackバージョンです。 api.slack.com これを導入するにあたり、deviseを使用しようと思いイ…

Tailwind

はじめに こんにちは!大ちゃんの駆け出し技術ブログです! 毎日投稿をしていたので6日ぶりの投稿でもかなり久しぶりの投稿と感じてしまいます、、! 現在PFを開発中で隙間時間にVueJSを学習しています。 PF開発への集中やVueJSの楽しさにかまけてブログの投…

働きながらでも技術ブログを続ける方法

はじめに こんにちは!大ちゃんの駆け出し技術ブログです。 こちらの記事で2月中の毎日投稿終了です!!!!!!! 本当にお疲れ様!自分!!!! 正直ネタが切れたりエラーに詰まったりして書くのがすごくしんどくなり、低クオリティ記事を量産してしまった…

【自戒】継承関係を把握しようという話。

はじめに こんにちは!大ちゃんの駆け出し技術ブログです。 2月の毎日投稿達成まで本記事を合わせて残すところ2つとなりました。 正直に言うと最近はPF課題で詰まってましたので、新しい知識が学べない状況でして、そろそろネタ切れ感がうっすらと伝わってな…

partialについて解説

はじめに こんにちは!大ちゃんの駆け出し技術ブログです。 本記事では複数のページで共通のファイルを利用するための機能であるパーシャルについて解説をします。 基礎編を学習していた時のメモを見つけたため、初学者向けに記事を作ろうかなと思ったためで…

【リクエストスペック②】リクエストスペックの作成

はじめに こんにちは!大ちゃんの駆け出し技術ブログです。 1日空けてしまいましたが、本日はリクエストスペックの記述方法についてまとめていきたいと思います。 先日出した記事ではAPIの概要などを簡単に紹介しました。 sakitadaiki.hatenablog.com 本記事…

フラッシュメッセージの実装

フラッシュメッセージとは こんにちは!大ちゃんの駆け出し技術ブログです。 ユーザー側の入力に基づいて処理が行われた際に、その処理の結果をユーザー側にわかるように表示されるメッセージのことです。例えば、アカウント登録、アカウント情報の更新の処…

【リクエストスペック①】APIの取得

はじめに こんにちは!大ちゃんの駆け出し技術ブログです。 今回はタイトルにもある通り、リクエストスペックについて書きたいと思います。 しかし、リクエストスペックを説明するためにはAPIの説明が必要不可欠となるため、今回はAPI情報の取得方法、次回は…

【RSpec②】have_selectorの画像検証

はじめに こんにちは!大ちゃんの駆け出し技術ブログです。 RSpecの紹介シリーズ第二弾!今回はhave_selectorの画像検証とあるようにhave_selectorについてです! 応用編が終わり個人的にRSpecを最近書く機会が少なくなってきたので、RSpecについてはなるべ…

【RSpec】supportディレクトリ

はじめに こんにちは!大ちゃんの駆け出し技術ブログです。 supportディレクトリと聞かれてRSpecについてのこととピンとくる方はいらっしゃいますか?supportディレクトリを一言で表すと、「RSpecの設定だったりmoduleファイルを一箇所にまとめておくための…

【バリデーション】acceptance

はじめに こんにちは!大ちゃんの駆け出し技術ブログです。 以前、バリデーションヘルパーであるnumericalityについて記事を書きました。 sakitadaiki.hatenablog.com このバリデーションはRUNTEQのカリキュラムの応用編で使用したのですが、実際調べればす…

【RSpec】within

はじめに こんにちは!大ちゃんの駆け出し技術ブログです。 本日はかなりの短いアウトプットとなります。ど平日で仕事終わりに書いておりますが、少し体調が悪く疲れているのです!!!(言い訳ですが、、、) 本日はRUNTEQのカリキュラムの中で、これまでに学…

【バリデーション】numericality

はじめに こんにちは!大ちゃんの駆け出し技術ブログです。 本記事ではnumericalityについて説明します。 これは数値に対して使われるバリデーションです。例えば、整数しか入力できないとか、〇〇以上〇〇未満しか入力できない、といった制約をつけることが…

N + 1問題

はじめに Ruby on RailsなどDB(データベース)を使用するサーバーサイド言語で必ず上がる「N + 1問題」。 主に1対多のアソシエーション関係がある時に起こる問題です。 Railsでは一覧表示機能を含む1対多の関係が不可欠な機能が実装されるので、N + 1問題は理…

Swiperをカスタマイズ

はじめに こんにちは!大ちゃんの駆け出し技術ブログです。 昨日出した記事ではSwiperの公式ドキュメントに合わせて、既存のscaffloldの雛形アプリケーションに追加して以下のようなスライダー画面を実装しました。 sakitadaiki.hatenablog.com 本日はSwiper…