検索条件
お知らせ
現在サイトのリニューアル作業中のため、全体的にページの表示が乱れています。
- iOS Safariでは効かない
onInput()
でstring.slice(0, maxlength)
するとIMEの挙動が可笑しくなる
type="tel"
など日本語が入力できない場合であれば有効
- オートコンプリートやコピペ入力での字切れなどもあるため、根本的に使わないことが望ましい
- iOS Safariでは期待した動作にはならない
- 使うなら
type="tel"
を使い、JSで数字以外の入力を弾くのが無難
- 恐らく普及ブラウザの全てで半角入力を強制出来、スマホなどではNumPadが出てくる
- アルファベットやハイフンなどの記号も打てるので必要に応じた入力制御が必要
ReactでSPAを組んでいてブラウザバックしたときのフォームの入力内容が消し飛んで気になったので、ブラウザバックした時にどうなるのかというのを軽く調査した結果
確認したパターンとしては次の2つ
- フォームの入力値をDOMに保持させるステートレスな方式
- フォームの入力値をJSに保持させるステートフルな方式
LocalStorageに画面情報を保存して復元するとか、条件分岐を使ってDOMを隠して保持させるとか、そういう系は考慮しない
|
DOM 保持 |
JS 保持 |
SPA 内ブラウザバック |
消える |
保持される |
SPA 外ブラウザバック |
保持される |
消える |
コード記述量 |
少ない |
多い |
この方式だとhistory.push()
でDOMが消し飛ぶのでSPA内でのブラウザバックで入力したデータが保持されません
その代わりSPAの外、別のサイトに遷移してからブラウザバックしたときは、DOMが残っているので入力したデータが保持されます
この方式だとJSでステート管理をしているため、history.push()
で遷移してDOMが消し飛んでも、 defaultValue
に持ってる値を突っ込んであげれば、取り敢えず入力したデータを保持することが出来ます
反対にSPAの外、別のサイトに遷移してからブラウザバックしたときは、メモリの中身が飛んでるので入力したデータが保持されません
ちゃちゃっと書いたのでコードは超雑です
Env |
Ver |
react |
17.0.2 |
react-dom |
17.0.2 |
react-router-dom |
5.2.0 |
大正義ステートレスです
Function Componentはステートレスなので、こうあってほしいですよね~
コードもシンプルで管理しやすいのが素敵なところです
export const StatelessPage = () => {
const history = useHistory();
return (
<div>
<form>
<input type="text" />
<button onClick={() => history.push(AppRoute.dom2.path)}>submit</button>
</form>
</div>
);
};
ギルティなステートフル方式です
Class Componentを捨てたはずなのにどうしてこうなった…
コードが煩雑で管理が大変です
export const StatefullPage = () => {
const ctx = useContext(ExampleContext);
const history = useHistory();
const onChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
ctx.text = ev.target.value;
};
return (
<div>
<form>
<input
type="text"
defaultValue={ctx.text}
onChange={(ev) => onChange(ev)}
/>
<button onClick={() => history.push(AppRoute.ctx2.path)}>submit</button>
</form>
</div>
);
};
パッケージマネージャーで入れられるならそれに越したことはない
wget https://storage.googleapis.com/golang/go1.9.linux-amd64.tar.gz
tar vzfx go1.9.linux-amd64.tar.gz
sudo mv go /usr/local/
# goの実行パスとGOPATH(~/go/bin)をPATHに指定する
# GOPATHはglobalなnpm_modulesみたいなもんだと思う
export PATH=$PATH:/usr/local/go/bin:~/go/bin
- コマンドでやるときは以下の形式。
=
つけると怒られるので注意
git config --[scope] [variable] [value]
- 設定ファイルに書くときはプレフィクスがINI形式のセクション名になる
Windows向けだがLinuxなどでもよしなにいじれば使える
# ユーザー名
git config --global user.name "Foo Bar"
# メアド
git config --global user.email foo@example.com
# 改行コードの LF 強制
git config --global core.autocrlf false
# UTF8 文字がエスケープされるのを防止する
# 設定してないと "\343\202\275" のような表示になる
git config --global core.quotepath false
# コードエディタ
git config --global core.editor nano
# コミット時に使う gpg プログラム
git config --global gpg.program "C:/Program Files (x86)/GNU/GnuPG/bin/gpg.exe"
# コミット時に使う gpg 署名鍵
git config --global user.signingkey XXXXXXXXXXXXXXXX
# コミット時に gpg 署名する
git config --global commit.gpgsign true
# git init したときのメインブランチ
git config --global init.defaultbranch main
# push時のデフォルトブランチ
# 設定しておくと初回 push 時のオプションが不要になる
# もし別ブランチにpushする場合は注意が必要
git config --global push.default current
# pull時のデフォルトブランチ
git config --global pull.default current
# pull時にrebaseさせない
git config --global pull.rebase false
# pull/fetchで削除されたリモートブランチ情報をローカルから消す
git config --global fetch.prune true
Env |
Ver |
Jinja |
2.11.0 |
Python |
3.8.5 |
- 変数名[begin:end]で指定する
{% set some_variable = string_variable[0:100] %}
Env |
Ver |
Jinja |
2.11.0 |
Python |
3.8.5 |
- Jinja2でループ処理の中で変数の足しこみとかをするやつ
- 代入先の変数宣言は
{% set ns = namespace(title = "") %}
のようにしてやる必要がある
- 後はループの中で
set
してやれば上手くいく
- 変数は宣言したブロックがスコープになるので、スコープを広げたいときは適当にブロックを上げてやると良い
- MkDocsのテンプレートでパンくずリストを生成するコード
{% set ns = namespace(title = "") %}
{% for doc in page.ancestors %}
{% set ns.title = "[" + doc.title + "] " + ns.title %}
{% endfor %}
Env |
Ver |
Jinja |
2.11.0 |
Python |
3.8.5 |
─src
├─app
│ ├─configs
│ │ └config.yaml
│ ├─templates
│ │ └─main.html
│ └─__init__.py
└─main.py
from jinja2 import Environment, PackageLoader, select_autoescape
env = Environment(
# appはフォルダ構成のappフォルダを指す
loader=PackageLoader('app', 'templates'),
autoescape=select_autoescape(['html', 'xml'])
)
template = env.get_template('main.html')
# `render()` の引数は埋め込み変数を KeyValue 形式で指定
print(template.render(the='variables', go='here'))
Env |
Ver |
Jinja |
2.11.0 |
Python |
3.8.5 |
─src
├─app
│ ├─configs
│ │ └config.yaml
│ ├─templates
│ │ └─main.html
│ └─__init__.py
└─main.py
from yaml import safe_load as yamlLoad
from jinja2 import Environment, PackageLoader, select_autoescape
env = Environment(
loader=PackageLoader('app', 'templates'),
autoescape=select_autoescape(['html', 'xml'])
)
template = env.get_template('main.html')
with open('app/configs/config.yaml') as fYaml:
print(template.render(yamlLoad(fYaml)))