Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Elasticsearch で部内 Wiki 検索高速化
Search
nonylene
June 05, 2017
Technology
2
2.1k
Elasticsearch で部内 Wiki 検索高速化
KMC 例会講座 資料
nonylene
June 05, 2017
Tweet
Share
More Decks by nonylene
See All by nonylene
Androidアプリを作る 第7回
nonylene
0
1.5k
Androidアプリを作る 第6回
nonylene
1
1.2k
Androidアプリを作る 第5回
nonylene
0
1.2k
Androidアプリを作る 第4回
nonylene
0
770
Androidアプリを作る 第3回
nonylene
0
1.3k
androidアプリを作る 第1・2回
nonylene
0
1.1k
iOS アプリ作成入門
nonylene
11
4k
Android・iOS アプリ作成入門 Android 編
nonylene
1
1.8k
Other Decks in Technology
See All in Technology
私とAWSとの関わりの歩み~意志あるところに道は開けるかも?~
nagisa53
1
150
専門分化が進む分業下でもユーザーが本当に欲しかったものを追求するプロダクトマネジメント/Focus on real user needs despite deep specialization and division of labor
moriyuya
0
200
2025-07-31: GitHub Copilot Agent mode at Vibe Coding Cafe (15min)
chomado
2
320
少人数でも回る! DevinとPlaybookで支える運用改善
ishikawa_pro
5
2.2k
ビジネス文書に特化した基盤モデル開発 / SaaSxML_Session_2
sansan_randd
0
230
恐怖!テストコードなき夜
tsukuboshi
2
110
増え続ける脆弱性に立ち向かう: 事前対策と優先度づけによる 持続可能な脆弱性管理 / Confronting the Rise of Vulnerabilities: Sustainable Management Through Proactive Measures and Prioritization
nttcom
1
240
データエンジニアがクラシルでやりたいことの現在地
gappy50
3
840
【CEDEC2025】『ウマ娘 プリティーダービー』における映像制作のさらなる高品質化へ!~ 豊富な素材出力と制作フローの改善を実現するツールについて~
cygames
PRO
0
210
KubeCon + CloudNativeCon Japan 2025 Recap
donkomura
0
120
VLMサービスを用いた請求書データ化検証 / SaaSxML_Session_1
sansan_randd
0
200
AIに全任せしないコーディングとマネジメント思考
kikuchikakeru
0
400
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Music & Morning Musume
bryan
46
6.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Code Review Best Practice
trishagee
69
19k
Docker and Python
trallard
45
3.5k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Fireside Chat
paigeccino
37
3.6k
Designing Experiences People Love
moore
142
24k
Transcript
Heineken Inside KMC nonylene
ࣗݾհ • nonylene (ͷʹΕΜ) • KMC 4ճੜ • ΧʔϏΟͰ͢ •
root
ࣗݾհ • nonylene (ͷʹΕΜ) • εϚϗΞϓϦɾαʔόʔ • Twitter / GitHub
etc • http://nonylene.hatenablog.jp/
ۙگ • OCaml ೖͱ͔ • ศར
ຊ
Heineken
What is Heineken? • ෦υΩϡϝϯτߴݕࡧγεςϜ
pukiwiki /wiki/*.txt Heineken-crawler Heineken σʔλొ ݕࡧ Link ղੳ
͖͔͚ͬ • nonylene ʮͳΜ͔ KMC ͷπʔϧͰͭΒ͍ͱ ͋͜Δʁʯ • kebus ʮݕࡧʂʂʂʯ
• nonylene ʮ͔֬ʹ…ʯ
PukiWiki ݕࡧΊͬͪΌ͍ • PukiWiki ݕࡧߴԽͯ͠༏উ͢Δ͔͠ͳ͍
࣍ 1. PukiWiki ͷ 2. ߴԽ͢Δʹ 3. Elasticsearch ಋೖ 4.
Elasticsearch ݕࡧ 5. Heineken ( React ) 6. Ռɾײ
pukiwiki /wiki/*.txt Heineken-crawler Heineken σʔλొ ݕࡧ Link ղੳ
1. PukiWiki ֓આ
PukiWiki ͱʁ • PHP ͷ Wiki • ୭Ͱࣗ༝ʹฤूͰ͖Δ • ؆୯ʹઃఆͰ͖Δ
• ๛ͳϓϥάΠϯ
PukiWiki ͱʁ • ͭΒ͍ͱ͜Ζ • ݹ͍ʢ7΄Ͳ։ൃࢭ·͍ͬͯͨʣ • ڈลΓ͔Β࠶։͖͍ͯͯ͠Δ • ϖʔδͷσʔλ͕ϑΝΠϧʢޙड़ʣ
• εϚϗ͚ UI ·ͩͳ͍
• 2003/11 ࠒʹಋೖ͞Ε༷ͨ • ݱࡏ apache2 Ͱಈ͍͍ͯΔ PukiWiki at KMC
• euc-jp Λ͍ͬͯΔ • Wiki ؔͷॲཧΛ͢Δͱจࣈίʔυ͕େม • PukiWiki ࣗମ UTF-8
Մೳ PukiWiki at KMC ͷͭΒ͍ͱ͜
• όʔδϣϯ͕ݹ͍ • 1.4.8_alpha2 ( 2006 ) • Slack
ͷߘͳͲඍົʹվ͍ͯ͠Δ PukiWiki at KMC ͷͭΒ͍ͱ͜
• PukiWiki ͷσʔλશͯςΩετϑΝΠϧ $ ls /…/pukiwiki/wiki/ 28A1A6A1FEA1A629.txt 31B6A6A5D0A5EAA5B1A1BCA5C9A5BFA5EFA1BCA5C7A5A3A5D5A5A7A5F 3A5B9A5B2A1BCA5E0.txt 323034384149A5B3A5F3A5C6A5B9A5C8.txt
3332A5ADA5C3A5C1A5F3C0B0C8F7B7D7B2E8.txt … PukiWiki ͷσʔλ ※ λΠτϧΛ euc-jp ͰΤϯίʔυͨ͠όΠτྻͷ Hex ͕ϑΝΠϧ໊ʹͳΔ
• PukiWiki ͷσʔλશͯςΩετϑΝΠϧ $ nkf /…/pukiwiki/wiki/BFB7B4BFA5B3A5F3A5D132303137.txt [[৽ίϯύ]] ~&size(25){ͲΜͲΜࢀՃ͍ͯ͜͠͏ͳ}; *࣍ [#jfaa7b62]
#contents ~৽ೖੜͷ͔ͨͪΖΜɺ্ճੜOBͷํʑҰॹʹָ͠Έ·͠ΐ͏ʂ … ※ euc-jp ͳͷͰ nkf Ͱม͍ͯ͠Δ PukiWiki ͷσʔλ
KMC PukiWiki ͷ ݕࡧ ͳ͍ͥʁ
PukiWiki ͷݕࡧͳ͍ͥ • /…/pukiwiki/ ͕ NAS (ϑΝΠϧαʔόʔ) ্ • ωοτϫʔΫӽ͠ͳͷͰ͍
• ΩϟογϡʹΕૣ͘ͳΔͷͰೋճૣ͍
PukiWiki ͷݕࡧͳ͍ͥ • PukiWiki ͕ݕࡧ͢Δ࣌… • PHP Ͱຖճશͯͷ Wiki ϑΝΠϧͷ༰Λऔಘ
• lib/func.php ͷ do_search ࢀর • औಘͨ͠จࣈྻʹରͯ͠શจݕࡧ
PukiWiki ΛϓϩϑΝΠϦϯά • ϓϩϑΝΠϦϯάͯ͠Έͨ • xdebug ʢPHP ͷϓϩϑΝΠϥʣ • webgrind
(݁Ռදࣔ͢Δͭ) • SVG ʹ݁ՌΛग़ྗͰ͖Δ
• ϑΝΠϧΩϟογϡ͕ͳ͍࣌ • 24.54 sec • php::fread Ͱ 62% औ͍ͬͯΔ
• ϑΝΠϧΩϟογϡ͕͋Δ࣌ʢೋճʣ • 9.24 sec • php::fopen flock ͕ࢧతʹ
PukiWiki ͷݕࡧ͕͍ݪҼ • read ͕͍ • flock ͕͍ • open
͕͍
PukiWiki ͷݕࡧ͕͍ݪҼ • ͱʹ͔͘ϑΝΠϧಡΉͷ͕͍ • PukiWiki ѱ͘ͳ͍ʂʂ • จࣈྻݕࡧʹ͔͔ͬͯΔͷ 2
sec ͙Β͍
pukiwiki /wiki/*.txt Heineken-crawler Heineken σʔλొ ݕࡧ Link ղੳ
2. ߴԽ
ݕࡧߴԽͷखஈ • ϑΝΠϧΞΫηεૣ͍ͱ͜Ζʹஔ͘ • ผͷϚγϯͱ͔ • ϝϞϦʹࡌͤΔ • MySQL ͱ͔
ݕࡧߴԽͷखஈ • ϑΝΠϧΞΫηεૣ͍ͱ͜Ζʹஔ͘ • ࠓߟ͑ͨΒ͜Ε͕ࡶͰָͰ͋Δ • MySQL ͱ͔͏ • ಠࣗʹͳΜ͔࡞Δ͜ͱʹͳΔ
• ͦΕͳΒͬͱݕࡧʹ࠷దԽ͍ͨ͠Ͷ… →
None
Elasticsearch • ࢄܕ RESTful ݕࡧɾੳΤϯδϯ • Φϥϯμͷ elastic ͕ࣾ։ൃ •
Φʔϓϯιʔε • Java
Elasticsearch • ૣ͍ • > Elasticsearch͍ɻͱʹ͔͍͘ɻ • શจݕࡧɾϩάղੳ • GitHub
/ Facebook etc… https://www.elastic.co/jp/products/elasticsearch
Elasticsearch Ͱ͍ݕࡧ 1. Elasticseach ʹ PukiWiki ͷσʔλΛೖΕΔ 2. ͍͍ײ͡ʹղੳ͞ΕΔ 3.
ૣ݁͘Ռ͕ग़Δ ✨༏উ✨
Elasticsearch Ͱ͍ݕࡧ • ·͋ཁ͢Δʹ Elasticsearch ͍͔ͨͬͨ • MySQL Ͱे͍ͱࢥ͏ •
͜ͷݕࡧΛͬͨΞϓϦΛ࡞Δ
Elasticsearch Ͱ͍ݕࡧ • ͔ͤͬ͘ͳͷͰ໊લΛ͚ͭΑ͏ • ͍ݕࡧ → Hayaken →Heineken
pukiwiki /wiki/*.txt Heineken-crawler Heineken σʔλొ ݕࡧ Link ղੳ
3. Elasticsearch ಋೖ
3-1. Elasticsearch ͷղੳ
Elasticseach Ͱղੳ • จষͷղੳͷํΛܾఆ͢Δඞཁ͕͋Δ
Elasticseach Ͱղੳ • Analyzer ͷߏ • Char Filter Ͱਖ਼نԽ •
Tokenizer Ͱׂʢ͕͜͜େࣄʣ • Token Filter Ͱਖ਼نԽ
Char Filter • จࣈؒͷҧ͍Λٵऩ͢Δ • ͂ʢ̴͉̺̰̺̽̈́ʣ → s (hankaku) •
ᶨ → ϔΫλʔϧ • Tokenizer ʹೖΕΔલʹෆཁͳจࣈΛআ͘
Char Filter • ICU Analysis Plugin • ެࣜϓϥάΠϯ • ྑ͍ײ͡ʹਖ਼نԽͯ͘͠ΕΔ
• શ֯ˠ֯ɺه߸ղɺେจࣈˠখจࣈ • ᬒˠลͱ͔Βͳ͍
Char Filter • HTML Strip Char Filter • ࠷ॳ͔Β͋ΔϑΟϧλ •
HTML λάΛআ͍ͯ͘ΕΔ • <script> ͱ͔
Tokenizer • จষΛ͍͍ײ͡ʹ۠Δ • ۠ͬͨޠ۟ͷҐஔΛه ( Index ) ͢Δ →
ݕࡧޠ͕۟͋Δॴ͕͙͔͢Δ → શจݕࡧΑΓ͍ʂ
• ྫ: εϖʔε۠Γ • “͜Μʹͪ KMC Hello!” → Index: [(‘͜Μʹͪ’,
0), (‘KMC’, 6), (‘Hello!’, 10)] Tokenizer
• Index: [(‘͜Μʹͪ’, 0), (‘KMC’, 6), (‘Hello!’, 10)] •
‘KMC’ Ͱݕࡧ → ʮ 6 ൪ʹ͋Δʯͱ͙͔͢Δ Tokenizer
• Index: [(‘͜Μʹͪ’, 0), (‘KMC’, 6), (‘Hello!’, 10)] •
‘KM’ Ͱݕࡧ → ʮͦΜͳͷͳ͍ʯ Tokenizer
• ຊޠେม • εϖʔεͰ۠Εͳ͍ɾෳࡶͳจ๏ • จষͷ۠ΓΛ໌֬ʹ͠ʹ͍͘ • ྫ:ʮ͜Μʹͪ͜Μʹͪʯ → ??????????
Tokenizer
• ํ๏ᶃ n จࣈ͝ͱʹ۠Δ ( N-Gram ) • “͜Μʹͪɺࠓ͍͍ఱؾͰ͢Ͷ” →
Index: [(‘͜Μ’, 0), (‘Μʹ’, 1), (‘ʹͪ’, 2), (‘ͪ’,3), … , (‘͢Ͷ’, 14)] Tokenizer
Tokenizer • Index: [(‘͜Μ’, 0), (‘Μʹ’, 1), (‘ʹͪ’, 2), (‘ͪ’,3),
… , (‘͢Ͷ’, 14)] • ‘͜Μʹͪ’ Ͱݕࡧ → ‘͜Μ’ ͕ 0 ൪ʹώοτ → ͦͷޙਖ਼ͦ͠͏ → ʮ 0 ൪ʹ͋Δʯͱ͙͔͢Δ
• ํ๏ᶃ n จࣈ͝ͱʹه͢Δ ( N-Gram ) • ར •
ඞͣώοτ͢ΔʢऔΓ͜΅͕͠ͳ͍ʣ • ۠ͬͨจࣈҎ্ͷ߹ʹݶΔ • ؆୯ Tokenizer
• ํ๏ᶃ n จࣈ͝ͱʹه͢Δ ( N-Gram ) • ܽ •
Index ͕ංେԽ͍͢͠ • ෆཁͳͷʹϚον͍͢͠ • ྫ: ’͍ఱ’ → ‘͍͍ఱؾ’ Tokenizer
• ํ๏ᶄ จষΛղੳׂͯ͠ ʢܗଶૉղੳʣ Tokenizer Tokenized by kuromoji: http://www.atilika.org/
• ํ๏ᶄ จষΛղੳׂͯ͠ ʢܗଶૉղੳʣ • ݱࡏͰ֤ॴͰݚڀ͞Ε͍ͯΔ • kuromoji ͕༗໊ http://www.atilika.org/
• mecab ͱ͔ Tokenizer
• ํ๏ᶄ จষΛղੳׂͯ͠ ʢܗଶૉղੳʣ • ར • Index ͕ංେԽ͠ʹ͍͘ •
ϊΠζ͕গͳ͍ Tokenizer
• ํ๏ᶄ จষΛղੳׂͯ͠ ʢܗଶૉղੳʣ • ܽ • औΓ͜΅͕͠ଟ͍ • ଟݴޠରԠ͠ʹ͍͘
Tokenizer
• ํ๏ᶄ จষΛղੳׂͯ͠ ʢܗଶૉղੳʣ • ࡶͳݴ༿ͩͱղੳͮ͠Β͍ • ྫ • ‘Ί͏Ί͏Ί͏Ί͏’
Tokenizer Tokenized by kuromoji: http://www.atilika.org/
• Heineken Ͱ… • 2-Gram Λ࠾༻ • ݕࡧ࿙Εͨ͘͠ͳ͍ • ه߸Ṗͷݴ༿͕ଟ͍ΆΑʙʙ
• ͦΜͳʹྔ͕ଟ͘ͳ͍ Tokenizer
Token Filter • Tokenize ޙͷޠ۟ʹର͔͚ͯ͠ΔϑΟϧλ • ྨޠɾ-ed / -s ͷ౷ҰͳͲ
• ͜͜ͰେจࣈখจࣈΛἧ͑Δ߹ • Heineken Ͱ͍ͬͯͳ͍
3-2. Elasticsearch ઃఆ
Elasticseach ͷσʔλߏ Cluster: KMC Index: hoge Index: piyo Type: page
Type: relation Type: item Typ Field: title Field: body Field: modified Field: from Field: to Field: price Field: name Field: desc Field: available Fiel Fiel
• Index ͱ Type Λఆٛ • Type ʹ Field Λઃఆ
• Analyzer / Datatype ͳͲ • Index ʹ Type Λઃఆ (mapping) Elasticseach ͷσʔλߏ Index: pukiwiki Type: page Field: title Field: body Field: modified
• Analyzer ఆٛ { "settings": { "analysis": { "analyzer": {
"jp_analyzer": { "tokenizer": "jp_tokenizer", "char_filter": [ "html_strip", “icu_normalizer" ], … } }, "tokenizer": { "jp_tokenizer": { "type": “ngram", … , "token_chars": [ "letter", "digit", "symbol", "punctuation" ] }}}}, … }
• Mapping ఆٛ { … , "mappings": { "page": {
… "properties": { "title": { … }, "title_url_encoded": { … }, "body": { "type": "text", "analyzer": "jp_analyzer", "term_vector" : "with_positions_offsets" }, "modified": { "type": "date", "format": "strict_date_optional_time||epoch_millis" } }}}} Index: pukiwiki Type: page Field: title Field: body Field: modified Field: title_url_encoded
• Elasticsearch is RESTful • جຊతʹશͯ JSON ͰΓऔΓ͢Δ • Elasticsearch
Λىಈ͢Δͱ Web αʔόʔཱ͕ͭ • ͦ͜ʹ Python Ͱ JSON ͷ Index ఆٛΛ͛ͯઃఆ Elasticseach ͷઃఆ
3-3. Elasticsearch ͷαʔόʔ
Elasticseach Clusterʢࢀߟʣ Cluster: KMC Node: foo Node: bar Replica: hoge3
Shard: hoge1 Replica: piyo1 Replica: piyo2 Shard: hoge3 Replica: hoge1 Sha Rep
Elasticseach ಋೖ • Elasticsearch ෛՙ͕େ͖͍ • ϝϞϦࢁ৯͏ • ϑΝΠϧΞΫηεࢁ͢Δ •
ͱ͍͏͜ͱͰ৽͍͠ཧϚγϯΛஔ͘͜ͱʹ • ࠓճ node 1 ͷΈ
pukiwiki /wiki/*.txt Heineken-crawler Heineken σʔλొ ݕࡧ Link ղੳ
3-4. Heineken-crawler
Heineken-crawler • Python3 Ͱॻ͔Εͨ PukiWiki ͷΫϩʔϥ • จࣈίʔυΛ UTF-8 ʹม
• λΠτϧऔಘɾม • PukiWiki σʔλΛ Elasticsearch ʹ͛Δ
Heineken-crawler • cron Ͱ 10 ʹҰճಈ͍͍ͯΔ • ߋ৽͞Εͨϖʔδͱআ͞ΕͨϖʔδͷΈಉظ
pukiwiki /wiki/*.txt Heineken-crawler Heineken σʔλొ ݕࡧ Link ղੳ
4. Elasticsearch ݕࡧ
Elasticsearch ݕࡧ • Elasticsearch ଟछଟ༷ͳݕࡧ͕Մೳ • جຊతʹ֤ରͷ ‘είΞ’ Λܭࢉ •
είΞॱʹฒΔ • είΞͷௐ͕େࣄ
Heineken ͰͷείΞ • ᶃ λΠτϧʹॏΈΛஔ͘ • λΠτϧͷείΞΛ 5 ഒॏཁʹ͢Δ •
෦Ͱ͍͍ײ͡ʹͳΔΒ͍͠ • ["title^5", "body"]
Heineken ͰͷείΞ • ᶄ ߋ৽࣌ʹॏΈΛஔ͘ • ݱࡏ͔Βԕ͘ͳΔ΄Ͳ exp Ͱࢉ https://www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl-function-score-query.html
Heineken ͰͷείΞ • ᶄ ߋ৽࣌ʹॏΈΛஔ͘ • ײͰௐ • origin ->
ݱࡏ • offset -> 150 • scale -> 500 • decay -> 0.75 https://www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl-function-score-query.html
Heineken ͰͷείΞ • ᶅ λΠτϧͷ͞ʹॏΈΛஔ͘ • Wiki ͷλΠτϧ֊ߏ • ྫ:
‘NF2017/४උ’ • ͍΄͏͕ॏཁͳʹ͋Δ
Heineken ͰͷείΞ • ᶅ λΠτϧͷ͞ʹॏΈΛஔ͘ • ࡉ͔͘ௐ͠ͳ͕ΒϕετΛ୳Δ • sqrt ͱ͔
log ͱ͔ • ݁ہ࠾༻ͨ͠ͷ…
Heineken ͰͷείΞ • ᶅ λΠτϧͷ͞ʹॏΈΛஔ͘ • "_score / Math.sqrt(Math.log1p(doc[‘title.keyword']. value.length()))"
score ⇤ 1 p log ( title.length + 1)
Heineken ͰͷείΞ • ᶅ λΠτϧͷ͞ʹॏΈΛஔ͘ • + 1 ʹ͍ͯ͠Δͷ 1
จࣈͷ࣌ରࡦ • log ͳΜͱͳ͘ • sqrt ͳΜͱͳ͘ score ⇤ 1 p log ( title.length + 1)
Heineken ͰͷείΞ • ᶅ λΠτϧͷ͞ʹॏΈΛஔ͘
Heineken ͰͷείΞ • είΞ࠷ڧ NF ʹͳͬͨ
ଞͷػೳ • ݕࡧޠ͔۟Β͍͍ײ͡ͷॴΛநग़Ͱ͖Δ • ϋΠϥΠτ༻ͷ HTML λάૠೖͰ͖Δ "fields": { "body":
{ "pre_tags": ["<mark>"], "post_tags": ["</mark>"], "fragment_size": 220, …, } }
pukiwiki /wiki/*.txt Heineken-crawler Heineken σʔλొ ݕࡧ Link ղੳ
5. Heineken ( React )
Heineken ΞϓϦ࣮ • Elasticsearch RESTful • શ෦ JSON Ͱฦͬͯ͘Δ
→ Elasticsearch Ҏ֎ʹσʔλෆཁ → શ෦ JavaScript ͰΕྑ͍
Heineken ΞϓϦ࣮ • Rails ͳͲͷαʔόʔͰಈ͘ΞϓϦΘͳ͍ • Nginx ੩తϑΝΠϧΛฦ͚ͩ͢ • ฦ͢
HTML JS ͱ CSS ಡΈࠐΉ͚ͩ
React
React ུ֓ • UI Λߏ͢ΔͨΊͷ JS ϥΠϒϥϦ • Facebook
• ֤ॴͰΘΕ͍ͯΔ • UI ͷ֤෦Λ Component ͱͯ͠ߏ͍ͯ͘͠
React ུ֓ - Virtual DOM • Virtual DOM ͰԾతʹ DOM
Λอ࣋ • σʔλͷมߋ࣌ʹ Virtual DOM Λมߋ • ͦͷޙ࣮ࡍͷ DOM ͱͷࠩΛө • DOM ͷมߋΛ͑ΒΕͯޮత ৄࡉ: http://qiita.com/mizchi/items/4d25bc26def1719d52e6
React ུ֓ - JSX • JSX Ͱ JS ্ʹ HTML
Λॻ͚Δ • ςϯϓϨʔτΤϯδϯͬΆ͘ॻ͚ͯศར const element = ( <h1> Hello, {username}! </h1> );
React ։ൃڥ • create-react-app • Facebook ͷ؆୯ React ߏπʔϧ •
։ൃڥ • Ϗϧυڥ • ςετڥ https://github.com/facebookincubator/create-react-app
React ։ൃڥ • ES6 ( ECMA Script 6 ) •
JavaScript ͷ৽͍͠ඪ४ • class / Arrow function / const / Promise etc.. ৄࡉ: https://www.slideshare.net/1000ch/begin-ecmascript6
React ։ൃڥ • Babel • ES6 Λ ES5 ʹมͯ͘͠ΕΔϥΠϒϥϦ •
ES5 ଟ͘ͷϒϥβͰ͑ΔͷͰ҆৺
ͦͷଞͷύʔπ • React Router v4 • JavaScript ͰϧʔςΟϯά • URL
ʹΑͬͯ Component Λग़͚͠Δ
ͦͷଞͷύʔπ • Bootstrap • Twitter ࣾ CSS / JS
ϑϨʔϜϫʔΫ • ෦һ໊ɾ ਆֆΞοϓϩʔμ ͳͲ
Heineken ։ൃ 1. create-react-app Ͱͻͳܗ࡞ 2. ྑ͍ײ͡ʹ Component ࡞Δ •
Elasticsearch ͷ API Λୟ͍ͯөͤ͞Δ 3. BabelɾWebpack ͰίϯύΠϧ 4. αʔόʔʹஔ͘
Heineken ։ൃ • ໘ͩͬͨͱ͜Ζ • ϖʔδϟ • ஸೡʹذ ↓ ↓
Heineken ։ൃ • ໘ͩͬͨͱ͜Ζ • λΠτϧิ • ຖ API Λଧͭ
6. Ռɾײ
ࣾൺ 1 / 500 • 25000 ms -> 50 ms
0 7500 15000 22500 30000 PukiWiki Heineken 50 25,000
ଞʹศར • ॊೈʹݕࡧͰ͖ΔΑ͏ʹͳͬͨ • ॱংͱ͔ • ߋ৽࣌ߜࠐͱ͔ • λΠτϧͷΈͰݕࡧͱ͔
༧ఆ • ϝʔϧରԠ • SPAM ରԠΛߟ͑ͳ͍ͱ͍͚ͳ͍ • rubwiki ͱ͔
ײ • Elasticsearch ͍͢͝ • ͱʹ͔͍͍͘ײ͡ʹͳΔ • React ศརɾES6 ָ͍͠
• αʔόʔͰԿಈ͔͞ͳ͍ͷָ • Γ͔ͨͬͨ͜ͱ͕ग़དྷͨͷͰྑ͔ͬͨ
Thank you for listening!