jest.config.jsの設定を見直す 実行時に警告が出てくる場合は、以下の設定をjest.config.jsに追加しましょう。 webpackを導入しているならpackage.jsonに記載してもOKです。 transform: { ... 'vee-validate/dist/rules': 'babel-jest', }, transformIgnorePatterns: [ '<rootDir>/node_modules/(?!vee-validate/dist/rules)', ], 参考：Testing Caveats | VeeValidate https://logaretm.github.io/vee-validate/advanced/testing.html#asynchronous-testing setup時にVeeValidateのコンポーネントを読み込む

はじめに jestは、javascriptやtypescriptのテストツールです。 jest.spyOn()とjest.mock()は、どちらもメソッドをmockするためのもので、テストコードの中でモック関数を定義する際に使用します。 どちらも同じようなことが出来るのですが、いつもいざ使おうとしたときに混同してしまいがちなので、備忘録としてまとめてみました。 環境 テストを作成した環境は、以下の通りです。 node: 12.19.0 @types/jest: 26.0.19 jest: 26.6.3 ts-jest: 26.4.4 ts-node: 9.0.0 typescript: 4.1.2 基本的な使い方 jest.spyOn()は、オブジェクトを引数に指定するのに対し、jest.mock()は、モジュールを引数に指定します。 つまり、mockの対象が引数に指定したオブジェクトだけ

本文書はJestとVue Test Utilを利用したVue.jsでのテストに関する2回目の記事で2回目となる今回はテスト入門者にとって少しわかりずらいStub(スタブ)やMock(モック)、Shallow Mountに注目して説明を行っています。 Stub, ShallowMountとMountの違いを説明した後にVue.jsのHTTPリクエストで頻繁に利用されるaxiosのMock(モック)の方法についても説明を行っています。コンポーネントの単体テストでは、axiosライブラリやfetch関数を利用した外部へのアクセスを伴う機能を実装している場合モックを利用することで外部へのアクセスを行うことなくコンポーネントのテストを実施することができます。 Vueでのテストを実施したまたは学習した経験がない人であれば先に前回公開した”【基本編】Jestを利用してVue コンポーネントをテストする方

こんにちは、CX事業本部 IoT事業部の若槻です。 JavaScriptのテスティングフレームワークJestでは、テスト対象のModuleやFunctionのモックを作成するためのJest Objectがいくつか用意されています。 The Jest Object · Jest 今回は、そのJest Objectのうちのjest.spyOn()の基本的な使い方を確認してみました。 確認してみた 確認を実施した環境は次の通りです。 npm ls jest typescript --depth=0 hoge-project@0.1.0 ├── jest@26.6.3 └── typescript@3.9.10 jest.spyOn(object, methodName) jest.spyOn(object, methodName)を使用すると、Methodを含んだObjectのmock func

本カレンダーは、Qiita Top Contributor の @suin さんからのお題です。 みなさまの素敵な記事をお待ちしています。 今回のお題 もしも、あの頃に。 TypeScript始めたてのあの頃に戻れるとしたら──。 時間跳躍(タイムリープ)TypeScript 想像してみてください！TypeScriptを始めた当時の自分に何か伝えられるとしたら、何を伝えたいですか？ TypeScriptを使いだしてから、いろいろなことを学んできたはずです。 その中で、最初から知っていたら良かったと思うことはありませんか？ このカレンダーのテーマは「TypeScript始めたての頃に知っておきたかったこと」です。 TypeScriptを始めて間もない人も、バリバリにTypeScriptを使いこなしている人も、自分が学び始めだった頃を思い起こして、その当時に知っておいたら良かったことをご投稿く

はじめに Vue Advent Calendar 2019 9日目の記事です。 担当は@yktm31です。 Composition APIとは、Vue３から導入予定の新しいAPIです。 海外Vueカンファレンスでは、今や必ずトピックに上がるほど注目されています。 本記事では、そんなComposition APIでモリモリ開発する際の実装方針やTipsについて書いていきます。 扱う内容は、以下の6つです。 1. ディレクトリ構成 / 設計方針 2. Route 3. 状態管理 4. ComposableなRepositoryFactory 5. ComposableなPolling 6. テスト 今回、上記の要素を含んだ簡易なサンプルを作成しましたので、宜しければ参考にしてください。 Github <目次> はじめに Main Contents 1. ディレクトリ構成 / 設計方針 ①〜③

親から子テンプレートにdataオブジェクトで指定したデータを引き渡す際に、子にpropsオブジェクトを定義して、その中で受け取るプロパティを記述します。 その際、引き渡すデータの型や、必須かどうか、デフォルト値などのバリデーションを加えることができます。 各指定方法には様々な書き方があったり、正しくかかないとエラーになったりするので注意が必要です。 ここでは、type, default, requiredを使ったpropsのプロパティのバリデーション方法や注意点を実例でまとめています。

事業会社のマーケティング部門に所属する匿名マーケター・みる兄さんが話題のプロダクトを考察する連載の第5回は、ビーズソファやクッションなどのリラックスアイテムで知られるYogiboを考察します。アメリカで誕生したYogiboが日本国内で着実に認知を拡大し、売上を伸ばしていったのはなぜなのか、「認知」「配荷」「プレファレンス」の観点で解説していきます。 今回のテーマは、Yogiboの日本国内の取り組みを森岡毅氏の著書『確率思考の戦略論』を参考図書として用い、そのマーケティング戦略とブランディングをひもといていきたいと思います。 2022年1月に入り、Yogiboと国内代理店契約を結ぶウェブシャークが米国Yogiboを買収してニュースになりました。SNSでも話題になっていたのでご存じの方も多いと思います。日本の販売代理店がブランド本体を買収する事例は、事業会社でサービス開発やマーケティングを担っ

ベイジ代表の枌谷力さんが昨年（2021年）11月に投稿したツイートに驚きました。社内勉強会にゲストを招いてキャリアの話をすることがあり、社員にオススメの転職本を紹介することもあるというのです。 ツイートには「本心は他の会社に転職してほしくない」とありますが、会社の代表が転職について想起させる本を勧めるなど、あまり聞いたことがありません。その真意は何か。枌谷さんのところに伺うと、ツイートの内容以上に驚くべき話を聞くことができました。 （取材・文：Marketing Native編集部・早川 巧、撮影：矢島 宏樹） ※ベイジ社内勉強会資料は記事の最後にあります。 綺麗事でないキャリア論に真剣に向き合うべき理由 ――このツイートを拝見し、驚きました。社内勉強会でゲストを招いてキャリアの話をしたり、会社の代表自らおすすめの「転職本」を紹介したりするのは異例だと思います。社員が外部の人と接触するのを

Vite（ヴィート＝フランス語で「速い」の意味）は2020年に発表された新しいフロントエンドのビルドツールです。 開発者がVue.jsの作者であるEvan You氏であるため、Vue.jsのツールであると誤解されることもありますが、プレーンなJavaScript（バニラJS）からVue.js・React・Svelteといった流行のフレームワークまで、さまざまな環境で利用できる汎用的なツールです。 位置付けとしてはwebpackのようなバンドラーと呼ばれるものに近い存在ですが、それだけではありません。この記事では、Viteを導入してプレーンなJavaScriptから、TypeScript+Vue.js・Reactといったフレームワークまで、快適な開発環境を手に入れる方法を紹介します。 この記事で紹介すること： Viteの特徴と基本の仕組み 基本の使い方 Vite + SCSS Vite +

Vite（ヴィート＝フランス語で「速い」の意味）は2020年に発表された新しいフロントエンドのビルドツールです。 開発者がVue.jsの作者であるEvan You氏であるため、Vue.jsのツールであると誤解されることもありますが、プレーンなJavaScript（バニラJS）からVue.js・React・Svelteといった流行のフレームワークまで、さまざまな環境で利用できる汎用的なツールです。 位置付けとしてはwebpackのようなバンドラーと呼ばれるものに近い存在ですが、それだけではありません。この記事では、Viteを導入してプレーンなJavaScriptから、TypeScript+Vue.js・Reactといったフレームワークまで、快適な開発環境を手に入れる方法を紹介します。 この記事で紹介すること： Viteの特徴と基本の仕組み 基本の使い方 Vite + SCSS Vite +

やっぱりwebpackがわからない（エピソード2）、そもそもnpmからわからないを公開しました。 webpackがわからない 最近はViteが注目されだして、実際にとても良いビルドツールです。Vue.jsのEvan Youさんが開発しただけのことはありますね。ネーミングもイカしてます。しかし、だからといって、では開発環境にViteを採用しようと簡単にはできないのが、業務の辛い所です。新しい技術を採用して、「わしが全責任を引き受けるぜよ」というThe 男気！な人はなかなかいません。 したがって、当分はwebpackを使い続けることになるのですが、これが未だによくわからないという人が意外と多いです。フロントエンドプログラミングの初心者に近い人などは、この段階でつまずくことにより、すっかり自信をなくしてしまうこともあります。 ですが一先ず安心してください。webpackを含むこれらフロントエンド

React 製アプリケーションのビルドシステムを webpack から Vite に移行して爆速な開発体験を手に入れよう wakamsha Vite （ヴィート）とは Vue.js の作者である Evan You 氏が中心となって開発されているビルドツールです。 Vite - Next Generation Frontend Tooling ES Modules 形式のままブラウザからインポートする Dev サーバを搭載し、ソースコードをバンドルすることなく高速で動作させるのが特徴です。もちろん npm パッケージもブラウザから読み込み可能な ES Modules 形式に変換します。プロダクションビルド時は Rollup を使ってバンドルします。 Vue.js だけでなく React、Preact、Svelte のビルドもサポートしており、GitHub トレンドの上位にも頻繁に登場している

Babelって結局なんなんだ 定義 構成要素 babel-core babel-polyfill Plugins 最新の記法でJSを書くにはどうしたらいいんだ 最低限の設定方法 1. Installする 2. .babelrcに設定を書く 3. polyfillをrequireする 4. Babeる(Babelでコンパイルする) Webpackと組み合わせた実践例 キホンのキ polyfillの機能を制限なく使いたい、でも無駄なものは入れたくない 「二重読み込み制約」のリスクを背負わずにpolyfillを使いたい グローバルを汚染せずにpolyfillを使いたい、複数ファイルでpolyfillを使いたい 早見表 細かい機能を上手く使いこなしたい 設定はショートハンドで書けるよ babel-preset-esXXXX はいくつを使えばいいんだ ES2015+のソースをそのままminifyでき

こんにちは、タロウです。 今回はNuxt.jsでaxiosの使い方と設定方法を紹介します。 (初心者向けに書きました) axiosとは、HTTP通信を簡単に行うことができるJavascriptライブラリです。 Nuxt.jsにもaxios-moduleというものがあり、npmコマンドで簡単にインストールすることが でき非常に便利でオススメなプラグインなのでご紹介いたします。 今回は実際にAPIを叩いて画面へ表示するまでをやってみようと思います。 ぜひ参考にしてください！ (Nuxt.jsの動作環境の作成方法はこちら！) この記事でやることはこんなかんじです。 axiosのインストール方法nuxt.comfig.jsの設定axiosの使ってAPIを叩く返却されたJSONを画面へ表示 axiosのインストール方法 Nuxt.jsでaxiosを導入するには@nuxtjs/axiosを入れます。

cross-envはNodeのライブラリでnpmスクリプト実行時に任意の環境変数を設定できます。 これを利用して、開発（ローカル）、検証、本番環境の設定切り替えが可能なビルドを実現します。 各環境の英語と日本語の対応付は以下です。 開発環境 = development environment 検証環境 = staging environment 本番環境 = production environment 利用するファイルは以下です。すべてディレクトリ直下に置いています。 env.development.js (開発環境用ファイル) env.staging.js (検証環境用ファイル) env.production.js (本番環境用ファイル) package.json (環境変数設定を含んだnpmスクリプトを記述するファイル) nuxt.config.js (環境変数に応じた設定ファイルを

npm init nuxt-app <project-name>インストールが開始されるといくつか質問をされるのでそれぞれ該当するものを選択していきます。 ? Project name (my-app)プロジェクト名を聞かれます。 何もしなければ先程指定した名前が入るので[Enter]を押します。 ? Programming language: (Use arrow keys) > JavaScript TypeScript使用する言語を聞かれます。 ? Package manager: (Use arrow keys) > npm yarnパッケージマネージャーは npm か yarn のどちらを使うかを聞かれます。 ? UI framework: > None Ant Design Vue Bootstrap Vue Buefy Bulma Element iView Tachyons