「Vue.js 分からーん！」と感じていたのは、自分が『オブジェクト指向の奴隷』だったんだと気がついた話。

「Vue.js 分からーん！」と感じていたのは、自分が
『オブジェクト指向の奴隷』
だったんだと気がついた話。

kakisoft

about me


名前	垣花　暁
仕事	物流系エンジニア Laravel/React/AWS etc…
趣味	リアル脱出ゲーム
ポートフォリオ	kakisoft-portfolio
Twitte	kakisoft_tab

よく使うのは .NET、Java、PHP。
フロントは jQuery触る程度。
開発について、ズブの素人という訳ではない。

ただ、フロントは興味あって、
プライベートでも Vue.js を触っていた。
実務では、ほんのり触る程度。

しかし、
　
「分からん・・・」
　
の連続。

正確には、「分からない」というよりも、
常に違和感を感じ続け、手に馴染まない。

ただ、その違和感の正体が何なのか、
ずっと分からなかった。

何故、僕には Vue.js が、
こんなに馴染まないのだろうか。

それを言語化できない日々が続いた。

そして、触り続けて行くうちに、
ようやく分かった。

それは、自分が
　
『オブジェクト指向の奴隷』
　
だったと、気がついた。

どういう事か。

Vue.js で実現している事は、
一見、オブジェクト指向言語のそれと
よく似ている（場面もある）。

が、その思想や方法は、
オブジェクト指向のそれとは
根幹が全く異なる。

というのが、自分の感じていた
違和感の正体だった。

以下、詳細。

１．インスタンスを生成しない

「テンプレートの作成」は、一見 OOP で言う所の「クラスの作成」に非常に似ている。
（というか、ほぼ同じ概念と思っていた。）

しかし、インスタンスを作成せず、
直接クラスを参照しているかのように見える記述が、
とっつきにくく感じた原因だった。
　
(これは、Vue.js というより、クラスベースOOPと、
プロトタイプベースOOP の違いかも・・・。)

２．データと直接バインディングしている

（例：こういうの。

  <div id="app01">
    <p>Hello {{ name }}!</p>
  </div>

  var vm01 = new Vue({
    el: '#app01',
    data: {
      name: 'kaki'
    }
  });

『data ＝インスタンス変数』
と解釈し、インスタンス変数を
直接参照しているような印象を持ってしまった。

OOPにおいて、インスタンス変数を
外部から直接アタッチする事は、まず無い。
getter/setter などのアクセサを経由する。

同じ MVVMの思想を持つ WPF は、
内部で保持する変数と、外部に公開する
プロパティは、明確に区別される。
　
WPF を知っていたという事も、
Vue.js に馴染みにくかった要因だった。

３．子コンポーネントへの値の渡し方

（例：こういうの。

Vue.component('comp-child', {
  template: '<li>{{ name }} HP.{{ hp }}</li>',
  props: ['name', 'hp']
})

『子コンポーネントの作成 ≒ インスタンスの作成』
と思っていた。
　
OOPでは、インスタンス生成時に
コンストラクタを使用し、そこで初期値を設定する（ケースも多い）
　
アクセサを経由しているようにも見えず、
直接変数にアクセスしているようにも
見えなかった。

なので、
　
「コンストラクタはどう書くの？」
といった発想になっていた。
　
created か mounted がそれに相当する？
正直、使い分けは今ひとつ分かってません。

４．データ型

（例：こういうの。

Vue.component('example', {
  props: {
    value: {
      type: [String, Number],
      default: 100,
      required: true,
      validator: function (value) {
        return value > 10
      }
    }
  }
})

data（変数）と、型や属性を定義する場所が
隔離されている。
　
そういった発想に慣れていなかった。

（参考：C#）

class Point
{
    public int X { get; set; } = 10;
    public int Y { get; set; } = 20;
}

型・アクセサ・初期値、こんな感じ。

こんな感じで、
　
「一見、オブジェクト思考言語のそれと
似てるけど、根幹の考えは全く違う。」
　
という概念がいくつかあったのが、
理解を妨げている原因でした。

正直、オブジェクト思考を全く知らなかった方が、理解が早かったような気がします。

Vue.js を教える立場の方が、
　
「この人、素人じゃないのに、
何でこんなに飲み込みが悪いの？」
　
というケースに遭遇した場合、
もしかしたら、以上のような事が
原因かもしれません。

とは言え、四六時中「わからーん」と
言い続けている訳でもなく、とりあえず
ちょっとしたアプリを作ってみました。
　
　
【異名ジェネレータ】
https://another-name-generator.netlify.com/
　
【CSV to TABLE】
https://csv-to-table.netlify.com/

制作過程の状況も書いてみました。
どれだけ上手くいってなかったか、
よく分かるか思います_(´ཀ`」 ∠)_

チンケなアプリを作って実感した、「個人開発って、物凄い事なんじゃないのか？」という事。

正直、未解決のまま先に進んでいる事も多いです。
　
「ははっ。こんな事もわかんねーのか。
しょーがねーな。俺が教えてやるよ。」
　
という親切な方がいらっしゃいましたら、
是非教えてください。コメントでもいいです。
　
解決できたら Twitterフォローします！本書いてたら買って宣伝します！ Youtuberやってたらチャンネル登録します！

おわり