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

Elasticsearch で部内 Wiki 検索高速化

nonylene
June 05, 2017

Elasticsearch で部内 Wiki 検索高速化

KMC 例会講座 資料

nonylene

June 05, 2017
Tweet

More Decks by nonylene

Other Decks in Technology

Transcript

  1. Heineken Inside KMC nonylene

  2. ࣗݾ঺հ • nonylene (ͷʹΕΜ) • KMC 4ճੜ • ΧʔϏΟͰ͢ •

    root
  3. ࣗݾ঺հ • nonylene (ͷʹΕΜ) • εϚϗΞϓϦɾαʔόʔ • Twitter / GitHub

    etc • http://nonylene.hatenablog.jp/
  4. ۙگ • OCaml ೖ໳ͱ͔ • ศར

  5. ຊ୊

  6. Heineken

  7. What is Heineken? • ෦಺υΩϡϝϯτߴ଎ݕࡧγεςϜ

  8. pukiwiki /wiki/*.txt Heineken-crawler Heineken σʔλొ࿥ ݕࡧ Link ղੳ

  9. ͖͔͚ͬ • nonylene ʮͳΜ͔ KMC ͷπʔϧͰͭΒ͍ͱ ͋͜Δʁʯ • kebus ʮݕࡧʂʂʂʯ

    • nonylene ʮ͔֬ʹ…ʯ
  10. PukiWiki ݕࡧΊͬͪΌ஗͍ • PukiWiki ݕࡧߴ଎Խͯ͠༏উ͢Δ͔͠ͳ͍

  11. ໨࣍ 1. PukiWiki ͷ࿩ 2. ߴ଎Խ͢Δʹ͸ 3. Elasticsearch ಋೖ 4.

    Elasticsearch ݕࡧ 5. Heineken ( React ) 6. ੒Ռɾײ૝
  12. pukiwiki /wiki/*.txt Heineken-crawler Heineken σʔλొ࿥ ݕࡧ Link ղੳ

  13. 1. PukiWiki ֓આ

  14. PukiWiki ͱ͸ʁ • PHP ੡ͷ Wiki • ୭Ͱ΋ࣗ༝ʹฤूͰ͖Δ • ؆୯ʹઃఆͰ͖Δ

    • ๛෋ͳϓϥάΠϯ
  15. PukiWiki ͱ͸ʁ • ͭΒ͍ͱ͜Ζ • ݹ͍ʢ7೥΄Ͳ։ൃࢭ·͍ͬͯͨʣ • ڈ೥ลΓ͔Β࠶։͖͍ͯͯ͠Δ • ϖʔδͷσʔλ͕ϑΝΠϧʢޙड़ʣ

    • εϚϗ޲͚ UI ͸·ͩͳ͍
  16. • 2003/11 ຤ࠒʹಋೖ͞Εͨ໛༷ • ݱࡏ͸ apache2 Ͱಈ͍͍ͯΔ PukiWiki at KMC

  17. • euc-jp Λ࢖͍ͬͯΔ • Wiki ؔ܎ͷॲཧΛ͢Δͱจࣈίʔυ͕େม • PukiWiki ࣗମ͸ UTF-8

    ΋Մೳ PukiWiki at KMC ͷͭΒ͍ͱ͜
  18. • όʔδϣϯ͕ݹ͍ • 1.4.8_alpha2 ( 2006 ೥ ) • Slack

    ͷ౤ߘͳͲඍົʹվ଄͍ͯ͠Δ PukiWiki at KMC ͷͭΒ͍ͱ͜
  19. • PukiWiki ͷσʔλ͸શͯςΩετϑΝΠϧ $ ls /…/pukiwiki/wiki/ 28A1A6A1FEA1A629.txt 31B6A6A5D0A5EAA5B1A1BCA5C9A5BFA5EFA1BCA5C7A5A3A5D5A5A7A5F 3A5B9A5B2A1BCA5E0.txt 323034384149A5B3A5F3A5C6A5B9A5C8.txt

    3332A5ADA5C3A5C1A5F3C0B0C8F7B7D7B2E8.txt … PukiWiki ͷσʔλ ※ λΠτϧΛ euc-jp ͰΤϯίʔυͨ͠όΠτྻͷ Hex ͕ϑΝΠϧ໊ʹͳΔ
  20. • PukiWiki ͷσʔλ͸શͯςΩετϑΝΠϧ $ nkf /…/pukiwiki/wiki/BFB7B4BFA5B3A5F3A5D132303137.txt [[৽׻ίϯύ]] ~&size(25){ͲΜͲΜࢀՃ͍ͯ͜͠͏ͳ}; *໨࣍ [#jfaa7b62]

    #contents ~৽ೖੜͷ͔ͨ͸΋ͪΖΜɺ্ճੜ΍OBͷํʑ΋Ұॹʹָ͠Έ·͠ΐ͏ʂ … ※ euc-jp ͳͷͰ nkf Ͱม׵͍ͯ͠Δ PukiWiki ͷσʔλ
  21. KMC PukiWiki ͷ
 ݕࡧ͸ ͳͥ஗͍ʁ

  22. PukiWiki ͷݕࡧ͸ͳͥ஗͍ • /…/pukiwiki/ ͕ NAS (ϑΝΠϧαʔόʔ) ্ • ωοτϫʔΫӽ͠ͳͷͰ஗͍

    • Ωϟογϡʹ৐Ε͹ૣ͘ͳΔͷͰೋճ໨͸ૣ͍
  23. PukiWiki ͷݕࡧ͸ͳͥ஗͍ • PukiWiki ͕ݕࡧ͢Δ࣌… • PHP Ͱຖճશͯͷ Wiki ϑΝΠϧͷ಺༰Λऔಘ

    • lib/func.php ͷ do_search ࢀর • औಘͨ͠จࣈྻʹରͯ͠શจݕࡧ
  24. PukiWiki ΛϓϩϑΝΠϦϯά • ϓϩϑΝΠϦϯάͯ͠Έͨ • xdebug ʢPHP ͷϓϩϑΝΠϥʣ • webgrind

    (݁Ռදࣔ͢Δ΍ͭ) • SVG ʹ݁ՌΛग़ྗͰ͖Δ
  25. • ϑΝΠϧΩϟογϡ͕ͳ͍࣌ • 24.54 sec • php::fread Ͱ 62% ΋औ͍ͬͯΔ

  26. • ϑΝΠϧΩϟογϡ͕͋Δ࣌ʢೋճ໨ʣ • 9.24 sec • php::fopen ΍ flock ͕ࢧ഑తʹ

  27. PukiWiki ͷݕࡧ͕஗͍ݪҼ • read ͕஗͍ • flock ͕஗͍ • open

    ͕஗͍
  28. PukiWiki ͷݕࡧ͕஗͍ݪҼ • ͱʹ͔͘ϑΝΠϧಡΉͷ͕஗͍ • PukiWiki ͸ѱ͘ͳ͍ʂʂ • จࣈྻݕࡧʹ͔͔ͬͯΔͷ͸ 2

    sec ͙Β͍
  29. pukiwiki /wiki/*.txt Heineken-crawler Heineken σʔλొ࿥ ݕࡧ Link ղੳ

  30. 2. ߴ଎Խ

  31. ݕࡧߴ଎Խͷखஈ • ϑΝΠϧΞΫηεૣ͍ͱ͜Ζʹஔ͘ • ผͷϚγϯͱ͔ • ϝϞϦʹࡌͤΔ • MySQL ͱ͔

  32. ݕࡧߴ଎Խͷखஈ • ϑΝΠϧΞΫηεૣ͍ͱ͜Ζʹஔ͘ • ࠓߟ͑ͨΒ͜Ε͕ࡶͰָͰ͋Δ • MySQL ͱ͔࢖͏ • ಠࣗʹͳΜ͔࡞Δ͜ͱʹͳΔ

    • ͦΕͳΒ΋ͬͱݕࡧʹ࠷దԽ͍ͨ͠Ͷ… →
  33. None
  34. Elasticsearch • ෼ࢄܕ RESTful ݕࡧɾ෼ੳΤϯδϯ • Φϥϯμͷ elastic ͕ࣾ։ൃ •

    Φʔϓϯιʔε • Java
  35. Elasticsearch • ௒ૣ͍ • > Elasticsearch͸଎͍ɻͱʹ͔͘଎͍ɻ • શจݕࡧɾϩάղੳ౳ • GitHub

    / Facebook etc… https://www.elastic.co/jp/products/elasticsearch
  36. Elasticsearch Ͱ଎͍ݕࡧ 1. Elasticseach ʹ PukiWiki ͷσʔλΛೖΕΔ 2. ͍͍ײ͡ʹղੳ͞ΕΔ 3.

    ௒ૣ݁͘Ռ͕ग़Δ  ✨༏উ✨
  37. Elasticsearch Ͱ଎͍ݕࡧ • ·͋ཁ͢Δʹ Elasticsearch ࢖͍͔ͨͬͨ • MySQL Ͱ΋े෼଎͍ͱࢥ͏
 •

    ͜ͷݕࡧΛ࢖ͬͨΞϓϦΛ࡞Δ
  38. Elasticsearch Ͱ଎͍ݕࡧ • ͔ͤͬ͘ͳͷͰ໊લΛ͚ͭΑ͏ • ଎͍ݕࡧ → Hayaken →Heineken

  39. pukiwiki /wiki/*.txt Heineken-crawler Heineken σʔλొ࿥ ݕࡧ Link ղੳ

  40. 3. Elasticsearch ಋೖ

  41. 3-1. Elasticsearch ͷղੳ

  42. Elasticseach Ͱղੳ • จষͷղੳͷ࢓ํΛܾఆ͢Δඞཁ͕͋Δ

  43. Elasticseach Ͱղੳ • Analyzer ͷߏ੒ • Char Filter Ͱਖ਼نԽ౳ •

    Tokenizer Ͱ෼ׂʢ͕͜͜େࣄʣ • Token Filter Ͱਖ਼نԽ౳
  44. Char Filter • จࣈؒͷҧ͍Λٵऩ͢Δ • ͂ʢ̴͉̺̰̺̽̈́ʣ → s (hankaku) •

    ᶨ → ϔΫλʔϧ • Tokenizer ʹೖΕΔલʹෆཁͳจࣈΛআ͘
  45. Char Filter • ICU Analysis Plugin • ެࣜϓϥάΠϯ • ྑ͍ײ͡ʹਖ਼نԽͯ͘͠ΕΔ

    • શ֯ˠ൒֯ɺه߸෼ղɺେจࣈˠখจࣈ౳ • ౉ᬒˠ౉ลͱ͔͸΍Βͳ͍
  46. Char Filter • HTML Strip Char Filter • ࠷ॳ͔Β͋ΔϑΟϧλ •

    HTML λάΛআ͍ͯ͘ΕΔ • <script> ͱ͔
  47. Tokenizer • จষΛ͍͍ײ͡ʹ۠੾Δ • ۠੾ͬͨޠ۟ͷҐஔΛه࿥ ( Index ) ͢Δ →

    ݕࡧޠ͕۟͋Δ৔ॴ͕͙͢෼͔Δ → શจݕࡧΑΓ΋଎͍ʂ
  48. • ྫ: εϖʔε۠੾Γ • “͜Μʹͪ͸ KMC Hello!” → Index: [(‘͜Μʹͪ͸’,

    0), (‘KMC’, 6), 
 (‘Hello!’, 10)] Tokenizer
  49. • Index: [(‘͜Μʹͪ͸’, 0), (‘KMC’, 
 6), (‘Hello!’, 10)]
 •

    ‘KMC’ Ͱݕࡧ → ʮ 6 ൪໨ʹ͋Δʯͱ͙͢෼͔Δ Tokenizer
  50. • Index: [(‘͜Μʹͪ͸’, 0), (‘KMC’, 
 6), (‘Hello!’, 10)]
 •

    ‘KM’ Ͱݕࡧ → ʮͦΜͳ΋ͷ͸ͳ͍ʯ Tokenizer
  51. • ೔ຊޠ͸େม • εϖʔεͰ۠੾Εͳ͍ɾෳࡶͳจ๏ • จষͷ۠੾ΓΛ໌֬ʹ͠ʹ͍͘
 • ྫ:ʮ͜Μʹͪ͸͜Μʹͪ͸ʯ → ??????????

    Tokenizer
  52. • ํ๏ᶃ n จࣈ͝ͱʹ۠੾Δ ( N-Gram )
 • “͜Μʹͪ͸ɺࠓ೔΋͍͍ఱؾͰ͢Ͷ” →

    Index: [(‘͜Μ’, 0), (‘Μʹ’, 1), (‘ʹͪ’, 
 2), (‘ͪ͸’,3), … , (‘͢Ͷ’, 14)] Tokenizer
  53. Tokenizer • Index: [(‘͜Μ’, 0), (‘Μʹ’, 1), (‘ʹͪ’, 2), (‘ͪ͸’,3),

    … , (‘͢Ͷ’, 14)]
 • ‘͜Μʹͪ’ Ͱݕࡧ → ‘͜Μ’ ͕ 0 ൪໨ʹώοτ → ͦͷޙ΋ਖ਼ͦ͠͏ → ʮ 0 ൪໨ʹ͋Δʯͱ͙͢෼͔Δ
  54. • ํ๏ᶃ n จࣈ͝ͱʹه࿥͢Δ ( N-Gram ) • ར఺ •

    ඞͣώοτ͢ΔʢऔΓ͜΅͕͠ͳ͍ʣ • ۠੾ͬͨจࣈҎ্ͷ৔߹ʹݶΔ • ؆୯ Tokenizer
  55. • ํ๏ᶃ n จࣈ͝ͱʹه࿥͢Δ ( N-Gram ) • ܽ఺ •

    Index ͕ංେԽ͠΍͍͢ • ෆཁͳ΋ͷʹϚον͠΍͍͢ • ྫ: ’͍ఱ’ → ‘͍͍ఱؾ’ Tokenizer
  56. • ํ๏ᶄ จষΛղੳͯ͠෼ׂ ʢܗଶૉղੳʣ Tokenizer Tokenized by kuromoji: http://www.atilika.org/

  57. • ํ๏ᶄ จষΛղੳͯ͠෼ׂ ʢܗଶૉղੳʣ • ݱࡏͰ΋֤ॴͰݚڀ͞Ε͍ͯΔ • kuromoji ͕༗໊ http://www.atilika.org/

    • mecab ͱ͔ Tokenizer
  58. • ํ๏ᶄ จষΛղੳͯ͠෼ׂ ʢܗଶૉղੳʣ • ར఺ • Index ͕ංେԽ͠ʹ͍͘ •

    ϊΠζ͕গͳ͍ Tokenizer
  59. • ํ๏ᶄ จষΛղੳͯ͠෼ׂ ʢܗଶૉղੳʣ • ܽ఺ • औΓ͜΅͕͠ଟ͍ • ଟݴޠରԠ͠ʹ͍͘

    Tokenizer
  60. • ํ๏ᶄ จষΛղੳͯ͠෼ׂ ʢܗଶૉղੳʣ • ࡶͳݴ༿ͩͱղੳͮ͠Β͍ • ྫ • ‘Ί͏Ί͏Ί͏Ί͏’

    Tokenizer Tokenized by kuromoji: http://www.atilika.org/
  61. • Heineken Ͱ͸… • 2-Gram Λ࠾༻ • ݕࡧ࿙Εͨ͘͠ͳ͍ • ه߸΍Ṗͷݴ༿͕ଟ͍ΆΑʙʙ

    • ͦΜͳʹྔ͕ଟ͘ͳ͍ Tokenizer
  62. Token Filter • Tokenize ޙͷޠ۟ʹର͔͚ͯ͠ΔϑΟϧλ • ྨޠɾ-ed / -s ͷ౷ҰͳͲ

    • ͜͜ͰେจࣈখจࣈΛἧ͑Δ৔߹΋
 • Heineken Ͱ͸࢖͍ͬͯͳ͍
  63. 3-2. Elasticsearch ઃఆ

  64. 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
  65. • Index ͱ Type Λఆٛ • Type ʹ Field Λઃఆ

    • Analyzer / Datatype ͳͲ • Index ʹ Type Λઃఆ
 (mapping) Elasticseach ͷσʔλߏ଄ Index: pukiwiki Type: page Field: title Field: body Field: modified
  66. • 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" ] }}}}, … }
  67. • 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
  68. • Elasticsearch is RESTful • جຊతʹશͯ JSON Ͱ΍ΓऔΓ͢Δ • Elasticsearch

    Λىಈ͢Δͱ Web αʔόʔཱ͕ͭ • ͦ͜ʹ Python ౳Ͱ JSON ͷ
 Index ఆٛΛ౤͛ͯઃఆ Elasticseach ͷઃఆ
  69. 3-3. 
 Elasticsearch ͷαʔόʔ

  70. Elasticseach Clusterʢࢀߟʣ Cluster: KMC Node: foo Node: bar Replica: hoge3

    Shard: hoge1 Replica: piyo1 Replica: piyo2 Shard: hoge3 Replica: hoge1 Sha Rep
  71. Elasticseach ಋೖ • Elasticsearch ͸ෛՙ͕େ͖͍ • ϝϞϦ୔ࢁ৯͏ • ϑΝΠϧΞΫηε΋୔ࢁ͢Δ •

    ͱ͍͏͜ͱͰ৽͍͠෺ཧϚγϯΛஔ͘͜ͱʹ • ࠓճ node ͸ 1 ୆ͷΈ
  72. pukiwiki /wiki/*.txt Heineken-crawler Heineken σʔλొ࿥ ݕࡧ Link ղੳ

  73. 3-4. 
 Heineken-crawler

  74. Heineken-crawler • Python3 Ͱॻ͔Εͨ PukiWiki ͷΫϩʔϥ • จࣈίʔυΛ UTF-8 ʹม׵

    • λΠτϧऔಘɾม׵ • PukiWiki σʔλΛ Elasticsearch ʹ౤͛Δ
  75. Heineken-crawler • ๭ cron Ͱ 10 ෼ʹҰճಈ͍͍ͯΔ • ߋ৽͞Εͨϖʔδͱ࡟আ͞ΕͨϖʔδͷΈಉظ

  76. pukiwiki /wiki/*.txt Heineken-crawler Heineken σʔλొ࿥ ݕࡧ Link ղੳ

  77. 4. Elasticsearch ݕࡧ

  78. Elasticsearch ݕࡧ • Elasticsearch ͸ଟछଟ༷ͳݕࡧ͕Մೳ • جຊతʹ֤ର৅ͷ ‘είΞ’ Λܭࢉ •

    είΞॱʹฒ΂Δ • είΞͷௐ੔͕େࣄ
  79. Heineken ͰͷείΞ • ᶃ λΠτϧʹॏΈΛஔ͘ • λΠτϧͷείΞΛ 5 ഒॏཁʹ͢Δ •

    ಺෦Ͱ͍͍ײ͡ʹͳΔΒ͍͠ • ["title^5", "body"]
  80. Heineken ͰͷείΞ • ᶄ ߋ৽೔࣌ʹॏΈΛஔ͘ • ݱࡏ͔Βԕ͘ͳΔ΄Ͳ exp Ͱ৐ࢉ https://www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl-function-score-query.html

  81. Heineken ͰͷείΞ • ᶄ ߋ৽೔࣌ʹॏΈΛஔ͘ • ௚ײͰௐ੔ • origin ->

    ݱࡏ • offset -> 150೔ • scale -> 500೔ • decay -> 0.75 https://www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl-function-score-query.html
  82. Heineken ͰͷείΞ • ᶅ λΠτϧͷ୹͞ʹॏΈΛஔ͘ • Wiki ͷλΠτϧ͸֊૚ߏ଄ • ྫ:

    ‘NF2017/४උ’ • ୹͍΄͏͕ॏཁͳ܏޲ʹ͋Δ
  83. Heineken ͰͷείΞ • ᶅ λΠτϧͷ୹͞ʹॏΈΛஔ͘ • ࡉ͔͘ௐ੔͠ͳ͕ΒϕετΛ୳Δ • sqrt ͱ͔

    log ͱ͔ • ݁ہ࠾༻ͨ͠ͷ͸…
  84. Heineken ͰͷείΞ • ᶅ λΠτϧͷ୹͞ʹॏΈΛஔ͘ • "_score / Math.sqrt(Math.log1p(doc[‘title.keyword']. value.length()))"

    score ⇤ 1 p log ( title.length + 1)
  85. Heineken ͰͷείΞ • ᶅ λΠτϧͷ୹͞ʹॏΈΛஔ͘ • + 1 ʹ͍ͯ͠Δͷ͸ 1

    จࣈͷ࣌ରࡦ • log ͸ͳΜͱͳ͘ • sqrt ͸ͳΜͱͳ͘ score ⇤ 1 p log ( title.length + 1)
  86. Heineken ͰͷείΞ • ᶅ λΠτϧͷ୹͞ʹॏΈΛஔ͘

  87. Heineken ͰͷείΞ • είΞ࠷ڧ͸ NF ʹͳͬͨ

  88. ଞͷػೳ • ݕࡧޠ͔۟Β͍͍ײ͡ͷ৔ॴΛநग़Ͱ͖Δ • ϋΠϥΠτ༻ͷ HTML λάૠೖ΋Ͱ͖Δ "fields": { "body":

    { "pre_tags": ["<mark>"], "post_tags": ["</mark>"], "fragment_size": 220, …, } }
  89. pukiwiki /wiki/*.txt Heineken-crawler Heineken σʔλొ࿥ ݕࡧ Link ղੳ

  90. 5. Heineken ( React )

  91. Heineken ΞϓϦ࣮૷ • Elasticsearch ͸ RESTful • શ෦ JSON Ͱฦͬͯ͘Δ

    → Elasticsearch Ҏ֎ʹσʔλ͸ෆཁ → શ෦ JavaScript Ͱ΍Ε͹ྑ͍
  92. Heineken ΞϓϦ࣮૷ • Rails ͳͲͷαʔόʔͰಈ͘ΞϓϦ͸࢖Θͳ͍ • Nginx ͸੩తϑΝΠϧΛฦ͚ͩ͢ • ฦ͢

    HTML ΋ JS ͱ CSS ಡΈࠐΉ͚ͩ
  93. React

  94. React ུ֓ • UI Λߏ੒͢ΔͨΊͷ JS ϥΠϒϥϦ • Facebook ੡

    • ֤ॴͰ࢖ΘΕ͍ͯΔ • UI ͷ֤෦඼Λ Component ͱͯ͠ߏ੒͍ͯ͘͠
  95. React ུ֓ - Virtual DOM • Virtual DOM ͰԾ૝తʹ DOM

    Λอ࣋ • σʔλͷมߋ࣌ʹ͸ Virtual DOM Λมߋ • ͦͷޙ࣮ࡍͷ DOM ͱͷࠩ෼Λ൓ө • DOM ͷมߋΛ཈͑ΒΕͯޮ཰త ৄࡉ: http://qiita.com/mizchi/items/4d25bc26def1719d52e6
  96. React ུ֓ - JSX • JSX Ͱ JS ্ʹ HTML

    Λॻ͚Δ • ςϯϓϨʔτΤϯδϯͬΆ͘ॻ͚ͯศར const element = ( <h1> Hello, {username}! </h1> );
  97. React ։ൃ؀ڥ • create-react-app • Facebook ੡ͷ؆୯ React ߏ੒πʔϧ •

    ։ൃ؀ڥ • Ϗϧυ؀ڥ • ςετ؀ڥ https://github.com/facebookincubator/create-react-app
  98. React ։ൃ؀ڥ • ES6 ( ECMA Script 6 ) •

    JavaScript ͷ৽͍͠ඪ४ • class / Arrow function / const / Promise etc.. ৄࡉ: https://www.slideshare.net/1000ch/begin-ecmascript6
  99. React ։ൃ؀ڥ • Babel • ES6 Λ ES5 ʹม׵ͯ͘͠ΕΔϥΠϒϥϦ •

    ES5 ͸ଟ͘ͷϒϥ΢βͰ࢖͑ΔͷͰ҆৺
  100. ͦͷଞͷύʔπ • React Router v4 • JavaScript ͰϧʔςΟϯά • URL

    ʹΑͬͯ Component Λग़͠෼͚Δ
  101. ͦͷଞͷύʔπ • Bootstrap • Twitter ࣾ੡ CSS / JS 


    ϑϨʔϜϫʔΫ • ෦һ໊฽ɾ
 ਆֆΞοϓϩʔμ ͳͲ
  102. Heineken ։ൃ 1. create-react-app Ͱͻͳܗ࡞੒ 2. ྑ͍ײ͡ʹ Component ࡞Δ •

    Elasticsearch ͷ API Λୟ͍ͯ൓өͤ͞Δ 3. BabelɾWebpack ͰίϯύΠϧ 4. αʔόʔʹஔ͘
  103. Heineken ։ൃ • ໘౗ͩͬͨͱ͜Ζ • ϖʔδϟ • ஸೡʹ෼ذ ↓ ↓

  104. Heineken ։ൃ • ໘౗ͩͬͨͱ͜Ζ • λΠτϧิ׬ • ຖ౓ API Λଧͭ

  105. 6. ੒Ռɾײ૝

  106. ౰ࣾൺ 1 / 500 • 25000 ms -> 50 ms

    0 7500 15000 22500 30000 PukiWiki Heineken 50 25,000 
  107. ଞʹ΋ศར • ॊೈʹݕࡧͰ͖ΔΑ͏ʹͳͬͨ • ॱংͱ͔ • ߋ৽೔࣌ߜࠐͱ͔ • λΠτϧͷΈͰݕࡧͱ͔

  108. ༧ఆ • ϝʔϧରԠ • SPAM ରԠΛߟ͑ͳ͍ͱ͍͚ͳ͍ • rubwiki ͱ͔

  109. ײ૝ • Elasticsearch ͍͢͝ • ͱʹ͔͍͍͘ײ͡ʹͳΔ • React ศརɾES6 ָ͍͠

    • αʔόʔͰԿ΋ಈ͔͞ͳ͍ͷ͸ָ • ΍Γ͔ͨͬͨ͜ͱ͕ग़དྷͨͷͰྑ͔ͬͨ
  110. Thank you for listening!