《Riot.js》this.optsとは?初心者がわかりやすく解説

JavaScript

Riot.jsのopts

業務でRiot.jsを使う機会がありました。公式サイトを以下に添付します。

Riot.js — Simple and elegant component-based UI library
Riot.js lets you build user interfaces with custom tags using simple and enjoyable syntax.

コードを読んでいる最中、this.optsという構文?プロパティが良く出てきて、何が格納されているのか良くわからなかったので調べてみることにしました。

マウント時に渡せるデータ

親コンポーネント、ルートコンポーネントからコンポーネントをマウントする時に、コンポーネントに対して渡すことができるデータのことです。以下のようにhogeコンポーネントに対してtitleというメンバーを渡した場合

hogeコンポーネントでは

と参照することが可能です。

カスタムコンポーネントからも渡せる

Riot.jsではapp.tagのファイルにカスタムコンポーネントとrouteを使ってpathを定義すると思いますが、この場面でもカスタムコンポーネントのattributeを使ってデータを渡すことができます。

先程と同様にhogeコンポーネントで

titleを参照することが可能です。

propsの使い方

公式サイトを読むと、マウント時の第2引数の名前はpropsと書かれていました。

このpropsの説明として以下の文章が書かれていました。

props optional object is passed for the component to consume. This can be anything, ranging from a simple object to a full application API. Or it can be a Flux- store. Really depends on how you want to structure your client-side applications. Also note that attributes you set on your tags will take precedence over ones specified with same names via props argument.

引用:「Core API」

API · Riot.js
Framework API, methods and properties

要点をまとめると

・propsで渡す対象はobjectからAPIアプリケーション、storeなど多岐に渡り、特に決まりはない

・カスタムコンポーネント(タグ)で定義したattributesと名前が衝突した場合、カスタムコンポーネント(タグ)で定義したattributes名が優先される

です。

筆者
筆者

以上でoptsについての記事は終わりです。最後まで読んでいただきありがとうございました。

エンジニアにおすすめのアイテム

記事の内容とは別に、僕自身が保有する業務効率アップ、スキルアップを後押しするお勧めアイテムを紹介します。割とガチでお勧めなのです。

目の保温マッサージ

エンジニアの1日の業務は大半がディスプレイと睨めっこ。帰宅すると目が疲労で非常に重くなります。ひどい時は軽い頭痛になったりと結構深刻。そこで僕自身が毎日使っているのが目元マッサージ機です。

アイマッサージャー 二年間保証 最新グラフェン加熱技術 目元マッサージャー

アイマッサージャーを使ってから、翌日の疲労感がだいぶ軽減されました。またマッサージ自体とっても気持ち良くて、布団に入るのが毎日楽しみになりました。コスパまじで最強アイテムです。

座椅子をゲーミングチェア風に

ディスプレイの長時間利用と同時にエンジニアは座椅子の上に何時間も座る運命にあります。椅子が快適だと疲労度が大きく変わると思った私は以下の2点のアイテムを購入しました。

IKSTAR クッション 低反発 座布団 第五世代 オフィス IKSTAR クッション 低反発【メーカー直営・1年保証付】 ランバーサポート

気に入りすぎて、オフィス用だけではなく、自宅用も購入してしまいました。導入してから長時間座ることでのお尻の痛みや、腰の痛みが激減しました。なので体の健康を考えるなら、導入するべきアイテムですね。

タイトルとURLをコピーしました