ファイルを分ける・借りてくる

ここまで書いてきたコードは、すべて1つのファイルに収まっていた。実際のアプリではそうはいかない。数百行、数千行のコードを1つのファイルに書いていくと、目的の場所を探すだけで時間が溶けていく。

この章では、コードを役割ごとにファイルへ分ける方法と、他の人が書いた部品を持ってくる方法を覚えるよ。

分けるときの道具が export と import だ。あるファイルで「これは外から使っていい」と export で印をつけ、使う側のファイルで import して呼び出す。印をつけていないものは外から見えない。関数のスコープと同じ考え方が、ファイル単位でも働いていると思えばいい。

大事なのはどう分けるかのほうだよ。ファイル数を増やすこと自体に価値はない。「計算だけをするファイル」「表示だけをするファイル」のように、役割で切る。そうすると、直したい場所を探すときに「これは計算の話だからあのファイル」と当たりがつく。逆に、なんとなく行数で切ると、どこに何があるか分からないファイルが増えるだけになる。

もうひとつの主題が パッケージ。世の中には、日付の計算やデータの整形といった「よくある処理」を誰かが書いて公開してくれているものがたくさんある。それを取り込んで使えば、自分で書かずに済む。プロの開発でも、アプリのコードの大部分は借りてきた部品でできているよ。

借りるときに考えるべきことも一緒に押さえておこう。人が書いたコードを自分のアプリに入れるということは、そのコードの不具合も一緒に引き受けるということだ。だから何でも入れればいいわけではない。数行で書けるものをわざわざ借りる必要はないし、逆に複雑で間違えやすい処理は、よく使われているものを借りたほうが安全なことが多い。

この教材では、パッケージの取り込みを教材の中に用意した疑似的な部品で体験する。実際のインストール作業（npm を叩く）は自分のパソコンでの開発に移ってからになるけれど、import で持ってきて使うという感覚はここで身につく。

export には2つのやり方が出てくる。名前をつけて複数を出すやり方と、そのファイルの代表をひとつだけ出すやり方だ。どちらを使うかで import の書き方も変わる。最初は迷うところだけれど、そのファイルが提供するものが1つなのか複数なのかで選べばいい。

つまずきやすいのはパスの書き方だよ。./ は同じ場所、../ は1つ上。フォルダを整理したあとに一斉に読み込めなくなるのは、たいていここが原因だ。エラーに「そんなファイルは見つからない」と出たら、まずパスを疑おう。

ファイル分割は、コードが長くなってきたときに初めてありがたみが分かるものだよ。いまは「そういうやり方がある」と知っておけば十分。自分でアプリを作りはじめたとき、必ずこの章に戻ってくることになる。

この教材では、複数のファイルを実際に作って読み込み合う演習ができるようになっている。ファイルを足して、export して、別のファイルから import して動かす。手を動かしてみると、思っているより単純だと分かるはずだよ。

そのときのために、ひとつだけ覚えて帰ってほしい。分けるのは、あとで探しやすくするためだ。ファイル数を減らすことにも増やすことにも価値はない。三日後の自分が「あの処理はどこだったか」と思ったときに、迷わずたどり着けるかどうか。判断に迷ったら、その基準で決めればいいよ。