Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Selector-2-regexp というツールを作った

Selector-2-regexp というツールを作った

自身が作成した、Selector-2-regexp というツールについての資料です。
Selector-2-regexp はCSSのセレクタからHTMLを検索するための正規表現を生成するツールです。
https://github.com/m-yoshiro/Selector2Regexp

#11 【リモート開催】FukuokaJS LTイベント で発表しました。
https://fukuokajs.connpass.com/event/178728/

C0e40025e5098e025a249b0cda428434?s=128

m-yoshiro

July 28, 2020
Tweet

Transcript

  1. Selector-2-regexp というツールを作った in FukuokaJS

  2. 松本芳郎 • Twitter: @bennkyougirai • Github: m-yoshiro GMOペパボ株式会社 デザイナー

  3. GWに、ツールを作って見たんですよね

  4. https://www.npmjs.com/package/selector-2-regexp

  5. どういうツール? CSSのセレクタから、HTMLを検索するための正 規表現を生成するCLIツール。 ※ JS向けの正規表現のみ対応

  6. どういうツール? .button 正規表現

  7. None
  8. ~ 実演 ~

  9. Selector-2-regexp の使い方 生成した正規表現をエディタの検索で貼り付けたり s2r ‘.example’ | pbcopy で出力結果をクリップ ボードにコピー

  10. ツールを作った目的

  11. ツールを作った目的 1 リファクタリングに使いたかった • CSSファイルを見て... ◦ セレクタが使われているか気楽に調べたい ◦ エディタの検索機能でHTMLを検索、正規表現書いて ◦

    正規表現の書き方すぐ忘れる!調べるの面倒!
  12. ツールを作った目的 2 デザインパターンを(無理矢理)使いたかった • 自分のエンジニアリングスキルに課題感 ◦ エンジニアリングを専門的に学んできていない ◦ 基礎知識がないため、コードリーディングが遅かったり ◦

    自分の書くコードは実装の一貫性に乏しい
  13. https://www.oreilly.co.jp/books/4873112494/ Head Firstデザインパターン 頭とからだで覚えるデザインパターンの基本 Eric Freeman, Elisabeth Freeman, Kathy Sierra,

    Bert Bates 著、佐藤 直生 監訳、木下 哲也, 有限会社 福龍興 業 訳
  14. ツールを作った目的 3 ASTに興味があった • 物事を切り分け直して、新たな意味構造を構築できる!! ◦ Token, Traverse など出てくる概念が新鮮だった ◦

    言語を作る以外でも応用出来そう
  15. https://frontendmasters.com/courses/programming-language/

  16. ツールを作った目的:まとめ • リファクタリングに使いたかった • デザインパターンを(無理矢理)使いたかった • ASTに興味があった これらを詰め込もうと思った。 (自分のツールだし、人が。。。。なわけじゃないし ..自由にやろうと...)

  17. 実装

  18. 1. 正規表現をTokenとして抽象化して管理 • 検索のために必要な要素を予めTokenとして定義 • 定義したTokenを組み合わせることで、CSSセレクタのマッチ ングを表現する正規表現を作る

  19. < > button class =“button”

  20. < > button class =“button” START_OF_BRACKET END_OF_BRACKET TYPE_NAME ANY_VALUE CLASS_ATTRIBUTE

  21. こんな感じで定義

  22. https://github.com/csstree/csstree ちなみに、セレクタのパースは “CSSTree” を使ってます

  23. 2. Visitorを変えることで別言語にも対応可能(なはず) • Visitorパターン使ってる(Visitor間違ってるかもだけど) • たとえば、別言語向けの正規表現に対応する場合、Visitorを 新たに作って対応できる(はず)

  24. 新たな言語に対応するには、こんなVisitorをつくる

  25. このツールの良いところ • 気軽さ!! ◦ 正規表現を出力するだけだから、使い回ししやすい ◦ 文字列ベースの検索だから、対象ファイルの種類に縛られ ない ◦ シンプルだから、デザイナーでも使えると思ふ(思ふ)

  26. ご利用、指摘などなど いただけますと幸いです https://www.npmjs.com/package/selector-2-regexp

  27. ご清聴ありがとうございました!