<section><div><div><div><a><div><img></div><div>TypeScript</div></a><a><div><img></div><div>tech</div></a></div><div><div><h2 data-line="0">
<a aria-hidden="true"></a> はじめに</h2>
<p data-line="1"><a>neverthrow</a>はJavaScript/TypeScriptのResult実装を提供するライブラリです。筆者は2024年6月頃からこのライブラリのメンテナとして活動しています。</p>
<p data-line="3"><code>neverthrow</code>では複数の<code>Result</code>を直列に扱うとき、<code>andThen</code>で繋いだり一度エラーハンドリングをするのが基本のスタイルでしたが、v6.1.0から入った<code>safeTry</code>を使うとasync関数やHaskellのdo構文のようなノリで書けるようになります。さらに、執筆時点での最新版であるv7.0.1で型定義が改善され、使いやすさが格段に向上しました。<code>safeTry</code>自体があまり知られていないような気もするので、これをいい機会とみなして簡単に紹介したいと思います。</p>
<p data-line="5">なお、対象読者は<code>neverthrow</code>の基本的なAPIを理解している方となります。それ以外にも、Result/Either型の一般的知識を持っている方は雰囲気でわかると思います。</p>
<h2 data-line="7">
<a aria-hidden="true"></a> <code>safeTry</code>の基本</h2>
<p data-line="8"><a>README</a>の例を少し手直しして説明していきます。</p>
<div><pre><code data-line="10">declare function mayFail1(): Result<number, string>;
declare function mayFail2(): Result<number, string>;

function myFunc(): Result<number, string> {
    const result1 = mayFail1();
    if (result1.isErr()) {
        return err(`aborted by an error from 1st function, ${result1.error}`);
    }
    const value1 = result1.value

    const result2 = mayFail2();
    if (result2.isErr()) {
        return err(`aborted by an error from 2nd function, ${result2.error}`);
    }
    const value2 = result2.value

    return ok(value1 + value2);
}
</code></pre></div><p data-line="31">このコードは<code>mayFail1</code>が成功していたら<code>myFail2</code>を実行し、2つの成功の場合の値を使って計算を行っています。どちらかが失敗した場合は即座にエラーを返しています。<code>Result</code>が2つしかないので大したことないですが、これが増えていくとその分だけ<code>xxx.isErr()</code>でのチェックが増えていくことになって面倒です。</p>
<p data-line="33"><code>safeTry</code>を使うとこれを以下のように書き換えられます。</p>
<div><pre><code data-line="35">function myFunc(): Result<number, string> {
    return safeTry(function*() {
        const value1 = yield* mayFail1()
                .mapErr(e => `aborted by an error from 1st function, ${e}`)
                .safeUnwrap()
        const value2 = yield* mayFail2()
                .mapErr(e => `aborted by an error from 2nd function, ${e}`)
                .safeUnwrap()

        return ok(value1 + value2)
    })
}
</code></pre></div><p data-line="50"><code>mayFail1</code>がエラーの場合、<code>myFunc</code>自体の戻り値がそのエラー（を<code>mapErr</code>で変換したもの）となり、<code>const value2 = ...</code>以降の行は実行されません。成功の場合は<code>isOk</code>でのチェック無しに<code>value1</code>にその値が割り当てられます。<code>value2</code>についても同様です。これだけでasync関数の挙動に似ていることがお分かりいただけるかと思います。</p>
<p data-line="52">あるいは、1つ目の<code>Result</code>の成功値を使って2つ目の<code>Result</code>を計算したい場合を考えてみましょう。</p>
<div><pre><code data-line="54">declare function mayFail1(): Result<number, string>;
declare function mayFail2(n: number): Result<number, string>;

function myFunc(): Result<number, string> {
    return mayFail1()
        .mapErr(e => `aborted by an error from 1st function, ${e}`)
        .andThen(value1 =>
            mayFail2(value1)
                .mapErr(e => `aborted by an error from 2nd function, ${e}`)
        )
}
</code></pre></div><p data-line="68">これは関数型的な書き方なので好きな方も多いでしょうが、チームによっては受け入れが難しいこともあるかも知れません。これも<code>safeTry</code>を使うとasync関数っぽくなります。</p>
<div><pre><code data-line="70">function myFunc(): Result<number, string> {
    return safeTry(function*() {
        const value1 = yield* mayFail1()
                .mapErr(e => `aborted by an error from 1st function, ${e}`)
                .safeUnwrap()
        return yield* mayFail2(value1)
                .mapErr(e => `aborted by an error from 2nd function, ${e}`)
                .safeUnwrap()
    })
}
</code></pre></div><h2 data-line="83">
<a aria-hidden="true"></a> 従来の課題点とv7.0.1での改善</h2>
<p data-line="84">このように便利な<code>safeTry</code>ですが、エラーの型が複数ある場合の使い勝手に難がありました。</p>
<div><pre><code data-line="86">declare function mayFail1(): Result<number, 'err1'>;
declare function mayFail2(): Result<number, 'err2'>;

function myFunc(): Result<number, 'err1' | 'err2'> {
    // 型引数を明示しなければならない
    return safeTry<number, 'err1' | 'err2'>(function*() {
        const value1 = yield* mayFail1()
                .safeUnwrap()
        const value2 = yield* mayFail2()
                .safeUnwrap()

        return ok(value1 + value2)
    })
}
</code></pre></div><p data-line="102"><code>mayFail1</code>と<code>mayFail2</code>はそれぞれ異なるエラーの型を返します。その場合、<code>safeTry</code>の型引数として成功時とエラー時の型をそれぞれ指定しなければ型検査が通りませんでした。ドキュメンテーションとしての役割もあると考えれば型は明記するに越したことはないですが、少々面倒でした。</p>
<p data-line="104">それが、<a>ユーザーからのPR</a>により型定義に変更が加わり、v7.0.1からはこのケースでも型引数の指定が不要になりました👏👏👏これにより、<code>safeTry</code>は留保無しにお勧めできる機能になったと思います。</p>
<p data-line="106">以上、<code>safeTry</code>のすゝめでした。ここまで読んでいただいて仕組みが気になった方もいらっしゃるかも知れません。内部実装もなかなか賢いことをやっているので本当はそこまで解説したかったのですが、それはまた日を改めて</p>
</div></div><span></span><aside><div><a><img alt="ほとけ" height="80" referrerPolicy="no-referrer" width="80"></a><div><a>ほとけ</a></div><div><p><span>Web developer.
TypeScript, Cloudflare, Google Cloud, Remix, Hono, Mathematical logic, Type Theory</span></p><div><span></span><a aria-label="@m-shaka" data-tooltip-for-desktop="true" data-tooltip-position="bottom" role="tooltip"><svg x="0px" y="0px" viewBox="0 0 27 27" xml:space="preserve" aria-label="GitHub"><path fill="currentColor" d="M13.4,1.2C7,1,1.8,6,1.7,12.4c0,0.1,0,0.4,0,0.5c0,5.1,3.2,9.8,8.2,11.5c0.6,0.1,0.7-0.2,0.7-0.6s0-1.8,0-2.9 c0,0-3.3,0.6-4-1.5c0,0-0.6-1.3-1.3-1.8c0,0-1.1-0.7,0.1-0.7c0.7,0.1,1.5,0.6,1.8,1.2c0.6,1.2,2.2,1.7,3.4,1h0.1 c0.1-0.6,0.4-1.2,0.7-1.6C8.7,17.1,6,16.9,6,12.3c0-1.1,0.5-2.1,1.2-2.8c0-1.1,0-2.2,0.3-3.2c1-0.4,3.3,1.3,3.3,1.3c2-0.6,4-0.6,6,0 c0,0,2.2-1.6,3.2-1.2c0.5,1,0.5,2.2,0.1,3.2c0.7,0.7,1.2,1.8,1.2,2.8c0,4.5-2.8,5-5.5,5.2c0.6,0.6,0.9,1.3,0.7,2.2c0,1.7,0,3.5,0,4 s0.2,0.6,0.7,0.6c4.9-1.7,8.2-6.2,8-11.5c0.1-6.4-5.1-11.6-11.6-11.6C13.5,1.2,13.4,1.2,13.4,1.2z"></path></svg></a><a aria-label="@schwmtl" data-tooltip-for-desktop="true" data-tooltip-position="bottom" role="tooltip"><svg width="27" height="28" viewBox="0 0 27 28" fill="none" aria-label="X(Twitter)"><g clip-path="url(#clip0_1_18)"><path d="M16.0687 11.7356L26.12 0H23.7382L15.0106 10.1899L8.03988 0H0L10.5411 15.4089L0 27.7155H2.38199L11.5985 16.9546L18.9601 27.7155H27L16.0681 11.7356H16.0687ZM12.8062 15.5447L11.7382 14.0103L3.24025 1.80106H6.89884L13.7568 11.6543L14.8248 13.1887L23.7393 25.9963H20.0807L12.8062 15.5452V15.5447Z" fill="currentColor"></path></g><defs><clipPath><rect width="27" height="27.7297" fill="white"></rect></clipPath></defs></svg></a></div></div></div></aside><span></span></div></div><div><div></div></div></section>

JavaScript/TypeScriptのResult実装を提供すること

データベースの接続を簡単にすること

リアルタイム通信を実現すること

UIコンポーネントのデザインを行うこと

型定義が改善され、使いやすさが向上した

新しいエラーハンドリング機能が追加された

パフォーマンスが大幅に向上した

ドキュメントが全て日本語になった

TypeScriptの文法に精通しているエンジニア

<code>neverthrow</code>の基本的なAPIを理解している方

エラーの型が複数ある場合の使い勝手に難があった

非同期処理がサポートされていなかった