最終リリース 0.4

序章

前回のブログ投稿では、計画と進行状況について説明しました.それでは、最終リリースの 0.4 についてお話したいと思います.

創刊

Issue & PR

前回のブログ記事でお話ししたとおりです.ユーザーがマップをクリックするたびにページを更新するのは非常に非効率的であるため、私の最初のアプローチではこの機能を実装できませんでした.プロジェクトを注意深く調べたところ、リポジトリの所有者が react-zoom-pan-finch ライブラリを使用してマップ イメージを取得していることがわかりました.アプローチについては document を読みました.答えは、私が考えるよりずっと簡単です. resetTransform() というメソッドは useRef でアクセスできます. useEffect から currentMap の状態の変化を検出するために useParams を作成します.ユーザーがマップをクリックするたびに、画像のズームは ref?.current?.resetTransform() によってリセットされます

第二号

Issue & PR

CSS のみではなく、Vue.js でハイライト機能を追加しました.問題自体は非常に単純ですが、Vue.js 構文に挑戦しました.まず、TrackID を受け取る変数を作成しました.

selectedRow: null,
deselectedRow: null

次に、ユーザーがテーブル行の上にマウスを置いたときに、テーブル行 ID を出力する必要があります.@mouseenter="highlightTableRow(track.id)" @mouseleave="removeHighlightTableRow(track.id)"
次に、変数で trackId を割り当てる関数を作成しました

highlightTableRow(trackId){
           this.selectedRow = trackId
},
removeHighlightTableRow(trackId){
           this.deselectedRow = trackId
}

:class の <tr> で CSS をトリガーする

.highlight {
          background-color:powderblue;
}

.removeHighlight{
         background-color: white;
}

:class="{'highlight': (track.id == selectedRow), 'removeHighlight': (track.id == deselectedRow)}">

第三号

Issue & PR
parse.js ファイルには、ランダムな入力をトラック情報に変換するための実装が含まれています.バックティックと UTF-8 アポストロフィを通常のアポストロフィに置き換える replace メソッドを作成します.

track.title = track.title
            .replace(/`/g, "'")
            .replace(/[\u2018\u2019]/g, "'");

さらに、二重のスマート クォートを通常のアポストロフィに置き換えます.

track.title = track.title.replace(/[\u201C\u201D]/g, "\"");

それらの置換のための単体テストを追加します

{
        str: '\`Leave The Door Open\`',
        lineMode: 'one-line',
        expected: [
            {number: '', title: "'Leave The Door Open'", time: ''},
        ],
    },
    {
        str: '‘Leave The Door Open’',
        lineMode: 'one-line',
        expected: [
            {number: '', title: "'Leave The Door Open'", time: ''},
        ],
    },
    {
        str: '“Leave The Door Open”',
        lineMode: 'one-line',
        expected: [
            {number: '', title: "\"Leave The Door Open\"", time: ''},
        ],
    },

結論

最終リリース 0.4 を通じて、この問題を解決するためのさまざまなアプローチがあることを知りました.問題を解決するための適切な方法を見つけることは非常に重要です.別の JavaScript フレームワークを使用したことが問題の 1 つです.前回の問題から学んだことは、他の人と適切なコミュニケーションをとっていることを確認することです.