Pandasでnan to None
PandasでnanをNoneに置換するときは単にfillna(None)ではできないため、以下のいずれかを使用する。
df.replace({pd.np.nan: None})
df.where((pd.notnull(df)), None)
※文字列'None'でよい場合
df.astype(object).replace(np.nan, 'None')
vue cli プロジェクト作成
vue create <プロジェクト名>
デフォルトではBabel, Linterのみ設定される
以下他にマニュアル選択可のオプション(Vue CLI v3.9.3) TypeScriptサポート PWAサポート VueRouter Vuex CSS Pre-prosessors(SCSS?) Unit Testing E2E Testing
事前にパッケージをインストールした場合、オプション項目が増えるのかは未確認
XHRのキャッシュ
仕事で生のXHR使ってリクエストを投げる機会があってハマった
GETメソッドでリクエストを投げる時にキャッシュが残っているとリクエストを送る代わりに以前のレスポンス内容を使用してしまうらしい。POSTの時は毎回リクエストを投げていたからなかなか気づけなくて困った。(これもブラウザ依存で例えばSafariだとキャッシュ読むらしいが)
let xhr = new XMLHttpRequest ();
// 中略
xhr.setRequestHeader('Cache-Control', 'no-cache')
xhr.setRequestHeader('Pragma', 'no-cache')
xhr.setRequestHeader('If-Modified-Since', 'Thu, 01 Jun1970 00:00:00 GMT')
重要なのはCache-Controlでこれは必須 PragmaはHTTP1.0の後方互換用らしい。 If-Modified-SinceはCache-Controlが効かないIE用で、キャッシュの期限が指定日時以降ならリクエストを送る。(古いIEだけかもしれんけど興味無くてこれ以上調べてない)
イマドキのやつはCache-Controlだけでいいんじゃないだろうか というか普通はjqueryとかaxiosとか使うからライブラリが良きに計らってくれる気がする
終わり
Flask開発環境覚書
以下、MAC、UNIX系はrunをexportに、powershellは$env:FLASK_APP = "～"←こんな感じに読み替え
- set FLASK_APP=(メインモジュール名)
$ flask run で起動するメインモジュール名を指定
- set FLASK_ENV=development
flaskをデバッグモードで起動できる
ファイルキャッシュ無効化したりできるので開発中は指定すべき
リリース時はproduction(デフォルト)
- $ flask run
pipenv shellを有効化してから叩くと↑の環境変数でアプリ起動
フロントエンドフレームワークとwebフレームワークのテンプレートエンジンの相性の話
# Webアプリ作成中
現在簡単なwebアプリを作成中です。
面白いアプリでもなんでもなくて、普通のブログサービス的なやつです。
目的は基本的なCRUDが機能として存在するアプリを一人で全部作ることのみ。
今のところ人様にお見せできるソースが一切ないのでね。
使っているのはPython + FlaskとVue.js
今回はVueとFlask(のテンプレートエンジンjinja2)を使用して詰まったとこのお話
# 現象
Vue.jsではデータバインディング機構としてマスタッシュ構文なるものが用意されています。(正式名称かどうか知らないけど)
簡単に言うとjs側で"hoge"という変数を用意し、テンプレート側で{{ hoge }}と書くとその部分が変数の値に差し替えて表示され、動的に値を書き換えられるものです。
簡単にバックエンドを用意してサンプル的にindex.jsを書いてFlask側からtemplate_render()を通して送り返したのですが、ここでマスタッシュ構文がうまく効かず、変数名がそのまま表示されていました。
# 原因
知っている人には当たり前なのでしょうが、template_render()は単にhtmlを投げるためのおまじないじゃないんですよね。
htmlを解析してjinja2(Flaskに標準で搭載されているテンプレートエンジン)のやり方にしたがって送信データを作っているわけです。
これを使うとPython側の変数をhtmlに埋め込めるわけですが、その目印にjinja2はデフォルトで{}を使用するようになっていました。
つまりjija2を通った時点で{}が消えてしまうのでVue.js側でマスタッシュ構文と認識されず、js変数の割り当てが行われなかったということですね。
今回は動的なページ作成にはVue.jsを使っているのでテンプレートエンジンのお仕事を全く意識していませんでした。
# 解決方法
こちらのブログを参考にさせていただきました。
https://muunyblue.github.io/0b7acbba52fb92b2e9c818f7f56bac99.html
① Flaskを直接インスタンス化せずに継承したクラスを作成し、デリミタ文字を変更する。(今回採用した方法)
以下のような感じ
```
from flask import Flask, render_template
class CustomFlask(Flask):
jinja_options = Flask.jinja_options.copy()
jinja_options.update(dict(
block_start_string='(%',
block_end_string='%)',
comment_start_string='(#',
comment_end_string='#)',
))
app = CustomFlask(__name__,
static_folder = './static',
template_folder = './templates')
```
② SFCを利用する
そもそもシングルファイルコンポーネントならデリミタ文字変更とかいらないらしい
普通はこっちかなと…
(③ Vue.js側のデリミタ文字を変更する たぶんできる。具体的なやり方知らないけど)
今回はVue.jsはcdnで遊んでるだけなので①番を採用しましたとさ
おわり
*1:',
variable_end_string='
