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

はてなブログ タグの技術選択 / The technical details of Haten...

aereal
June 26, 2019

はてなブログ タグの技術選択 / The technical details of Hatena Blog Tag

@ Hatena Engineer Seminar #12

aereal

June 26, 2019
Tweet

More Decks by aereal

Other Decks in Programming

Transcript

  1. ࿩͞ͳ͍͜ͱ • σʔλҠߦ • ͜Ε͚ͩͰ͍Ζ͍Ζ࿩ͤΔͷͰػձ͕͋Ε͹ • ϓϩδΣΫτ؅ཧ • Πϯϑϥߏ੒؅ཧ •

    Service Mesh • ֎෦APIݺͼग़͕͠ଟ͍ͷͰݕ౼ͨ͠ • ϦϦʔεલͷݕূஈ֊ͳͷͰࣽ٧·ͬͨΒ͓࿩͠͠·͢
  2. ͸ͯͳϒϩά λάͷಛ௃ • Ϣʔβ͕ίϯςϯπΛฤू͢ Δ • ༧ଌ͕೉͍͠ΞΫηεͷมಈ • ݕࡧΤϯδϯʹΠϯσοΫε ͯ͠΋Β͍͍ͨ

    • ద੾ͳΩϟογϡઓུ • ߴ͍εέʔϥϏϦςΟ • αʔόαΠυͰstaticʹHTML Λฦ͢ඞཁ͕͋Δ
  3. ࿀ʹ࢓ࣄʹେ๩͠ • (ΤϯδχΞʹݶΒͣ) ΍Δ͜ͱ͕ଟ͍! • ਓ͕ؒ΍Δ͜ͱΛݮΒ͍ͨ͠ • ࣗಈԽɺίʔυੜ੒ɺ௕͍΋ͷʹר͔ΕΔ, etc. •

    ਓ͕গͳ͚Ε͹ίϛϡχέʔγϣϯίετ͸Լ͕Δ • →νϟϨϯδϯάͳ͜ͱΛ͢Δྑ͍ػձ • →·ͣաڈΛৼΓฦΖ͏
  4. Q. ·ͩSSR͍Δ? • Q. Googlebot͕࢖༻͢ΔChromium͕࠷৽ʹͳ͚ͬͨͲ? • The new evergreen Googlebot

    • A. Googlebot͚ͩߟ͑ΔͳΒඞਢͰ͸ͳ͘ͳͬͨ • A. ͔͠͠ଞʹ΋Ϋϩʔϥ͸͍Δ • Twitter, Facebook, Bing, etc.
  5. ͸ͯͳϒϩά λάͷಛ௃ • Ϣʔβ͕ίϯςϯπΛฤू͢ Δ • ༧ଌ͕೉͍͠ΞΫηεͷมಈ • ݕࡧΤϯδϯʹΠϯσοΫε ͯ͠΋Β͍͍ͨ

    • ద੾ͳΩϟογϡઓུ • ߴ͍εέʔϥϏϦςΟ • αʔόαΠυͰstaticʹHTML Λฦ͢ඞཁ͕͋Δ ࠶ ܝ
  6. const ALL_PEOPLE_QUERY = gql` query All_People_Query { allPeople { people

    { id name } } } `; interface Data { allPeople: { people: Array<{ id: string; name: string }>; }; }; interface Variables { first: number; }; const AllPeopleComponent = <Query<Data, Variables> query={ALL_PEOPLE_QUERY}> {({ loading, error, data }) => { ... }} </Query> www.apollographql.com/docs/react/recipes/static-typing/
  7. GraphQLͷԸܙ • GraphQLͱApolloͷ͓͔͛Ͱѹ౗తʹলྗ • ͜Ε·Ͱͱҧ͏͜ͱ: ந৅ʹґଘͰ͖Δ • ґଘੑٯసͷݪଇ dependency inversion

    principle • ܕݕ͕ࠪແ͍৔߹: ۩৅ (ͷܕ) Ͱ΍ΓͱΓ͢Δ = յΕ΍ ͍͢ • ۩৅ͷܕ is ಈ͍͍ͯΔίʔυͷฦΓ஋