Elasticsearch で部内 Wiki 検索高速化

9b6ca173883528d3bd047ca8f20b0bce?s=47 nonylene
June 05, 2017

Elasticsearch で部内 Wiki 検索高速化

KMC 例会講座 資料

9b6ca173883528d3bd047ca8f20b0bce?s=128

nonylene

June 05, 2017
Tweet

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!