ハードウェアからサーバ・アプリまでワンストップで開発

この前も書きましたが、フロントエンドを書く時のフレームワークをRiot.jsからSvelteにしつつあります。

別にRiot.jsが嫌いになったとか、Svelteが素晴しいとかと言うつもりはないですが、勢いのある方を使ってみたいというだけの理由です。

Riot.jsに慣れているとSvelteは「なんだこれ?」みたいな部分があるのですが、それもまた「違い」ということで受け入れることにしています。評価の基準は必要ですが、それを「ひいき」にする必要もないですし。

そんなわけで、雑にSvelteを使って感じたことやらTIPSやら。

チュートリアルを試してみる

Svelteにはなかなか手の込んだチュートリアルがあります。

Svelte Tutorial

結構手が込んでいて、試してみるには良いものです。とりあえず最初はこれを試してみます。

ところが、既に他のフレームワークを経験している人にしてみると、これが冗長で意義がよくわかりません。

ごく最初は良いのですが、途中で「これ覚えないといけない?」って思うことが出て来ます。

例えばその代表として挙げたいのが、

トランジション

です。

これは何かと言えば、フェードとかの「効果」の機能です。

チュートリアルをやっている時に思っていることは、きっと誰も同じだと思うのですが

早く本質を掴んで自由に使えるようになりたい

ということだと思います。動かして試してみるための環境をさっさと作って、とりあえず「完全に理解した」とか思うレベルに行きたい。そう思いながらチュートリアルをやっているはずです。つまり、「とりあえず使えるようになる」ということが最優先。見栄えだの効果だのについては、「後でね」と思う部分です。細かいことは後回しでいいから、とにかく本質を早くつかんで使えるようになりたいのです。てーか、チュートリアルで見栄えだとか効果みたいなことはやってくれなくていい。そんなことよりも、テンプレートで使うディレクティブだとか、コンポーネント間の情報のやりとりとか、そういったものを把握したい。そしてそれらを把握したら、「とりあえず実践」ということで雑にアプリを書いてみたい。そういったものだろうと思います。

ところが、トランジションについての解説が結構早い時期に現れます。

チュートリアルでも教科書でも、普通に正しく作られたものであれば、最初から順番に読んで行くことが期待されていると思います。つまり、トランジションの章の後の章を読む時には、多分トランジションについては習得済みだし、そこで軽く説明された他のことも多少はわかっているという前提になっていることが想像されます。だから、「ここはいらないなー」と思っても飛ばすことができません。まぁ一度流し読みしてしまえば、本当にそうなのかどうなのかはわかりますけどね。

そんなわけで、実は早々にチュートリアルを読むことに挫折しました。Riot.jsの時にはそんなものなかったですし。

ドキュメントを読む

中途半端にチュートリアルに挫折して、この時点では実のところあまり全体は把握できていません。

この時点で把握できているのは、

  • 代入すればテンプレート内の値が変化する
  • スクリプト中にexportを書けばコンポーネント外から値が渡せる
  • コンポーネントを使う側でbindを書けばコンポーネントから値が受け取れる
  • onを書くとイベントハンドリングができる

くらいです。まぁ、実のところこれくらい知っておけば、なんとなくコードは書けるものです。その状態で実際にコードを書き始めました。

当然ながら、その途中でつまづいたことはドキュメントを読みます。

Documentation

ここで最初に必要になるのは、テンプレートの文法ですね。

この手のものだと、テンプレートはほとんどHTMLで、それで足りない部分に独自のディレクティブがある。この辺はRiot.jsでもVue.jsでも同じです。たちまち必要になるのは、

  • {#if ...}
  • {#each ...}

くらいでしょうか。他はまぁ「あるな」というくらい把握しておけば、とりあえずはつまづかないでしょう。他人の書いたコードを読む時は別にして、自分で書く分にはこれくらい知っておけば足りる感じです。

次に必要になるのは、lifecycle callbackでしょう。Riot.jsだとこいつが一番デカい顔していた記憶さえあります。

lifecycleの考え方はRiot.jsやVue.jsに似ていますが、ちょっと違う面もあります。Riot.jsやVue.jsと比べると、荒いというか種類が少ない。この辺は文化とか思想とかの違いなので、どっちがどうということはないと思います。

ただ最初に許せなかったのは、mountとupdateのタイミングですね。Riot.jsの常識で言えば、「なんと!」とつけたくなるのですが、

コンポーネントが初めて mountされた際は、onMountより前にbeforeUpdateで定義した処理が走る

ということです。最初は「はぁ?」としか思えませんでした。

とは言え、この謎順序も「Svelteは生成されたコードをmountする」というものだとわかれば、妥当な順序だと感じられます。逆にRiot.jsにあったような「mountされるものがうまく生成できないタイミングなのにmountはされる」というようなことを心配する必要もなくて、慣れてしまえばこちらの方が楽に感じます。

これだけ知ってしまえば、後は追い追いドキュメントを読めば何とかなるなーと感じています。実際、今のところはそんな感じです。

Svelteの感想

あれこれ書きましたが、総じて好印象を持っています。

変数のバインディングの仕方がちょっと安易過ぎないか? とか思ってたりもしたのですが、これはこれで書きやすいと思います。難しいことを言わなければ安易な方がいいですからね。

ただ、一番いけないなと思ったのは、

無駄にコアが多機能である

ということですね。前述のように「トランジション」のようなものがコアにあるのは、疑問を感じます。Pascalのwritelnが「文」であるような落ちつきの悪さです。別にその機能があってもいいんで、別ライブラリとかにすれば良かったのになと。この辺は他のフレームワークがコアの機能を絞っていることを真似で欲しいところです。そのうち何とかなるのかなぁ。

Svelteは結構気に入ったので、もうRiot.jsは使わないかも知れません。既に書いたものまで直すのは面倒臭いですけど。

PS.

他に気に入らないと言えば、アクセシビリティーに関すること。

注意を促しくてれるのは悪いことではないと思うが、全てのワーニングに言えるのは

うるさ過ぎると無視されがち

ということ。aにhrefが有効でないとか、labelの関連付けがないとか、一々言って来なくてもいいから。それに、

そんなものはプラグインで対応してくれ

と思います。どうしてこんなに何でもかんでもコアの機能を太らせるのでしょうね。