えぐろぐ

https://twitter.com/eggpogg

Vuex で変更通知が正常に動かなかったときのメモ

State の初期値を undefined で初期化するときに 以下は正常に変更通知を受け取れるが export type StateType = { hoge?: Hoge} export const state = (): StateType => ({ hoge: undefined }) export type ConfigState = ReturnType<typeof state> 以下は変更通知を受け取</typeof>…

Intellij x husky x nodenv 時に pre-commit が失敗したときの対応

Intellij IDEA で日頃開発をしており、Project で npm の husky を使って、 pre-commit 時に lint チェックをしていたが、 Intellij 内の Git から commit をしたときだけ以下のエラーになりcommit が正常にできないことがあった。 ※ terminal から git comm…

NestJS のMiddleware 内でModuleのServiceを使用する

たいした話ではないけど、実装中にハマったのでメモ MiddlewareはInjectableのデコレータをつけて、 NestMiddlewareをimplementsして、useメソッドを実装すれば使える Injectしたい値は他のControllerなどと同じで、constructorで設定をしてあげれば良い //…

TypeScript x Express x Session の実装

ちょくちょく express-session を使うのだけど実装方法を、 その都度調べながらやっているので、やり方をメモ... SessionOptionsを書き換えて使う // session.ts import * as express from 'express'; import * as ExpressSession from 'express-session'; …

Nuxt x TypeScript で拡張関数の設定

TypeScriptで拡張関数を記述できることを知ったのでNuxtに組み込んでみた kakkoyakakko2.hatenablog.com 1度でも読み込まれれば良いので、 今回はPluginとして読み込ませるようにした 拡張ファイルを記述する 今回は1つだけだけど、複数増えるときはファイル…

久しぶりにOSS活動をした

DeepLAPIのAPIClientを作っているdeep-clientの日本語の値が 間違っていたのでPRを送ったら速攻でマージされた. github.com 送ったPR github.com たいした修正ではないけど、 やはり承認欲求が得られて良い ただ、久しぶりにOSS活動すると やり方を忘れるの…

Nuxt x TypeScript でVuetifyのComponentのメソッドの呼び出し方

VuetifyがまだTypeScriptに対応していない状態なので、 自分でVFormのinterfaceを作成をして、$refsの値をキャストすることで使用できる。 <template> <div> <v-form ref="form"></v-form> </div> </template> <script lang="ts"> import Vue from 'vue' interface VForm extends Vue { reset(): void resetValidation(): void validate(): b…

Nuxt x TypeScript の $refs で Vueコンポーネントの関数の呼び方

// components/Hoge.vue <template> <div></div> </template> <script lang="ts"> import Vue from 'vue' export default Vue.extend({ name: 'Hoge', methods: { moge(): string { return 'moge' }, }, }) </script> // page/index.vue <template> <div> <Hoge ref="hoge" /> </div> </template> <script lang="ts"> impor…

Typescriptの index signature の key には 他の type は使えないよって話

type UserId = string type Users = { [key: UserId]: User } // error: An index signature parameter type cannot be a type alias. Consider writing '[key: string]: string' instead. index signature の key には string or number しか使えないので、…

LINEの料金プランを調べた思ったこと

仕事でLINEのボットを作るかもということで、料金体系を調べた。 ベース料金 + メッセージの従量課金 で利用料金がかかるだけだった。 LINEログインや友達登録は課金対象ではない LINE さん すごい! とおもったのですが、 www.linebiz.com 100万人のユーザ…

IntelliJの Scratch で TypeScript の実行方法

結論から書くとこのプラグインを入れるだけ plugins.jetbrains.com すると、scratch.ts で自動でファイルの拡張子から 実行するConfigurationを組み立ててくれる intellij typescript scratch run とかでググってみると 以下のようなフォーラムとか出てきて…

macOSでfinderからビデオサイズを小さくする方法

githubで動画投稿ができるようになったけど、10mb未満しか対応していないので 動画をエンコードしてサイズを小さくする方法を調べたのでメモしておく。 外部アプリを入れるくことなく、finderから該当のファイルで右クリックをして サービス -> 選択したビデ…

Heroku x Route53 でルートドメインで遷移できるようにする

Heroku x Route53 でルートドメインで遷移できるようにする

prettierは改行を保持できない....ということを知った

コードを書く時に、下に長く書く事が多いタイプです。 なので、チェーンで繋いでいる時にも下に書いていきたいのですが、 prettierをformatterに使っていると、改行が保持されずに削除されてしまう... これが this.$store .state .map((it) => it.moge) こう…

Typescript x ESLint で引数のみ使用を許可する方法

Javaでやってきた身としては、エラーではなく残しておいてほしかったので調べた。 // .eslint.js rules: { 'no-unused-vars': 'off', '@typescript-eslint/no-unused-vars': ['error', { args: 'none' }], }, オプションの詳しいのはここ乗っている。 eslint…

Nuxt x TypeScriptでStoreで自作プラグインの使う方法

this.$zisakuに返す型を定義して、interface Storeに渡してあげれば良い // plugins/zisaku.ts import { Plugin } from '@nuxt/types' export interface Zisaku { hoge: () => void fuga: string } const zisaku = { hoge: () => { console.log('hoge') }, f…

AndroidのTextInputLayoutが表示できなかった時の対応

Activityを持たないViewだけの生成で com.google.android.material.textfield.TextInputLayout を使おうと思った時に以下のエラーが発生した。 Caused by: java.lang.IllegalArgumentException: The style on this component requires your app theme to be …

nuxt x TypeScripts で $axios を読み込ませる

$axiosを読み込ませたいだけならindex.d.tsに import を追加するだけで良い // index.d.ts import { NuxtAxiosInstance } from '@nuxtjs/axios' あとは、以下のあたりが自動で読み込まれて設定される github.com もっと細か追加したい場合は、 以下を参考に…

TypeScriptsでnew URL をする時のエラー

以下のように書いていたら import * as url from "url" const url = new url.URL("https://google.com") 以下のエラーがコンソールに出力された TypeError: undefined is not a constructor (evaluating 'new url__WEBPACK_IMPORTED_MODULE_9__["URL"] 調べ…

Nuxtのstoreのサンプル

// store/index.js export const state = () => ({ count: 0, }) export const mutations = { increment(state) { state.count += 1 }, increment_async(state, payload) { state.count += payload.value }, } export const actions = { async increment({ c…

Evernoteのプレミアム会員になった

プレミアムプランが40%OFFだった(年\3129) と 独学の技法を読んで読んだ本ののClipをしていこうと思った。 あと、無駄にブックマークしていたブログなどもClipもしていく。 知的戦闘力を高める 独学の技法作者:山口周発売日: 2017/11/17メディア: Kindle版 …

NuxtでasyncDataからエラー画面に遷移させる

context内にerror関数があるのでそれを使う asyncData: async ({$apiClient, error}) => { const {err, item} = await $apiClient.getItem() if (err) { if (err.status === 404) { error({statusCode: 404}); } else { error({statusCode: 500}); } return …

Sandsをkarabiner-elementsに変更をした

BigSur にしてから SandS アプリが使えなかったので、 Karabiner-Elements に SandSの機能だけ移行した 1. caskのインストール方法が変わったので気をつける brew install --cask karabiner-elements 2. 以下のコードをここにコピー vim ~/.config/karabiner…

Nuxtの targetとssrの調査

target render 挙動 成果物 備考 server サーバー SSR /.nuxt 動的ホスティング server クライアント SPA /.nuxt, /dist distもできるけど不要っぽい 動的ホスティング static サーバー SSG(JAMStack) or SPA /dist 静的ホスティングのみでOk static クライ…

EVERINGをしった

指輪でタッチ決済できるのいいな 👀 と思ったけど、 AppleWatchで事足りているのでいらないという判断 EVERING - Touch Everything メリットは以下くらい? 充電不要 風呂のときも外す必要ない とりあえず、様子見してみる

Macの画面収録方法

使おうとするたびに忘れるのでメモ。 録画開始 command + shift + 5 録画終了 command + control + esc Mac で画面を収録する方法 - Apple サポート

Nuxtの開発でSafariを使った時の無限リフレッシュの解消法

nuxt.config.jsに以下を記述する 開発環境のときだけ、キャッシュをさせないようにHeaderに明記している issueをみるとSafariのバグが原因っぽい。 // nuxt.config.js { build: { devMiddleware: { headers: { 'Cache-Control': 'no-store', Vary: '*' } } …

Nuxt x TypeScript x OptionAPI での data に DOM を保持する書き方

nonNullにして記述したかったので、 以下のように {} as HTMLCanvasElement として宣言している data: () => { return { canvasDOM: {} as HTMLCanvasElement, } }, Lazy Object Literal Initialization - TypeScript Deep Dive 日本語版

Nuxt x TypeScript に loglevel をプラグインとして追加する

設定方法 // ./plagins/logger.ts import { Plugin } from '@nuxt/types' import * as log from 'loglevel' log.setLevel('trace') const plugin: Plugin = (context, inject) => inject('log', log) export default plugin // ./nuxt.config.js plugins: [ …

FlutterでFirestoreのReferenceを取得する

FlutterでFirestoreのReferenceを取得する