Vue.jsの単一ファイルコンポーネントの型チェックを行う場合、webpackでts-loaderを用いて、 build時に型チェックを走らせるやり方があると思うのですが、その場合ts-loaderのtranspileOnlyを有効に出来ないので、build時間がネックになったりします。。。 C…

テキスト内のリンクを検出して自動的にリンク用のコンポーネントをレンダリングするみたいなことをするときにどうするのが良いのかよくわかってなかったので調べて、ちょっと実装してみた内容をメモしておきます(もっといいいやり方があるかも知れないです) …

Composition APIを色々触ってみたので使い方等をメモしておきます Composition APIとは 簡単な使い方 install 有効化 Componentの定義 data computed methods props emit Options APIからComposition APIへの書き換え Options API Composition API おわりに …

Webpackerのversion5.1からts-loaderではなく、@babel/preset-typescriptを使うようになりました✨ github.com これによりwebapckのbuild実行時の型チェックをfork-ts-checker-webpack-pluginを使うように変更になりました github.com しかし、デフォルトだと…

自分でwebpack + TypeScript + Vue.jsの環境を作ったので、勉強がてらYouTube Data APIを使ってTikTokぽく見れるViewerを作ってみました 動作はこんな感じです(デザインはいまいちですが・・・) 触ってみたい人はこちらから(YouTube Data APIのAPI KEYが必要…

Vue.jsをTypeScriptで書くときには、vue-class-componentやvue-propaty-decoratorを使うような情報ふが多いですが、Vue.extendを使うとそれらを使わないピュアなVue.jsでもTypeScriptを使って書くことが出来ます。 jp.vuejs.org そのへんの書き方とかを、あ…

事象 WebpackでTypeScript + Vue.jsの環境構築時にlang=tsを指定したComponentを.tsファイルでimportしたときに下記のエラーが発生し、コンポーネントを読み込むことが出来なかった componentNormalizer.js:26 Uncaught TypeError: Cannot set property 'ren…

最近Nuxt.jsで作成しているアプリケーションに後からjestを導入したので、その辺の手順をメモしておきます Jestとは？ Nuxt.jsにJestを導入する 前提 依存ライブラリのインストール Jestの設定 Jestの実行コマンドを追加 テスト用のファイル.spec.jsを追加 …

最近Nuxt.jsで作ったプロジェクトを作成後に後からTypeScriptを導入したときに色々とハマりどころがあったのでメモしておく。 前提 今回のNuxt.jsとTypeScriptのバージョン情報は下記のとおりです。 nuxt: 2.10.2 typescript: 3.7.4 また私が最初にNuxt.jsの…

昨今、フロントとバックエンドを別々のリポジトリにしてOpenApiでインターフェースを定義して進むプロジェクトが増えてきていると感じていますが、OpenApiとか全然付いていけてないので個人でNuxt.jsとRuby on Railsが別々のコンテナで立ち上がる環境を作っ…

最近自分の個人サービスのRailsアプリケーションをWebpaker3系(3.5.5)から4系(4.0.7)にアップグレードしたのですが、割とハマったので手順をメモしておく✍ ちなみにVue.jsを使っている場合の手順になるので、ご注意ください⚠ とりあえず手順だけ package.jso…

はてなブログの記事を取得してカード表示するVueComponentを作ったので、そのへんの話をメモしておきますm( )m コードだけ見たい人はこちら はてなブログの記事をカードで表示するVueコンポーネント · GitHub イメージ このような形で表示されます 使い方 Bl…

Vue.jsを使っていて親要素から子要素へpropsを使ってimgタグのsrc属性を設定する方法で、ハチャメチャにハマってましたが、一応出来たのでやり方をメモしておきます✍ 今回やりたかったこと 解決策 今回やりたかったこと 下記のような親子関係のコンポーネン…

みなさん、こんにちは(・∀・) 今回は、vue-cliでつくったアプリをGithubPageを使ってサクッと公開する方法をメモします✍ ちなみに公開したサービスはこちら、タブが使えるMarkdownEditor「MTM」というサービスです madogiwa0124.github.io 環境 私の使ってい…

自分が作っているSPAっぽいrailsのサービスでrailsとVueで無限スクロール∞を作ったので、そのやり方をメモしておきますm( )m つくるもの 使うもの 実際のコード View Controller Model おわりに 参考 つくるもの 下記のようにスクロール時にAPIでデータを取…

最近MarkdownEditorのサービスを作っていて、作成したMarkdownファイルをjavascriptでダウンロード処理を実装したので、 やり方をMEMOしておきますφ(･･ やったこと 実際のコード 参考 やったこと 私のサービスではMarkdownファイルをダウンロードする機能を…

railsのviewからVueの単一ファイルコンポーネントへモデルのインスタンスをいい感じに渡す方法を模索して、結構ハマってたのですが、自分なりに落ち着いたのでやり方をメモしておきます✍ 今回やりたかったこと どうやったか 参考 今回やりたかったこと やり…

下記のような2つのVueインスタンスあり、別のVueインスタンスのdataの値を参照したいときに少しハマったので、ちょっとバッドプラクティス感ありますが対応方法をメモメモφ(･･ 結論としては、下記のようにすればできた 参照したいVueインスタンスを変数に入…