最近使っているGaugeと、Taikoというツールについて書きます。

GaugeとTaikoではじめるE2Eテスト

もっと使われてもいいAPIだと思うのですが、意外と知られていない気がするWeb Share APIについて書きます。
<h2>Web Share APIとは</h2>
Web Share APIは、ネイティブアプリと同じようにOSの機能を使ってシェアするためのAPIです。
実際にこのウェブサイトでも、記事のページで右上のシェアボタンにWeb Share APIを使っています。
シェアボタンを押すと、次のようにOSのシェアメニューが表示されます。
<img src="https://i.gyazo.com/2d96f9f174183fdb95b877c1998012bb.png" alt="Image from Gyazo" width="300" />
ユーザーは自分がインストールしているアプリをターゲットとしてシェアできるので、このAPIを使うことで利便性が高まるケースが少なくないと思います。
<h2>Web Share APIの使い方</h2>
Web Share APIは<a href="https://www.w3.org/TR/web-share/">W3Cの仕様</a>もごく短く、とてもシンプルなAPIです。
<code>navigator.share()</code>を使います。<code>share()</code>の引数にはシェアする対象のURL、タイトル、テキストを含むオブジェクトを指定します。この内どれか一つが含まれている必要があります。
<div class="remark-highlight"><pre class="language-js"><code class="language-js">navigator.share({
 url: 'https://yo7.dev/web-share',
 title: 'Web Share APIでシェア体験を向上する',
 text: 'もっと使われてもいいAPIだと思うのですが、意外と知られていない気がするWeb Share APIについて書きます。',
}).then(() => {
 console.log('succes')
}).catch(e => {
 console.error(e)
})
</code></pre></div>
Web Share APIの制約としては、HTTPSのサイトでしか使えない・ユーザーアクション（クリックなど）への反応としてしか使えない、というものがあります。
<h2>ブラウザサポート</h2>
<a href="https://caniuse.com/#feat=web-share">caniuse</a>を見るとブラウザサポートは以下のような状況です。
<img src="https://i.gyazo.com/0fb5cc0c38216c87ef11a99bb9ba477e.png" alt="caiuse">
モバイルの主要ブラウザであるiOSのSafari / AndroidのChromeと、macのSafariだけでサポートされています。
基本的にモバイルでネイティブアプリのようにシェアするためのAPIなので仕方ないですね。
デスクトップでは唯一、macのSafariだけでWeb Share APIが使えるようになっています。
実際に使ってみると、以下のようにmacOSのアプリの一部、ノートやメールでシェアできるメニューが表示されます。
<img src="https://i.gyazo.com/8929e1e8ccd0c6a8064dbe60a206ae73.gif" alt="web share api in macOS">
<h3>フォールバック</h3>
Web Share APIのサポートは一部に限られており、ほとんどのデスクトップの環境など利用できないため、サポートされていない環境でのフォールバックを考える必要があります。
Web Share APIがサポートされていない場合は<code>navigator.share</code>が<code>undefined</code>を返すので、これを使ってシェアしている場合とそうでない場合のロジックを分けることができます。
このブログの実装では以下のように、APIがサポートされていない場合はTwitterでシェアするためのリンクを表示するようにしてみました。
<div class="remark-highlight"><pre class="language-jsx"><code class="language-jsx">export const ShareLink = props => {
 if (navigator.share) {
 return &#x3C;WebShareLink {...props} />
 }

 return &#x3C;TwitterShareLink {...props} />
}
</code></pre></div>
<h2>おわり</h2>
仕様が小さくてシンプルなAPIですが、かんたんに導入できて活用しやすいWeb Share APIについて書きました。
<a href="https://wicg.github.io/web-share-target/">Web Share Target API</a>という、ネイティブシェアのターゲットとしてウェブサイト（PWA）を利用するためのAPIもあるので、使ってみて何か発見などがあればそれについても書いてみたいと思います。
<h2>参考</h2>
<ul>
<li><a href="https://www.w3.org/TR/web-share/">Web Share API - W3C</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share">Navigator.share() - Web APIs | MDN</a></li>
<li><a href="https://web.dev/web-share/">Share like a native app with the Web Share API</a></li>
<li><a href="https://alligator.io/js/web-share-api/">The Web Share API &#x3C;- Alligator.io</a></li>
</ul>
Photo by Daria Nepriakhina on <a href="https://unsplash.com/photos/guiQYiRxkZY">Unsplash</a>

もっと使われてもいいAPIだと思うのですが、意外と知られていない気がするWeb Share APIについて書きます。

Web Share APIでシェア体験を向上する

最近React / Reduxのアプリで、React Hooksを使って非同期処理を書いていて、シンプルでしっくりきているのでそれについて書こうと思います。
<h2>前置き</h2>
単にもう当たり前に使われて枯れたものになったからなのか、<a href="https://ja.reactjs.org/docs/hooks-reference.html#usereducer">useReducer</a> hookや<a href="https://ja.reactjs.org/docs/context.html">Context API</a>でReact自体での状態管理がやりやすくなってあまり使われなくなったのか、最近はReduxについての話はあまり聞かなくなった気がします。 
私はReduxの規約に乗っているとある程度秩序を保ちつつ楽に開発しやすいので、今でも一定以上複雑な状態をもつアプリを開発するケースではReduxを採用します。
ただ、個人的にReduxを使うときに悩みの種だったのが非同期周りでした。Reduxの非同期周りではredux-thunkやredux-sagaなどのミドルウェアを使う場合が多かったと思います。これらは必要以上に複雑だったりして、どれをとってもイマイチな気がしていました。そこでそれらのミドルウェアを使わずにReact Hooksで非同期周りを書くようにした、というのが今回の話です。
<h2>react-reduxのHooks対応</h2>
React Hooksで非同期処理を扱う前提として、react-reduxではv7.1.0から<a href="https://react-redux.js.org/next/api/hooks">HooksのAPI</a>が提供されるようになりました。
具体的には、<a href="https://react-redux.js.org/next/api/hooks#useselector">useSelector()</a>と<a href="https://react-redux.js.org/next/api/hooks#usedispatch">useDispatch()</a>です。
<ul>
<li>
<code>useSelector()</code>: セレクター関数(redux stateを引数に取得したいデータを返す関数)でstateから必要なデータを取得するためのhook
</li>
<li>
<code>useDispatch()</code>: reduxの<code>dispatch</code>への参照を返し、actionをdispatchするためのhook
</li>
</ul>
これらのHooksによって、<a href="https://react-redux.js.org/next/api/connect#connect"><code>connect()</code></a> HOCでstateやaction creatorをコンポーネントにマッピングしていたやり方をHooksで置き換えて、見通しがよく書けるようになりました。
<h2>React Hooksでの非同期処理</h2>
私が開発している<a href="https://app.hackernote.io/">hackernote</a>というノートアプリでの実際の例をもとに、React HooksでのReduxの非同期処理を扱い方を紹介します。
<h3>例1. アプリを開いた際にノートの一覧を取得する</h3>
ページを開いた際に外部からデータを取得する、というのは非同期処理の典型的なケースだと思います。
hackernoteの場合は、オフラインでもノートを読み書きできるように<a href="https://developer.mozilla.org/ja/docs/Web/API/IndexedDB_API">IndexedDB</a>にノートを保存しています。そのため、アプリを開いた際にはノートの一覧をIndexedDBから取得する、という非同期な処理を実行する必要があります。以下でそれについて見ていきます。
取得する処理は以下のようなカスタムフックになっています（コードはTypeScriptです）。
<div class="remark-highlight"><pre class="language-ts"><code class="language-ts">export const useGetAllNotesOperation = () => {
 const worker = useWorkerProxy()
 const dispatch = useDispatch&#x3C;Dispatch&#x3C;GetNotesAction>>()

 const getAllNotes = React.useCallback(async () => {
 const note = await worker.getAllNotes()
 dispatch({ type: NotesActionTypes.GET_NOTES, payload: note })
 }, [dispatch])

 return { getAllNotes }
}
</code></pre></div>
<code>useWorkerProxy()</code>はWebWorkerを介してIndexedDBを操作するためのオブジェクトを返します。<code>worker.getAllNotes()</code>でIndexedDBからノートの一覧が返ってきます。今回の本題とは関係ないので、例えば外部APIサーバーとやり取りするためのものと考えてもらってもいいと思います。
<a href="https://ja.reactjs.org/docs/hooks-reference.html#usecallback">useCallback()</a>のコールバック内で非同期処理（今回であればIndexedDBからノートの一覧を取得する処理）を実行し、その結果をstateで管理するためのactionをdispatchします。
このカスタムフックは、<a href="https://redux.js.org/basics/usage-with-react/#presentational-and-container-components">Container Component</a>としてredux storeのデータを下位のコンポーネントに渡す役割をもつコンポーネントから呼び出します。ノート一覧の取得はコンポーネントが描画された時点で実行したいので、<code>useEffect()</code>でコールバックを実行してしまいます。
<div class="remark-highlight"><pre class="language-ts"><code class="language-ts">const ListPaneContainer = () => {
 const { getAllNotes } = useGetAllNotesOperation()

 React.useEffect(() => {
 getAllNotes()
 }, [])
 
 const { notes } = useAllNotesSelector(allNotesSelector)
 
 return &#x3C;ListPane notes={notes} />
}
</code></pre></div>
「ノートの一覧を取得する」という処理はカスタムフックの中に閉じられており、コンポーネントはその詳細については気にせず返ってきたコールバックを実行するだけになります。
<h3>例2. ボタンを押した際にノートをアーカイブする</h3>
ユーザーのインタラクションに応じて非同期処理を実行する、というのも典型的な例です。ボタンを押した際にノートをアーカイブする、という処理をみてみます。
<img src="https://i.gyazo.com/eebd780b4a43e03c3dd32ec6afc643ab.gif" alt="ノートをアーカイブ">
このカスタムフックでは、コールバック内で非同期の削除を実行、actionをdispatchして、さらにトップページへの遷移を実行しています（<a href="https://github.com/Paratron/hookrouter">hookrouter</a>を使っています）。 
ノート一覧の取得処理との違いとしては、削除対象のノートを知る必要があるため、パラメータとしてノートIDを渡し、<code>useCallback()</code>のdependencyリストにIDを追加しています（追加しないと意図せずコールバックがメモ化されてしまうため）。
<div class="remark-highlight"><pre class="language-ts"><code class="language-ts">export const useArchiveNoteOperation = (id: string) => {
 const worker = useWorkerProxy()
 const dispatch = useDispatch&#x3C;Dispatch>()

 const archiveNote = React.useCallback(async () => {
 try {
 await worker.archiveNote(id)
 dispatch({ type: NotesActionTypes.ARCHIVE_NOTE, payload: id })
 navigate('/')
 } catch (e) {
 console.error(e)
 }
 }, [dispatch, id])

 return { archiveNote }
}
</code></pre></div>
このカスタムフックもContainerで呼び出し、コールバックを下位のコンポーネントで<code>&#x3C;i onClick={archiveNote} /></code>のようにイベントハンドラに渡します。
<div class="remark-highlight"><pre class="language-ts"><code class="language-ts">export const ArchiveIconContainer = () => {
 const id = useSelector(focusedNoteIdSelector)
 const { archiveNote } = useArchiveNoteOperation(id)

 return &#x3C;ArchiveIcon archive={archiveNote} />
}
</code></pre></div>
<h2>re-ducksのOperationsとしてのカスタムフック</h2>
<a href="https://speakerdeck.com/naoishii/reduxde-zhi-xu-arukodowoshu-ku">React/Reduxで秩序あるコードを書く</a>を参考に、<a href="https://github.com/alexnm/re-ducks">re-ducks</a>パターンに近い方法でRedux周りのコードを整理しています。
<a href="https://github.com/alexnm/re-ducks">re-ducks</a>は<a href="https://github.com/erikras/ducks-modular-redux">ducks</a>というパターンの派生で、<code>action</code>や<code>reducer</code>といったReduxの登場人物の単位でディレクトリを切るのではなく、ドメインごとにディレクトリを切ろうという考え方です。
よくあるReduxのディレクトリ構成:
<div class="remark-highlight"><pre class="language-unknown"><code class="language-unknown">- actions/
 - notes.ts
 - config.ts
- reducers/
 - notes.ts
 - config.ts</code></pre></div>
<code>re-ducks</code>のディレクトリ構成
<div class="remark-highlight"><pre class="language-unknown"><code class="language-unknown">- modules/
 - notes
 - index.ts
 - actions.ts
 - reducer.ts
 - selectors.ts
 - operations.ts</code></pre></div>
また、re-ducks固有の点でselector / operationという新しい登場人物を加えています。selectorはReduxを使ったことがある人ならお馴染みの、stateから必要なデータだけを取得するための関数です。operationsは、複数のactionを発火したり、非同期処理を含む複雑なインタラクションを実行するための関数です。 本来、operationにはreduxのミドルウェアを使うことが推奨されていますが、そこで代わりにReact Hooksを使っています。
上のサンプルコードのようにノート一覧を取得する処理は<code>useGetAllNotesOperation</code>、削除する処理は<code>useArchiveNoteOperation</code>というようにoperationであるカスタムフックは<code>useXXXOperation</code>と命名しています。
re-ducksではstateをコンポーネントから参照する際にはselectorを使い、stateを変更する手続きは直接Actionをdispatchするのではなくoperationを介して実行します。
action / reducerなどを1ファイルにまとめるか、複数ファイルにわけるか、といったディレクトリ構成みたいな話はあまり重要じゃないと思っています。シンプルにアプリケーションの状態を操作するaction / reducerと、状態からUIに必要なデータを導出する層であるselectorや、状態を操作する際の複雑さな手続きを扱う層であるoperationを定義し、状態管理はクリーンなままにUIの複雑さをselector / operationで受け止める、というように責務が分離されているのがre-ducksのいいところだと思います。
<h2>おわり</h2>
React HooksでReduxの非同期処理を書いている話を書きました。個人開発でやってみている段階で、まだ特段複雑な処理を実装したりということはないのでそのあたりの知見がアップデートされたら別に書きたいと思います。
<h2>参考</h2>
<ul>
<li><a href="https://react-redux.js.org/next/api/hooks">Hooks - React Redux</a></li>
<li><a href="https://speakerdeck.com/naoishii/reduxde-zhi-xu-arukodowoshu-ku">React/Reduxで秩序あるコードを書く</a></li>
<li><a href="https://qiita.com/Naturalclar/items/6157d0b031bbb00b3c73">非同期処理にredux-thunkやredux-sagaは必要無い</a></li>
</ul>
Photo by Mel Poole on <a href="https://unsplash.com/photos/Hg-uNVsg65Y">Unsplash</a>

最近React / Reduxのアプリで、React Hooksを使って非同期処理を書いていて、シンプルでしっくりきているのでそれについて書こうと思います。

Reduxの非同期処理にReact Hooksを使う

最近、[hackernote](https://app.hackernote.io)という Web で使えるマークダウンノートのアプリをつくっていて、ダークモードを実装しました。

yo7.dev

Articles