Entries from 2020-01-01 to 1 year

Cypress ノート

Cypress を少しさわった後に知っておくと捗りそうなもの。Cypress v5.3.0 で動作確認済みです。(v6 でも問題はなさそうでした。) Cypress が何を利用しているか さらに詳しく 要素のクエリ jQuery ライクに記述 さらに詳しく invoke contains アサーション …

Vue コンポーネントにおけるロジック再利用のサンプル。Mixins から Composition API まで。

サンプル まずは普通に Mixins Higher-Order Components (HOCs) Scoped Slots Composition API ^3.0.0-rc.1 で動作確認しています。Composition API パターン以外は 2 系でも基本的には動くと思います。 サンプル マウスカーソルのポジションを表示するコン…

AST に変換して HTML の構造を変形する

小ネタです。例えば以下のような HTML の <h3> ではじまるコンテンツを <section> で囲みたい時、正規表現だとちょっとやりづらかったりします。 <h2>H2</h2> <p>...</p> <h3>H3</h3> <p>...</p> <h3>H3</h3> <p>...</p> <h2>H2</h2> <p>...</p> <section> <h3>H3</h3> <p>...</p> </section> <section> <h3>H3</h3> <p>...</p> </section> そんな時は AST に変換する Parser を利用すると簡単に構造変形をするこ…</section></h3>

シンプルな Web サイト用の webpack スターターキット

これは何 使い方 メモ webpack で 複数 HTML ページ コミット時に Lint チェックしたい Babel + TypeScript の設定 browserslist ESLint + prettier の設定 stylelint の設定 Jest の設定 CSS 読み込み ビルド時のファイル名をどうするか パスの解決 環境変…

npm のコマンド `docs` `repo` `view`

npm docs npm repo npm view パッケージのドキュメントやソースコードを簡単に確認するために npm docs や npm repo コマンドをよく使います。(最近知りました) 例えば @storybook/addon-docs のドキュメントやリポジトリを確認したい場合、以下のコマンド…

AtCoder を JavaScript で

GitHub - ryotah/atcoder-js AtCoder の問題を JavaScript (Node.js v5.12.0) で解くための環境を作ってみました。 Node のバージョン nodenv で Node のバージョンを v5.12.0 に指定しています。これで、自分の環境では正解しているのに提出したらライタイ…

ESLint ルール追加したいお気持ち

今のルール 追加検討したルール レビュー max-lines-per-function max-statements max-depth 追加ルール no-else-return 結論 その他 既存の Nuxt プロジェクトに ESLint のルールを追加した時に調べたことを整理しました。 Lint の設定ファイルを秘伝のタレ…

<template> に存在していない Vue コンポーネントを動的に追加

利用ケース メモ $el new Bar() or new Vue() ? 生成した Vue インスタンス内で Router などが使えない Vue インスタンスを作成して $mount すればおk。 add() { const instance = new Bar({ propsData: { date: new Date().valueOf() } }) .$on("click", da…