Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Riot.jsでSemanticUIを使ってみる
Nobuki Inoue
June 23, 2018
Programming
2
340
Riot.jsでSemanticUIを使ってみる
Nobuki Inoue
June 23, 2018
Tweet
Share
More Decks by Nobuki Inoue
See All by Nobuki Inoue
Webサービスを作ってみて気づいたこと
black_trooper
0
240
10年使ったDBFluteに思う事
black_trooper
0
320
UI Component 作ってますか?
black_trooper
1
430
Other Decks in Programming
See All in Programming
1時間半で克服するJavaScriptの非同期処理/async_javascript_kokufuku
marchin1989
2
620
GitHub Actions を導入した経緯
tamago3keran
1
430
Scrum Fest Osaka 2022/5年で200人になったスタートアップの アジャイル開発の歴史とリアル
atamaplus
1
890
RFC 9111: HTTP Caching
jxck
0
160
チームでカレーを作ろう!アジャイルカレークッキング
akitotsukahara
0
820
Meet Swift Regex
usamik26
0
340
Reactive Java Microservices on Kubernetes with Spring and JHipster
deepu105
1
170
Licences open source : entre guerre de clochers et radicalité
pylapp
2
490
UI Testing of Jetpack Compose Apps, AppDevCon
alexzhukovich
0
160
Improving Developer Experience Through Tools and Techniques 2022
krzysztofzablocki
0
520
"What's new in Swift"の要約 / swift_5_7_summary
uhooi
1
320
iOS 16からのロック画面Widget争奪戦に備える
tsuzuki817
0
230
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
940
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_i
23
15k
Reflections from 52 weeks, 52 projects
jeffersonlam
337
17k
Rebuilding a faster, lazier Slack
samanthasiow
62
7.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
19
1.4k
WebSockets: Embracing the real-time Web
robhawkes
57
5.2k
Bash Introduction
62gerente
597
210k
Testing 201, or: Great Expectations
jmmastey
21
5.4k
What's new in Ruby 2.0
geeforr
336
30k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
62k
Intergalactic Javascript Robots from Outer Space
tanoku
261
25k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
100
5.9k
Transcript
Riot.js で Semantic UI を使ってみる 2018/06/23 【第2回】React (JSフレームワーク他)x ビアバッシュ 初心者勉強会
HELLO! 井上 暢己(いのうえ のぶき) @black_trooper フリーのWebエンジニア フロントエンドとサーバサイドどっちもやって ます。 2
Riot.jsとは ▸ コンポーネントベースのUIライブラリ ▸ 関連するHTMLとJavaScriptをまとめて再 利用可能なコンポーネントを作っていく ▸ 標準のHTMLに近い構文で書ける 3 <app>
<h1>{ opts.title }</h1> <p>{ message }</p> <script> this.message = "hogehoge"; </script> </app>
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 <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 <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 の表示はかわらない
思ったよりつらい・・・ Semantic UI 用のコンポーネントも見つからないし困ったな 7
どこにも無いなら作るしかない! 自分専用で作ってもいいけど、どうせなら npm に公開してしまえー 8
Semantic UI Riot を作りまし た https://github.com/black-tr ooper/semantic-ui-riot Place your screenshot
here 9
<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の値が すんなり取得できた!
<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の記述がコンパクトになった!
<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の記述がコンパクトになった!
他にも いろいろ ▸ 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! ご清聴ありがとうございました。