"/"を忘れたかっただけなのに

こんにちは。つんあーです。

みなさん、JS（あるいはTS）でファイルパスを操作する時、どうしていますか？
（紛らわしいのですが、今回はブラウザが対象の話です。Node.jsはそんなに悩まないですからね）

パスの末尾の/の扱いって、なかなか困りますよね。
こんなのとか、

const url = location.href;
fetch(url + '/data.json').then(... // /は必要なんだっけ🤔

// => 404 : http://localhost/page//data.json
// 違う、そうじゃないの

あるいはこんなのとか、

const url = location.hostname;
fetch(url + 'data.json').then(... // /は必要なんだっけ🤔

// => 404 : http://localhostdata.json
// お゛お゛お゛お゛ん

みたいなやつです。
私はよくこんなことをやってます。きっとあなたも1度はやったことあるはず。
1度と言わずに週1回くらいやってるはず。きっと。

ところでPythonのpathlibは、便利ですよね。

import pathlib

path = pathlib.Path('Users/hoge')
filepath = path / 'data.csv'
print(str(filepath))

# => "Users/hoge/data.csv"

JSでもこんな感じに/の有無とか無視したい！
ってかNode.jsにはpathモジュールとかあるんだからイケるっしょ！

と思って調べたのですが、
「js パス 解決」
とか
「js パス　モジュール」
とかでググろうもんなら、

*「Webpackでimportのパスを解決する方法」*やら
*「TypeScriptでWebpackのimportがエラーになる」*とか
「Webpack5からはNode.jのspolyfillが標準装備されなくなったからpathモジュールを使うには云々...」

みたいなものばっかりでなかなか必要な情報（=ブラウザでさくっと使えるパス関係モジュール）にたどり着けませんでした。

（ってかimport関連詰まりやすいよねぇ）

結論（Webpack5以上）

$ npm i -S path-browserify

import path from 'path-browserify';

const url = path.join('hoge/', '/fuga');
console.log(url);

// => 'hoge/fuga'

なお、TypeScriptの場合は型定義ファイルに以下を追加する必要があります。

index.d.ts

declare module 'path-browserify' {
    import path from 'path'
    export default path
}

おしまい。