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

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

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

{ opts.title }

{ message }

this.message = "hogehoge";

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

やってみる 5 // 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 } } Radio HTMLに書くことが多いなぁ Riot.js の ref でアクセスすると大変なことに

やってみる 6 // 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 } Dropdown hidden に値がセットされる hidden の値を書き換えただけなので dropdown の表示はかわらない

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

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

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

Radio choice1 Radio choice2 const getRadioValue = () => { return this.refs.radio.value } Radio 10 // 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) } Before After 選択されているradioの値が すんなり取得できた！

this.dropdownItems = [ { value: null, label: 'Gender', default: true }, { value: 1, label: 'Male' }, { value: 2, label: 'Female' } ] alert(this.refs.gender.value ) Dropdown 11 $('.ui.dropdown').dropdown() // dropdownの初期化 this.dropdownItems = [ { value : 1, label : 'Male' }, { value : 2, label : 'Female' } ] alert(this.refs.gender.value) // dropdownの値を取得する Before After HTMLの記述がコンパクトになった！

First content Second content Third content Tab 12 // tabの初期化 $('.tabular.menu .item').tab() Before After HTMLの記述がコンパクトになった！

他にも いろいろ ▸ Accordion ▸ Checkbox ▸ Datepicker ▸ Dropdown ▸ Modal ▸ Popup ▸ Radio ▸ Tab 今後も少しずつですが追加していきます。 13

まとめ ▸ Riot.js は標準のHTMLに近い感覚で書ける ところが ▸ Semantic UI は直感的なクラス名なので何を しているかが分かりやすい ▸ Semantic UI Riot を作ったので使ってみてく ださい ▸ 自分専用のツールであっても、公開すれば誰 かの役に立つかも！ 14 https://github.com/black-trooper/semantic-ui-riot

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