[定期進捗・雑多メモ]Pythonでフロントを書いてみたいので、ライブラリを作ってみたい #2

# 前置き（注意書き？）

- ほぼほぼ自分用の雑多な記事（メモ）その2です。
- 趣味のプログラミングによる、Pythonでフロントエンドが書けるようにならないかな？というライブラリ作成記録です。まだ全然完成していません。
- 99.9％以上の方は普通にTypeScriptとかの選択の方が好ましいと思っています。ほぼ趣味です。
- ずっと黙々とコーディングだけしていると個人制作のアプリやゲームのように途中で挫折しそうだったので、定期的にQiitaにアウトプットしていっています。

# 前回までの記事

https://qiita.com/simonritchie/items/3fb77bcef35493f87aa2

前回書いたのが2021年03月10日辺りなようなので、約4か月弱程度経過しているようです。ファーストコミットからは約6か月弱程度の経過のようです。時が経つのは早い…。

# ライブラリリポジトリ

https://github.com/simon-ritchie/apysc

# 前回の記録以降に対応したことの振り返り

## ロゴを追加してみた

ロゴとかが無いとGitHubのリポジトリページなどが寂しい・・・と思ったので、あまり時間はかけずにさくっと終わる範囲での対応となりますがロゴを適当に作りました。実装の方に時間を割きたいので黄金比の三角形を回転させただけです。今の所はとりあえずこれでいいか・・・という所感です。将来もっとしっかり時間をかけて作ろうか・・・と感じるまではこのままいこうと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/e12a0f41-fc29-c987-63a0-05d1154056a3.png)

## ドキュメントにSphinxを採用し、GitHub Pagesでホスティング・デプロイされるようにしました

大きなところとしてドキュメントにSphinxを導入しました。そこまで時間はかけていませんが、ある程度お洒落なように見えるようにテーマのライブラリを選択させていただいたりスタイルシートを調整したりなどを対応しました。

ドキュメントページ:

https://simon-ritchie.github.io/apysc/index.html

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/e5191836-6297-79d7-db14-b15697358d6a.png)

Sphinxを採用した理由としては、

- 仕事でもSphinxを使っているので合わせたかった。
- Pythonプロジェクトなので、Python公式・NumPy・Pandas・Dask・PyTorch・Django・boto3とPythonコミュニティでかなり高い採用率になっているというのも踏まえ選択した（PythonでのSphinxの情報の豊富さなども加味し）。

辺りを主な理由にしています。

執筆はマークダウンで行えるようにしています。

また、ホスティングに関してはGitHub Pagesを選択しました。こちらは

- 無料で使える。
- GitHubで完結するとデプロイ関係の整備がシンプルで楽。

といった辺りの理由から選択しています。初めてGitHub Pagesを使いましたがシンプルで素敵ですね。

この辺の対応は以前記事にもしています。

https://qiita.com/simonritchie/items/eef7d50959ad9bdb8440

## 既存の実装箇所のドキュメントの執筆をどんどん進めていきました

ただしまだ実装分にドキュメントが追いついていません。ひたすらドキュメント執筆が続く・・・とちょっと気が滅入ってくる感じもあります（少し良くない）。本当はTDDみたく事前にものを書いたりと、個々の実装と同時くらいにドキュメントを書くと良いのでしょうけど初期のころの実装はそもそもPoC的な、「本当にいけるかな？」といった検証面も強かったのでそのフェーズでドキュメントを書いていると色々スピードが落ちるのでやむを得ない・・・かという所感です。

この辺は悩ましいですね。今後は基本的に実装後同時くらいにドキュメントを書いたりを進めていって、ドキュメント未追加箇所もちょっとずつ整備して・・・とやっていきたいところです。

## ドキュメントのコードブロックが実行可能なものはビルド時に実行されるようにしました

PythonのdoctestやRustのDocumentation testsじゃないですが、ドキュメント内のコードブロックもドキュメントビルド時に実行できるものはなるべく実行されるようにしました。

apyscがPythonを書いてHTMLやJavaScriptを出力するライブラリなので、コードブロック実行時の出力結果もそのままドキュメント上で表示されるようにしました。例えばドキュメント上で以下のように表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/451ebdde-9579-cda3-a468-767271126243.png)

https://simon-ritchie.github.io/apysc/graphics_line_style.html

出力結果はそのままドキュメント上でマウスイベントなども反映されるようになっています。描画の表示やマウスイベントなどの挙動の確認もそのままドキュメント上で行えます。

これでパッケージのコードをアップデートした時にドキュメント側のコードが動かなくなっている・・・といったことを大分検知しやすくなりました（ビルド時点でエラーで止まったり等）。

ビルドスクリプトは以下のものを使っています。

https://github.com/simon-ritchie/apysc/blob/main/build_docs.py

大分快適に感じてはいるのと、今後も頻繁にアップデートをしていくのでこの辺は整備して良かったなと思います（開発体験的な満足度が高い）。

## ドキュメントのビルド時間を短縮しました

ドキュメントビルド時にコードブロックなどが実行されるようにしたのは良いものの、一方でドキュメントが増えてきたらドキュメントビルドの時間がちょっと気になるようになってきました。そこで以下のような調整を入れています。

- ドキュメント執筆中は各ドキュメントページごとに前回ビルドが通った時のハッシュ値を取っておき、ハッシュ値が更新されていなければコードブロックの実行をスキップするようにした（更新を検知したファイルのみコードブロックの実行を行う）。
- ただしそれだとライブラリコード側のみ更新した時にドキュメント側のエラーなどの検知が漏れたりするので、最終的なLintなどを流す時には同時に全コードブロックを実行し直す。
- コードブロックごとに個別にjsのライブラリなどを出力していたものの、それらを共通の箇所を参照する形にしてドキュメント内で出力されるファイル数がぐぐっと減るようにした（その辺の出力周りの実装でオプションなどを追加）。

## 英語でのドキュメント執筆用にVS Code上にGrammarlyを入れ始めました

英語が全然分からない人間なのですが、ドキュメントは英語で書く必要があります。そこでGrammarlyの拡張機能を入れてVS Code上でマークダウンに対して文法などのチェックが入るようにしました。慣れてきたらとても快適です。

この辺りも以前記事にしています。

https://qiita.com/simonritchie/items/f49943f08cd09b92f3f9

## GitHub Actions対応をし、LintやテストやPyPIデプロイなどのCI/CD部分で楽ができるようにしました

毎回手動でPyPIデプロイなどをしていた箇所をGitHub ActionsでCI/CD的なところをある程度整備しました。お仕事だとJenkinsですが、GitHub Actionsが大分世の中的に目立つようになってきたので触ってみました。

ある程度資料を目を通したりを含めて1日未満で整備しきったのでとても学習コストが低くて楽で良いですね。

対応したところとしては、

- Lintのチェック（flake8, mypy, numdoclint）
- カバレッジも含めたテストの実行
- GitHub上でのバッジ設定
- PyPIへのアップロード

辺りを対応しています。テストカバレッジを出したりは時間がかかるので、ローカルでのテストではカバレッジを出さずに対応する方向にして、GitHub上で随時カバレッジが表示されるようにしました（カバレッジが落ちていれば、漏れている行がGitHub Actionsのログに表示されるように設定）。

カバレッジを出さないとローカルのテストが20秒弱で800弱程度のテスト関数が通るのでとても開発体験的に素敵です。

この辺りは以下にて記事にしてあります。

https://qiita.com/simonritchie/items/629a02fc1ad0fd02d267

## 描画系のインターフェイスを拡充しました

まだ全然足りていませんが、前回の記事の時よりかは大分描画系のインターフェイスを拡充しました。前回の記事時点では四角の描画だけだったので大分バリエーションが増えた感があります。

内部ではjsのライブラリなども使って楽はしているものの、自分で色々書いてみると果てしなく大変ですね・・・w ただし標準仕様やライブラリドキュメントを色々読んだりが必要になったりと大分勉強になります。

以下追加対応したものです。

### 線のスタイル設定のインターフェイス

まずは線のスタイル設定です。線のスタイル設定だけでも色々あるんだなぁ・・・と思いつつ対応しています。コード量も結構多くなってちょっと大変に感じる箇所でもありました。

名前は参考にしているas3（Flash / Animate）のインターフェイスに合わせて`line_style`としています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/d740b603-9fe0-dfbd-6c41-e724e47d83e8.png)

https://simon-ritchie.github.io/apysc/graphics_line_style.html

基本的な線幅とか色設定に加えてcap設定とかjoints設定とか色々あるんだなぁと思いつつ作業しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/903a1c0b-f381-b265-4961-16085fec4ea2.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/d0e8e4b6-f8fa-9195-4840-bdd48f8619aa.png)

点線とかドット線とかも色々対応してあります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/786b1548-6978-9bff-071a-007698143ebf.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/e24756ad-618d-375c-fa9d-fc351281ecdd.png)

### 角丸の四角の描画インターフェイス

`draw_round_rect`というインターフェイスを追加しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/5da29e92-a701-b2b0-b238-3d6d2abe271d.png)

https://simon-ritchie.github.io/apysc/graphics_draw_round_rect.html

### 円描画のインターフェイス

`draw_circle`というインターフェイスを追加しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/1b3a3143-2bb2-7247-e8bf-aa7763b416e0.png)

https://simon-ritchie.github.io/apysc/graphics_draw_circle.html

### 楕円描画のインターフェイス

`draw_ellipse`というインターフェイスを追加しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/0d1eae9a-98e0-6182-9435-1ef36613927a.png)

https://simon-ritchie.github.io/apysc/graphics_draw_ellipse.html

### 折れ線描画のインターフェイス

as3のインターフェイスを参考に`line_to`と`move_to`という名前で追加しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/2e9ed18c-cf71-712c-853e-b62f8d7ee49d.png)

https://simon-ritchie.github.io/apysc/graphics_move_to_and_line_to.html

### 直線描画のインターフェイス

折れ線あれば要らなくない？と迷いましたが、シンタックスシュガーじゃないですがシンプルな記述で対応できるための各直線のインターフェイスも追加しました。

いくつかインターフェイスを分けてあり、`draw_line`、`draw_dotted_line`、`draw_dashed_line`、`draw_round_dotted_line`、`draw_dash_dotted_line`と各インターフェイスを追加してあります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/a7160511-8a02-b018-b651-fb19fcc4b6ae.png)

https://simon-ritchie.github.io/apysc/graphics_draw_line.html

https://simon-ritchie.github.io/apysc/graphics_draw_dotted_line.html

https://simon-ritchie.github.io/apysc/graphics_draw_dashed_line.html

https://simon-ritchie.github.io/apysc/graphics_draw_round_dotted_line.html

https://simon-ritchie.github.io/apysc/graphics_draw_dash_dotted_line.html

### 多角形描画のインターフェイス

`draw_polygon`という名前で追加しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/6dc0692e-c935-2e19-cf53-4f65ebcc4d6c.png)

https://simon-ritchie.github.io/apysc/graphics_draw_polygon.html

## マウスイベント関係に対応しました

`click`、`mousedown`、`mouseup`、`mouseover`、`mouseout`、`mousemove`といった基本的なマウスイベント関係のインターフェイスを追加しました。

https://simon-ritchie.github.io/apysc/click.html

https://simon-ritchie.github.io/apysc/mousedown_and_mouseup.html

https://simon-ritchie.github.io/apysc/mouseover_and_mouseout.html

https://simon-ritchie.github.io/apysc/mousemove.html

## if文に対応しました

if文は悩んだのですが結局withステートメントで表現する形に落ち着きました。`If`、`Elif`、`Else`といったクラスを使う形にしてあります。

まだドキュメントが書けていません。近いうちにドキュメントタスクを消化したいとは思います。以下のような書き方にしてあります。

```py
    with If(condition_1):
        int_1 += 10
```

## for文に対応しました

こちらもif文と同様withステートメントで対応しました。実装自体は終わっているものの、if文同様同様にドキュメントがまだ書けていません。

## import関係のパッケージパスの調整（ユーザーが使うものをルートの__init__へ移動し、それ以外のパッケージにアンダースコアを追加）

PandasとかNumPy、その他色々なライブラリだったりもしくはRust本なんかにも書かれていましたが、必要なもの（ユーザーが触るもの）をルートのパッケージパスになるべく集約する形の対応をしました。

`from apysc import Int`とか`from apysc import String`みたいな形で扱えるように、ライブラリ直下（ルートの`__init__.py`）にユーザーの利用を想定したインターフェイスや定義などを集めてました。

また、ライブラリ内部で使うルート直下のパッケージは先頭に全てアンダースコアを付ける形にしました。きっとライブラリで必要なものにアクセスする時の開発体験が良くなる・・・はず（？）。

## Jupyter notebook, JupyterLab, Colaboratoryをサポートしました

通常のHTML出力以外にも、Jupyter notebook、JupyterLab、Google Colaboratory上でも表示ができるようになりました。

ただし、VS Code上のJupyterではまだ対応できていません。最初対応を検証していたのですが、ストレートにいかず結構難航しそうだったため一旦対応しない形に落ち着いています。

ただし仕事ではVS Code + Jupyterは結構使うので他のものが落ち着いてきたらまた対応を再チャレンジしたいところです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/9e0be8aa-89a9-48e8-68fa-33ba552a1d46.png)

https://simon-ritchie.github.io/apysc/display_on_jupyter.html

# Twitterのアカウントを作ってアップデート時にツイートするようにしてみました

Twitterアカウント作りました。相変わらずつたない英語となりますがちまちまアップデート時などに呟いています。ほとんどフォロワーの方が0に近いですが、それでも英語圏で呟いていると結構反応があるというのはやはり英語は強いと思います。そのうちdev.toとかの英語圏のテックブログとかも手を出してみたい感じはしています。

https://twitter.com/apysc

# Python Awesomeで記事を載せていただけた（瞬間的にアクセスがぼちぼち増えました）

大体の期間でGitHubのリポジトリへのユニークアクセス数が0に近いレベルで少ないのですが、瞬間的にやけに伸びたタイミングが発生しました。よく確認してみたらどうやらPython Awesomeというサイトに載せていただけたようです。

https://pythonawesome.com/a-pythons-frontend-library-to-create-html-and-js-file/

まだまだ対応が必要なものが山積みでろくに出来上がっていないライブラリではありますが、地味にこうやって紹介いただけたりは有難い限りです。GitHubのスター数も微妙に増えました。

日々のユニークViewが0に近いレベルなのですが、じわりじわりとスターを付けていただけたりがしてきているのでとにかく継続することを最優先として、ちまちまとアップデートやツイートなどは継続していこうと思います。

# 今後ちょっと躓きそうなところ

曲線描画とかがまだ未対応なので標準資料とかを軽くチラ見してみたのですが、結構記法が独特だな・・・と感じました（ベジェ曲線的なものが描けるようにしたい）。

この辺はQiitaとかにアウトプットしつつまとめたりして整理と理解する必要が出てくるかな・・とぼんやり考えています。

その他、今の所描画関係はSVGメインとしていますがSVGが苦手なところであったり、画像処理系であったりと色々知らないものの対応が入ってきそうです。その辺は勉強しつつちょっとずつ進めていこうと思います（仕事では無いので少しずつ勉強していこうかなと）。

# 現時点でのコミット数などの情報

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/cbb2c2e3-7941-ec71-e823-610515600313.png)

# メンタル的なところ

元々飽き性なのと、プロジェクトをスタートしてから早半年弱くらいもう経ってきた影響で地味に初期の頃と比べるとモチベは減退しているように感じます。まあでもこの期間だとこの程度の減退は普通、むしろ飽き性でも良く続いているな・・・という感じでもあります。

集中しての実装を100点として、挫折したり心が折れて途中放棄してしまうのが0点とすると、緩くまったり続けている状態は70～80点くらいかなとは思っています。とにかく緩くても継続するのが大切かなと。仕事でも無いですしあまり気負わずに70点くらいで十分と考えて今後も継続していけたら良いなと思います。色々勉強にもなりますし、のんびり続けていこうと思います。

他にちょっと気になる点としては、以前と比べて技術書を消化したりテックブログを書いたりする量が明らかに減って来ています。一応バランスを取るように朝の勉強時間は技術書やテックブログ執筆の時間、夜や休日はこのライブラリの対応・・・と両方やるようにしていますが、ちょっとその辺の時間の減少は気になると言えば気になります。両方がっつり両立されている世の中のエンジニアさん達は本当に凄いですね。

---

数か月後にもまだ継続できていたら#3を書こうと思います。今回は以上です。