Riot.js で Tour of Heroes を試す - Part2 ヒーローエディター

Riot.js（以下，riot）は非常にシンプルかつ軽量で入門の敷居も低く，とても書きやすいコンポーネント指向の UI ライブラリです．

前回 に引き続き，今回はより具体的にヒーローコンポーネントを作成していきます．

では今回もやっていきましょう！

heroes コンポーネントを作成する

では早速コンポーネントを作っていきたいところですが，ボイラープレートのデフォルトのコンポーネントでは名前が適切でないので変更していきます．

ディレクトリ・ファイルのリネーム

まずはいくつかのディレクトリやファイルのリネームを行います．src/components/global ディレクトリ以下の my-component と名前がつくものを全て heroes に変更します．具体的には以下となります．

• src/components/global/my-component ディレクトリ
• src/components/global/my-component/my-component.riot ファイル
• src/components/global/my-component/my-component.spec.js ファイル

ここまで変更すると，エラーとなりますので，index.html を以下のように変更します．
※ Prettier による整形も行われています 🙇

         <main class="column column-60">
           <h1>Hello that's my first Riot.js App</h1>
-
-          <div
-            is="my-component"
-            data-riot-component
-            message="Hello There"
-          ></div>
+          <div is="heroes" data-riot-component message="Hello There"></div>
         </main>

不要なコンポーネントの削除

次に，ボイラープレートで追加されている不要なコンポーネントがあるため，削除していきます．今回は src/components/global ディレクトリ以下の sidebar ディレクトリと，src/components ディレクトリ以下の includes ディレクトリですね．こちらを丸っと削除しちゃいましょう．

さらにこのままだとエラーになりますので，直していきます．index.html ファイルを開き，以下の様に修正してください．

           <h1>Hello that's my first Riot.js App</h1>
           <div is="heroes" data-riot-component message="Hello There"></div>
         </main>
-        <aside is="sidebar" data-riot-component class="column"></aside>
       </div>
     </div>

heroes コンポーネントの実装

では，heroes コンポーネントを作っていきます．まずはヒーローの名前を表示するところまでじっそうしてみましょう．src/pages/heroes.riot ファイルを以下のように変更してください．（結果的には全部書き直しですね w）

-<my-component>
-  <p>{ props.message }</p>
-</my-component>
+<heroes>
+  <h2>{ hero }</h2>
+
+  <script>
+    export default {
+      hero: 'Windstorm'
+    }
+  </script>
+</heroes>

ここまでできますと，画面に Windstorm という名前が表示されているかと思います．

ヒーローオブジェクトを表示する

ベースができましたので続けていきますが，今回のヒーローのデータには，名前の他にそれぞれのヒーローに一意な ID も持たせるようです．したがって，heroes.riot を以下のように変更してみましょう．

 <heroes>
-  <h2>{ hero }</h2>
+  <h2>{ hero.name } Details</h2>
+  <div><span>id: </span>{ hero.id }</div>
+  <div><span>name: </span>{ hero.name }</div>

   <script>
     export default {
-      hero: 'Windstorm'
+      hero: {
+        id: 1,
+        name: 'Windstorm'
+      }
     }
   </script>
 </heroes>

ここまでいきますと，以下のように ID と名前が表示されます．

Uppercase で表示する

今回のチュートリアルでは h2 タグの名前はアッパーケースで表示するそうなので，heroes.riot を以下のように変更します．

 <heroes>
-  <h2>{ hero.name } Details</h2>
+  <h2>{ hero.name.toUpperCase() } Details</h2>
   <div><span>id: </span>{ hero.id }</div>
   <div><span>name: </span>{ hero.name }</div>

ヒーローを編集する

では最後に，ユーザーが <input> テキストボックスでヒーローの名前を編集できるように実装していきます．

まずは heroes コンポーネントの名前部分に入力フォームを追加していきましょう．

 <heroes>
   <h2>{ hero.name.toUpperCase() } Details</h2>
   <div><span>id: </span>{ hero.id }</div>
-  <div><span>name: </span>{ hero.name }</div>
+  <div>
+    <label>name:
+      <input type="texts" value={ hero.name } placeholder="name" />
+    </label>
+  </div>

これで name: の横の名前がテキストボックスに変更されました．

変更のリアルタイム反映

名前の部分にテキストボックスが実装されましたが，このままですと名前を変更しても，タイトル下の名前に反映されませんので，これをリアルタイムで反映されるように修正していきます．

   <div><span>id: </span>{ hero.id }</div>
-  <div><span>name: </span>{ hero.name }</div>
+  <div>
+    <label>name:
+      <input
+        type="text"
+        value={ hero.name }
+        placeholder="name"
+        oninput={ handleInput }
+      />
+    </label>
+  </div>

   <script>
     export default {
       hero: {
         id: 1,
         name: 'Windstorm'
+      },
+      handleInput(e) {
+        this.hero.name = e.target.value;
+        this.update();
       }
     }
   </script>

ここまでできましたら，name のテキストボックスの値を変えてみてください．リアルタイムにタイトル下の名前も一緒に変更されると思います！

タイトルとスタイルを調整

最後の最後に，今までデフォルトのままだったタイトルを（今更）今回のチュートリアルのものに変更しつつ，ress で初期化したスタイリングを調整していきます．

まずはタイトルを変更しますので，index.html を以下のように変更してください．

       <div class="row">
         <main class="column column-60">
-          <h1>Hello that's my first Riot.js App</h1>
+          <h1>Tour of Heroes with Riot</h1>
           <div is="heroes" data-riot-component message="Hello There"></div>
         </main>
       </div>

次にスタイリングを変更しますので，style.css を以下のように変更してください．

   color: #369;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 250%;
+  margin: 1.6rem auto;
 }
 h2,
 h3 {
   color: #444;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: lighter;
+  margin: 1.2rem auto;
 }
 body {
   margin: 2em;

...（中略）

   color: #333;
   font-family: Cambria, Georgia;
 }
+input[type="text"] {
+  border: 1px solid gray;
+  border-radius: 2px;
+  padding: 1px 4px;
+}
 /* everywhere else */
 * {
   font-family: Arial, Helvetica, sans-serif;

ここまで変更できましたら，以下の画像のように変更されていると思います．行ったことは

• タイトルと名前の上下の margin をセット
• input タグの border を調整

以上で Part2「ヒーローエディタ」は完了です．何かわからないことがあれば，遠慮なくコメントしてください！可能な限りご説明させていただきます！

では，Part3「リストの表示」に続きます．