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「リストの表示」に続きます.
Discussion