JS, Python などのクラスを定義する際に、インデントを使う構文は良くないかも知れない。でも、操作対象となるオブジェクトを明示しないでクロージャを使う方法も、これまたあまり良くないのかなと思いました。



インデント有りか、それとも無しかaa

JS, Python のクラス定義文は、インデントを使う形式なので、なるべく小さくしたいと思うものの、なかなかクラス定義文が、ディスプレイの一画面に収まらないことがあります。そのため、コードをパッと見た時に、インデントされていても、どの型に属す関数なのか判別できません。また、変数名が self とか this なので、ここからも操作対象が何か判別することができません。

Go とか Rust みたいな感じでインデントを使わないで、各関数がどの型に属すかを書くような方が、見やすい気がします、個人的に。これは CSS の BEM でも & を使ってインデントを使わない方が良いよ、という主張と近い気がします。



クロージャか、それともイベントか

◯ メリットとデメリット

React とかだとクリックイベントをクロージャを使って処理する、やり方が見られます。クロージャを使うメリットは、コンポーネントのプロパティに渡した操作に、限定できることです。オブジェクトをそのままプロパティに渡してしまうと、親から見た時に子の コンポーネントが何をしているのかわからなくなります。反面、クロージャを渡すデメリットは、関数名を見ただけでは何に対する操作かわからないことです。

そのため、コンポーネントのプロパティにクロージャを渡す場合、結局クロージャの名前(関数名)の中に todoAdd, todoDelete のように操作対象を書かないといけなくなります。関数名に書くくらいなら、todo.add, todo.delete のように書けた方が個人的にはいいのかなという気がします。React は知りませんが、Vue.js は props で渡したオブジェクトを操作できませんが...

理由 1.

UI を作る時に「タスクベースよりもオブジェクトベースのUIの方がわかりやすい」、みたいな本を見かけました。プログラミングをする時も操作対象となるオブジェクトを明示してあげた方が良いのではないかな... と思った次第です。

理由 2.

またこのことに加えて、React は、状態を管理したいという思いの中で、関数型(イミュータブルあるいは全部コピって再代入するスタイル)を採用しているのだと個人的に思っています。状態を明示しないクロージャのスタイルは、「状態を管理したい」という本来の思いと相反してしまうような気がします。

◯ 結論

以上のことを踏まえると、React のクロージャを渡すスタイルよりも Vue.js のイベントを投げ返してくれる方が、親と子の責任を分担できるという意味で良いのかなと思ったりもします(メリット)。イベント名を定義するのが面倒で消耗はしますが(デメリット)。

でも、結局イベントにしても deleteTodoButtonClicked, addTodoButtonClicked みたいになってしまうか... うーん。



まとめ

インデントを使ったクラス定義文は確かに読みにくいと思うのですが、操作対象となるオブジェクトは、明示してあげることができるなら、してあげた方が良いのかなと思いました。