Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UI Component 作ってますか?

UI Component 作ってますか?

60afb965d75d7d4d1eac3fc6b937ae3c?s=128

Nobuki Inoue

August 29, 2018
Tweet

More Decks by Nobuki Inoue

Other Decks in Programming

Transcript

  1. UI Component 作ってますか? 2018/08/29 Riot.js LT大会@Tokyo #1

  2. HELLO! 井上 暢己(いのうえ のぶき) @black_trooper フリーのWebエンジニア フロントエンドとサーバサイドどっちもやって ます。 2

  3. Component 分割してますか? Riot.js はコンポーネント志向のUIフレームワークです 3

  4. 1 Page 1 Component 4 <sample> <div class="menu"> <a class="header

    item" href="home"> <img src="images/logo.png" alt="" />Sampleサービス </a> <a class="item" href="contact">お問い合わせ</a> </div> <div class="tweet" each="{ tweet in tweets }"> <div class="item-header">{ tweet.full_name }</div> <div class="item"> { tweet.text } </div> <div class="item-footer"> <span class="reply">{ tweet.reply }件の返信</span> <span class="retweet">{ tweet.retweet }件のリツイート</span> <span class="favorite">{ tweet.favorite } いいね</span> </div> </div> </sample>
  5. 分割された Component 5 <common-header class="menu"> <a class="header item" href="home"> <img

    src="images/logo.png" alt="" />Sampleサービス </a> <a class="item" href="contact">お問い合わせ</a> </common-header> <item-footer class="item-footer"> <span class="reply">{ opts.tweet.reply }件の返信</span> <span class="retweet">{ opts.tweet.retweet }件のリツイート</span> <span class="favorite">{ opts.tweet.favorite } いいね</span> </item-footer> <sample> <common-header></common-header> <div class="tweet" each="{ tweet in tweets }"> <div class="item-header">{ tweet.full_name }</div> <div class="item"> { tweet.text } </div> <item-footer tweet="{ tweet }"></item-footer> </div> </sample>
  6. Component 公開してますか? 「自サイトに特化してるから他では使い道ないよ」 6 「たいしたもの作ってないし・・・」

  7. 他で使い道ないよ の例 Checkbox Component 初期値に戻す reset メ ソッド 初期値から変更された かを確認する

    changed メソッド 7 <xx-checkbox> <label> <input type="checkbox" checked="{ checked }" onclick="{ click }" /> <yield /> </label> <script> this.checked = false this.defaultChecked = this.checked this.click = () => { this.checked = !this.checked } this.reset = () => { this.checked = this.defaultChecked } this.changed = () => { return this.checked !== this.defaultChecked } </script> </xx-checkbox> <xx-checkbox>利用規約に同意します </xx-checkbox> CSSの都合でこんな要望があることも - <yield /> は <span> で囲みたい - <input> に xxx というクラスを追加したい
  8. CSSとセットじゃないと使いにくい 8

  9. CSS Framework 使ってますか? 9 CSS Framework に特化した Component でいいじゃん!

  10. CSS Framework の特徴 10 ▸ カンタンにカッコイイWebサイト が作成できる ▸ レスポンシブデザインに対応し ている

    ▸ JavaScript(主にJQuery)で DOMを直接いじる ▸ 仮装DOMでページを構成する UI Framework とは相性が悪い ▸ 対策として Component set が 作られた
  11. Component set の一例 11 Angular React Vue Riot Bootstrap ngbootstrap

    reactstrap Bootstrap + Vue Riot-bootstrap (v3) Semantic UI Semantic UI Angular (1.x) Semantic UI React Semantic UI Vue Semantic UI Riot Material Angular Material MATERIAL-UI Vue Material Riot MaterialUI Other RiotGear (for Braze CSS) (Riot 2.x)
  12. Semantic UI Riot https://github.com/black-tr ooper/semantic-ui-riot Place your screenshot here 12

  13. <su-radio-group ref="radio"> <su-radio value="1">Radio choice1</su-radio> <su-radio value="2">Radio choice2</su-radio> </su-radio-group> <script>

    const getRadioValue = () => { return this.refs.radio.value } </script> Radio 13 <div class="ui radio checkbox"> <input type="radio" name="radio" ref="radio1" value="1"> <label>Radio choice1</label> </div> <div class="ui radio checkbox"> <input type="radio" name="radio" ref="radio2" value="2"> <label>Radio choice</label> </div> <script> const getRadioValuebyJQuery = () => { return $("[name=radio]:checked").val() } const getRadioValueByRiotRefs = () => { return this.refs.radio1.checked ? this.refs.radio1.value : (this.refs.radio2.checked ? this.refs.radio2.value : null) } </script> Before After 値の取得も簡単に! refsだけで頑張るとツラい TagとCSSの記述が簡潔
  14. npm trends から見る UI Componentの 需要 どの UI Component も需要があるっぽい

    14
  15. まとめ ▸ Riot.js の Component を積極的に公開し よう❗ ▸ CSS Framework

    に特化した Component も結構需要あるよ! ▸ 既存 Component set にない機能を作るも よし、推しCSS Framework向けの Component setを作るもよし ▸ Semantic UI Riot も使ってみてね 15 https://github.com/black-trooper/semantic-ui-riot
  16. 16 THANKS! ご清聴ありがとうございました。