ファイルを分けてつなぐ

01 / 05

分けただけでは動かない

前のレッスンで役割ごとに切り分けた。次はそれを別々のファイルに置いてみる。

ただし、ファイルを分けた瞬間に困ることがある。片方のファイルに書いた関数の名前は、もう片方からは見えないんだ。これまで名前で呼べていたのは、同じファイルの中にいたからなんだね。

そこで使うのが export と import の2つ。外に出す係と、取り込む係だよ。

02 / 05

出したいものの前に export default と書く。これで「このファイルの代表として、これを外へ渡すよ」という意味になる。

書くのはこれだけ。ふだんの関数の定義に、言葉を2つ足しただけだね。

// message.jsexport default function message() {  console.log("いらっしゃい");}

03 / 05

受け取る側は import 名前 from './ファイル名' と書く。置き場所はファイルのいちばん上。

取り込んでしまえば、あとは自分のファイルに書いた関数とまったく同じように呼べるよ。

// main.jsimport message from './message.js';message();

実行結果

いらっしゃい

04 / 05

export default は「名前のない代表選手」を1つ出す書き方。だから取り込む側は好きな名前を付けられる。

下のように hello という名前で受け取っても、ちゃんと同じ関数が動く。とはいえ読む人が混乱するから、ふつうは元と同じ名前にしておくのがおすすめだよ。

import hello from './message.js';hello();

実行結果

いらっしゃい

05 / 05

ここからの演習では、エディタの上にファイルのタブが並ぶ。タップで切り替えて、それぞれの中身を書いていこう。

実行ボタンを押したときに動きはじめるのは、いつも main.js だよ。流れはこう。

それじゃあ、2つのファイルをつないでみよう。