PythonプログラムからJavaScriptへの変換について

Question

Djangoのライブラリで行うURLのバリデーションをJS側でも実装したいと考えています。
現在、Django側では、 URLValidatorを使用してチェックを行なっています。

from django.core.validators import URLValidator
val = URLValidator(schemes=["http", "https"])

こちらのURLValidatorでのチェックと同様のことを、JS側でも行いたいといった形です。

以下は、Djangoドキュメントに記載があった、 URLValidatorのクラスになります。

class URLValidator(RegexValidator):
    ul = '\u00a1-\uffff'  # Unicode letters range (must not be a raw string).

    # IP patterns
    ipv4_re = r'(?:25[0-5]|2[0-4]\d|[0-1]?\d?\d)(?:.(?:25[0-5]|2[0-4]\d|[0-1]?\d?\d)){3}'
    ipv6_re = r'[[0-9a-f:.]+]'  # (simple regex, validated later)

    # Host patterns
    hostname_re = r'[a-z' + ul + r'0-9](?:[a-z' + ul + r'0-9-]{0,61}[a-z' + ul + r'0-9])?'
    # Max length for domain name labels is 63 characters per RFC 1034 sec. 3.1
    domain_re = r'(?:.(?!-)[a-z' + ul + r'0-9-]{1,63}(?<!-))*'
    tld_re = (
        r'.'                                # dot
        r'(?!-)'                             # can't start with a dash
        r'(?:[a-z' + ul + '-]{2,63}'         # domain label
        r'|xn--[a-z0-9]{1,59})'              # or punycode label
        r'(?<!-)'                            # can't end with a dash
        r'.?'                               # may have a trailing dot
    )
    host_re = '(' + hostname_re + domain_re + tld_re + '|localhost)'

    regex = _lazy_re_compile(
        r'^(?:[a-z0-9.+-]*)://'  # scheme is validated separately
        r'(?:[^\s:@/]+(?::[^\s:@/]*)?@)?'  # user:pass authentication
        r'(?:' + ipv4_re + '|' + ipv6_re + '|' + host_re + ')'
        r'(?::\d{2,5})?'  # port
        r'(?:[/?#][^\s]*)?'  # resource path
        r'\Z', re.IGNORECASE)
    message = _('Enter a valid URL.')
    schemes = ['http', 'https', 'ftp', 'ftps']

    def __init__(self, schemes=None, **kwargs):
        super().__init__(**kwargs)
        if schemes is not None:
            self.schemes = schemes

    def __call__(self, value):
        if not isinstance(value, str):
            raise ValidationError(self.message, code=self.code, params={'value': value})
        # Check if the scheme is valid.
        scheme = value.split('://')[0].lower()
        if scheme not in self.schemes:
            raise ValidationError(self.message, code=self.code, params={'value': value})

        # Then check full URL
        try:
            super().__call__(value)
        except ValidationError as e:
            # Trivial case failed. Try for possible IDN domain
            if value:
                try:
                    scheme, netloc, path, query, fragment = urlsplit(value)
                except ValueError:  # for example, "Invalid IPv6 URL"
                    raise ValidationError(self.message, code=self.code, params={'value': value})
                try:
                    netloc = punycode(netloc)  # IDN -> ACE
                except UnicodeError:  # invalid domain part
                    raise e
                url = urlunsplit((scheme, netloc, path, query, fragment))
                super().__call__(url)
            else:
                raise
        else:
            # Now verify IPv6 in the netloc part
            host_match = re.search(r'^[(.+)](?::\d{2,5})?$', urlsplit(value).netloc)
            if host_match:
                potential_ip = host_match[1]
                try:
                    validate_ipv6_address(potential_ip)
                except ValidationError:
                    raise ValidationError(self.message, code=self.code, params={'value': value})

        # The maximum length of a full host name is 253 characters per RFC 1034
        # section 3.1. It's defined to be 255 bytes or less, but this includes
        # one byte for the length of the name and one byte for the trailing dot
        # that's used to indicate absolute names in DNS.
        if len(urlsplit(value).netloc) > 253:
            raise ValidationError(self.message, code=self.code, params={'value': value})


integer_validator = RegexValidator(
    _lazy_re_compile(r'^-?\d+\Z'),
    message=_('Enter a valid integer.'),
    code='invalid',
)


def validate_integer(value):
    return integer_validator(value)

現状、どのような手順でPythonからJavaScriptへ変換作業を行なっていけば良いか分からない為、ご助言頂けましたら幸いです

Comments

[maisumakun]

正規表現の文法と、変数名からある程度読み解けませんか？

[study_111]

そうですね...正規表現を調べながら実装出来ないか試みているのですが、少々難しく感じてしまっています...

[think49]

本質問は前質問と同じ問題ですが、変数宣言文で「何が行われているか、わからない」という事でした。

https://teratail.com/questions/293480#reply-415097
> まず、URLValidatorクラスの「 ul = '\u00a1-\uffff' 」ここの部分から何が行われているか、わからないといった状況です...

[think49]

https://teratail.com/help/avoid-asking
> 過去に投稿した質問と同じ内容の質問
> 閲覧数を増やす目的などにより、過去に投稿した質問と同じ内容の質問を新たに投稿することは推奨していません。
> 他に同じ問題を抱える人のヒントとなる情報が分散してしまうためです。
> 質問について新たにわかったことや試したことがあれば、すでにある質問を編集してください。

[Lhankor_Mhy]

とりあえず、super() は親クラスを呼ぶものですから、このコードだけでは動かないですよ。

[Lhankor_Mhy]

ああ、いや、正規表現部分だけ再現できればいいのかな？
とりあえず、ごりごり書いてみればいいように思うのですが、PythonとJavaScriptのどちらの文法がわからないのですか？

[study_111]

あ、こちらのコードのみでは動かないのですね...
PythonとJavaScriptは一応基礎の部分は学習しているのですが、正規表現の部分がよく分からず、どのようにして、作業を行っていけば良いか分からないといった状況です...

[Lhankor_Mhy]

正規表現がわからないだけであれば、リテラルをそのまま使えばよいのではないかな、と思うのですが、それでは何か不都合があるのでしょうか？

[Lhankor_Mhy]

もう少し、何がわからないのかをはっきりさせた方が回答しやすいですね。

[study_111]

> 正規表現がわからないだけであれば、リテラルをそのまま使えばよいのではないかな、と思うのですが、それでは何か不都合があるのでしょうか？
あ、いえ...
どのような形でもJS側で実装が出来ればと考えています。
ただ、現状どのように行えば良いかが分からないのですよね...

[think49]

率直にいって、「何が分からないのか」が伝わってこないので「何を教えてよいのか」を判断できません」

[Zuishin]

正規表現を知らないし学ぶ気もない人が正規表現の仕事を担当しているのがそもそも間違っています。アマチュアがやらなくてもプロに任せれば済む話ですし、プロなら学べば済む話です。

[study_111]

> 率直にいって、「何が分からないのか」が伝わってこないので「何を教えてよいのか」を判断できません」
こちらですが、現状、どのような手順で変換作業を行なっていけば良いか分からないといった状況です

[Zuishin]

わからないなら学べばいいではありませんか。何もしないでわからないわからないと言って人にやらせるのがあなたの仕事ですか？ あなたはお金が足りなくてほしいものが手に入らない時、床に転がってほしいほしいと泣き喚くのですか？

正規表現など何も難しくないでしょう。一日もあれば十分マスターできます。

[study_111]

あ、いえ。今回は、正規表現の解読もその手順の一つかと思うのですが、全体としての変換作業を完成させるには、どのような手順が必要なのかといった部分が知りたいのですよね

[Zuishin]

移植元はほぼ正規表現なんだから、正規表現がわかれば移植できます。

[Zuishin]

「何が分からないのか分からない」というのは、聞いていることが簡単すぎて、という意味です。小学生が 1 + 1 を聞いてきたら 2 と答えるべきか、田と答えるべきか迷うでしょう？ 小学生なら答えを知っているはずなので。

正規表現の話なんだから、それを学べばそれでわかる話で、なぜ学ばずにそれ以上を聞こうとするのかということです。

あなたは正規表現を使う仕事をしているんでしょう？
ではそれを学ばずにそれ以上聞くことがありますか？

[Lhankor_Mhy]

移植は、「変換作業」などという単純な捉え方をしない方がいいです。

手順としては、

・元コードを読み、フローを理解する
・移植先言語で、フローをコーディングする

の2段階が必要になります。

まず、元コードを理解するところから始めてください。
それが難しいようであれば、移植は諦めて、正規表現を再利用して新しく自分で作り直してください。

[maisumakun]

> 正規表現の解読もその手順の一つかと思うのですが、全体としての変換作業を完成させるには、どのような手順が必要なのか

正規表現の意味がわかれば、あとはそれをJavaScriptから使うだけです。厳密にPythonと同じコードで作る必要はないです。

[think49]

「正規表現を読めない」がネックなら、それぞれのリファレンスを読んで学習すればよいです。
https://docs.python.org/ja/3.7/library/re.html
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions

しかし、前質問の流れからPythonの文字列リテラルも読めていなかったので、他にも足りてない知識が多々あると感じています。
https://teratail.com/questions/293480#reply-415097

[study_111]

了解しました。
> ・元コードを読み、フローを理解する
・移植先言語で、フローをコーディングする

先ずは、こちらの一段階目の作業をご提示頂いたリファレンスなどを参照し、行なっていきたいと思います。

[Lhankor_Mhy]

トランスパイラがあるようなので、試してみるのもいいかもしれないです。
ただ、初めからJavaScript環境を意識しないで書いたPythonコードが動くかどうかは、運しだいだと思います。

https://github.com/QQuick/Transcrypt

https://www.moongift.jp/2016/05/javascripthon-python%E3%81%A7%E6%9B%B8%E3%81%84%E3%81%A6es6%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E7%94%9F%E6%88%90/

[study_111]

> トランスパイラがあるようなので、試してみるのもいいかもしれないです。
こちら、ありがとうございます。
自動で、変換してくれるソフトがあるのですね。
試してみます。

Answer 1

なにがわからないのかわからないですが、推測で回答します。

re.compile(r'.')

↑↓は同じです。

new RegExp(String.raw`.`);

ついでに言えば、↓も同じです。

/./

ご不明の点がありましたら、コメント欄でお知らせください。

Comments

[study_111]

ご回答ありがとうございます。
正規表現の変換を行なっていくという事なのですね。
そうなりますと、まずは、「ul = '\u00a1-\uffff'」ここの部分から、JSに置き換えて、「 regex = _lazy_re_compile」ここの部分まで、JS用の変数に格納してく形で、良いでしょうか...?

[Lhankor_Mhy]

まあ、そんな感じなんじゃないかと思います。

[study_111]

んー、なるほどです。
そうなりますと、変数に格納後はどのような作業を行なっていけば良いでしょうか...?

[Lhankor_Mhy]

正規表現を使ってURLを検査することになるかと思います。

[study_111]

> 正規表現を使ってURLを検査することになるかと思います。
無論最終的には、そこに行き着くのですが、js用の変数に格納した後は、どのようにして、その変数を生かしいくのかといった部分が知りたいのですよね

[Lhankor_Mhy]

回答にも書きましたが、new RegExp() です。
検査するメソッドは、RegExp.prototype.exec() または、String.prototype.match() がいいでしょう。

[Lhankor_Mhy]

RegExp.prototype.exec() よりも、RegExp.prototype.test() の方が適切かもしれません。

[Lhankor_Mhy]

低評価をした方、理由をご提示いただけますか？

Answer 2

URLValidatorでのチェックと同様のことを、JS側でも行いたい

PythonでできているならPython側にAPI用意して、
jsでバリデートする際にAPIにXHRでデータを投げればよいでしょう。
わざわざjsで書く意味がありません

Comments

[study_111]

>jsでバリデートする際にAPIにXHRでデータを投げればよいでしょう。
こちらですが、今回は、リクエストを投げずともJS側で判定しエラーメッセージを表示するUXを意識しての実装の予定です

[yambejp]

わかりました。
ご自身で移植してわからないところを質問ください
何もわからないならもう諦めて、業者にお金をはらって
やってもらってください

[study_111]

> ご自身で移植してわからないところを質問ください
一度こちらの形で、移植作業を進めてみたいと思います。
先ずは正規表現の部分を調べつつ、分からない部分は質問させて頂き、一つずつ解決していきたいと思います。