小ネタ

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>

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

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

<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…

TypeScript お試し環境をお手軽コピペコマンドで

小ネタです。コピペでおk。Mac なら動くと思います。 VS Code と VS Code ESLint extension をインストールしておくと ESLint の自動修正も動くので快適です。 echo mkdir mkdir ts-`date '+%Y%m%d%H%M%S'` && cd $_ echo typescript npm init -y && npm i -…