【JavaScriptで解説】オブジェクト指向だと何がいいのか?

Web開発

こんにちは。
当たり前すぎてそれほど意識することはない『オブジェクト指向』という言葉。
でも、スラスラと説明できる人は少ないのではないでしょうか。
さらに、何が便利で、いつもの仕事にどう役立っているのかまで言える人は、さらに少ないでしょう。

この記事では、『オブジェクト指向』について、その専門用語をなるべく使わないで解説します。

オブジェクト指向の考え方、メリット、日々の業務でどう役立っているのかがわかることで、日頃の作業への理解が一層深まるようになるはずです。

オブジェクト指向とは?

オブジェクト指向とは、プログラムを『もの(オブジェクト)』の集まりとして考え、そのオブジェクトの操作として機能を実現するプログラミング手法や概念のことです。
オブジェクトに『プロパティ』と『メソッド』を持たせることで、機能を実現していきます。

プロパティ

プロパティは、オブジェクトが持っているデータです。
オブジェクトを犬に例えると、「品種」「性別」「色」「体重」などがプロパティになります。

メソッド

メソッドは、オブジェクト自身がもっている処理です。このオブジェクトができることです。
先ほどの自転車の例えだと「走る」「止まる」「吠える」「尻尾を振る」「お手」などがメソッドになります。

オブジェクト指向が難しく感じる理由



さて、ここまで読んで、「なんか難しい…」と感じませんでしたか?
オブジェクト指向は、実はそれほど難しいものではありませんが、難しく感じます
その理由は、指向という言葉が示すとおり、オブジェクト指向がプログラミングの『概念』という非常に曖昧なものだからです。

例えば、チワワとかシェパードとかブルドックとかってどんな「犬」なのか説明するのは、それほど難しいことではないかと思います。
では、「犬」について簡単に説明できますか?
これは思ったより難しいのではないですか?
これは「犬」がチワワやシェパードといった『実体』ではなく、より抽象化した『概念』だからです。

でも、「犬」そのものが難しいわけではありません。

この様に『概念』というものは曖昧で説明にくく、難しく感じてしまうのです。

オブジェクト指向を「簡単だ!」と思えるようになるカギは、より具体的に考えることです。
では、具体的に考える一例として、そのメリットについて見てみましょう。

オブジェクト指向だと何がいいのか

オブジェクト指向の具体的なメリットは3つあります。

認識が共有できて、大人数での開発するときに便利

オブジェクト指向では、『プロパティ』『メソッド』というオブジェクトの操作に関するルールが明確です。
これらは、プログラム設計の初期段階で、要求仕様に合わせてきっちりと決められます。

先ほどの犬の例で考えると、設計の段階で犬オブジェクトの「品種」や「性別」などプロパティや、「走る」「吠える」などのメソッドが決められます。
開発段階で、「かわいさ」「散歩の時間」というプロパティや、「おすわり」「狩りをする」というメソッドを、誰かが勝手に追加することはできません。

結果として、ルールや仕様に関する認識が共有できますので、大人数でもスムーズに作業できます。

再利用による作業効率化

オブジェクトは、それ自身で完結された「部品」です。
よって、再利用が可能です。既にあるオブジェクトを利用して類似した製品を開発することができれば、作業を大幅に効率化できます。

改良・修正などメンテナンスが容易

ルールが明確ですので、改良や修正が必要になった場合、「どこをどう改良・修正すればいいか」も明確です。
このため、途中で仕様変更があった場合や、製品のリリース後の修正でも柔軟に対応ができます。

JavaScriptでの使用例(DOM操作)



さて、オブジェクト指向のメリットを実感してもらう意味で、JavaScirpitでのDOM操作を例にして考えてみましょう。

DOM(Document Object Model)は、その名前が示すように『オブジェクト指向』そのものです。
それぞれの「HTML要素」というオブジェクトに対して、『プロパティ』や『メソッド』があらかじめ決められています。

以下のHTMLとJavaScriptは、div要素内にある文字列を取得する簡単なコードの一部分です。

HTMLファイル

<div class="part1">これはひとつめのPart1の内容です。</div>
<div class="part1">これはふたつめのPart1の内容です。</div>
<div class="part2">これはPart2の内容です。</div>

JavaScriptファイル

const elements = document.getElementsByClassName('part1');
for (const classElement of elements) {
    console.log(classElement.innerText);
};

コンソールには以下の様に表示されるはずです。

これはひとつめのPart1の内容です
これはふたつめのPart1の内容です。

DOMというオブジェクト指向なモデルを共有していれば、そのプロパティ(.innerText)とメソッド(getElementsByClassName)を使って数行のコードで実現できます。
もしこれを言葉にしたら、300文字以上の複雑な説明になってしまいます。
それでは、「何を実現したいか?」という大事なことが伝わりません。
あとで、修正・改良するときに困ってしまうでしょう。

オブジェクト指向のメリットを実感できたでしょうか?

まとめ

オブジェクト指向は難しく感じますが、その理由は、オブジェクト指向がわかりやすい具体的な実体でなく、抽象的な『概念』だからです。
そして、あまり意識していませんが、JavaScirptによるDOM操作のようなよくある作業でも、恩恵を受けているのです。

オブジェクト指向の理解が深まることで、日頃の作業への理解が深まり、それによってさらにオブジェクト指向への理解が深まる。
そんな正のループが、あなたの中にできたら幸いです。

コメント

タイトルとURLをコピーしました