自身が作成した、Selector-2-regexp というツールについての資料です。 Selector-2-regexp はCSSのセレクタからHTMLを検索するための正規表現を生成するツールです。 https://github.com/m-yoshiro/Selector2Regexp
#11 【リモート開催】FukuokaJS LTイベント で発表しました。 https://fukuokajs.connpass.com/event/178728/
Selector-2-regexpというツールを作ったin FukuokaJS
View Slide
松本芳郎● Twitter: @bennkyougirai● Github: m-yoshiroGMOペパボ株式会社デザイナー
GWに、ツールを作って見たんですよね
https://www.npmjs.com/package/selector-2-regexp
どういうツール?CSSのセレクタから、HTMLを検索するための正規表現を生成するCLIツール。※ JS向けの正規表現のみ対応
どういうツール?.button 正規表現
~ 実演 ~
Selector-2-regexp の使い方生成した正規表現をエディタの検索で貼り付けたりs2r ‘.example’ | pbcopyで出力結果をクリップボードにコピー
ツールを作った目的
ツールを作った目的 1リファクタリングに使いたかった● CSSファイルを見て...○ セレクタが使われているか気楽に調べたい○ エディタの検索機能でHTMLを検索、正規表現書いて○ 正規表現の書き方すぐ忘れる!調べるの面倒!
ツールを作った目的 2デザインパターンを(無理矢理)使いたかった● 自分のエンジニアリングスキルに課題感○ エンジニアリングを専門的に学んできていない○ 基礎知識がないため、コードリーディングが遅かったり○ 自分の書くコードは実装の一貫性に乏しい
https://www.oreilly.co.jp/books/4873112494/Head Firstデザインパターン頭とからだで覚えるデザインパターンの基本Eric Freeman, Elisabeth Freeman, Kathy Sierra, BertBates 著、佐藤 直生 監訳、木下 哲也, 有限会社 福龍興業 訳
ツールを作った目的 3ASTに興味があった● 物事を切り分け直して、新たな意味構造を構築できる!!○ Token, Traverse など出てくる概念が新鮮だった○ 言語を作る以外でも応用出来そう
https://frontendmasters.com/courses/programming-language/
ツールを作った目的:まとめ● リファクタリングに使いたかった● デザインパターンを(無理矢理)使いたかった● ASTに興味があったこれらを詰め込もうと思った。(自分のツールだし、人が。。。。なわけじゃないし ..自由にやろうと...)
実装
1. 正規表現をTokenとして抽象化して管理● 検索のために必要な要素を予めTokenとして定義● 定義したTokenを組み合わせることで、CSSセレクタのマッチングを表現する正規表現を作る
< >button class =“button”
< >button class =“button”START_OF_BRACKET END_OF_BRACKETTYPE_NAME ANY_VALUECLASS_ATTRIBUTE
こんな感じで定義
https://github.com/csstree/csstreeちなみに、セレクタのパースは “CSSTree” を使ってます
2. Visitorを変えることで別言語にも対応可能(なはず)● Visitorパターン使ってる(Visitor間違ってるかもだけど)● たとえば、別言語向けの正規表現に対応する場合、Visitorを新たに作って対応できる(はず)
新たな言語に対応するには、こんなVisitorをつくる
このツールの良いところ● 気軽さ!!○ 正規表現を出力するだけだから、使い回ししやすい○ 文字列ベースの検索だから、対象ファイルの種類に縛られない○ シンプルだから、デザイナーでも使えると思ふ(思ふ)
ご利用、指摘などなどいただけますと幸いですhttps://www.npmjs.com/package/selector-2-regexp
ご清聴ありがとうございました!