Riot.jsでSemanticUIを使ってみる

Transcript

1. Riot.js で Semantic UI を使ってみる 2018/06/23 【第2回】React （JSフレームワーク他）x ビアバッシュ 初心者勉強会

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

3. Riot.jsとは ▸ コンポーネントベースのUIライブラリ ▸ 関連するHTMLとJavaScriptをまとめて再 利用可能なコンポーネントを作っていく ▸ 標準のHTMLに近い構文で書ける 3 <app>

   <h1>{ opts.title }</h1> <p>{ message }</p> <script> this.message = "hogehoge"; </script> </app>

4. SemanticUI とは ▸ クラス名に意味を持たせたCSSフレーム ワーク ▸ 名詞、語順、複数形などの構文を用いて いるので直感的 ▸ JavaScriptも含んでいる

   4 <div class="ui three buttons"> <button class="ui active button">1</button> <button class="ui button">2</button> <button class="ui button">3</button> </div>

5. やってみる 5 <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 choice2</label> </div> <script> // checkboxの初期化 $('.ui.checkbox').checkbox() // radioの値を取得する const getRadioValue = () => { return this.refs.radio1.checked ? this.refs.radio1.value : (this.refs.radio2.checked ? this.refs.radio2.value : null) } // radioの値をセットする const setRadioValue = value => { if (this.refs.radio1.value == value) { this.refs.radio1.checked = true } else if (this.refs.radio2.value == value) { this.refs.radio2.checked = true } } </script> Radio HTMLに書くことが多いなぁ Riot.js の ref でアクセスすると大変なことに

6. やってみる 6 <div class="ui selection dropdown"> <input type="hidden" ref="gender"> <i

   class="dropdown icon"></i> <div class="default text">Gender</div> <div class="menu"> <div each="{item in dropdownItems}" data-value="{item.value}" class="item" >{item.label}</div> </div> </div> <script> // dropdownの初期化 $('.ui.dropdown').dropdown() this.dropdownItems = [ { value : 1, label : 'Male' }, { value : 2, label : 'Female' } ] // dropdownの値を取得する const getDropdownValue = () => { return this.refs.gender.value } // dropdownの値をセットする const setDropdownValue = value => { this.refs.gender.value = value } </script> Dropdown hidden に値がセットされる hidden の値を書き換えただけなので dropdown の表示はかわらない

7. 思ったよりつらい・・・ Semantic UI 用のコンポーネントも見つからないし困ったな 7

8. どこにも無いなら作るしかない！ 自分専用で作ってもいいけど、どうせなら npm に公開してしまえー 8

9. Semantic UI Riot を作りまし た https://github.com/black-tr ooper/semantic-ui-riot Place your screenshot

   here 9

10. <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 10 <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 choice2</label> </div> <script> // checkboxの初期化 $('.ui.checkbox').checkbox() // radioの値を取得する const getRadioValue = () => { return this.refs.radio1.checked ? this.refs.radio1.value : (this.refs.radio2.checked ? this.refs.radio2.value : null) } </script> Before After 選択されているradioの値が すんなり取得できた！

11. <su-dropdown items="{ dropdownItems }" ref="gender" /> <script> this.dropdownItems = [

    { value: null, label: 'Gender', default: true }, { value: 1, label: 'Male' }, { value: 2, label: 'Female' } ] alert(this.refs.gender.value ) </script> Dropdown 11 <div class="ui selection dropdown"> <input type="hidden" ref="gender"> <i class="dropdown icon"></i> <div class="default text">Gender</div> <div class="menu"> <div each="{item in dropdownItems}" data-value="{item.value}" class="item" >{item.label}</div> </div> </div> <script> $('.ui.dropdown').dropdown() // dropdownの初期化 this.dropdownItems = [ { value : 1, label : 'Male' }, { value : 2, label : 'Female' } ] alert(this.refs.gender.value) // dropdownの値を取得する </script> Before After HTMLの記述がコンパクトになった！

12. <su-tabset class="top tabular"> <su-tab title="First">First content</su-tab> <su-tab title="Second">Second content</su-tab> <su-tab

    title="Third">Third content</su-tab> </su-tabset> Tab 12 <div class="ui top attached tabular menu"> <a class="active item" data-tab="first">First</a> <a class="item" data-tab="second">Second</a> <a class="item" data-tab="third">Third</a> </div> <div class="ui bottom attached active tab segment" data-tab="first"> First content</div> <div class="ui bottom attached tab segment" data-tab="second"> Second content</div> <div class="ui bottom attached tab segment" data-tab="third"> Third content</div> <script> // tabの初期化 $('.tabular.menu .item').tab() </script> Before After HTMLの記述がコンパクトになった！

13. 他にも いろいろ ▸ Accordion ▸ Checkbox ▸ Datepicker ▸ Dropdown

    ▸ Modal ▸ Popup ▸ Radio ▸ Tab 今後も少しずつですが追加していきます。 13

14. まとめ ▸ Riot.js は標準のHTMLに近い感覚で書ける ところが ▸ Semantic UI は直感的なクラス名なので何を しているかが分かりやすい

    ▸ Semantic UI Riot を作ったので使ってみてく ださい ▸ 自分専用のツールであっても、公開すれば誰 かの役に立つかも！ 14 https://github.com/black-trooper/semantic-ui-riot

15. 15 THANKS! ご清聴ありがとうございました。