ファイルの場所を指し示す

01 / 05

./ は「今いるフォルダ」

ここまで書いてきた './tools.js' の ./ には意味がある。「このファイルと同じフォルダ」という印だよ。

main.js と tools.js が並んでいるなら、これで届く。同じ場所にいる相手を、名前で呼んでいる感じだね。

02 / 05

ファイルが増えてくると、種類ごとにフォルダへまとめたくなる。lib というフォルダを作って tools.js をそこへ入れたとしよう。

そうすると main.js から見た道順は ./lib/tools.js になる。フォルダ名を1つはさむだけだね。

// main.jsimport { tasu } from './lib/tools.js';console.log(tasu(2, 5));

実行結果

03 / 05

今度は逆向き。lib/tools.js から、いちばん外にある rate.js を読み込みたいとする。

このときは '../rate.js' と書く。../ が「1つ上に戻る」という意味だよ。2つ上に戻りたいなら '../../' と重ねる。

// lib/tools.jsimport rate from '../rate.js';export function showRate() {  console.log(`${rate}%`);}

04 / 05

いちばん間違えやすいのがここ。相対パスの基準は、実行を始めた main.js ではなく、その import を書いたファイル自身の場所だよ。

同じ rate.js を指すのでも、書く場所によって道順が変わる。

迷ったら「このファイルはどこにいるんだっけ」から考えよう。

05 / 05

'./lib/tools' のように .js を省いた書き方を、どこかで見かけるかもしれない。あれは道具が補ってくれているだけで、そのままでは動かない。

ここでは省略せずに './lib/tools.js' と書こう。迷わなくて済むし、どこで動かしても同じように読み込めるよ。

それじゃあ、フォルダをまたいでつないでみよう。