1つのファイルが太っていく

01 / 05

ずっと1つのファイルに書いてきた

ここまでのレッスンは、いつも1つのファイルの中で完結していた。短いうちはそれがいちばん楽だよね。

でも実際にアプリを作りはじめると、同じファイルに関数が10個、クラスが3つ…と積み上がっていく。上から下まで読まないと、どこに何があるか分からないファイルができあがるんだ。

02 / 05

全部入りのファイルを見てみる

下は「商品を表すクラス」「商品のデータ」「一覧を出す処理」が同じファイルに同居している例。まだ短いほうだけど、もう役割が3つ混ざっているのが分かるかな。

class Item {  constructor(name, price) {    this.name = name;    this.price = price;  }}const items = [  new Item("ペン", 120),  new Item("ノート", 180),];for (let i = 0; i < items.length; i++) {  console.log(items[i].name);}

実行結果

ペン
ノート

03 / 05

困るのは書くときじゃなく、直すとき

大きいファイルがつらくなるのは、あとから手を入れるときだよ。

直したい場所を探すのに、関係ないコードまで目を通すことになる
似た名前を付けてしまい、うっかり前の定義を上書きする
別の画面でも使いたい処理があっても、ファイルごと持っていくしかない

書いた本人でも、1週間たてば忘れている。ファイルが大きいほど、思い出すのに時間がかかるんだ。

04 / 05

行数ではなく役割で切る

では、どこで切ればいいんだろう。「100行を超えたら切る」ではなくて、役割で切るのがコツだよ。さっきの例なら3つに分けられるね。

データ … 商品そのものを表すクラスと、その中身
計算 … 合計を出すような処理
表示 … 画面に出す処理

この切り分けができていれば、あとはファイルを分けるだけ。逆に、混ざったままファイルだけ分けても読みやすくはならないよ。

05 / 05

まずは1つのファイルの中で分けてみよう

ファイルをまたぐ書き方は次のレッスンで覚える。その前に、役割ごとに切り分ける感覚をつかんでおこう。

やることは1つだけ。ひとかたまりになっている処理を、意味のある名前をつけた関数やクラスに分けること。名前を読めば中身が想像できるところまで分けられたら十分だよ。

それじゃあ、切り分けの練習から始めよう。