Vue.jsのドキュメントを読む
お次はVue.js。
とりあえずIntroductionから読んでいく。
第一印象
v-forが出て来るくらいまで読んだ。 こんなJSで動的にDOMいじって、要素数が増えるとめっちゃ遅いんじゃない？とか思ってしまうが、最近のブラウザだと結構平気なのかなぁ。
昔はどこまで静的なhtmlでイケるか、みたいなのは重要だったが。
The Vue Instance
MVVMにinspireされてる、とかいう感じで始まるのを見て、MVVMも基礎教養として市民権を得たよなぁ、と感慨深くなるなど。
昔はWPFの連中がなんか言ってるよ、くらいの扱いだったのだが、、、
dataをVueインスタンスが持つのは、XAMLのResource を思い出すね。 Reduxのstoreも一つだと言うし、結局こういう感じになるのかなぁ。
data.aを変えてもvmの方が変わってレンダリングされる、とあるが、これってどう実現してるのだろう？ プロパティ的な仕組みが無いと横取り出来なくない？
とググるとsetterがあるらしい。
https://developer.mozilla.org/ja/docs/JavaScript/Reference/Operators/set
なるほど。これでmonkey patchするのかね。 そのうち詳しい人に聞いてみよう（自分で調べる程は興味無い）
Modifiers
あとに.preventでpreventDefaultします、って新しいな！
これはどうなの？いいのかなぁ。
まぁdeclarativeにしていくのにこういうのがある方がいいのはそうだろう。
Computed Propertyの依存
Computed Propertyのあたりを読んでいたら、messageを変えるとreverseMessageも自動で再評価される、とある。 これ、どうやって知るのだろう？
ある関数が内部でどの関数に依存しているか知る方法はあるだろうか？無さそう。
すると呼び出す時にトラッキングしてるのかなぁ。でもその実装はそんな自明でも無いよなぁ。
これは実装見てみないと何が起きてるのか良く分からないな。
classのObject Syntax！
isActive がtrue の時はactiveクラスがある事になる、ってこれをobjectのシンタックス使うのは酷いんじゃないか？ 全然意味違うじゃん！
とマジかよ、と思いながら読んでいったら、オブジェクトを渡す事も出来る、というあたりで少し納得する。 つまり、これはハッシュを受け取ってるイメージか。 valueの方に変数が使えてしまうので凄くキモい感じがするが、それはハッシュの初期化だと思ってそれを渡していると思えば読んで意味は分かる。
なるほど、酷いと思ったが、慣れれば慣れるかもしれない。
それにしてもこの辺はどんな実装なのかしら。withしてeval？ それではdata bind 出来ない気もするが。
やはりこの辺は実装見てみないと何してるのかいまいち分からんなぁ。
ifとelseがいまいちな気がする。
usernameとemailでトグルしても、内部的にはinputが共有される、それが嫌ならkeyをつけろ、というのを見て。
このif-elseでinputが共有されるのは驚いた。
しかもifとelseって対応関係が読みにくい気がする。 attributeで並列関係っていうのがXML的で無いというか。
なんかだんだんJSPのタグライブラリみたくなってきたなぁ。
forのofも使えますってどうなの？
inもofも使える、というのがどうなの？ そこはinの挙動をJSと揃えるかofだけにするとかにしてくれよ。
なんかいまいち好みに合わない所あるなぁ。
追記: rangeもどうなの？という気がしてしまう。
配列への代入は拾えないとか
インデクサが無いから拾えないって、ES6、ここまでいろんな機能つけておいてださいぜ。
ulの下はliじゃないといけないのでis使う
かっこ悪い…
なんかクライアントサイドで全部やろうとするといろいろと歪みが出るよなぁ。
でもその見返りがjsをscriptタグで読み込むだけで使える、というのだから実用上は価値はあるというのは分かるのだが。
お勉強としては盛り上がらないなぁ。
Key Modifiers！
これもまたキモい…でもenterとかは便利そうだな。 美しさよりも実利を取るのがVue.js流という事なんだろうね。
と思って読み進めていたら、ctrlとaltがこう書けるのか！これはイイね！
Event Handlingの必要性がいまいち分からない
素のDOMイベントとは違うv-onとかをわざわざ提供している理由があるのだろうな、と思ってEvent Handlingの節を読んだのだが、最後まで読んでもそれが何なのか分からなかった。
onclickが普通に存在している所で、v-on:clickという物を新たに作る理由はなんなのだろう？
全体の雑感
Componentsのセクションは長くて、途中で飽きてきたので、slot以降は流し読み。
Vue.js自身の感想としては、クライアントサイドだけでやると、やはりいろいろ大変だなぁ、というもの。 落とし穴は多いし、native側とVue.js側で似たような機能が多くてややこしいし。
ただ、それでもサーバーに何かインストールとかせずに使える、という利便性は高いよな。 GAEとかでちょろっとなんかやりたい、という時に簡単に使えるのは良い。
元ASP.NET開発者でWPFにも相当入れ込んでた過去を持つ自分としては、データバインド文化圏に結構長く居て、持論もいろいろ持っている程度には詳しいので、その流れに位置するこういうフレームワークは根底に流れる哲学が分かりやすくて良い。
例えば以前書いたAvalonからMVVM、そしてRxへ: GUIプログラミングの哲学の歴史などとは凄く関連が深い部分が多い。
以前はこのデータバインド文化圏で作られた様々な哲学やノウハウは、MSのテクノロジースタックで閉じていて、こちらの世界ではいろいろ進んだが、一歩外に出ると使えない、という感じで、ちょっと悲しかった。
データバインドの偽物みたいなのがよそに出る事はあっても、ちゃんと思想を実現するに足るだけの表現力が無い事が多かった。
だがReactとかVue.jsとかは、明確にその先にある物として出来ているので、過去のそれらのノウハウを活かすだけの力がある上に、さらに先もいろいろありそう。
昔体得したノウハウも活かせそうだし、また、MSエコシステムの外にもそれらのノウハウがちゃんと広まっている感じがして、感慨深い。やっぱり何かの洞察は、共有出来る相手が居ないとむなしい訳で。
Vue.jsは、シンプルさとか美しさで心を打つ感じはしないが、MV VMでさくっと書きたい、という時に手頃につかえて、少なくとも必要な物は全部持ってるのでこれでいいや、という気がする物にはなってそう。
あとこの辺を勉強するのは、templateとかES6の最近の仕様とかもちょこちょこ出てくるので、この辺のテクノロジの知識をなんとなくアップデート出来る、という副作用はある気がした。
へー、こんなんなってるんだ、というのを、実例から学べる。これはReduxとかもそうだけど。
自分はwebの知識はjQueryくらいで止まっていたので、結構勉強にはなった。
チュートリアル自体の出来について
Vue.jsのチュートリアルは、出来がいまいちに思う。適当な記事を読むよりはずっと良いとは思うのだが、章構成はもうちょっと工夫出来るんじゃないか。
いろいろな事がComponentsの所に詰まり過ぎていて、あまり整理されてない印象を受けるし、最初に学ぶべき最小限の事を教えてくれる、という感じゃない。一方で最後の方に割と重要な事が出てきたりもするので、前半だけ読んで終わり、という感じにもしづらい。 Advancedは結局読まないとなんだか分からない上に、Advancedを最後まで読まないといけない。
Examplesももうちょっといろいろ欲しい。なんでMarkdown Editorだけ？もうちょっと典型的な奴だってあるだろうから、リンク教えてくれるだけでいいんだけどなぁ。
ただ、最初の段階では不要な事はあるにせよ、すくなくとも必要な事はだいたい網羅されているので、スタートラインとして読むのに十分な情報は提供している。
足りないよりは多すぎる方が読む側が取捨選択出来るので良い。
そういう点で、必要最低限な事は満たしていると思った。
結構面倒な部分についてもちゃんと記述があるので、hello worldしてみましょ〜、みたいな記事よりは断然良い。 これが無料で読めるんだから、文句いっちゃバチがあたる、というもんかもしれない。
ここ何回かのwebのフレームワークのチュートリアルを見てみよう運動のまとめ
ここまでで、CSSの設計、React、Redux、Vue.jsのチュートリアルなどを見てきた。
そんなにwebの開発をする気は無いのだが、教養としてちょこちょこ名前は見かけるが中身を知らない物を軽く知っておくか、と思って始めた事だが、だいたい目的は達成出来た気がする。
なかなか新しい部分もあり、勉強になる所もあった。やはりwebのフロントエンドはいろいろな開発リソースが投入された業界だな、と思う。
一方で、作れる物は大して変わらない、という所が、いまいち盛り上がらないと感じた。それ自体は別にJavaからKotlinになってもEclipseからAndroidStudioになっても、TensorflowからKerasになってもそうなので、webだけが特別ではないはずなのだが、なんか同じような事をしている気がしてしまうのは何故なのか。
もともとが既にそんなに悪くないフレームワークの改善だからそう感じるのかもしれない。
例えばVeu.jsがJSPとStrutsの次に出てきた物だったら、もっとずっと違う印象に感じるのだろう。
だが、Reactの後に見るとそんなに凄い、とは思えない。使う人からすればクライアントサイドで完結する違いは大きいと思うが、勉強として見るだけなら学ぶ事は大してない。
同じことの言い換えになるけれど、この辺を勉強してみた率直な感想としては「当面の間、webの開発はやらなくて良いな」という物だった。 今回のようにたまにチュートリアルとか読んで、最近の進展を軽くなめておく程度で十分に思った。
今後も適度に距離を起きつつ、何が起きてるかの表面くらいは見ておく、くらいで付き合って行きたい。