3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Riot.jsAdvent Calendar 2017

Day 11

遠隔制御の功罪とRiot

Last updated at Posted at 2017-12-10

アドベントカレンダーの期間ということで、今までもやっと思っていたことも文章にしてしまおうかと思います。

ここで考える「遠隔制御」

「遠隔制御」といっても、IoTの機器制御とかウイルスでリモートマシンを乗っ取るとか、そういう話をするつもりではありません。ここでいう「遠隔制御」というのは、例えば

  • HTMLの要素へクラスをかけて、それに対してCSSを適用する
  • ある特定のdata-xxx属性を付けたHTML要素について、自動的に特定のJavaScriptを動かす
  • ページ内に適当にRiotのタグを書いて、まとめてriot.mount('*')でマウントする

のように、「書いた箇所と別の箇所で何かを制御すること」というような話を意図しています。

遠隔制御の利点

直接書くような方法がある状況で、遠隔制御をするメリットは、「再利用性を上げられる」ことです。CSSを例にしてみると、ページに直書きしてしまうと他のページに再利用するのは困難となりますが、CSSだけ別に切り出しておけば、他の文書にもそのまま適用できます。文書の方も、CSSだけの差し替えでスタイルを変えることができます。

また、うまく作れば元のサイトにほぼ手を入れる必要もなく新たな機能を加えられます。rails-ujsは、unobstructiveという名前のとおり、ページを書き換えることなく、Railsに必要な機能性を追加していきます。

遠隔制御の欠点

遠隔制御をとることでの欠点は、(きっちり仕組みやルールを作らない限り)どこで何を使っているのかカオス化しやすい、ということです。CSS設計がいろいろと提唱されていますが、裏を返せば、機能の多くないCSSでは、設計などのルールで押さえ込まない限り、効く場所を制御するのも困難になってしまう、ということの現れとも言えます。

JavaScriptでも、data-属性などで自動適用するようなライブラリがありますが、細かい制御ができず使うのが逆に難しくなるような場面も見受けられたりします。

Riotの場合

Riot.jsをこのような観点で見てみると、「タグの埋め込み」については「標準的に現れないタグ」という比較的わかりやすいマーカーを使っているので、そこまで問題にならない印象もあります。また、「タグ内部の挙動」については、(もとから外側のCSS/JSの影響がある場合を除けば)CSSはタグ内オンリーで適用できますし、JavaScriptも遠隔でなく直接onclickなどで書く形となるので、遠隔制御とならずに済みます。そのようにして、使いやすいものとなっている、と感じました。

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?