【徹底比較】Vue.js と React でレンダリングされる値、されない値
*1. 画面に表示されるがコンソールにエラーが出る。 Warning: Received NaN for the `children` attribute. If this is expected, cast the value to a string. *2. 画面には表示されずコンソールにワーニングが出る。 [Vue warn]: Invalid VNode type: undefined (undefined) *3. Chrome だと以下の形式（実行環境によって異なる可能性あり）。 Mon Jan 01 2024 00:00:00 GMT+0900 (GMT+09:00) *4. ランタイムエラー。 Uncaught Error: Objects are not valid as a React child (found: object with keys {}). If you
TypeScript の変性（共変・反変）を 5 分で理解する
type User = { name: string } type Admin = User & { permissions: string[] } const user: User = { name: "user", } const admin: Admin = { name: "admin", permissions: [], } User は名前だけを持つ型で、Admin は名前と権限を持つ型です。また、それぞれの型の変数も用意しています。 この後のコード例は極力シンプルにするため、やや不自然なコードになっていますがご了承ください[1]。 サブタイプとスーパータイプ Admin 型の変数は name プロパティを持ち、User 型の条件を満たしています。そのため、User 型の変数には Admin 型の変数を代入できます。 その逆は型エラーになります。User 型の変数には perm
TS のパターンマッチングもゼロランタイムの時代に？ pattycake を試してみた
X（旧 Twitter）のタイムラインを眺めていたら、以下のポストが目に入りました。 これは pattycake という名のツールで、ts-pattern（パターンマッチングを提供する有名なライブラリ）のコードを最適化してゼロランタイム化できるとのこと。 面白そうなので少し触ってみました。
Nuxt Server Components を試す
設定ファイルと app.vue だけのごく質素なプロジェクトが生成された（こんな感じ）。前はもっと色々なファイルがあった気がする。慣れている人には余計なものがなくてよさそうだが、Nuxt を初めて使うような場合は途方に暮れそう。 公式ドキュメントに貼られている動画の内容を再現していく。 0:53 まずは通常通りにコンポーネントを作る。 これはマークダウンの文字列を HTML にパースして表示するコンポーネントで、変換には markdown-it というファイルサイズが大きいライブラリを使う。 <script setup lang="ts"> import MarkdownIt from 'markdown-it'; const md = new MarkdownIt(); const string = `# my component - markdown list - rendered a
Bootstrap Utilities Cheat Sheet を作った
これは何 Bootstrap の "Utilities" にカテゴライズされている CSS クラスを一覧 + 検索できるオンラインツールです。 Bootstrap Utilities Cheat Sheet 作った経緯 業務で BootstrapVue（Bootstrap ベースの Vue.js コンポーネントライブラリ）を使用しており、スタイルの調整などに Bootstrap のユーティリティークラスをよく使います。目的のユーティリティークラスを探す際に、公式ドキュメントだと一覧性が悪いし CSS の内容も分かりません。 一方で Tailwind CSS を使用しているプロジェクトもあり、開発時には "Tailwind CSS Cheat Sheet[1]" が欠かせません。「こういうツールの Bootstrap 版があったらいいな」と思って探しましたが、なかった[2]ため自分で作りまし
Vue.js は Reactivity Transform でさらに進化する
2023 年 1 月 26 日追記 Reactivity Transform は Vue 3.4 でコアから削除されることになりました。 https://twitter.com/danielkelly_io/status/1618256962776600576 ただ完全になくなる訳ではなく、Vue Macros という Vue 向けマクロ集のパッケージが引き継ぐようです。 https://twitter.com/sanxiaozhizi/status/1618290614306746371 Reactivity Transform とは Vue 3.2.25 から experimental で実装されている機能です[1]。script setup の defineProps() などと同様、コンパイラーマクロによってコードを変換する仕組みです。 公式ドキュメントからコードを引用しつつ、主要
各 JavaScript フレームワークの TodoMVC サイズ比較（翻訳）
この記事は JavaScript Framework TodoMVC Size Comparison を翻訳したものです。 著者の Ryan Carniato 氏の許可を得て公開しています。 JavaScript フレームワークのサイズを概算するのは、実はとても難しいことです。 ランタイムのサイズを正確に把握することさえ難しいのです。あなたは bundlephobia.com をよく見るかもしれませんが、そこに書かれているサイズは誤解を招く可能性があります。tree-shaking すれば、すべてのコードが含まれるわけではありません。Bundlephobia では svelte/motion や preact/hooks のようなサブモジュールも含まれていません。 ランタイムのサイズだけではなく、コンポーネントコードのサイズも重要です。すべてのコンポーネントが同じではありません。フレームワ
SolidJS で使える CSS in JS の調査
まとめ （ライブラリ名はページ内リンクになっています） 2021年9月時点 solid-styled-jsx ❌ npx degit で作ったプロジェクトには非対応。 solid-styled-components ⭕️ 調べた中では唯一、styled の機能が使えた。 Emotion ⚠️ @emotion/css だけ使える。@emotion/styled は非対応。 Linaria ❌ おそらく現時点では Solid 非対応。 Stitches ⚠️ @stitches/core は使えた。 LightwindCSS ⭕️ ここまでのうち、唯一 CSS ファイルの書き出しができる。 2021年12月追加 vanilla-extract ⭕️ これも CSS ファイルの書き出しが可能。
SolidJS の日本語ドキュメントが公開されました
SolidJS とは 最近 1.0 が公開された JavaScript の UI フレームワークです。[1] JSX テンプレート 仮想 DOM なし 事前コンパイルによって、フレームワークのコードが「消える」 パフォーマンスが高い といった特徴があります。 詳しくは公式サイトをご覧ください。 日本語ドキュメント 左側のメニュー（スマホなどの場合は右上の > ボタン）から言語を切り替えてください。[2] Get Started: https://www.solidjs.com/guide Docs: https://www.solidjs.com/docs/latest/api これらは両方とも自分が翻訳しました！🎉 翻訳について もともと 5 月くらいに SolidJS のことを知り、軽く触ってみて面白いと思っていました。 6 月末に 1.0 のリリースとともに公式サイトが公開され、リ
いろいろな .config.js で型の補完を効かせる方法まとめ
いろいろな JavaScript 系ライブラリの設定ファイルで型の補完が効くようにするための JSDoc アノテーションまとめです。VSCode で確認しています。 リンクのついていないものは自分で型定義を探したものなので間違っている場合はコメントいただけると助かります。 他のライブラリの情報もコメント大歓迎です！
Vue Test Utils: コンポーネントのスタブ化とイベント発火方法
はじめに Vue.js や Nuxt のプロジェクトで Vuetify や Buefy などのライブラリを使用することは珍しくないですね。しかし、そういったライブラリのコンポーネントを含んだファイルをテストすると、「そんなコンポーネントはない」というエラーが出てしまいます。 これを回避するために、ライブラリのサイトなどではテスト時にもプラグインを読み込むように書かれていることが多いです。Vuetify のドキュメント しかし、この方法は少々問題を含んでいるのです。 ドキュメントに沿ったテスト記述例 ここで「ボタンを押したら数字が増える」というシンプルなコンポーネントを例にしてみましょう。 Vuetify のボタンコンポーネントを使用（別ファイルで Vuetify をプラグイン登録している想定） なるべく単純にするため従来の Options API で記述し、テンプレート内のイベントハンドラ
Chrome リンクをメールで送信 ショートカットキー 無効化
Mac の Chrome でデベロッパーツールを開くショートカットキーは、Command + Option + I です。 間違えて Command + Shift + I を押すと「リンクをメールで送信」に割り当てられているのでメールアプリが立ち上がってしまいます。メールアカウント設定をしていない状態だと Command + Q で閉じることができず、わざわざ「終了」ボタンをクリックしないといけなくて地味に面倒なんですよね。 （Windows では Ctrl + Shift + I なので両方使っているとなおさら間違えやすい） 前置きが長くなりましたが、このショートカットを無効化するコマンドはこちら。 $ defaults write com.google.Chrome NSUserKeyEquivalents -dict-add 'リンクをメールで送信' '\0' 実行後に Chrom
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vitest はどれくらい早いのか ~ Jest と比較 ~
Vuex の新しいライバル？ Pinia のご紹介
Vue 3 + TSX (JSX) の環境作成（Vite 使用）