frodo821の投稿 - Crieit

The Zen of Python 邦訳

2019-10-27T23:39:10+09:00

The Zen of Python

って知ってますか？

知らないっていう人は、Pythonインタプリタを立ち上げて、import thisしましょう。

The Zen of Python, by Tim Peters

Beautiful is better than ugly.
Explicit is better than implicit.
Simple is better than complex.
Complex is better than complicated.
Flat is better than nested.
Sparse is better than dense.
Readability counts.
Special cases aren't special enough to break the rules.
Although practicality beats purity.
Errors should never pass silently.
Unless explicitly silenced.
In the face of ambiguity, refuse the temptation to guess.
There should be one-- and preferably only one --obvious way to do it.
Although that way may not be obvious at first unless you're Dutch.
Now is better than never.
Although never is often better than right now.
If the implementation is hard to explain, it's a bad idea.
If the implementation is easy to explain, it may be a good idea.
Namespaces are one honking great idea -- let's do more of those!

こんな感じのやつ。
何番煎じかわからないけれど、邦訳してみます。

The Zen of Python, by Tim Peters 日本語訳版

醜いよりは美しい方がいい。
暗黙よりは明示の方がいい。
複雑よりも単純な方がいい。それでも、ワケわからなくなるよか複雑な方ががマシ。
ネストするよりフラットな方がいい。
詰め込んであるよりも空白が多い方がいい。
読みやすさは重要だ。
特別な場合であっても、ルールを破るに足る特別な理由にはならない。しかしながら、純粋さよりは実用性の方が大事。
エラーを無視してはいけない。明示的に握り潰すなら別だけれども。
曖昧さを前にして、推測で済まそうとしてはいけない。
あることをする明白な方法が1つあり、しかも1つしかないのが好ましい。あなたがオランダ人でもない限り、はじめは明白には思えないにしても。
やらないよりは今やった方がいい。とはいえ、やらない方が今すぐやるよりもいいことはしばしばある。
実装を説明するのが難しいなら、それは悪いアイデアだろう。もし、実装を説明するのが簡単なら、それは良いアイデアかもしれない。
名前空間は1つのとてもいい考え。そういうのをもっとやろう！

ゆるっとしたコーディングや設計に関する指針で、結構ためになります。The Zen of Pythonという名前ですが、Python以外でもこの考え方は通用します。

初心を忘れないためにも、時々import thisするのはいいアイデアなのではないでしょうか？

そういえば

this.sという変数にこの文章が入っています。

s = """Gur Mra bs Clguba, ol Gvz Crgref

Ornhgvshy vf orggre guna htyl.
Rkcyvpvg vf orggre guna vzcyvpvg.
Fvzcyr vf orggre guna pbzcyrk.
Pbzcyrk vf orggre guna pbzcyvpngrq.
Syng vf orggre guna arfgrq.
Fcnefr vf orggre guna qrafr.
Ernqnovyvgl pbhagf.
Fcrpvny pnfrf nera'g fcrpvny rabhtu gb oernx gur ehyrf.
Nygubhtu cenpgvpnyvgl orngf chevgl.
Reebef fubhyq arire cnff fvyragyl.
Hayrff rkcyvpvgyl fvyraprq.
Va gur snpr bs nzovthvgl, ershfr gur grzcgngvba gb thrff.
Gurer fubhyq or bar-- naq cersrenoyl bayl bar --boivbhf jnl gb qb vg.
Nygubhtu gung jnl znl abg or boivbhf ng svefg hayrff lbh'er Qhgpu.
Abj vf orggre guna arire.
Nygubhtu arire vf bsgra orggre guna *evtug* abj.
Vs gur vzcyrzragngvba vf uneq gb rkcynva, vg'f n onq vqrn.
Vs gur vzcyrzragngvba vf rnfl gb rkcynva, vg znl or n tbbq vqrn.
Anzrfcnprf ner bar ubaxvat terng vqrn -- yrg'f qb zber bs gubfr!"""

いわゆる換字式暗号ってやつですね。換字表はthis.dで得られます。

d = {'A': 'N', 'B': 'O', 'C': 'P', 'D': 'Q', 'E': 'R', 'F': 'S', 'G': 'T', 'H': 'U', 'I': 'V', 'J': 'W', 'K': 'X', 'L': 'Y', 'M': 'Z', 'N': 'A', 'O': 'B', 'P': 'C', 'Q': 'D', 'R': 'E', 'S': 'F', 'T': 'G', 'U': 'H', 'V': 'I', 'W': 'J', 'X': 'K', 'Y': 'L', 'Z': 'M', 'a': 'n', 'b': 'o', 'c': 'p', 'd': 'q', 'e': 'r', 'f': 's', 'g': 't', 'h': 'u', 'i': 'v', 'j': 'w', 'k': 'x', 'l': 'y', 'm': 'z', 'n': 'a', 'o': 'b', 'p': 'c', 'q': 'd', 'r': 'e', 's': 'f', 't': 'g', 'u': 'h', 'v': 'i', 'w': 'j', 'x': 'k', 'y': 'l', 'z': 'm'}

そこで、この暗号を復号するプログラムをPythonで書いてみてください。
sys.stdoutをio.StringIOとかに差し替えてからimport thisは復号プログラムを書いたとは言いませんよ。

正答例

print(''.join(map(lambda x: this.d.get(x, x), this.s)))

CLIツールを簡単に作れるフレームワークを作ったよ！

2019-10-26T22:52:42+09:00

PythonでCLIツールを簡単に作れるようになるフレームワークを作ってみました！

argparseって正直使いにくくないですか？
groomなら、実質関数を1つ定義するだけでコマンドラインツールを作成できます。

簡単に使ってみる

さて、早速使ってみましょう。
2つの数を取って、四則演算するコマンドラインツールを作ってみます。

import sys
from groom import positional, optional, Dispatcher

__version__ = '1.0'

def calculate(
    num1: positional(float, "former number", required=True, var_name='N1'),
    num2: positional(float, "latter number", required=True, var_name='N2'),
    operator: optional(str, "operator name", short_name='op')='add'):
  if operator == 'add':
    print(num1 + num2)
    return
  if operator == 'sub':
    print(num1 - num2)
    return
  if operator == 'mul':
    print(num1 * num2)
    return
  if operator == 'div':
    print(num1 / num2)
    return
  print("unknown operator:", operator, file=sys.stderr)

if __name__ == '__main__':
  Dispatcher(
    calculate,
    "calculate one of four arithmetic operations"
  ).dispatch()

これだけで、ヘルプの表示やコマンドライン引数の処理までができます。
生成されたヘルプメッセージはこんな感じ。

calc.py: 1.0

calculate one of four arithmetic operations

Usage:
  calc.py [-v | --version | -h | --help]
  calc.py params...

positional parameters:
N1:
  former number
  type: float
  required: True
N1:
  latter number
  type: float
  required: True

parameters:
--operator, -op:
  operator name
  type: str
  required: False
  multiple values: False
  default: add

どうでしょうか？かなり簡単になっているのではないかと思います。
ヘルプメッセージの改善に関しては鋭意取り組み中ですので、少々お待ち頂けたらw

追記 2019/10/27

groom==0.0.3a1で、ヘルプメッセージを少し改善しました。現在はこのようになります。

calc.py: 1.0

calculate one of four arithmetic operations

Usage:
  calc.py [-v | --version | -h | --help]
  calc.py  
    [--operator  | -op ]

positional parameters:
N1:
  former number
  type: float
  required: True
N2:
  latter number
  type: float
  required: True

parameters:
--operator, -op:
  operator name
  type: str
  required: False
  multiple values: False
  default: add

一応サブコマンドにも対応していまして、以下のようにすれば可能です。が、こちらも鋭意改善中です。

d = Dispatcher(func, "desc")
d.add_subcommand(
  "sub-command",
  Dispatcher(subfunc, "subdesc"))

このプロジェクトのGitHubのリポジトリはhttps://github.com/frodo821/groomです。issueやpull requestなど、どんどんお寄せいただけたら凄く嬉しいです。よろしくお願いします。

TSVで定義した辞書をMarkdownで出力するツールを作った話

2019-09-10T20:49:01+09:00

TL;DR

電子辞書が欲しくなったので作ることにしました。今回の要件は、品詞別の索引と全単語の索引、先頭の文字ごとの詳細解説があることです。

そこで辞書本体をmarkdownで書くことにしたのですが、ちまちま手で書くのは面倒くさい。なのでTSVを読み込んでmarkdownを吐くジェネレータを簡単に書いてみることにしました。

TSVに格納する辞書の形式を考えてみた

TSVとは言いつつ、純粋なTSVは使っていません。まずは辞書のヘッダ部分です。

BEGIN_HEADER            
LANGUAGE_LONG   Language Name       
LANGUAGE_CODE   LC(注1)      
PHONETICAL_CHARS    頭文字になりうる文字の列挙(注2)       
END_HEADER

注1 これは2～3文字の言語コードです。ja, enなど
注2 スペース区切りで列挙します。a b c d e f g h i j k l m n o p q r s t u v w x y zのように

続いて、辞書の本体を考えてみました。

BEGIN_DICTIONARY            
単語  品詞ID(注1)    意味  関連語(注2)
END_DICTIONARY

注1 品詞IDは任意の文字列です。
注2 関連語はスペース区切りで列挙します。study learnのように
単語は任意個この形式で列挙します。

最後に、品詞の定義です。

BEGIN_DEFINITION            
品詞ID    品詞の名称       
END_DEFINITION

このフィールドでは、DICTIONARYフィールド内で使用した品詞IDとその名称の対応(NOUNと名詞のような)を定義します。

パーサーをざっくり書いてみる

さて、このパーサーをざっくり書いてみました。

import csv

class ParseError(SyntaxError):
  pass

def open_dict(dic_path: str) -> list:
  with open(dic_path, encoding='utf-8') as f:
    reader = csv.reader(f, delimiter='\t')
    return list(reader)

def parse_dict(dic: list) -> dict:
  ret = {}
  state = 'none'
  for i in dic:
    if i[0] == 'BEGIN_HEADER':
      if state != 'none':
        raise ParseError('Unexpected BEGIN_HEADER tag.')

      state = 'header'
      ret['header'] = {}
      continue

    if i[0] == 'END_HEADER':
      if state != 'header':
        raise ParseError('Unexpected END_HEADER tag.')

      state = 'none'
      continue

    if i[0] == 'BEGIN_DICTIONARY':
      if state != 'none':
        raise ParseError('Unexpected BEGIN_DICTIONARY tag.')

      state = 'dictionary'
      ret['dict'] = {}
      continue

    if i[0] == 'END_DICTIONARY':
      if state != 'dictionary':
        raise ParseError('Unexpected END_DICTIONARY tag.')

      state = 'none'
      continue

    if i[0] == 'BEGIN_DEFINITION':
      if state != 'none':
        raise ParseError('Unexpected BEGIN_DEFINITION tag.')

      state = 'definition'
      ret['defs'] = {}
      continue

    if i[0] == 'END_DEFINITION':
      if state != 'definition':
        raise ParseError('Unexpected END_DEFINITION tag.')

      state = 'none'
      continue

    if state == 'none':
      continue

    if state == 'header':
      ret['header'][i[0]] = i[1]
      continue

    if state == 'dictionary':
      if i[0] not in ret['dict']:
        ret['dict'][i[0]] = {}
      ret['dict'][i[0]][i[1]] = {
        'meaning': i[2],
        'reference': i[3].split(' ')
      }
      continue

    if state == 'definition':
      ret['defs'][i[0]] = i[1]

  if state != 'none':
    raise ParseError(f'A match pair tag of END_{state.upper()} not found.')

  return ret

まぁ、本当に簡単に書いているので、解説することもほとんどないんですけれど……。ざっくり説明すると、tsvを読み込んで2次元配列に格納し、それを先ほど定義したフォーマットに従って辞書に格納しなおしているだけです。

次に、この生成した辞書から索引情報を抽出する関数を定義してみます。

def get_comparator(_order):
  class _Comparator(str):
    def __gt__(self, other):
      order = list(_order)
      for s, o in zip(self, other):
        oi = order.index(o)
        si = order.index(s)
        if oi > si:
          return True
        if si > oi:
          return False
      return len(self) > len(other)

    def __lt__(self, other):
      order = list(_order)
      for s, o in zip(self, other):
        oi = order.index(o)
        si = order.index(s)
        if oi < si:
          return True
        if si < oi:
          return False
      return len(self) < len(other)
  return _Comparator

def generate_indices(dic: dict):
  chars = dic['header'].get(
    'PHONETICAL_CHARS',
    'a b c d e f g h i j k l m n o p q r s t u v w x y z').split(' ')
  nodes = {i: {c: [] for c in chars} for i in dic['defs']}
  nodes['ALPHABETICAL'] = {c: [] for c in chars}
  comp = get_comparator(''.join(chars))

  for word, data in dic['dict'].items():
    nodes['ALPHABETICAL'][word[0]].append(word)
    for kind in data:
      nodes[kind][word[0]].append(word)

  for i in nodes.values():
    for j in i.values(): 
      j.sort(key=comp)

  return nodes

get_comparator関数は、PHONETICAL_CHARSヘッダフィールドで定義された辞書順に従って文字列を比較できるようにするラッパークラスを返す関数です。品詞ごとに単語の頭の文字の配列を作り、そこに単語のみを格納しているだけですね。ALPHABETICALは全単語索引の情報で、定義されたすべての単語が登録されています。

次に意味情報と関連語情報を抽出する関数を定義します。

def generate_dict_content(dic: dict):
  chars = dic['header'].get(
    'PHONETICAL_CHARS',
    'a b c d e f g h i j k l m n o p q r s t u v w x y z').split(' ')
  defs = dic['defs']
  contents = {i: [] for i in chars}
  comp = get_comparator(''.join(chars))

  for word, data in dic['dict'].items():
    contents[word[0]].append({
      'surface': word,
      'meaning': [
        (kind, meta['meaning'].split(' '))
        for kind, meta in data.items()
      ],
      'reference': [ref for d in data.values() for ref in d['reference']]
    })
  for c in contents.values():
    c.sort(key=lambda x: comp(x['surface']))
  return contents

この関数についての解説は、generate_indices関数とほぼ同じ動作のため割愛します。

これでTSVから単語情報を抽出する関数がそろいました。次はこれをmarkdownとして出力する関数を作っていきます。

抽出した情報をMarkdownにしてみる

索引を生成する関数を考えてみました。こんな感じです。

def generate_index_file(kind: str, defs: dict, index: list):
  ret = f"# {defs[kind]}\n"

  if kind == 'ALPHABETICAL':
    ret += "\n## 品詞別インデックス\n"
    for fp, kd in defs.items():
      if fp != 'ALPHABETICAL':
        ret += f"* [{kd}](./{fp.lower()}.md)\n"

  for representative, content in index.items():
    ret += f"\n## {representative.upper()}\n"
    for word in content:
      ret += f"* [{word}](./content/{word[0].upper()}.md#{word})\n"
  return ret

すごいシンプルにかけて満足しています。あまりPythnoicではないと思いますが、そこは気にしないことにします。あと、ALPHABETICALのページに品詞別インデックスへのリンクを表示することにしました。引数の意味ですが、kindは品詞ID、defsは品詞の定義、indexには単語のリストを渡します。

続いて、単語の解説ページを生成する関数を考えてみました。

def generate_content_file(representative: str, words: list, defs: dict):
  ret = f"# {representative.upper()}\n"
  for word in words:
    ret += f"\n## {word['surface']}\n"
    ret += "意味:  \n"
    for i, (k, m) in enumerate(word['meaning']):
      ret += f"{i + 1}. <{defs[k]}>  \n"
      for ml in m:
        ret += f"  {ml}  \n"
    refs = [i for i in word['reference'] if i]
    if refs:
      ret += "\n関連語:  \n"
      for ref in refs:
        ret += f"* [{ref}](./{ref[0].upper()}.md#{ref})\n"
  return ret

引数の意味ですが、representativeは代表の文字(ようするにそのページの単語に共通の頭文字)、wordsは単語とそのメタ情報、defsは品詞の定義をとります。

さて、最後にこれらの関数の動作を連結する関数を書きましょう。それで完成です。

def generate_markdown_files(dic: dict):
  indices = generate_indices(dic)
  content = generate_dict_content(dic)
  chars = dic['header'].get(
    'PHONETICAL_CHARS',
    'a b c d e f g h i j k l m n o p q r s t u v w x y z').split(' ')
  defs = dic['defs'].copy()
  defs['ALPHABETICAL'] = "全単語索引"

  return {
    'content': {
      i: generate_content_file(i, content[i], defs) for i in chars
    },
    'indices': {
      ('index'
       if i == 'ALPHABETICAL'
       else i.lower()): generate_index_file(i, defs, content)
      for i, content in indices.items()
    }
  }

この関数はparseされたTSVをmarkdown形式の文字列に変換する関数です。ここまでに定義した関数を連結して整形された形にするのが役割ですね。

さて、これをファイルにdumpする関数を書いて、それで本当に完成です。

def dump_markdown(dic_path: str, dump_dir: dir):
  dic_path = abspath(dic_path)
  dump_dir = abspath(dump_dir)
  files = generate_markdown_files(parse_dict(open_dict(dic_path)))

  print('generating indices...')
  for rep, con in files['indices'].items():
    path = join(dump_dir, f'{rep}.md')
    d = dirname(path)
    if not exists(d):
      md(d)
    print(f'writing file: {path}')
    with open(path, 'w', encoding='utf-8') as f:
      f.write(con)

  print('generating content...')
  for rep, con in files['content'].items():
    path = join(dump_dir, 'content', f'{rep.upper()}.md')
    d = dirname(path)
    if not exists(d):
      md(d)
    print(f'writing file: {path}')
    with open(path, 'w', encoding='utf-8') as f:
      f.write(con)

  print('done.')

この関数は、コンソールコマンドとして実行されることを想定したものになっています。

最後に、ここまで書いたスクリプトの全体を示しておきます。

#-*- coding: utf-8;-*-

from os import makedirs as md
from os.path import join, exists, dirname, abspath
import csv

class ParseError(SyntaxError):
  pass

def get_comparator(_order):
  class _Comparator(str):
    def __gt__(self, other):
      order = list(_order)
      for s, o in zip(self, other):
        oi = order.index(o)
        si = order.index(s)
        if oi > si:
          return True
        if si > oi:
          return False
      return len(self) > len(other)
    def __lt__(self, other):
      order = list(_order)
      for s, o in zip(self, other):
        oi = order.index(o)
        si = order.index(s)
        if oi < si:
          return True
        if si < oi:
          return False
      return len(self) < len(other)
  return _Comparator

def open_dict(dic_path: str) -> list:
  with open(dic_path, encoding='utf-8') as f:
    reader = csv.reader(f, delimiter='\t')
    return list(reader)

def parse_dict(dic: list) -> dict:
  ret = {}
  state = 'none'
  for i in dic:
    if i[0] == 'BEGIN_HEADER':
      if state != 'none':
        raise ParseError('Unexpected BEGIN_HEADER tag.')

      state = 'header'
      ret['header'] = {}
      continue

    if i[0] == 'END_HEADER':
      if state != 'header':
        raise ParseError('Unexpected END_HEADER tag.')

      state = 'none'
      continue

    if i[0] == 'BEGIN_DICTIONARY':
      if state != 'none':
        raise ParseError('Unexpected BEGIN_DICTIONARY tag.')

      state = 'dictionary'
      ret['dict'] = {}
      continue

    if i[0] == 'END_DICTIONARY':
      if state != 'dictionary':
        raise ParseError('Unexpected END_DICTIONARY tag.')

      state = 'none'
      continue

    if i[0] == 'BEGIN_DEFINITION':
      if state != 'none':
        raise ParseError('Unexpected BEGIN_DEFINITION tag.')

      state = 'definition'
      ret['defs'] = {}
      continue

    if i[0] == 'END_DEFINITION':
      if state != 'definition':
        raise ParseError('Unexpected END_DEFINITION tag.')

      state = 'none'
      continue

    if state == 'none':
      continue

    if state == 'header':
      ret['header'][i[0]] = i[1]
      continue

    if state == 'dictionary':
      if i[0] not in ret['dict']:
        ret['dict'][i[0]] = {}
      ret['dict'][i[0]][i[1]] = {
        'meaning': i[2],
        'reference': i[3].split(' ')
      }
      continue

    if state == 'definition':
      ret['defs'][i[0]] = i[1]

  if state != 'none':
    raise ParseError(f'A match pair tag of END_{state.upper()} not found.')

  return ret

def generate_indices(dic: dict):
  chars = dic['header'].get(
    'PHONETICAL_CHARS',
    'a b c d e f g h i j k l m n o p q r s t u v w x y z').split(' ')
  nodes = {i: {c: [] for c in chars} for i in dic['defs']}
  nodes['ALPHABETICAL'] = {c: [] for c in chars}
  comp = get_comparator(''.join(chars))

  for word, data in dic['dict'].items():
    nodes['ALPHABETICAL'][word[0]].append(word)
    for kind in data:
      nodes[kind][word[0]].append(word)

  for i in nodes.values():
    for j in i.values(): 
      j.sort(key=comp)

  return nodes

def generate_dict_content(dic: dict):
  chars = dic['header'].get(
    'PHONETICAL_CHARS',
    'a b c d e f g h i j k l m n o p q r s t u v w x y z').split(' ')
  defs = dic['defs']
  contents = {i: [] for i in chars}
  comp = get_comparator(''.join(chars))

  for word, data in dic['dict'].items():
    contents[word[0]].append({
      'surface': word,
      'meaning': [
        (kind, meta['meaning'].split(' '))
        for kind, meta in data.items()
      ],
      'reference': [ref for d in data.values() for ref in d['reference']]
    })
  for c in contents.values():
    c.sort(key=lambda x: comp(x['surface']))
  return contents

def generate_content_file(representative: str, words: list, defs: dict):
  ret = f"# {representative.upper()}\n"
  for word in words:
    ret += f"\n## {word['surface']}\n"
    ret += "意味:  \n"
    for i, (k, m) in enumerate(word['meaning']):
      ret += f"{i + 1}. <{defs[k]}>  \n"
      for ml in m:
        ret += f"  {ml}  \n"
    refs = [i for i in word['reference'] if i]
    if refs:
      ret += "\n関連語:  \n"
      for ref in refs:
        ret += f"* [{ref}](./{ref[0].upper()}.md#{ref})\n"
  return ret

def generate_index_file(kind: str, defs: dict, index: list):
  ret = f"# {defs[kind]}\n"

  if kind == 'ALPHABETICAL':
    ret += "\n## 品詞別インデックス\n"
    for fp, kd in defs.items():
      if fp != 'ALPHABETICAL':
        ret += f"* [{kd}](./{fp.lower()}.md)\n"

  for representative, content in index.items():
    ret += f"\n## {representative.upper()}\n"
    for word in content:
      ret += f"* [{word}](./content/{word[0].upper()}.md#{word})\n"
  return ret

def generate_markdown_files(dic: dict):
  indices = generate_indices(dic)
  content = generate_dict_content(dic)
  chars = dic['header'].get(
    'PHONETICAL_CHARS',
    'a b c d e f g h i j k l m n o p q r s t u v w x y z').split(' ')
  defs = dic['defs'].copy()
  defs['ALPHABETICAL'] = "全単語索引"

  return {
    'content': {
      i: generate_content_file(i, content[i], defs) for i in chars
    },
    'indices': {
      ('index'
       if i == 'ALPHABETICAL'
       else i.lower()): generate_index_file(i, defs, content)
      for i, content in indices.items()
    }
  }

def dump_markdown(dic_path: str, dump_dir: dir):
  dic_path = abspath(dic_path)
  dump_dir = abspath(dump_dir)
  files = generate_markdown_files(parse_dict(open_dict(dic_path)))

  print('generating indices...')
  for rep, con in files['indices'].items():
    path = join(dump_dir, f'{rep}.md')
    d = dirname(path)
    if not exists(d):
      md(d)
    print(f'writing file: {path}')
    with open(path, 'w', encoding='utf-8') as f:
      f.write(con)

  print('generating content...')
  for rep, con in files['content'].items():
    path = join(dump_dir, 'content', f'{rep.upper()}.md')
    d = dirname(path)
    if not exists(d):
      md(d)
    print(f'writing file: {path}')
    with open(path, 'w', encoding='utf-8') as f:
      f.write(con)

  print('done.')

if __name__ == '__main__':
  from sys import argv
  dump_markdown(argv[1], argv[2])

はー。疲れました。はい、これでおそらくどの方面にも需要がないツールの完成です。「欲しかったから作った」の真骨頂ですね。最後までお付き合いいただき、ありがとうございました。

HTMLのノードを直接生成するJSXファクトリを簡単に書いてみた

2019-08-20T17:41:42+09:00

JSXって知っていますか？ JSXとは、Reactなどに使われているXML(HTML)とjavascriptの混在記法です。
そして、JSXを内部的に処理する関数をJSXファクトリといいます。
これは、BabelやTypeScriptコンパイラの設定で自由に変更可能です。
ところでWeb Componentsという、新しいHTMLエレメントを自由に作れるjavascriptのAPIが存在するのはご存じでしょうか。

これを使えば、Reactのようなことがネイティブのjavascriptでできるのではないだろうか？そう考えたのでやってみることにしました。

まずはJSXファクトリの仕様から説明します。
JSXファクトリは以下のようなシグネチャを持つ関数であれば何でも構いません。

/**
 * @param element 文字列または関数またはクラス。文字列の場合はタグの名前、クラス・関数の場合はタグが表すコンポーネント。
 * @param props 要素の属性。オブジェクトで渡す。存在しない場合はnull。
 * @param children 可変長引数で、現在の要素の子要素を渡す。
 */
function JSXFactory(element, props, ...children) {}

そしてこれは重要なことなのですが、この関数が返す値や動作は何でもよいのです。
JSXとは、単なる糖衣構文でしかありません。つまり、その動作は実装した人にゆだねられます。
以下に、JSXの変換例を示します。

import React from 'react';

let node = This is child text.;

これは以下のようなjavascriptに変換されます。

import React from 'react';

let node = React.createElement('div', {'className': 'hoge'}, 'This is child text');

そしてこの、React.createElementにあたる関数はtsconfig.json内で以下のように設定できます。

{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "myCreateElement"
  }
}

この場合はjsxFactoryにmyCreateElementを設定しているため、React.createElement関数の代わりにmyCreateElementが使われます。
さて、これらの仕様を使って、普通のHTMLノードを生成するJSXファクトリを作ってみたいと思います。
まずは型の宣言から。

declare namespace JSX {
  export interface JSXElement {}
  export interface IntrinsicElements {
    [elemName: string]: any;
  }
  export type GlobalAttributes = EventAttributes | ElementAttributes;
  export type ElementAttributes = /* HTMLノードのグローバル属性(略) */
  export type EventAttributes = /* イベント属性(略) */
}

シンプルに行きましょう。
組み込みの要素の型をいちいち定義していたら日が暮れます。
なのでanyで誤魔化しました。

続いては本題のJSXファクトリの実装です。

import './types';

type PropType = { [P in JSX.GlobalAttributes | keyof K]: any };

export function createElement>(
  element: E | string,
  props: PropType,
  ...children: any[]
): Element {
  let elem: Element;
  if (typeof element === 'string') {
    elem = document.createElement(element);
  } else {
    elem = document.createElement(
      (element as any).name.replace(/(?!^)([A-Z0-9])/g, '-$1').toLowerCase()
    );
  }
  Object.keys(props || {})
    .filter(it => props.hasOwnProperty(it))
    .forEach(it =>
      elem.setAttribute(convertPropName(it), props[it as keyof PropType])
    );
  children.forEach(it =>
    !(it instanceof Element)
      ? it.hasOwnProperty('render') && typeof it.render === 'function'
        ? elem.appendChild(it.render())
        : elem.append(it.toString())
      : elem.appendChild(it)
  );
  return elem;
}

function convertPropName(name: string): string {
  switch (name) {
    case 'className':
      return 'class';
    case 'htmlFor':
      return 'for';
    default:
      return name;
  }
}

やってること自体はきわめて単純。
document.createElement関数でノードを作り、引数に従って属性や子要素を追加しているだけです。
JSXではclassとforがそれぞれclassNameとhtmlForになるため、convertPropName関数はそれを変換します。

にしてもJSXファクトリ、かなり面白いですね。
これ使えばいろいろできそうな予感。
React以外でも活用の目はありそうです。

俺的CSS便利Property・Value・Selector 50連発！

2019-08-16T15:05:02+09:00

最近すごくHTMLやCSSを書いている気がするので、ここらでCSSのよく使うプロパティや知っていると便利なプロパティをまとめてみることにしました。早速行ってみましょう！

よく使うもの

1. ::before, ::after

これを指定した要素の子要素として挿入される疑似要素。子要素を持てない要素(img, inputなど)には指定不可能。contentプロパティを指定しない限り挿入されない。なにも入れるcontentがない場合はcontent: ""を指定する。

2. min-height, min-width

高さや幅の最小値を指定する。mainコンテナのように、必ずある大きさ以上の大きさが必要な要素に指定すると、コンテンツの大きさにかかわらず設定した大きさより小さくならない。

3. max-height, max-width

上のmin-系とは逆に、高さや幅の最大値を設定する。指定すると、コンテンツの大きさにかかわらず、設定した大きさより大きくならない。

4. order

HTMLの要素の兄弟順をオーバーライドする。これを指定すると、強制的に兄弟要素の中でその順番になるように表示される。nth-系には影響しない。

5. visibility

display: noneと違って、表示したくないけれど領域は確保したいという場合に使える。

6. z-index

要素の描画順を設定するプロパティ。position: fixed;と使うことが多い。

7. clip-path

要素の見かけの外形を設定するプロパティ。うまく使えばCSSだけでいろんな表現が可能に。

8. will-change

要素のCSSプロパティがアニメーションで変化することをあらかじめブラウザに知らせる。パフォーマンス爆上がり。

9. transform

要素を移動、回転、拡縮、変形させるプロパティ。ちょっと場所がずれるときとか、アニメーションで動かしたいときに便利。

10. :root

root疑似クラス。document.documentElementを指し示すセレクタ。カスタムプロパティと組み合わせると応用範囲は無限大。メディアクエリと組み合わせるとモバイルビュー判定にも使える。

@media screen and (max-width: 960px) {
    :root {
        --is-mobile: yes;
    }
}
@media screen and (min-width: 961px) {
    :root {
        --is-mobile: no;
    }
}

11. transform-origin

transformプロパティの基準になる点を指定するプロパティ。ローディング画面のスピナなどを作るときなど、意外と使える場面が多い。

12. position: relative

position: absoluteが親要素を基準とした位置取りにならない！？って思ったときは大概こいつの設定忘れが原因。これが設定された要素の子要素にposition: absoluteが指定された場合、これが設定された要素を基準とした位置取りになる。

13. appearance: none

デフォルトの見た目をなくすプロパティ。input要素に独自のスタイルを当てたいときなど、これを設定するとうまくいくことが多い。

14. box-shadow

要素が落とす影を設定するプロパティ。背景が設定されていない要素につけると違和感マシマシ。そういうインラインなテキスト要素に影をつけたい場合は、text-shadowプロパティを使うこと。

15. background-clip

きれいなタイトル文字の修飾をしたいときに。ヘッディング要素のbackground-imageプロパティに適当な画像を設定して、このプロパティの値をtextにすると、背景が文字の形で切り抜かれる。

16. background-attachment: fixed

要素内のコンテンツが動いても、背景を動かしたくない場合に使う。サイトの背景に設定するといい感じになるかも。

17. border-radius

要素を角丸にできる。もはや説明不要。

18. :not

セレクタにマッチしない要素にマッチする。例えば、:not(.not-select)というセレクタは、not-selectクラスを持たない要素にマッチする。

19. :first-child, :last-child, :nth-child, :nth-last-child

指定された順番にある兄弟要素にマッチする疑似クラス。

20. :first-of-type, :last-of-type, :nth-of-type, nth-last-of-type

指定された順番にある同じタグ(spanどうし、divどうしなど)の兄弟要素にマッチする疑似クラス。

21. :required

required属性のあるformパーツにマッチする。

22. :invalid

入力された値が要求された形式に従っていないformパーツにマッチする。

23. outline

borderの外側に描画されるborderみたいなやつ。borderと違って、それ専用に場所が確保されない。

24. attr()

print画面でだけ::after疑似要素にurlを表示したいときなど、CSSのプロパティに特定のHTML属性を設定したいときに使用する。

25. user-select

ユーザーが要素を選択可能かどうかを設定する。spanにclickイベントを設定したときなど、選択されるのが鬱陶しかったり、要素を選択してほしくないときに使う。

26. pointer-events

要素のどこがマウスイベントをキャプチャするか指定するプロパティ。オーバーレイなど、ほかの要素より前に出るがマウスイベントをキャプチャしたくない要素にはnoneを設定すると吉。

27. cursor

要素の上に乗ったカーソルの表示の種類を設定する。ユーザビリティが上がるらしい。

28. :checked

チェックが入っているチェックボックスにマッチする。うまく活用するとHTML/CSSだけで開閉するメニューなどの2つの状態を持つUIが記述できる。

29. display: flex

要素をflexboxにする。子要素の数によって、自動でいい感じに配置を決めてくれる。すごく便利。ついつい多用しがち。

30. justify-content

要素の配置を決めるプロパティ。上のdisplay: flexと組み合わせて使うことが多い。

31. flex-flow

flexboxで、要素を配置する向きを決める。

32. flex

flexboxの子要素に指定するプロパティ。flex-grow、flex-shrink、flex-basisの3つを一気に指定できる。flex-growは要素がコンテナより小さいときにどれくらい大きくするか、flex-shrinkは逆に要素がコンテナより大きいときにどれくらい小さくするか、flex-basisは要素がコンテナの中でどれくらいの初期サイズを持っているのかを指定する。

そこまで使うわけでもないけど知っていたら便利なもの

33. position: sticky

これを設定された要素が親要素の中でrelative + fixedのような振る舞いをするようになる。Qiitaのいいねボタンやストックボタンのスマホ版みたいな振る舞いがこれ(とtop, bottom, right, leftプロパティのどれか1つ以上)だけで記述可能。

34. text-indent

行頭字下げをするプロパティ。パラグラフの先頭で字下げしたいときに有効。

35. ::first-letter

ある要素の中で、最初の文字にマッチする疑似要素。パラグラフの最初の文字だけ大きくするような表現に使える。

36. ::select

ある要素の中で、現在選択されているものにマッチする疑似要素。選択部分の強調などに使える。

37. ::target

urlのターゲットになっている要素にマッチする。ページ内リンクで飛んだ先の要素を強調するのに使える。

38. perspective

transformと組み合わせて使う。遠近法をどの程度かけるか指定するプロパティ。

39. transform-style: preserve-3d

これを三次元の移動回転変形を指定したtransformプロパティを持つ要素の親に指定することで、3次元的な描写を可能にすることができる。

40. filter

要素に指定したSVGフィルタをかける。::beforeに指定して背景をぼかしたり、グレイスケール化したり、いろいろな視覚効果を追加することができる。

41. ::marker

::marker
リストのマーカーにマッチする疑似要素。

←これがリストのマーカー。

42. ::placeholder

formパーツ要素のplaceholderにマッチする。placeholderの色やフォントなどを変えたいときに便利。

43. :defined

任意のCustomElementにマッチする。

44. quotes

～のタグを使ったときに表示される引用符を制御できる。それ以外のタグの場合も、以下のようにして利用できる。

blockquote {
    quotes: "「" "」";
}
blockquote::before {
    content: open-quote;
}
blockquote::after {
    content: close-quote;
}

より正確な動作の説明としては「open-quoteとclose-quoteの値を制御する」ということになる。

45. text-overflow

文字がコンテナのサイズを超過したときの処理を設定する。...のような記号で省略したり、それ以外の文字で省略したり、あるいはそれ以上を表示しなかったりするような表現が可能。

46. writing-mode

文字を縦書きにするか横書きにするか設定できる。サイトの種類によっては多用することもあるかも。

47. text-orientation

writing-modeをvertical-rlまたはvertical-lrにしたときに、文字をどの向きで配置するか設定する。

48. clear

浮動要素のまわりの固定要素の配置(回り込み)を指定する。浮動要素しか含まないような要素の高さを維持するために使うこともできる。

.float-only::after {
    content: "";
    display: block;
    clear: both;
}

49. all

すべてのプロパティを一気に設定できる。親要素からすべてのスタイルを継承したいときや、逆に継承したくないとき、デフォルトの見た目にしたいときに使える。

50. touch-action

要素に対して可能なタッチアクションの種類を制限できる。たとえば、ズームしてほしくないとか、縦方向のスクロールを制限したいとかそういう場合に便利。Cookie Clickerのタッチ領域にこれを指定してほしいと何度思ったことか。

まとめ

CSS難しい……。MDNの解説ってプロパティごとに内容の質にけっこうばらつきが大きいんですね。

参考

https://developer.mozilla.org/en-US/docs/Web/CSS
https://www.w3schools.com/cssref/

Happy Hacking!

この記事はブログにも投稿しています。

Pythonで学ぶデータ構造入門 List編

2019-06-11T11:13:41+09:00

TL;DR

データ構造の基本であるList(LinkedList)やHashMap、Queue、Dequeを自分で実装して理解を深めようという趣旨でやっていきます。

まずはLinkedListを作ってみる

LinkedListとは、リストの各々の要素に次の要素への参照をつけておくことで一連のデータを表現できるデータ構造です。

このように、それぞれの要素が次への参照とデータを持っています。
これをPythonで実装してみます。
まずはそれぞれの要素のクラスです。

```python:要素
class Element:
"""
Element(data, next)

LinkedListのそれぞれの要素のクラス。
dataはこの要素が表すデータ。
nextはこの次の要素の参照。
"""
def __init__(self, data, next=None):
    self.data = data
    self.next = next


次にリスト本体を実装してみます。

```python:LinkedList
class LinkedList:
    def __init__(self):
        self.first = None

    @property
    def is_empty(self):
        return self.first is None

    def append(self, data):
        if self.is_empty:
            self.first = Element(data)
            return
        nxt = self.first
        while nxt.next is not None:
            nxt = nxt.next
        nxt.next = Element(data)

    def pop(self):
        if self.is_empty:
            raise ValueError

        nxt = self.first
        while nxt.next is not None:
            nxt = nxt.next

        # 最後の要素のデータを一時変数に退避
        last = nxt.next.data
        # 最後の要素への参照を消す
        nxt.next = None
        return last

    def remove(self, idx):
        # 最初ならself.firstを変更
        if idx == 0:
            f = self.first
            self.first = f.next
            return f.data

        size = len(self)
        if idx >= size or idx < 0:
            raise IndexError(idx)
        if self.is_empty:
            raise ValueError

        # 最後ならpop
        if idx == size - 1:
            return self.pop()

        nxt = self.first
        for _ in range(idx - 1):
            nxt = nxt.next
        rem = nxt.next
        nxt.next = rem.next
        return rem.data

    def insert(self, idx, data):
        # 最初ならself.firstを変更
        if idx == 0:
            self.first = Element(data, self.first)
            return

        size = len(self)
        if idx > size or idx < 0:
            raise IndexError(idx)

        # 最後+1ならappend
        if idx == size:
            self.append(data)
            return

        nxt = self.first
        for _ in range(idx):
            nxt = nxt.next
        nxt.next = Element(data, nxt.next)

    def __iter__(self):
        nxt = self.first
        while nxt.next is not None:
            yield nxt.data
            nxt = nxt.next

    def __len__(self):
        if self.is_empty:
            return 0
        nxt = self.first
        ret = 1
        while nxt.next is not None:
            nxt = nxt.next
            ret += 1
        return ret

    def __getitem__(self, idx):
        if idx >= len(self) or idx < 0:
            raise IndexError(idx)
        if self.is_empty:
            raise ValueError
        nxt = self.first
        for _ in range(idx):
            nxt = nxt.next
        return nxt.data

    def __setitem__(self, idx, val):
        if idx >= len(self) or idx < 0:
            raise IndexError(idx)
        if self.is_empty:
            raise ValueError
        nxt = self.first
        for _ in range(idx):
            nxt = nxt.next
        nxt.data = val

こんな感じですね。
これが一番単純なLinkedListの実装です。
ですけど、結構非効率的ですね。

例えば、一番後ろのデータを取得するために最初から全部辿っています。
データにアクセスするためにすべて前からアクセスするのでは、後半のデータにアクセスする際に非効率になってしまいます。
これを解決するのが双方向リストというものです。

(次回があれば)これを双方向リストに改造してみたいと思います。
今日のところはここまでにしましょう。それがいい。

純粋なPythonでHTMLを記述するライブラリを作ったから使ってほしいだけの記事

2019-02-15T01:21:35+09:00

TL;DR

Crieitに記事を投稿するのはすさまじく久しぶりな気がしますが…。
おはようございます、こんにちは、今晩は。Frodoです。

さて、今回は自作ライブラリをPyPIに登録したので使ってみてほしいというだけの記事になりますw
どういうライブラリを作ったのかと言いますと、純粋なPythonの構文だけで比較的分かりやすくHTMLを構築するライブラリです。

HTMLのテンプレートライブラリと言えばPythonではJinjaが有名でしょうか。
ですが、JinjaはPythonの文法をほとんど全くフォローしておらず、新しくまったく別な言語を覚えることになってしまいます。
よく使われているWebフレームワークのDjangoのテンプレート言語も似たようなものですね。

そこで、純粋にPythonの言語機能のみを使ってHTMLを構築できないかと作ったのがRattle.pyです。
Rattle.pyには次のような特徴があります。

小型・軽量であること。Rattle.pyには依存しているライブラリがありません。
純粋なPythonの文法のみでHTMLが構築できること。HTMLやPythonが分かっていれば覚えることはほとんどありません。
日本語でサポートが受けられること。開発者が日本人ですから当然です。もちろん、英語でのサポートもあります。

説明してもイメージがわかないと思いますので、実際に使ってみたいと思います。

実際に使ってみる

まずはインストールしましょう。話はそれからです。

$ pip install rattlepy

このように、普通のライブラリと同様pipで簡単に導入できます。
使うのも驚くくらい簡単です。

from rattlepy.templating import (
  html, body, head,
  title, h1, p, div, span, text,
  meta, link)

with html(lang='ja') as elem:
  with head():
    meta(charset='utf-8')
    meta(name='viewport', content='initial-scale=1.0;width=device-width')
    link(href='main.css', rel='stylesheet', type='text/css')
    with title():
      text("Hello, Rattle.py!")
  with body():
    with div(className='container'):
      with h1(): text("Hello, Rattle.py!")
      with p():
        text("Rattle.py is a html templating library.")
        with span(className='emphasized'):
          text("This library can support you to make HTML in pure Python.")

print(elem)

これを実行するとこうなります。


    
        
        
        
        
            Hello, Rattle.py!
        
    
    
        
            
                Hello, Rattle.py!
            
            
                Rattle.py is a html templating library.
                
                    This library can support you to make HTML in pure Python.

このように、非常に簡単にHTMLが記述できるのです。
また、これは純粋なPythonですから、何も考えずにPythonの変数を使ったり関数を呼び出したりできます。
これRattle.pyの特徴です。

興味を持っていただけたら

このライブラリは開発中で、いろいろと未実装の機能が多くあります。
また、使って頂き、フィードバックや意見がいただけると、それがどのようなものであっても励みになります。

GitHubのリポジトリもぜひチェックしてみてください。スターなど頂けたら激しく喜びます。
フィードバックや意見は@BoufrawFrodo2にメンションして送っていただくか、GitHubにissueを立てて頂ければチェックします。
完全に宣伝な記事でしたが、最後までお付き合いありがとうございました！

あけおめからPython

2019-01-01T00:00:27+09:00

皆さんへのメッセージです。

謹賀, 新年=(lambda x:(not x,x))([])
新年.append((謹賀+謹賀)**((謹賀+謹賀)**(謹賀+謹賀+謹賀))-(謹賀+謹賀+謹賀)**(謹賀+謹賀+謹賀)-(謹賀+謹賀))
新年.append((謹賀+謹賀)**((謹賀+謹賀)**(謹賀+謹賀+謹賀)-謹賀)+謹賀)
新年.append(新年[-謹賀]+謹賀)
新年.append(新年[謹賀-謹賀])
新年.append(新年[謹賀])
新年.append(新年[謹賀+謹賀]+((謹賀+謹賀)*(謹賀+謹賀))**(謹賀+謹賀)-謹賀)
新年.append(新年[謹賀-謹賀])
新年.append(新年[謹賀])
新年.append(新年[謹賀+謹賀]+(謹賀+謹賀)**(謹賀+謹賀+謹賀))
新年.append(新年[謹賀-謹賀])
新年.append(新年[謹賀+謹賀])
新年.append(新年[謹賀])
print(bytes(新年).decode('utf-8'))

実行してみましょう。

小ネタは置いといて。

この前、ふとリスト内包表記の中身(ローカル変数空間)が気になったので以下のコードを実行してみました。

[i for i in [0] if print(locals()) or 1]

結果はこうなりました。

{'i': 0, '.0': }

はい、コードの実行フレームが分かれていますね。ところで表示された辞書オブジェクトのキー'.0'って何でしょう？気になったので以下のコードを実行してみました。もし、私の予想が正しければ実行は終了しないはずです。

[i for i in [0] if locals().__setitem__('.0', range(2).__iter__()) or 1]

実際にやってみた結果、[0]が出力されました。どういうことなんでしょう…?
__setitem__をした後にprint(locals())で中身を調べてみます。

[i for i in [0] if locals().__setitem__('.0', range(2).__iter__()) or print(locals()) or 1]

結果はこのようになりました。

{'i': 0, '.0': }

要素を変えることができていません。なぜでしょう? 残念なことにいくつか仮説を立ててみたのですが、そのどれもが間違っていました。

仮説１. ローカル変数空間はループごとに新しく作られている

これは簡単に確かめることができます。

[i for i in [0,1] if print(id(locals())) or 1]

これで表示される数が2つとも等しければ使いまわされていることが証明できます。私が実行した結果はこうなりました。

1711743637328
1711743637328
[0, 1]

はい、一致していますね。異なるオブジェクトのIDが一致することはまずありえませんので、ローカル変数空間は使いまわされていることがわかりました。

仮説 2. '.0'というキーは例外的に書き換えできない

当然なんてことはありませんでした。

>>> x = {}
>>> x['.0'] = 12
>>> x
{'.0': 12}
>>> x['.0'] = 4
>>> x
{'.0': 4}

仮説 3. ローカル名前空間のオブジェクトがdictではない

だんだん投げやりになってきましたね。当然そんなわけなく、dictでした…。

>>> [i for i in [0] if print(type(locals())) or 1]

[0]

とまぁ、こんな感じでPythonサイドからの解明は終ぞできませんでした…。今年はPythonのコードリーディングをしようかと考えています。

リスト内包表記は単体でチューリング完全と聞いたので

リスト内包表記だけでいくつか書いてみました。まずは普通にFizzBuzzから。

# FizzBuzz in list comprehension
[('Fizz' if not i%3 else '')+('Buzz' if not i%5 else '')+(str(i) if i%3 and i%5 else '') for i in range(20)]

続いてはAtCoder Beginners SelectionよりCard Game for Twoを解くプログラム。結構強引ですね。

print(sum(x-y for x, y in zip(*(lambda x:((x.append(0) if len(x)%2 else None),x.sort(reverse=True),(x[::2],x[1::2]))[2])((input(), [int(i) for i in input().split()])[1]))))

正直言うと、自分も難読化以上の意味はないと思いました…。

ですが、いろいろやっているとやはり内包表記のポテンシャルは高いと感じました。あなたもやってみてはいかが？

for文で遊ぶ

for i in range(20):
    print(i)

と同じプログラムをrange関数なしで黒魔術っぽくやってみたいと思います。

for i in (lambda x: (x, x.append(x))[0])([]):
    print(len(i)-1)
    i.append(i)
    if i[20:]:
        i.clear()

循環参照をうまく使ってみました。難読化以上の意味はないです

私からは以上です。皆さん、今年も元気に行きましょう！

frodo821の投稿 - Crieit

The Zen of Python 邦訳

CLIツールを簡単に作れるフレームワークを作ったよ！

TSVで定義した辞書をMarkdownで出力するツールを作った話

HTMLのノードを直接生成するJSXファクトリを簡単に書いてみた

俺的CSS便利Property・Value・Selector 50連発！

Pythonで学ぶ データ構造入門 List編

純粋なPythonでHTMLを記述するライブラリを作ったから使ってほしいだけの記事

Hello, Rattle.py!

あけおめからPython

Pythonで学ぶデータ構造入門 List編