オブジェクトの型を定義する 以下のように定義しました。 type MyObjA = { a1: string; a2: string } type MyObjB = { b1: string; b2: string } type MyObjC = { c1: string; c2: string } type MyObjUnion = MyObjA | MyObjB | MyObjC type MyObjAnd = MyO…

参考にさせていただいたページ GitHub - rails/webpacker: Use Webpack to manage app-like JavaScript modules in Rails はじめに webpackerよくわからなくてハマったときのメモです。 config/webpack/loaders/vue.js webpackであれば、webpack.config.jsの…

はじめに 以前書いた「Nuxt.js 2.x + TypeScript 4.x その0004 FontAwesomeの必要なアイコンだけ読み込んで使う - Motomichi Works Blog」みたいな感じでimportしたアイコンを、例えば自分で作ったMyComponentに渡すときにMyComponentのpropsの型はどのよう…

参考にさせていただいたページ 《Nuxt.js》Sassの共通の変数やmixinを一括で各コンポーネントに読み込む方法。 - Qiita GitHub - nuxt-community/style-resources-module: Nobody likes extra @import statements! style-resources-module のインストール 「…

参考にさせていただいたページ typescriptのバージョンを確認する | mebee 確認方法 以下のコマンドで確認できると思います。 npx tsc -v

はじめに 検索すると、クラスベースで書いてデコレータを使う方法については多くヒットしますが、Vue.extend()で書いている場合の方法についてはあまりヒットしなかったのでこの記事を書いています。 特に変わったことは書いていませんが。 今日の開発環境 N…

参考にさせていただいたページ 関数の型 - TypeScript Deep Dive 日本語版 はじめに いくつか方法がありますが、少し書いてみます。 後日もう少し充実させていこうと思います。 例として、以下のような「引数が2つあってオブジェクトを返す関数」の型を定義…

参考にさせていただいたページ Template Literal Typesについて TypeScript: Documentation - Template Literal Types 配列を元にStringLiteralTypesの型を定義する方法について TypeScript array to string literal type - Stack Overflow はじめに 以下の…

参考にさせていただいたページ keyof typeofの使い方 [TypeScript] - Qiita TypeScriptの型入門 - Qiita Index signature（インデックス型） - TypeScript Deep Dive 日本語版 はじめに 注意して使用しましょう。 「キーが未確定なobjectを先に作って後から…

参考にさせていただいたページ TypeScript 2.1のkeyofとかMapped typesがアツい - Qiita 今日のバージョン TypeScript 4.2.3 文字列の型について 以下のようにすると、変数keyの型はstringになります。 const key: string = 'keyNameA' 以下のようにすると、…

参考にさせていただいたページ 基本的なタイピング 今日の開発環境 Nuxt 2.14.12 TypeScript 4.2.3 定義する 「基本的なタイピング」をよく読むとよい。 ReturnType<typeof state> を使って、stateの型を定義する GetterTree, ActionTree, MutationTree を使う GetterTree</typeof>…

参考にさせていただいたページ ruby on rails - Is there a way to send key presses to Webkit using Capybara? - Stack Overflow keydownイベントを発火させる方法 もっと良い方法があるかもしれないけど、たぶんこんな感じ button = find('[data-test-id=…

参考にさせていただいたページ Capybara/Selenium: evaluate_script might freeze your browser, use execute_script - makandra dev 要素にfocusする方法 もっと良い方法があるかもしれないけど、たぶんこんな感じ。 page.execute_script("document.querySe…

はじめに 特にwebpackなどを使用して、Vue.jsをこれからはじめようという方に多いとは思いますが、以下のようなエラーがコンソールに出力されることがあります。 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is n…

参考にさせていただいたページ Vue.extendとnameオプションについて API — Vue.js | Vue.extendについて API — Vue.js | nameオプションについて メモリの割り当てを増やす Nuxt (+TS) の開発サーバーがメモリ不足でクラッシュする事象を暫定的に回避する Ja…

参考にさせていただいたページ Nuxtのaliasプロパティについて The alias Property - NuxtJS NuxtのrootDirについて rootDir プロパティ - NuxtJS NuxtのsrcDirについて The srcDir Property - NuxtJS TypeScriptのimportパスの解決について TypeScript: Doc…

参考にさせていただいたページ nuxt-fontawesome - npm Nuxt.jsでFontAwesomeを使う方法。必要なアイコンだけインポートする！ - Qiita 今日の開発環境 Nuxt 2.14.12 TypeScript 4.2.3 パッケージをインストールする パッケージを4つインストールします。 ya…

参考にさせていただいたページ Ignoring files - GitHub Docs 目的 リポジトリ毎に.DS_Storeを.gitignoreに書かなくても良いようにglobalに設定します。 手順 .gitignore_globalを作成して、.DS_Storeと記述します。 echo .DS_Store > ~/.gitignore_global …

参考にさせていただいたページ 公式ページ css プロパティ - NuxtJS その他のページ Nuxt.jsプロジェクトでDart Sassを使う | kimulaco blog 今日の開発環境 Nuxt 2.14.12 TypeScript 4.2.3 パッケージのインストール 公式ページに倣って以下の通りインスト…

checkboxでfalseを許容しない場合のrules falseでも値があればバリデーションが通ってしまうっぽいので、ValidationProviderに以下のような感じでオブジェクトを渡すと良いかも。 rules="{ required: { allowFalse: false } }" 例えば以下のようになる。 <ValidationProvider v-slot="{ errors }" rules="{ required: { allowFalse: false } }"> 〜</validationprovider>…

参考にさせていただいたページ dataLayer.push()を使用して計測をする Google Tag Manger から Google Analytics にカスタムイベントを送る方法 - Qiita プレビューモードの使い方 新しいGTMプレビューモードの使い方 前の記事 GoogleTagManager(GTM) その00…

参考にさせていただいたページ 公式ページ タグ マネージャーの設定とインストール - タグ マネージャー ヘルプ クリックイベントの計測を始めるための設定 Googleタグマネージャーでクリックイベントを計測する方法 - ランディングページ制作・改善 プレビ…

参考にさせていただいたページ Nuxtのeslintについて GitHub - nuxt-community/eslint-module: ESLint module for Nuxt.js TSのランタイムlintについて Lint - Nuxt TypeScript 今日の開発環境 Nuxt 2.14.12 TypeScript 4.2.3 前提 npx create-nuxt-appした…

参考にさせていただいたページ GitHub nuxt/create-nuxt-app create-nuxt-app/README.md at master · nuxt/create-nuxt-app · GitHub 公式ドキュメント 日本語: インストール - NuxtJS 英語: Installation - NuxtJS 今日の開発環境 Nuxt 2.14.12 TypeScript …

参考にさせていただいたページ disable eslint in vue template · Issue #260 · vuejs/eslint-plugin-vue · GitHub 範囲を無効化する 以下のように書くと、任意の複数行を無効化できるらしいです。有効化も忘れずにしましょう。 <div class="hoge" v-html="foo" /> あと以下の sanitize-html</div>…

参考にさせていただいたページ 【Rails】date_selectタグの使い方メモ - Qiita erb erbには例えば以下のような感じで書きます。セマンティックではないですが、多少なりと読みやすいようにulとliを使用しています。 <ul class="mod-datetime-selector-0001"> <li class="mod-datetime-selector-0001__date-field-wrapper"> <div class="mod-field-type-select-0001"> <%= f.datetime_select :start_at, { d</div></li></ul>…

参考にさせていただいたページ Railsの環境構築時にLibrary not loaded: /usr/local/opt/openssl/lib/libssl.1.0.0.dylib (LoadError)で苦しんだ - Qiita 今回起こっていた問題 bundle install をしたときに以下のエラーが出ました。 /Users/Hoge/.rbenv/ver…

はじめに 表題の通りですが、hexo generate してもpublic/css/style.cssが更新されませんでした。 まず確認 public/css/style.css の更新日を確認してみました。 このファイル自体の更新日が更新されているのであれば、ブラウザキャッシュなどの可能性があり…

参考にさせていただいたページ CSSファイル（等）が読み込まれているのに反映されない！！（Resource interpreted as Stylesheet but transferred with MIME type text/plain） - Qiita nginx.confを書きながら内容を理解する - Qiita Nginx設定のまとめ - Q…

参考にさせていただいたページ HTML5で追加された input[type=number] を使う上での注意 - Qiita Reconsider the behaviour for type="number" - restricting input · Issue #1355 · w3c/html · GitHub スマートフォンで数字キーボードに変更する（2015/01版…