[Javascript] getterとsetterを使うとclassがスッキリするよ

2022/11/20

Javascript テクノロジー プログラミング

t f B! P L
eyecatch オブジェクト思考をプログラミング初心者に教える、ユゲタです。 getterとsetterはオブジェクト指向にとって必要不可欠なので、この技法を覚えていないと、他人の書いたコードすら読むことができないでしょう。 Javascriptも一昔前はclassすらない言語でしたが、バージョンアップを繰り返して、まあまあまともなclass定義ができるようになってきたし、 使えるインターネットブラウザがほぼ網羅されてきました。 IEも、もはやどのサービスにおいても除外対象にしているし、使っている人はコンピュータ事情自体遅れていると思うので、思考アップデートの必要に迫られている状態は容易に想像できます。 ということで、今回は、Javascriptを使って、getterとsetterを学習してみましょう。

getterって何?

Javascriptのclassオブジェクトにおける任意のプロパティを取得させる命令です。 <script type='module'> import { Test } from './sample.js' const test = new Test() console.log(test) </script> export class Test{ constructor(){ this.name = 'ABCDEFG' } get a(){ return this.name } } はずは上記の2ファイルを作って確認してみましょう。 実行すると、 Test name : "ABCDEFG" a : "ABCDEFG" デバッグコンソールにこんな感じで表示されるはずです。 (折りたたまれている場合はクリックすると値が表示されます※GoogleChromeの場合) Javascriptでは、何をやっているかと言うと、 Testというclassを作って、nameという内部変数(Testクラスのプロパティ)に"ABCDEFG"という文字列を入れています。 それをget aという箇所で、aプロパティでは、this.nameというnameプロパティを返すという処理をしています。 こんな感じで、そのclassの中で固定の値を返す(または固定の計算結果を返す)場合にget(getrer)を使うと便利で、 classの中でも、this.aという風にアクセスすることができます。

setterって何?

上記のソースを次のように変更してみましょう。(まるっと上書きしてください) <script type='module'> import { Test } from './sample.js' const test = new Test() test.a = 'Change!' console.log(test) </script> export class Test{ constructor(){ this.name = 'ABCDEFG' } get a(){ return this.name } set a(str){ this.name = str } } これを実行すると、次のような結果になります。 Test name : "Change!" a : "Change!" そうです、setterというのは、set a(str)の箇所の事で、特定の処理を実施するためモノですね。 普通に内部関数として、a(str){...}と書いてしまうと、「同じプロパティがあるよ!」というエラーが出てしまうので、setter機能を使って、値を書き換える意味で使います。

setterとgetterってどういう場面で使えばいいの?

この疑問、オブジェクト指向をちゃんと理解する前は、自分もずっと疑問でした。 classオブジェクトは、単に関数をまとめているだけのものではなく、オブジェクト型という中でデータ一式を管理するという使い方をするのが一般的で、MVCのMのModel箇所でよく使われます。 するとどうなるかというと、そのインスタンス(classオブジェクト)が入った変数の中のプロパティを簡単に参照できるようになり、便利なんですね。 例えば、Userとおいうclassを作った時に、ユーザー情報をまとめて内部変数で持っておくことで、ユーザーIDを送って出来上がったUserインスタンスで、いつでもユーザー情報を取得できるプログラムができるというワケですね。 この時に、User.nameやUser.typeという風に、簡単にアクセスできると便利なんですが、それを固定化させるために、class内でgetterを使い、それらを書き換えるために、setterを使うという感じで使うといいんですね。

あとがき

でも、javascriptのclass機能は、2022年12月現在時点で、privateモードというのが無いため、内部変数が全て丸見えになってしまいます。 この機能が入ったら、classオブジェクトとしては、javaなどのオブジェクト指向のプログラム言語と同じレベル(これだけでは足りてない機能もありますが・・・)に達するので、もうひと頑張りといったトコロですね。 でも、現時点でも、classオブジェクトを使って、効率のいいプログラムコードが構築できるようになっているので、使い慣れて、Javascriptでも、オブジェクト指向でプログラミングして、開発効率をアップさせてみてはいかがですか? 大きなプログラムを作るほど、このclassオブジェクトのありがたさが身にしみますよ。

参考

MDN : ゲッター MDN : セッター

人気の投稿

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。

ブログ アーカイブ