<script setup> import { ref, computed } from "vue"; const props = defineProps({ count: Number }); const double = computed(() => props.count * 2); const message = ref("Hello, Vue.js"); </script> <template> <div> <p>{{ message }}</p> <p>{{ props.count }}</p> <p>{{ double }}</p> </div> </template> ・ ・ ・ ・ ・ ・ ・ なんで defineProps は import しなくても使えるの？？？？？ そんなことを思った方はいませんか？今日はその疑問を解決して差し上げます。 🚩 初めに 前回は Vu

はじめに 業務でVue3 × Pinia × TypeScriptのプロジェクトを担当しました。 単一コンポーネントファイル上での型付けの方法はcomposition apiが導入されてしばらく経っているので情報も多く書きやすかったです。 Piniaの使い方で参考になる日本語の情報が少なく苦労しました。 今回はPiniaを使用した時の型定義の方法を記録として残します。これからPiniaを導入する方の参考になればと思います。 単一コンポーネントでの型付けの方法をまとめた記事も投稿していますので参考にしてください https://qiita.com/manzoku_bukuro/items/a2dd20e787617b033592 Storeの記述法 型付けをする前にPiniaのStoreファイルの記述法を確認しておきます。PiniaのStoreファイルの記述方法ですが、Composition

はじめに 最近MSW(MockServiceWorker)の話題をよく見かけるので、自分が関わっているプロダクトで利用できそうか試しに使ってみました。 今回の記事ではMSWを実際に利用するまでの環境構築について記載しています。 MSWとは 名前の通りServiceWorkerを使用しており、クライアントからのAPIリクエストをインターセプトして返してくれるモックAPIです。この図を見ると動作イメージがしやすいかと思います。 ServiceWorker上で返してくれるので、別途モックサーバーを立てることなく、すぐに用意できるところがメリットの1つとして挙げられるようです。実際に簡単にモックAPIを試すことができました。 試したバージョン情報 Vue：3.2.45 MSW: 1.0.0 環境構築 Vueの環境構築 Vue3のドキュメントに掲載されている方法で環境構築していきます。 npm in

本連載では、JavaScriptフレームワーク「Vue.js」を、型定義が利用できるようJavaScriptを拡張した言語「TypeScript」で活用する方法を、順を追って説明していきます。前回は複数のコンポーネントをURLによって切り替え表示できる「Vue Router」の利用法を説明しました。今回はVue.jsの状態管理ライブラリ「Pinia」について説明します。 はじめに 本連載では、JavaScriptを利用して動的なWebページを構築できるフレームワークVue.jsを、データの型定義ができるように拡張されたAltJS（コンパイルしてJavaScriptにする言語）であるTypeScriptで活用する方法を、順を追って説明しています。 一般にWebページは、ユーザーの入力値やWeb APIから取得したデータなど、さまざまな状態を持ちます。これらの状態がさまざまなコンポーネントに散

はじめに こんにちは、フロント歴7年目のエンジニアになります🙂 今回は日頃仕事でお世話になっているVue.jsに感謝の意を込めて、 Vueの素晴らしさを皆さんに少しでも感じて貰えたらと思い、この記事を投稿することにしました。 アゲアゲするとか言って 「どうせSFCが便利とか言いたいんでしょ？」 「script setupが凄く凄いとか言いたいんでしょ？」 ・・・いえいえ、そんな当たり前のことを話したいわけではありません。 もっと深いところの説明だったりをですね、 「いやでも最近のVue3はReactに似ているから、それならReactで良くね？」 全く良くないです はい、そういった人達にこそ見て欲しい内容となっております。 つまり私がVueが優れていると信じ使い続ける理由です。 この記事では、Vue.jsの書き方みたいなことは扱いません。 またVueの魅力をお伝えする都合、他のフレームワー

今年でVue.jsは最初の公開から10年となりました。 各機能が実装されていく様子からEvanYou氏とVueJS開発チームの 優先度の判断、考え方の変遷、利用者の声の拾い上げ方等から学びがあると思ったことから、 Vue.jsの歩みをざっくりですが振り返ってみたいと思います。