npm install @nuxtjs/axios // nuxt.config.js export default { modules: ['@nuxtjs/axios'] } 参考 qiita.com

Nuxt.js v2のcomposition APIで使用できるカスタムフック。 カスタムフックは、Nuxt.jsのsetup()メソッド内で定義できる。 export default defineComponent({ setup() { useFetch(async () => { const result = await $http.$get( `https://api.nuxtjs.dev/m…

typesディレクトリに.d.tsの拡張子を持つファイルを作成してinterfaceで拡張する // plugins-types.d.ts import { Repository } from '@/api' declare module 'vue/types/vue' { // Vueインスタンス(this)の型追加 interface Vue { // プロパティ名: 型定義 …

pluginsディレクトリ以下にファイルを作成。 nuxt.config.jsにファイルを登録すれば使用することができる。 inject('呼び出し名', <共通の値または関数>) inject('repository', repositoryWithAxios) // this.$repositoryで呼び出せる 参考 nuxtjs.org blog.…

型定義ファイルとはアクセス可能な宣言を記述したファイルです。拡張子は.d.tsです。 参考 typescriptbook.jp

共通メソッドを定義する場所。 nuxt.config.jsにファイルを登録すれば使用することができる。 参考 https://qiita.com/kajikaji/items/5e3a7eeb390a044d6444 develop365.gitlab.io qiita.com

> !!! 参考 mgi.hatenablog.com

SportsCar型はCar型の部分型と言える。 type Car = { price: number } type SportsCar = { price: number; speed: number; }

以下の2つの関数の型定義は同じ意味になる。 type calc: (a: number) => number; const calc = (a: number) => number; 参考 maku.blog zenn.dev

関数宣言より前に関数を使用することができる。 （同一スコープの場合） calc(2, 5) function calc(a: number, b: number): number{ return a + b; }

オブジェクトのプロパティを簡単に変数に代入することができる。 変数に独自に型を与えることはできない。もともとのオブジェクトが持つ型が適用される。 const car = { price: 500, color: "red" } { price, color } = car console.log(price) // 500 conso…

provide,injectを使用する際の型の渡し方。 InjectionKey不使用 //親コンポーネント provide<型>(キー, 渡すデータ) ex) provide<string>("hoge", foo) //子コンポーネント const a = inject<型>(キー) ex) const a = inject<string>("hoge") InjectionKey使用 //親コンポー</string></string>…

型定義をする場合に引数を渡せる。 抽象度の高いコードを書くことができる。 type Car<T> = { color: string; option: T; } const car: Car<number> = { color: "red", option: 30 }</number></t>

typeof 変数がもつ型を取得する const foo: number = 1 //変数fooの型を取得してTに代入 type T = typeof foo //barはnumber型になる const bar: T = 2 型推論から型を取得して使いまわすことができる const obj = { color: "red", price: 200 } type S = ty…

型の定義は型を使用するコードの後に書いても問題ない。 コンパイルされて動作する為。 const car: Toyota = { price: 300, color: "red" } type Toyota = { price: number; color: string; }

型を上書きができる。型エラーが起こらないから使わない方が良い。 interface Test { foo: number } const test = {} as Test test.foo = 123 // OK!! 以下のようにいミューダブルなオブジェクトを作成する場合には使っても良い。 // resultの型が{}になって…

provide 親コンポーネントで渡したいデータを指定 inject 子コンポーネントで受け取りたいデータを指定 孫コンポーネントに直接データを渡すことはできるが兄弟コンポーネントには直接渡すことはできない。 // TypeScriptで型を指定して渡す方法 // "fuag"と…

コールバック関数とは、関数の呼び出し元に対して、特定の処理が完了した時に呼び出す関数を指定することで、非同期処理を行うために使用される関数です。 // callbackはsetTimeout関数の中で呼び出されるコールバック関数です。 setTimeout(callback, delay…

ReturnType、typeofの組み合わせで関数の戻り値を型として扱う書き方ができる const useNumber = () => { return { a: 'xxxx', .... } } const data = useNumber() type useNumerType = ReturnType<typeof useNumber> # 引数のdataに型定義ができる const processing = (data: </typeof>…

親コンポーネント内（以下のコードが書かれているファイル）のcorporationsという変数をAreaコンポーネント内でentitiesという変数名で参照できる。 子コンポーネントではpropsで # 親コンポーネント内 <Area :entities="corporations" /> # 子コンポーネント内 export default { props: [enti</area>…

computedプロパティはデータの変更に対して自動的に再計算されるプロパティです。 一方、普通の関数は明示的に呼び出される必要があります。 computedプロパティは、それが依存しているデータが変更された場合にのみ再計算されます。

ラインカバレッジ：その行が呼ばれているかを判断している。三項演算子等ワンライナーで書かれた場合その行が呼ばれていれば測定している事になる。 ブランチカバレッジ：条件分岐のみを対象としている。条件分岐のないファイルに関してはカバレッジが100パ…

まとめて関数をexportしている。 このファイルのみimportすればindex.ts でexportしているファイルの関数を全て利用することができる。 また、index.ts の場合、./ディレクトリ/index ではなく ./ディレクトリ と記載することで利用できます。 参考 kakkoyak…

以下のいずれかをコミットメッセージに入れる [skip ci] [ci skip] [no ci] [skip actions] [actions skip] 参考 techracho.bpsinc.jp https://docs.github.com/ja/actions/managing-workflow-runs/skipping-workflow-runs

transactionの中でActiveRecord::Rollbackが発生した場合ロールバックした後で例外は再送されない。戻り値はnilになる ActiveRecord::Base.transaction do # BEGIN user1.save! # 実行される（ROLLBACKで戻る） raise ActiveRecord::Rollback # ROLLBACK use…

JavaScriptを使う操作の後に画面上の表示が変化する場合はfindやhave_xxxを使うとCapybaraが自動的に処理が完了するまで（＝画面に変化が現れるまで）待ってくれます。（デフォルトの待ち時間は最大2秒間です） sleepはテストが遅くなる原因になる為使用しな…

spec/mailers/previews 以下にActionMailer::Previewを継承したクラスを作成 プレビューには、メールオブジェクトを return するメソッドを実装する rails/mailersにアクセスすると一覧が見れる http://localhost:10000/rails/mailers class UserPreview < A…

多対多のリレーションを持つモデルの片方を作成する場合 パラメータにもう片方の モデル名+ids のパラメータ名で複数のidを持たせる。 そうすると、そのidと作成するモデル側のidを使って中間テーブルが自動的に作られる。 User has_many :groups, through: …

// 空のオブジェクトを用意 const obj = {}; console.log( Object.keys(obj).length === 0 ); // true また、「key」の長さを取得して「0」であれば「0」は真偽値で「false」扱いとなるので、「!」で反転させることで判定することが可能です。 console.log(!…

load_defaultsもnew_framework_defaults_x_xも指定しない場合はどの設定が使われているかわからない。 参考 qiita.com