理解するためにこういうサンプルを作ってみました。



<iframe src="https://codesandbox.io/embed/svg-viewbox-17sgzz?fontsize=14&hidenavigation=1&theme=dark&view=preview"
 style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
 title="SVG Viewbox"
 allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
 sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
 ></iframe>



基本はviewBoxとsvgのサイズは同じにしておけばいいのだけれども、たとえば要素を拡大したいときになんか使えそう。



Circleのサイズを拡大するとボーダーまで一緒に太くなってしまうのだけど、viewBoxの数値を操作すればボーダーの太さはそのままに拡大縮小が可能。

svgのviewBoxを理解する

Selector は derived state の一部を表します。derived state とは、純粋な関数に状態を渡して、その状態から新しい値を派生させる出力と考えることができます。React の useMemo 的なもの？



Derived state は、他のデータに依存する動的なデータを構築することができます。今回の Todo リストアプリでは、以下が derived state であると考えられます。



<ul><li>Filtered todo list : Todo リストから、すでに完了した項目を除外するなどフィルタリングした新しいリストを作成することにより、派生したものです。</li><li>Todo list statistics: リスト内の項目の総数、完了した項目の数、完了した項目の割合など、リストの有用な属性を計算することによって、Todoリストから導出されます。</li></ul>



フィルタリングした Todo リストを実装するには、atom に値を保存できるフィルタ条件を選択する必要があります。使用するフィルターオプションは以下の通りです。「すべて表示」「完了表示」「未完了表示」。デフォルト値は「すべて表示」。



<pre class="wp-block-code"><code lang="jsx" class="language-jsx">export const todoListFilterState = atom({
 key: "TodoListFilter",
 default: "Show All"
});</code></pre>



todoListFilterState と todoListState を使って、フィルタリングさせたリストを派生させる filteredTodoListState セレクタを作ることができます。



<pre class="wp-block-code"><code lang="typescript" class="language-typescript">import { selector } from "recoil";
import { todoListFilterState, todoListState } from "./atomos";

export const filteredTodoListState = selector({
 key: "FilteredTodoList",
 get: ({ get }) => {
 const filter = get(todoListFilterState);
 const list = get(todoListState);

 switch (filter) {
 case "Show Complete":
 return list.filter((item) => item.isComplete);
 case "Show Uncompleted":
 return list.filter((item) => !item.isComplete);
 default:
 return list;
 }
 }
});</code></pre>



filteredTodoListState は、todoListFilterState と todoListState の2つの依存関係を内部的に記録し、どちらかが変更された場合に再実行します。



<blockquote class="wp-block-quote">コンポーネントから見ると、セレクタはアトムの読み込みに使われるのと同じフックを使って読み込むことができる。しかし、ある種のフックは書き込み可能な状態でのみ動作することに注意する必要があります（例：useRecoilState())。すべてのアトムは書き込み可能な状態ですが、一部のセレクタだけが書き込み可能な状態とみなされます（getとsetの両方のプロパティを持つセレクタ）。このトピックの詳細については、Core Conceptsのページを参照してください。<cite>https://recoiljs.org/docs/basic-tutorial/selectors</cite></blockquote>



TodoList コンポーネントの1行を変更するだけで、フィルタリングされた TodoList を表示することができます。



<pre class="wp-block-code"><code lang="jsx" class="language-jsx">import { useRecoilValue } from "recoil";
import TodoItemCreator from "./TodoItemCreator";
import TodoItem from "./TodoItem";
import { filteredTodoListState } from "./selector";

function TodoList() {
 const todoList = useRecoilValue(filteredTodoListState);

 return (
 &lt;>
 &lt;TodoListStats />
 &lt;TodoListFilters />
 &lt;TodoItemCreator />

 {todoList.map((todoItem) => (
 &lt;TodoItem key={todoItem.id} item={todoItem} />
 ))}
 &lt;/>
 );
}

export default TodoList;</code></pre>



todoListFilterState のデフォルト値が "Show All" なので、UI にはすべての ToDo が表示されていることに注意してください。フィルタを変更するには、TodoListFiltersコンポーネントを実装する必要があります。



<pre class="wp-block-code"><code lang="jsx" class="language-jsx">import { useRecoilState } from "recoil";
import { todoListFilterState } from "./atomos";

function TodoListFilters() {
 const [filter, setFilter] = useRecoilState(todoListFilterState);

 const updateFilter = ({ target: { value } }) => {
 setFilter(value);
 };

 return (
 &lt;>
 Filter:
 &lt;select value={filter} onChange={updateFilter}>
 &lt;option value="Show All">All&lt;/option>
 &lt;option value="Show Completed">Completed&lt;/option>
 &lt;option value="Show Uncompleted">Uncompleted&lt;/option>
 &lt;/select>
 &lt;/>
 );
}

export default TodoListFilters;</code></pre>



数行のコードで、フィルタリングを実装することができました。同じコンセプトで TodoListStats コンポーネントを実装してみましょう。



以下のような統計情報を表示したい。



<ul><li>Total number of todo items</li><li>Total number of completed items</li><li>Total number of uncompleted items</li><li>Percentage of items completed</li></ul>



統計情報ごとにセレクタを作成することもできますが、より簡単な方法は、必要なデータを含むオブジェクトを返すセレクタを1つ作成することでしょう。このセレクタを todoListStatsState と呼ぶことにします。



<pre class="wp-block-code"><code lang="jsx" class="language-jsx">export const todoListStatsState = selector({
 key: "TodoListStats",
 get: ({ get }) => {
 const todoList = get(todoListState);
 const totalNum = todoList.length;
 const totalCompletedNum = todoList.filter((item) => item.isComplete).length;
 const totalUncompletedNum = totalNum - totalCompletedNum;
 const percentCompleted =
 totalNum === 0 ? 0 : (totalCompletedNum / totalNum) * 100;

 return {
 totalNum,
 totalCompletedNum,
 totalUncompletedNum,
 percentCompleted
 };
 }
});</code></pre>



todoListStatsStateの値を読み取るために、もう一度useRecoilValue()を使用します。



<pre class="wp-block-code"><code lang="jsx" class="language-jsx">import { useRecoilValue } from "recoil";
import { todoListStatsState } from "./selector";

function TodoListStats() {
 const {
 totalNum,
 totalCompletedNum,
 totalUncompletedNum,
 percentCompleted
 } = useRecoilValue(todoListStatsState);

 const formattedPercentCompleted = Math.round(percentCompleted);

 return (
 &lt;ul>
 &lt;li>Total items: {totalNum}&lt;/li>
 &lt;li>Items completed: {totalCompletedNum}&lt;/li>
 &lt;li>Items not completed: {totalUncompletedNum}&lt;/li>
 &lt;li>Percent completed: {formattedPercentCompleted}&lt;/li>
 &lt;/ul>
 );
}

export default TodoListStats;</code></pre>



<h2>Sample</h2>



<iframe src="https://codesandbox.io/embed/recoil-todolit-70it1r?fontsize=14&hidenavigation=1&theme=dark&view=preview"
 style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
 title="Recoil Todolit"
 allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
 sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
 ></iframe>

katsushi-ougi.com

日時と時刻について

時間について

GMT と UTC

JavaScript での日時と時刻の扱い