11月16日、Nuxt 3 の初のstable版となる 3.0 がついに正式リリースされました！ Public Beta版が公開されてから約1年、RC版で様々な改善と機能追加が行われてきましたが、待望の安定版の登場です。 個人的にこの1年いろいろな機能を試してみた感覚として、Nuxt 3 はあらゆるフロントエンド開発者にオススメできる、非常に使いやすくて優れたフレームワークだと思っています。 Nuxt 3 は非常に多機能かつ巨大なフレームワークであり、「何が優れているのか」を一言で説明するのはなかなか難しいのですが、大きく5つのテーマに分けてその魅力を整理してみました。 まず冒頭に、テーマごとの「最低限これだけ知ってもらいたい！」という要約を載せてから、細かいポイントを解説していきます。 まずは忙しい人向けの要約だけでも読んでもらって、興味が出てきた方は続きを読んで頂ければ嬉しいです！ N

今回は以下のライブラリを中心にVueにおけるテスト駆動開発(TDD)の進め方を説明します。 Vue3 Vitest Testing Library Mock Service Worker Options APIで書きますが、テストコードはComposition APIでも動くので、 Composition APIの実装に多少慣れてる人はぜひとも挑戦してください。 今回の記事の中で作ったコードは以下のリポジトリに収めました。 テスト駆動開発(TDD)ってなに？ TDDとはTest Driven Development（テスト駆動開発）の略であり、その文字通り、 テストを先に書いてその後にそのテストを満たすコードを書くことを繰り返しながら進める開発手法です。 XP(Extreme Programming)のアプローチの1つとしてとても有名です。 実施においては以下の図のRedから順番に開発をサ

v-onディレクティブで紐づけた「イベントハンドラ」や「トランジションフック」の引数から要素ノードのプロパティを参照、アクセスしようとするとTypeScriptではエラーが出てしまいます。そこで引数のダウンキャストが必要なのですが、「イベントハンドラ」と「トランジションフック」でそれぞれキャストの方法が違うので順番に説明します。

はじめに Nuxt.js + TypeScriptを今試し中なのだけど、TypeScriptでのイベントの取り扱いが面倒なので、とりあえずStructural Subtypingを適用してみました。 今のところ問題なさそうなんだけど、軽く探して見た限りだとあまり類似のアプローチ無いし悪手なのかな？ てか、FWとか一般的なライブラリで対応してるけど見つけれてないだけの気がしてならない。。。 TL;DR Event型を取り扱うときはtargetの型が不明なのでコンパイルエラーになる事がある event: { target: HTMLButtonElement }型を指定するのが一番手っ取り早い 求む、もっと手軽な対応方法 TypeScriptでのEvent型の取り扱いの罠 クリックイベントが発生したHTMLのノードに対して作業したい事は良くあるかと思います。 例えば下記のように 「クリックした

vue.jsでTypeScriptのeventをHandleしてそれを親コンポーネントに渡したいというときに型を何にすればよいか困ったので、その解決策。 以下２つのhtmlとtypescriptを使うことで解決。 やりたかったこと input textに入力したら、親コンポーネントに伝搬 マウスオーバーしたら、formのCSSが変わる（例ではクラスを変えてる） 環境 vue: 2.5.11 typescript: 2.9.2 ハマったこと eventの型がわからなかった。 inputのtextが1文字入れるだけでfocusが外れる。 対応 eventの型 以下の場合、引数の型は正しいのだが、typescriptのcompileが通らない。 updateInput(event: Event): void { const text = event.target.value; this.$emi

Jest + TypeScript + Vue 3環境で Vue Testing Library(@testing-library／vue) を動かす フロントエンド連載の1記事目です。 TIG DXユニットの中川旭です。新卒で2020年10月に入社しました。初記事です。 作業が詰まったときや実際に作業するのが面倒なときのために、この記事を最後まで作業をした後のコードを下のリポジトリに置きます。 https://github.com/modockey/Init-VueTestingLibrary Vue Testing LibraryのいいところVue Testing LibraryはVue.js公式のライブラリであるvue-test-utilをベースとする、DOM Testing LibraryのVue.js用拡張です。 Vue Testing Libraryを用いると、Vue.js公式

構成 node 16.12.0 Vite 3.0.7 Vue 3.2.37 TypeScript 4.6.4 やりたいこと JestとTesting Libraryを入れてVueとTypeScriptのテストコードを書きたい。 入れたもの Jest 28.1.3 Jest Emvironment JSDom 18.1.3 @type/jest 28.1.7 @vue/vue3-jest 28.1.0 ts-jest 28.0.8 作業手順 Vue3のドキュメント内のテストのところとViteで構築した開発中のVue3のプロジェクトにJestを導入するを参考にやっていく。 最初にJestをインストールして jest --init でセットアップはすぐに完了。 jest.config.mjsが作られる。 package.jsonのscriptにtest: "jest" を追加。 ただ npm r

Viteで構築した、開発中のVue3プロジェクトに途中からJestを導入した際にすこし手こずったので、備忘録としてまとめます。 TypeScriptは使っていないです。 手順 1. Jest のセットアップ

const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ devServer: { port: 1023, }, transpileDependencies: true }) これはかつては正常に動作してましたが、最近は正しく動かなくなりました。 原因 実は、「sudo npm run serve」で正しく1024未満のポートを使用できるか否かはnpmのバージョンに依存します。 npm@6の場合はルート権限で動作し正しく1024未満のポートで動作しますが、npm@7以上になるとルート権限で動作せず、1024未満のポートは利用できません。 npmのドキュメントを確認するとroot権限での動作について挙動がnpm@6とnpm@7で変更されていることが確認できます。 https://d

はじめに VSCodeのsettings.jsonを見直している中でフォーマッタの設定についてEslint、Prettierのドキュメントを見ていたらPrettierの公式ドキュメントで↓のページを見つけた。 Integrating with Linters#Notes When searching for both Prettier and your linter on the Internet you’ll probably find more related projects. These are generally not recommended, but can be useful in certain circumstances. First, we have plugins that let you run Prettier as if it was a linter rul

Vue3で保守性の高いテストコード作成方法を解説！Vue3エンジニアが実装とテストの疎結合実装方法を解説！ こんにちは！ 今回は Vue3 でのコンポーネントのテストコードの作成方法を紹介します！ テストコードを書くことでチーム開発はもちろん、個人開発においてもコードをリファクタリングしたり、バグを発見したりする際に重要な役割を果たします。 Vue3 から新たに登場した Compostion API を利用することで、より保守性の高いコンポーネントを定義することができます。 コンポーネントをテストする場合、一般的にはテストコードを実装からできる限り切り離すように作成します。 理想的なのはコンポーネント内のロジックなどを考慮せずに実施するブラックボックス的なテストを書くことです。 はじめに 本記事では Vue3 でのテストコードの作成方法について解説しております。 Vue2 では Vue.e

スロットとは スロット(slot)は、Vue.jsにおける親コンポーネントから子コンポーネントにデータを渡す手段の一つです。 スロットという名前はハーデスやリゼロなど様々な機種がある遊技マシン...のことではなく「差し込み口」という意味で使われています。 つまり、コンポーネントに外からコンテンツの差し込みを受け付けるという目的で使用されます。 スロットはその性質上、再利用の高いコンポーネントによく使用されます。再利用の高いコンポーネントは、Atomic DesignにおけるAtomのようなものが代表されます。 まずはさっそくスロットの基礎的な使い方を見ていきましょう。 スロットコンテンツ スロットを使用コンポーネントとして、汎用的に利用する削除ボタンを実装します。 コンポーネントの内容は、Vuetifyのv-buttonをラップしただけ簡単なものです。 <template> <v-btn

こんにちは、デザイナーの @imatomix です。 今、新しいWebアプリ企画のプロトタイプを作ってます。 巷ではよく「スタートアップの武器はスピード」「プロトタイピングはスピードが命」なんて言われていますが、正直に開発スピードを追い求めていたら、手持ちのタスクの半分以上がエンジニアリングになりました。 こんにちは、デザイナーの @imatomix です。（２回目） 今回はそんな僕が、ちょうど今やってるタスクの1つをそのままブログにしてみます。 目次： 作る機能 できたもの 解説 ファイルの選択 ファイルのチェックと読み込み 動画のプレビュー サムネイルを作成 その他 作る機能 Webアプリの企画自体は、ざっくりいうとYoutubeやInstagramのような動画SNS的なものです。 動画を取り扱う場合、 動画のサムネイルをフロントエンド〜バックエンドのどこで作成するか 動画のどの部分を

はじめに 本記事では、ユーザーインターフェイスを構築するためのJavaScriptフレームワークのひとつ「Svelte（スベルト）」についてご紹介します。 Webフロントエンドの領域は年々大きくなっており、読者の皆さまの中でもReactやVueといったフレームワークを使ったことがある方が多いものと思います。もしかしたら、Svelteの名前もどこかでご覧になり、気になっている方もいるかもしれません。 Svelteは、そのアプローチの新しさから注目されはじめています。 JavaScript のライブラリに関する大規模調査「State of JS 2020」で「最も愛されているWebフレームワーク」「もっとも開発者の満足度の高いフレームワーク」に選ばれたことでも話題となりました。 そこで本記事では、ReactやVueに少しでも触れたことがある方を想定して、それらと比較する形で、Svelteの特徴

はじめにはじめまして。2017年入社の永井です。 東郷さんによる「Vue.js最初の難関、「props down, event up」を初心者にわかるように解説してみた」はご覧になられましたでしょうか？ おそらくVue.js最初の難関は無事乗り越えられたと思います！ 今回は「Vue.js初心者にわかるように解説してみた」第二弾として、props down,event up と同様に親子関係が肝となる、「slot」について、初心者に向けて説明していきたいと思います。 slotとはslotとは親となるコンポーネント側から、子のコンポーネントのテンプレートの一部を差し込む機能 です。 スロットというと「スロットマシン」が思い浮かびますが、もともとslotの「差し込み口」という意味から派生して、コインの投入口があるスロットマシンの意味をもつようになったそうです。 以下では大きく3つ、デフォルトのs

Vuetifyがどのようなものなのか確認するために、Vuefity公式ホームページにリンクされている動画を参考に動作確認を行なってみたいと思います。Vuetifyはマテリアルデザインを元に作られているので、デザイン性の優れたページを簡単に作成することができます。Vuefityが使いやすいかどうかは個人差があると思うので実際にログインページを作成しVuetifyがどういったものなのか確認してみましょう。 後半にはVue.jsとのVuetifyの連携も行っているのでVuetifyだけではなくVue.jsとの連携も学ぶことができます。 作成後のログイン画面 本文書ではvuetifyを使用して以下のログイン画面を作成します。 作成後のログイン画面 プロジェクトの作成 vueコマンドを使ってプロジェクトの作成を行います。名前は任意なのでここではvuetify-firstとしています。vue crea

特に個人で開発を行っているとテストを実施することでコードの品質を高められることはわかってはいるものの時間もかかりそうなので時間がある時にやろうとテストを後回しにしているという人も多いのではないでしょうか。 本文書ではVue CLIで作成したVue 3環境下でのVueのコンポーネントのテスト方法について説明を行っています。テストにはJavaScriptのテストフレームワークのJestとVue Test Utilsを利用しています。Jestはテストフレークワークの中でも人気が高くFaceBookによって開発されました。Vue Test UtilsはVueの公式のテストツールでVueのアプリケーションをテストするために必要な関数が含まれています。Vue.jsのビギナーの人にも理解してもらえるようにシンプルなコードを利用して動作確認を行っていきます。 Jestというテストフレームワークを利用するこ

Vuetify+Vue CLIで構築したプロジェクトで、 Vuetify2.xにアップグレードしたらnpm run serveの開始時間が著しく長くなってしまったので改善します。 原因 Vuetify2.0よりデフォルトで有効となったA-la-carte(treeshaking)が原因です。 A-la-carteとは Vuetifyの数多くのコンポーネントのうち、「プログラム中で使われているもの」だけを成果物に含める機能です。使っていないコンポーネントをimportしないので、ビルドサイズが減少します。 しかしながら、これはビルド時間を増大させます。 A-la-carteを使わない場合、vuetifyの全てのコンポーネントはnode_modules/vuetify/dist/vuetify.min.jsから読み込まれます。これは既にimportの解決やminifyが済んでいるプリコンパイル

0. はじめに 本記事は、Vueのディレクティブであるv-bindとv-onとv-modelの役割と関係を整理することが目標です。 今回の説明で出てくるプログラムはVue CLIの<template>, <script>内に書くことを想定しています。 1. v-bindとv-onとv-modelの関係 1-1. v-bindについて v-bindは htmlの属性をVueインスタンスのプロパティによって束縛する役割があります。 文章だとわかりにくいのでサンプルプログラムです。