Riot.jsで簡易検索画面

全国各地で体温超えの気温の日が続いています・・・

そろそろ涼しくなって欲しいと思う今日この頃です。

 

 

唐突ですが「Riot.js」というものに手を出してみました。

試しに「猫の毛種からその毛種の猫種一覧を表示して、それぞれの猫の詳細情報を表示する」というものを作成しました。

環境設定時での立て続くエラーで不貞腐れていたので、モチベーションを復活させる為に取り敢えず猫を使いました。

 

[つくってみたページ]

猫種簡易検索

 

 

[概要]

「毛種」を選択すると、それぞれの毛種から猫の種類を選択出来るようになります。

猫の種類を選択すると、該当の猫の説明文とGoogle検索画面へのリンクが表示されます。

「毛種」をデフォルトの「毛種を選択」に選択し直すと、ページアクセス時の状態に表示が戻ります。

 

 

[つくりについて]

猫種のデータはjsonデータで管理しています。(DBではなく、jsonファイル直書き。面倒だったから・・・)

index.htmlに

・毛種の選択:A(catselect)

・長毛、短毛の一覧表示 :B(catlist)

・猫種の詳細画面:C(catdata)

を表示するために記述を行なっています。

 

index.htmlの記述

<div class=”box“>
<catselect></catselect>
</div>
<div class=”box“>
<catlist></catlist>
 </div>
 <div class=”box“>
<catdata></catdata>
</div>

 

 

[処理の流れ]

・アクセスしたらjsonデータをGET。同時にAをマウント。

・Aで毛種を選択したらファイルAを使用してBをマウント。

→毛種をデフォルトの表示に戻した場合はBのマウントを解除。

・Bで猫種を選択したらファイルBを使用してCをマウント。

→毛種をデフォルトの表示に戻した場合はCのマウントを解除。

 

*マウント前に解除を行うとエラーが出ます。

マウントされた場合のフラグを立てるなどをして、エラー回避。

 

 

Vue.jsとReactを仕事外の個人的興味で触ったことがあったのですが、全くメリットが分からず一通りの機能を触ったまま放置していました。

仕事柄、キャンペーンサイトの制作が殆どでしたので・・・。キャンペーンサイトでコンポーネント指向なんてやったら即破綻しそうですし。

 

Riot.jsですが、びっくりするぐらいドキュメントがありません。

VueとReactは関連書籍が販売されていますが、残念なことにRiot.jsに関してはこの記事の執筆時点では世に出ていません。

一応、日本語化されたドキュメントは存在しており、文章に違和感はあるものの日本語として理解出来る状態です。

ググりながらガッツとノリで乗り切るしかなさそうです。

実際に触ってみて思ったのは、タグの命名を自由に出来るのは利点かもしれないのですが、複数人でつくる場合は最初にルールを設けておかないと後々面倒なことになりそう。

 

 

Riot.jsを取り敢えず始める為のテンプレートをGitHubで公開しています。

コマンドでソースの自動ビルドとブラウザリロードが走る状態にしています。

(*今回作成したものは、このテンプレートから手を加えております。)

リポジトリはこちら