すべてがオブジェクト

1.1 オブジェクトとクラス

今日はJavaScriptの典型的なプログラムの仕組みについて学ぶよ。そして、重要なお知らせ：JavaScriptのプログラムは全てクラスとオブジェクトで構成されているんだ。JavaScriptはオブジェクト指向言語だから、数字、文字列、関数、クラスなど、すべてがオブジェクトなのさ。

それで、クラスって何？

まずはアナロジーで説明してみるね。小さな船を作りたいと想像してみて。まずは設計図を作る必要があって、それを工場に渡して、その設計図を元に船を組み立ててもらうんだ。あるいは10隻でも。いや、実際には好きなだけの船を作れる。設計図に基づいて、それと同じ船がたくさん作れるってことが大事なんだ。

JavaScriptのプログラミングでもまったく同じだよ。

設計図

プログラマーは設計者と同じ。設計者は設計図を描くけど、JavaScriptプログラマーはクラスを書くんだ。そして設計図に基づいて部品が作られ、クラスに基づいてオブジェクトが作られる。

まずクラスを書く（設計図を作る）、その後プログラムの実行中に、そのクラスからJavaScriptがオブジェクトを作成する。まるで船が設計図に基づいて作成されるように。

設計図は1つだけど、船はたくさん作れる。船には異なる名前があって、異なる貨物を運ぶ。でも、すごく似ているんだよね。全部が同じ構造の船で、似たようなタスクを遂行できる。

他にもこういう例えがある…

アリの巣

アリの巣はオブジェクトの相互作用の良い例だよ。最もシンプルなアリの巣には3つのアリのクラスがあるんだ：女王アリ、兵隊アリ、そして働きアリ。

各クラスのアリの数は異なるよ。女王アリは巣に一匹だけ、兵隊アリは数十匹、働きアリは何百匹もいるね。3つのクラスと何百ものオブジェクト。アリたちは同じクラスのアリや他のクラスのアリと厳密に決められたルールに基づいて相互作用するんだ。

これは本当に完璧な例だね。典型的なプログラムでも同じだよ。メインのオブジェクトがあって、他のクラスのすべてのオブジェクトを作るんだ。オブジェクトは互いに、そしてプログラムの「外部」とも相互作用を始める。これらのオブジェクトの内部では、その行動が厳密にプログラムされている。

これら2つの説明は同じコインの両面だよ。真実は中間にある。最初の例（設計図と船の話）は、クラスとそのクラスのオブジェクト間のつながりを示している。アナロジーはとても強力だよ。2番目の例（アリの巣の話）は、プログラムの実行中に存在するオブジェクトと書かれたクラスとのつながりを示している。

まず、プログラムで存在するオブジェクトのためのクラスを書かなきゃいけない、そして彼らの相互作用も記述しなければならない。それはちょっと複雑に聞こえるかもしれないけど、思ったほど難しくないよ。

JavaScriptでは、プログラムの実行中にすべてのエンティティがオブジェクトであり、プログラムを書くことはオブジェクトの様々な相互作用の方法を記述することに帰結するんだ。オブジェクトはお互いのメソッドを呼び出し、必要なデータを渡すだけ。

ドキュメンテーション

どうやってメソッドにどんなデータを渡すか知るには？それについてはもう考えられているよ。

普通は、各クラスにその用途を説明する説明があるんだ。同様に、各公開メソッドにも説明があることが多い：何をするのか、どんなデータを渡すべきか。

クラスを利用するには、それが何をするのか大まかに知っておく必要があるんだ。そして、各メソッドが何をするか正確に知っておく必要がある。それがどうやって動作するかを知る必要は全くない。魔法の杖みたいなもんだね。

ファイルをコピーするコードを見てみよう：

    
      const fs = require('fs');

      // ファイルを開く
      const src = fs.createReadStream('source.txt');
      const dst = fs.createWriteStream('destination.txt');

      // source.txtの内容をdestination.txtにコピーする
      src.pipe(dst);

      // コピー完了後にファイルを閉じる
      src.on('end', () => {
        src.close();
        dst.close();
      });
    
  

このコードを一行ずつ読めば、コードが何をしているか大まかに推測できる。それには経験と練習が必要だけどね。だから、しばらく経つとこのコードがなじみ深く、理解しやすくなる。

1.2. プログラムの設計

プログラムの設計は一種のアートだよ。それは簡単でもあり、同時に難しくもある。簡単なのは、厳しい法律がないからなんだ：禁止されていない限り、何でも許されている。難しいのもそのためで、何かをする方法がたくさんあって、最適な方法を見つけるのが難しいんだ。

プログラムの設計は本を書くのと似ている。一方で、ただ文字や言葉、文章を書いているだけ。でも、ストーリー、キャラクターの性格、内的対立、衝突、文体、サスペンスなどが重要なんだ。

一番大事なのは、誰のためにコードを書くのかを理解すること。コードは他のプログラマーのために書くんだ。

どんな製品の開発でも、それは変更を加えることを意味する：ここで追加したり、そこで削除したり、ここで修正したり。そうして細かい反復を繰り返すことで、大きな、巨大なプロジェクトが生まれるんだ。

コードに対する主な要件は他のプログラマーにとって理解しやすいものであること。 間違っているけど理解できるコードは修正可能。 正しいけれど理解できないコードは改善できない。それはただ捨てられるだけになる。

それじゃ、どうやって良いコード、理解しやすいコードを書くの？

それには3つのことをする必要があるんだ：

• メソッド内で良くて理解しやすいコードを書くこと — 一番簡単なことだよ
• プログラムにどんなエンティティがあるべきか決めること
• プログラムを論理的な部分に正しく分割すること

これらが何を意味するのかって？

メソッド内で良いコードを書くこと

英語のレベルが少しでもあれば、時々コードがいかに簡単に読めるかに気づくかもね。まるで英語の文みたいに：

• class Cat extends Pet — クラスCatはクラスPetを拡張する
• while (stream) — ストリームが空でない間...
• a < b ? a : b — aがbより小さければaを返し、そうでなければbを返す

これはわざとそうしてあるんだ。JavaScriptはコメントなしで理解できる自己文書化されたコードを書くのが容易な言語の1つだよ。JavaScriptの良いコードでは、多くのメソッドが英語の文のように単純に読めるんだ。

コードを書くときのあなたの仕事は、できるだけシンプルで簡潔にすることだよ。コードがどれだけ読みやすいかを考えて、それが正しい方向への第一歩だよ。

JavaScriptでは読みやすいコードを書くのが一般的なんだ。できれば、各メソッドは画面全体に収まるようにする（メソッドの長さは20-30行）。これはJavaScriptコミュニティ全体の基準だよ。コードを改善できるなら、改善すべきだ。

良いコードを書くための最良の方法は、絶え間ない練習だよ。たくさんコードを書いて、他人のコードを勉強して、経験豊富な同僚にコードレビューをお願いしよう。そして、自分で「これでいいや」と言った瞬間に、成長は止まることを忘れないでね。

プログラムにどんなエンティティがあるべきか決めること

他のプログラマーにとって理解しやすいコードを書く必要があるんだ。もし10人中9人のプログラマーがプログラム設計の際にクラスA、B、Cを作るなら、あなたもプログラムにクラスA、B、Cを作るべきだよ。 他のプログラマーにとって理解しやすいコードを書くべきなんだ。

優れた、動作する、速い、独自のコードは悪いコードだってことなんだ。

他人のプロジェクトを学ぶ必要があるよ：それはIT業界に数十年にわたって蓄積された知恵を吸収するための最良、最速、最も簡単な方法だ。

ちなみに、すでに手元に素晴らしい、人気のある、よく文書化されたプロジェクトがあるんだ — React。そこから始めてみよう。

クラスやクラスの構造を解析しよう。なぜあるメソッドが静的にされているのか、他のものは違うのかを考えよう。なぜメソッドにそのようなパラメータがあるのか、他にはないのか。なぜそのようなメソッドがあって、クラスはそのように命名されていて、そのようなパッケージにあるのか。

これらの質問に対する答えを理解し始めたら、他の人が理解できるコードを書くことができるようになるよ。

ただし、D3.jsのメソッド内のコードを解析するのは避けるように。多くのメソッドのコードは動作速度を最大化するために書き直されており、可読性は大きな問題があるんだ。

プログラムを論理的な部分に正しく分割すること

あらゆるプログラムは通常、部分やモジュールに分割されている。各部分はプログラムのある特定の側面を担当しているんだ。

PCにはシステムユニット、モニター、キーボードがあって、これらはすべて独立した、ほとんど依存しない部分。さらに、それらの相互作用は標準化されている：USB、HDMIなど。だから、もしキーボードにコーヒーをこぼしたら、ただ水で洗って乾かして使い続けることができるんだ。

一方、ノートパソコンはモノリシックなアーキテクチャの例だよ。論理的な部分はあっても、より強く統合されているんだ。Macbook Proではキーボードを清掃するためにノートパソコンの半分を分解する必要がある。ノートパソコンにこぼれたコーヒーは新しいものを注文する理由になる。だけど、コーヒーだけはやめてね。

1.3 自分のクラスを作る

プログラミングを学び始めたばかりだから、小さなことから始める必要があるよ — 自分のクラスを作ることを学ぶんだ。

もちろん、すでにクラスを作ったことはあるだろうけど、プログラムにどんなクラスが必要なのか、それらがどのように命名されるべきなのか、どんなメソッドを持つべきなのか、どうやって相互作用するべきかを理解することを学ぶ必要があるよ。

エンティティのリスト

どこから始めればいいかわからなかったら、始めから始めてみよう。

プログラムの設計の最初の段階では、プログラムで必要なエンティティ（オブジェクト）のリストを紙に書き出してみる。その後、「各エンティティは個別のクラスである」という原則に基づいてプログラムするんだ。

例

チェスのゲームを書きたいと仮定してみて。そんなときには、チェスボードと6種類の駒が必要になる。駒はそれぞれ違う動きをするし、価値も異なる。だから、論理的に考えてみて、これらは個別のクラスであるべきなんだ。そして実際に、最初の段階では、クラスが多ければ多いほど良い。

2つのクラスを書く代わりに10個のクラスを書ける初心者のプログラマーに出会うのは、かなり珍しいことなんだ。むしろ10個を書く代わりに2つ、または1つを書く方が好きなんだよね。だから、もっと多くのクラスを書こう、プログラマーの皆さん。そうすれば、あなたのコードは皆にとって（もしかしたらあなた自身を除いて だけけど 😛）理解しやすくなるんだ。

チェス

チェスのクラスを書くことにしたら、どんなクラスになると思う？

チェスボードは8x8の配列にすぎないのか？できれば、配列への参照を内部に保存する別のクラスを作ってみて。そのクラス「チェスボード」には例えば、セルが空いているかどうかを確認する多くの便利なメソッドを追加できるようになるよ。

結局のところ、最初の段階ではいつもこの原則に従って行動できる：プログラムには異なるエンティティ（オブジェクト）があり、エンティティには型がある。その型がクラスなんだ。