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/

m-yoshiro

July 28, 2020
Tweet

More Decks by m-yoshiro

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  7. View Slide

  8. ~ 実演 ~

    View Slide

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

    View Slide

  10. ツールを作った目的

    View Slide

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

    View Slide

  12. ツールを作った目的 2
    デザインパターンを(無理矢理)使いたかった
    ● 自分のエンジニアリングスキルに課題感
    ○ エンジニアリングを専門的に学んできていない
    ○ 基礎知識がないため、コードリーディングが遅かったり
    ○ 自分の書くコードは実装の一貫性に乏しい

    View Slide

  13. https://www.oreilly.co.jp/books/4873112494/
    Head Firstデザインパターン
    頭とからだで覚えるデザインパターンの基本
    Eric Freeman, Elisabeth Freeman, Kathy Sierra, Bert
    Bates 著、佐藤 直生 監訳、木下 哲也, 有限会社 福龍興
    業 訳

    View Slide

  14. ツールを作った目的 3
    ASTに興味があった
    ● 物事を切り分け直して、新たな意味構造を構築できる!!
    ○ Token, Traverse など出てくる概念が新鮮だった
    ○ 言語を作る以外でも応用出来そう

    View Slide

  15. https://frontendmasters.com/courses/programming-language/

    View Slide

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

    View Slide

  17. 実装

    View Slide

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

    View Slide

  19. < >
    button class =“button”

    View Slide

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

    View Slide

  21. こんな感じで定義

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide