はてなブックマーク

上記以外で特筆すべき点として、他の開発者(≒チームメンバー)にとっては、変更の影響をほとんど受けずに、ノーコストで上記恩恵を受けられる点があります。 これは Vitest の Jest に対する高い互換性のおかげでテストコードの書き方に大きな変更がなかったことと、テスト実行コマンドを npm-scripts によって隠蔽していたことによるもので、移行したことに気づきさえしない可能性もあります。 Vite を使ってないのに Vitest 使ってええんか？ 今回 Jest から Vitest への移行を行ったプロジェクトは、開発サーバーやプロダクションビルドには Webpack を使用しており、Vite は一切使用していませんでした。 そういったプロジェクトにおいても、Vite をベースとしたテストフレームワークである Vitest は使用して良いものでしょうか？ これについては Vitest

概要 本記事は、SmartHR Advent Calendar 2023 シリーズ2 の7日目です。 本記事では、Storybook を React プロジェクトで使用した場合に内部的に使用される react-docgen について紹介し、その仕組みを深ぼることで Storybook の理解を深めようという記事です。 バージョン情報 Storybook v7.6.3 (monorepo) react-docgen v7.0.1 Storybook v7.6.0 のリリース 先日、Storybook v7.6.0 がリリースされ、変更内容をまとめたブログが公開されました。 v7.6.0 は、各種パフォーマンスとUXの改善に加え、次のメジャーバージョンに向けたレガシー機能の非推奨化が中心となっており、きたる v8 にむけた v7 最後のマイナーバージョンになります。 本記事では、上記ブログ内で

概要 vimを日常的に使っておきながら、バッファの仕組みをロクに使わずに、1ファイル1プロセスで編集したまま長い時間が経過してしまった人 に贈る、バッファ機能の基本的な使い方を紹介。 iTerm2 を始めとするターミナルツールで画面分割をすることで、複数ファイルの編集を容易に行うことも出来るが、バッファを使った複数ファイル操作に慣れることで、関連するvimの機能やvimプラグインをさらに活用することができるので、使う使わないは一旦考えずにやってみよう。 とりあえず複数ファイル開こうや 作業用ディレクトリに以下の3つのファイルを作る。内容は Ruby のコードだが、コードそのものはまったく関係ないので読む必要はない。 ひとつ(a.rb)

概要 本記事では、JavaScript モジュールバンドラの一種である、 Rspack について、公式ドキュメントからわかることを要約し、自分なりの所感を付け加えて紹介します。 https://www.rspack.dev/misc/branding.html ※ 本記事は、Webpack に関する最低限の知識を前提としています。 ※ 本記事は、2023/03/12 時点の情報であり、古い内容が残っている場合があります TL;DR; Rspack は Webpack との互換性とパフォーマンスを両立したモジュールバンドラ Webpack より5~10倍高速 Webpack と設定ファイルや loader, plugin に充分な互換性を持つ Webpack の一般的な設定パターンがビルトインで用意されており、シンプルに使える 現在はアーリーステージで、Vue.js のサポートもこれからとい

想定読者や使い方などについては「はじめに」の章をご覧ください。

概要 本記事は、Vue 3 で Options API を使用するためのフラグである __VUE_OPTIONS_API__ を無効化した場合の挙動やバンドルサイズの違いについてまとめになります。 TL;DR Options API を一切使わないプロジェクトなら、Vue アプリケーションの バンドルサイズを 5.49kB 削減 できました (gzip なら 2.14 kB) バージョン情報 vue 3.2.45 vite 4.0.2 @vitejs/plugin-vue 4.0.0 rollup 3.8.0 Options API と Composition API Vue 3 のコンポーネントスタイルには、 Options API と Composition API の2種類があります。 前者は Vue 2 時点での基本スタイルで、オブジェクトにコンポーネントの挙動を示す各フィールドを

最初に世界観を以下ブログで確認。 Vue 3 がリリースされるし、ライブラリやプラグインの開発者はサポートの準備したほうがいいよね。でも破壊的変更とか振る舞いの変更がいっぱいあるから、両方を同時にサポートできるもんなのかな？ 一番シンプルな方法は、Python みたいに、両バージョンで動くコードを書くことだよね。でもそのためには、Composition API みたいな Vue 3 でしか動かないコードを使うのを諦めるしかなくて、それは Vue 3 の恩恵が受けられなくてツライよね この問題に対するコアチームの回答として、ブランチを分けてバージョンごとに開発を続けることが上げられてるよ。これはメジャーで成熟したライブラリなら良い案だけど、これから開発するプロジェクトや小さなプロジェクトに置いては、機能開発やバグ修正が二重になってツライよね VueUse を開発する中では、使用する API

概要 本記事は、HTTP クライアントライブラリである axios の v1.0.0 が満を持してリリースされたため、何がどう変わったのか、マイグレーションしても良いのかについて個人的に調べてまとめた結果になります。 TL;DR axios の v1.0.0 は、パッケージのモダン化に向けた節目としてのバージョンともいえる v1.0.0 では多数のバグ修正と、いくつかの小規模の機能追加がまとめて取り込まれた 破壊的変更や非推奨化は少なからずあるが、基本的な使い方や挙動を大きく変える規模の変更はない 一方で劇的に良くなる変化もないので、急いであげる理由もない 公式マイグレーションガイドは記事執筆時点では提供されていない axios について axios は、JavaScript 向けの HTTP クライアントライブラリの一種で、この種のパッケージとしては比較的古くから普及している老舗ライブラ

概要 本記事は、 Vue.js の公式ツールである create-vue によって生成された tsconfig.json を元に、 Vue 3 + TypeScript における、 tsconfig のベストプラクティスを理解しようという内容です。 注意事項 筆者自身はまだまだ Vue 及び TypeScript の理解が不十分であり、誤った解釈を含んでいる可能性があるのでご注意ください。 なにか間違いなどにお気付きの場合は、コメントまたは GitHub での編集提案を頂けると幸いです。 create-vue について create-vue は、Vite ベースの Vue プロジェクトを CLI から構築できるツールです。 上記のようなコマンドから、対話形式の質問に解答することで、ビルド設定から周辺ライブラリの追加、テストやリンター、フォーマッターのセットアップまで行ってくれます。 本記事

概要 本記事は、 Vue.js コアチームメンバーである @antfu7 氏の以下ツイートに対する回答を個人的にまとめたものです。 React ユーザーの皆さん、 好奇心で聞くのですが、Vue を使ったり試したりするのを妨げているブロッカーや欠点は何ですか？ 注意事項 対立煽りっぽいタイトルにはなっていますが、個人的な好奇心がモチベーションとなっており、特定の技術を贔屓、批判する意図はありません。 私自身は長らく Vue を愛用しており、業務でも大規模 Vue アプリのメンテに携わっている一方で、React は小規模プロジェクトや個人開発でしか利用していません。そのため、理解度に差がある状態であるため、改めて Vue と React の対比やそれぞれの良さを実感したいと思い、一通りのツイートに目を通した次第です。 また、 Vue.js の生みの親である Evan You氏が以下のようにツイ

概要 本記事は、メタ社(旧 FaceBook) が開発した OSS であるメモリリーク検知ツールである [memlab] をさっそく試してみた記録になります。 公式ドキュメント以上の付加価値はあまりありませんが、ざっくりと雰囲気を掴んでもらって使用を検討して頂ければ幸いです。 memlabについて memlab は、 Puppeteer API を用いたシナリオを作成することで、そのシナリオ実行によって発生するメモリリークの検出及びヒープ領域の分析を補助してくれるツールです。 本記事は実際に動かすところに重きを置くので、ツールの背景などの詳細は以下記事を参照ください。 ざっくり言うと、 memlab では以下のことが行なえます。 Puppeteer ベースでの宣言的なシナリオの作成 ヒープ領域とメモリリークの可視化 シナリオ内でのヒープのスナップショットの自動取得 スナップショットの解析と

概要 本記事では、 npm や yarn などの、Node.js におけるパッケージマネージャーを自作することで、その仕組みや挙動の理解を深めようという取り組みを整理した記事になります。 想定読者は以下を満たす人です。 普段 npm や yarn などのパッケージマネージャを使用している package.json 内の dependencies devDependencies ぐらいはわかる npm リポジトリの構成や、パッケージインストールの仕組みとか全然わからんけど、興味がないこともない TypeScript のコードをまぁまぁ読み書きできる 筆者自身も上記のレベルのため、パッケージマネージャに詳しい方が見たら鼻で笑うレベルの内容でもあるので、どうぞお手柔らかにお願いします。 注意事項 本記事ではソースコードを断片的に記載していますが、ハンズオン形式にはなっていないため、コードの全容に

TL;TD package.jsonに記述するフィールドで、peerDependencies で定義したバージョンを満たしてなくても警告を出さなくするためのオプションを設定することができる (2020/05/03時点) パッケージを公開する人以外はあんまり気にしなくても大丈夫そう そもそもpeerDependencies とは peerDependencies は、あるモジュールXに対するインタフェースを持っており、モジュールXから参照されることを想定するが、モジュールXのどこまでにバージョン互換性を持っているかを表記したものです。 例えば eslint-plugin-vue は、 eslint でVueファイルを扱うためのプラグインですが、どのバージョンの eslint に対して互換性のあるプラグインなのかがpeerDependencies に記述されています。

2023/01/10 追記 Storybook 7 + Vue 3 版を別途公開しました。使用するバージョンにあわせてどちらかを参照してください。 https://zenn.dev/sa2knight/books/storybook-7-with-vue-3 ---------- Storybook は、UIコンポーネントをサンドボックス上で動作させることで、デザインや振る舞いを開発環境を立ち上げずに確認できるUIカタログを作成するためのツールです。 本書では、現状(2020/10/26 時点) 最新版である Storybook 6.0.7 と、 Vue 2.6.11 を用いて、 CSF(Component Story Format) によるUIカタログの作成を行います。 内容のベースは公式ドキュメントのままですが、日本語で噛み砕きつつ、全体を俯瞰するよりも、ハンズオンでステップアップ学習

@babel/preset-env とは @babel/preset-env は、 babel プラグインのプリセットのことです。 そもそも babel の本体(@babel/core)は、「JSコードを入力として受け取り、ASTに変換後、何らかの変換処理を行い、変換後のASTから再度JSコードを出力すること」が責務であり、 何らかの変換処理を指定しなければ、何のトランスパイルも行われません。 この 何らかの処理 に該当する実装がbabelプラグインのことで、開発者は実現したいトランスパイルに応じて適切な babel プラグインを適用する設定を記述する必要があります。 ...でも面倒ですよね？ 単純にIEを含む主要なブラウザで一通りのES6コードを動かしたいだけというのがだいたいのユースケースです。 そんな時、対応ブウラウザなどの大雑把な情報を元に、必要なプラグインを自動で選択して、最新の

概要 dayjs は、JavaScriptで日付時刻周りの操作を簡易的に行うためのライブラリで、同カテゴリで覇権を取っていたmoment.jsが開発終了することから、その移行先として注目を集めている。 本記事では、dayjsの特徴やmoment.jsからの移行作業などと言ったことは割愛し、単純にdayjsによるよく使うTipsを紹介する。 バージョン情報 ツール バージョン

本記事は webpack-dev-server v3 に関する内容となっており、 v4(またはそれ以降) とは一部オプションが廃止される、設定方法が変わるなどの差異がありますのでご注意ください はじめに webpack-dev-serverは、webpackを用いたプロジェクトにおける開発用サーバで、ブラウザのライブリローディングを提供します。 それによって、ソースコードの編集時に、webpackによる差分ビルドが実行されると、ブラウザがwebpack-dev-server経由で更新差分を受け取り、リアルタイムに変更内容を確認しながら開発ができるようになります。 webpack-dev-serverは内部的にはexpressで実装されており、express用のミドルウェアである webpack-dev-middleware によって実現されています。webpack-dev-serverに渡