<p>技術書展10で「いまからはじめるSvelte3」という本を購入して読みました。<br><a href="https://techbookfest.org/product/4925576424980480?productVariantID=5094401858600960" target="_blank" rel="noopener noreferrer">いまからはじめるSvelte3</a><br><br>この本の中では、Svelteを使ってライフゲームを実装していくのですが、似たようなやり方でリバーシもできそうだなと思ったので実装してみました。<br></p><h2 id="h57d3da36fb">できあがったもの</h2><p><a href="https://svelte-reversi.netlify.app/" target="_blank" rel="noopener noreferrer">https://svelte-reversi.netlify.app/</a><br></p><h2 id="h88876ec3b5">リポジトリ</h2><p><a href="https://github.com/EringiV3/svelte-reversi" target="_blank" rel="noopener noreferrer">https://github.com/EringiV3/svelte-reversi</a><br></p><h2 id="h136f7ff154">実装の雰囲気</h2><p>ボード（マスの集合体）を状態と保持しておき、クリック操作によってボードの状態が更新され、最新のボードの状態がレンダリングされます。</p><pre><code>&lt;main&gt;
    &lt;div class="board"&gt;
        {#each board as row, i}
            {#each row as square, j}
                &lt;div
                    class="square"
                    class:white={square.color === 'White'}
                    class:black={square.color === 'Black'}
                    on:click={(e) =&gt; handleClick(i, j)}&gt;
                    {#if square.color}
                        {square.color === 'White' ? '○' : '●'}
                    {/if}
                &lt;/div&gt;
            {/each}
        {/each}
    &lt;/div&gt;
    &lt;div&gt;currentPlayer: {player.color}&lt;/div&gt;
    &lt;div&gt;
        {#if errorMessage !== null}{errorMessage}{/if}
    &lt;/div&gt;
    &lt;div&gt;
        {#if gameResult !== null}
            &lt;div&gt;{gameResult}&lt;/div&gt;
        {/if}
    &lt;/div&gt;
&lt;/main&gt;</code></pre><p><br></p><pre><code>    let board: Board;
    let player: Player;
    let errorMessage: string | null = null;
    let { boardStore, playerStore, gameResult } = initializeGame();
    boardStore.subscribe((value) =&gt; {
        board = value.board;
    });
    playerStore.subscribe((value) =&gt; {
        player = value;
    });


    function handleClick(i: number, j: number) {
        const position = { row: i, col: j };
        if (canPutStone(board, player.color, position)) {
            errorMessage = null;
            putStone(player.color, position);
            togglePlayer();


            const existsEmptySquare = !!board.find(
                (row) =&gt; row.find((square) =&gt; !square.isFilled) !== undefined
            );
            if (!existsEmptySquare) {
                let whiteStoneCount = 0;
                board.forEach((row) =&gt; {
                    whiteStoneCount += row.filter(
                        (square) =&gt; square.color === "White"
                    ).length;
                });
                const blackStoneCount =
                    ROW_SIZE * COLUMN_SIZE - whiteStoneCount;
                gameResult =
                    whiteStoneCount &gt; blackStoneCount
                        ? "Whiteの勝利です"
                        : "Blackの勝利です";
            }
        } else {
            errorMessage = "無効な一手です";
        }
    }</code></pre><p><br>既に.svelteファイルのscriptタグ内でのTypeScriptのサポートがされており、lang="ts"と記述すれば.svelteファイル内でTypeScriptが使えます。<br>ただ、自分が解決できなかった問題として、「.tsファイルからのimport」があります。<br>Storeの実装を別のファイルに切り出したかったのですが、reversi.tsファイルからのexportをApp.svelteでimportしようとするとエラーになってしまいました。.jsファイルなら問題ないのですが...。<br>Svelteはググって出てくる情報がまだそんなに多くないので、調べて解決することができませんでした。（rollupの設定ファイルの記述とかまったくわからない）<br>なので、App.svelteにStore含めたすべての実装を詰め込んであります。<br>今回作った機能少なめのリバーシ程度のアプリケーションだったらなんとかなりますが、これ以上規模が大きくなると、Storeの実装を外部ファイルに切り出して隠蔽できないというのは破綻まっしぐらだと思うのでなんとかしたいです（.jsファイルにすれば問題なかったけど型を使いたかったからその選択はしませんでした）。<br><br>また、.svelteファイルのscriptタグの中の記述量が増えていくのは、再利用性の点でよくないのでDOMに依存するコードだけ(今回ならhandleClick関数)を残しておき、あとは外部のtsファイルに切り出すのが良さそうです。<br>Storeに対する操作の詳細の隠蔽 + 再利用というのはReact(Hooks) + Recoilでの考え方と同じですね。<br>Storeの実装でなんのライブラリを使うかという悩みが発生しないのはStoreを内蔵しているSvelteのいいところだと個人的には思います。<br></p><h2 id="h8d78e14043">感想</h2><p>Reactを多少書ける自分が触った感じ、書き方で迷うことはそんなになかったし、全体的に直感的な記述ができるUIライブラリだなという感想です。<br>いまやReact, Vueと並んで比較されることも増えてきたライブラリなので、キャッチアップしておく価値はあると思いました。<br>公式のチュートリアルも丁寧なので、もっと採用例が増えて日本語の情報も増えてくれるのを期待します。</p>

eringiv3.dev

Category: Svelte

Svelteを使ってリバーシを作ってみた