検索条件
お知らせ
現在サイトのリニューアル作業中のため、全体的にページの表示が乱れています。
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)))
フックを単体でテストするケースを想定。
このパターンはコンポーネントからフックを切り離しているケースで有用。手法としては@testing-library/react-hooks
のrenderHook()
を使う。
export const useUserForm = () => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const onChangeUserName = (ev: string) => {
setUsername(ev);
};
const onChangePassword = (ev: string) => {
setPassword(ev);
};
return {
username,
password,
onChangeUserName,
onChangePassword,
};
};
it('onChangeUserName で username が設定されること', () => {
// `renderHook` で Hook をレンダリング
const { result } = renderHook(() => useUserForm());
// `act()` で Hook のイベントを叩く
act(() => result.current.onChangeUserName('foo'));
// 結果を見る
expect(result.current.username).toBe('foo');
});
Env |
Ver |
React |
17.0.1 |
TypeScript |
4.1.3 |
- 今回はサンプルとして
<input />
をラップしたコンポーネントのフォーカスを変更するためにref
を使います
import { forwardRef } from 'react';
export type ChildProps = {
type: 'text' | 'password' | 'number';
onChange(changeValue: string): void;
};
// function 記法でないと ESLint が怒るので無効化
// eslint-disable-next-line react/display-name
export const Child = forwardRef<HTMLInputElement, ChildProps>(
// このpropsに明示的な型定義がないと型エラーが出る
(props: ChildProps, ref) => {
const onChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
props.onChange(ev.target.value);
};
return (
<input
ref={ref}
type={props.type}
onChange={(ev) => onChange(ev)}
/>
);
}
);
- 下側の
<Child />
だけフォーカスが行くようにしてます
import { useEffect, useRef } from 'react';
import { Child } from './Child';
export const Parent = () => {
const ref = useRef<HTMLInputElement>(null);
useEffect(() => {
ref?.current?.focus();
}, []);
return (
<ul>
<li>
<Child
type={'text'}
onChange={(ev) => console.log('top input', ev)}
/>
</li>
<li>
<Child
ref={ref}
type={'text'}
onChange={(ev) => console.log('bottom input', ev)}
/>
</li>
</ul>
);
};
Env |
Ver |
React |
17.0.1 |
react-router-dom |
5.2.0 |
TypeScript |
4.1.3 |
import React from 'react';
import ReactDOM from 'react-dom';
import './index.scss';
import { BrowserRouter } from 'react-router-dom';
import { RootRoute } from './routes/RootRoute';
// ドメインルート以外にReactを設置する場合に必要
// e.g. `https://www.example.com/react/` に設置する場合 `/react` を設定
const basename = process.env.REACT_APP_BASE_NAME ?? undefined;
ReactDOM.render(
<React.StrictMode>
{/* `useHistory()` 用のDIラッパー */}
<BrowserRouter basename={basename}>
{/* ルーティング設定をまとめたコンポーネント */}
<RootRoute />
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
- ルーティングの定義、これがあると後々の管理が楽
- スプレッド演算子で
Route
に対して展開できるように記述しておく
export const AppRoute = {
// React のルート定義
root: {
path: '/',
key: '/',
exact: true, // 完全一致
component: App,
},
// 404 定義
notfound: {
component: NotFound,
},
// `/foo` 以下のルーティング定義
foo: {
// `/foo` のルート定義
root: {
path: '/foo',
key: '/foo',
component: FooRoute,
},
// 以下、 `/foo` 配下のページのルーティング定義
hoge: {
path: '/foo/hoge',
key: '/foo/hoge',
component: HogePage,
},
piyo: {
path: '/foo/piyo',
key: '/foo/piyo',
component: PiyoPage,
},
},
};
export const RootRoute = () => {
return (
{/* `Route` は `Switch` で囲む */}
<Switch>
{/* root */}
<Route {...AppRoute.root} />
{/* foo */}
<Route {...AppRoute.foo.root} />
{/* bar */}
<Route {...AppRoute.bar.root} />
{/* 404 */}
<Route {...AppRoute.notfound} />
</Switch>
);
};
export const FooRoute = () => {
return (
{/*
`Context` は `Switch` の外に出す
`Switch` の中に `Context` を書くと更に `Switch` でネストする必要がある
*/}
<FooContext.Provider value={FooContextDefault}>
<Switch>
{/* eslint-disable-next-line array-callback-return */}
{Object.entries(AppRoute.foo).map(([idx, route]) => {
if (idx !== 'root') {
/* `'root'` 以外の全ノードを展開 */
return <Route {...route} />;
}
})}
{/* 404 */}
<Route {...AppRoute.notfound} />
</Switch>
</FooContext.Provider>
);
};