Madogiwa Blog

主に技術系の学習メモに使っていきます。

Vue

Nuxt.jsのプロジェクトにJestを導入するMEMO👢

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

Nuxt.jsに後からTypeSctiptを導入するときのMEMO📝

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

DockerでNuxt.jsとRailsの環境を作った

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

webpacker3系からwebpacker4系へのアップグレードでハマったので手順とかMemo✍

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

はてなブログの記事を取得してカード表示するVueComponentを作った📦✨

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

Vue.jsでpropsを使ってimgタグのsrc属性を設定する方法

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

vue-cliで作ったアプリをGithub Pagesでサクッとリリースする

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

railsとVueを使って無限スクロール機能を実装するMEMO🌀

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

javascript: ファイルダウンロード処理を実装するMEMO

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

railsのViewからVueの単一ファイルコンポーネントへモデルのインスタンスを受け渡すMEMO

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

Vue.js: 異なるVueインスタンスのdataの値を取得する方法

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