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

flowでjavascriptに型付けしよう

 flowでjavascriptに型付けしよう

E63c0cf4a77b1799e02f97689db83d91?s=128

kaidouji85

May 26, 2017
Tweet

More Decks by kaidouji85

Other Decks in Technology

Transcript

  1. qPXͰ+BWB4DSJQUʹ ܕ෇͚͠Α͏ גࣜձࣾΦʔϓϯετϦʔϜ ஛಺ɹ༎հ

  2. ࣗݾ঺հ ஛಺༎հ גࣜձࣾΦʔϓϯετϦʔϜॴଐ ϓϩάϥϚʔͰ͢ झຯͰUISFFKT΍ͬͯ·͢

  3. ΞδΣϯμ ಋೖ qPXجຊߨ࠲ qPXΛ࢖͏ʹ͸ ·ͱΊ

  4. ΞδΣϯμ ಋೖ qPXجຊߨ࠲ qPXΛ࢖͏ʹ͸ ·ͱΊ

  5. +4Λॻ͘ͱ͖ͷ೰Έ ΦϒδΣΫτΛೖग़ྗʹ࣋ͭؔ਺Λ࡞ͬͨ࣌ɺ ޙ͔Βݟͯ෼͔Βͳ͘ͳΔ σʔλͷϨΠΞ΢τ͕มΘͬͨ৔߹ɺมߋΛ
 ൓ө͢Δͷ͕ਏ͍

  6. ͦΕ͸+BWB4DSJQU͕ ಈతܕ෇͚͔ͩΒ

  7. ಈతɾ੩తܕ෇͚ͱ͸ ಈతܕ෇ ม਺ɺҾ਺ͷσʔλܕΛࢦఆ͠ͳ͍΍Γํ +BWB4DSJQU͸ಈతܕ෇͚ ੩తܕ෇ ม਺ɺҾ਺ʹ༧ΊσʔλܕΛࢦఆ͢Δ΍Γํ ࢦఆͨ͠σʔλͷܕͱҧ͏΋ͷΛೖΕͨ
 ΤϥʔʹͳΔ

  8. ੩తɾಈతܕ෇͚ൺֱ ੩తܕ෇͚ ಈతܕ෇͚ ϝϦοτ ‣ ϦϑΝΫλϦϯά͕ൺֱత
 ༰қ ‣ ͋Δఔ౓ͷ੔߹ੑ͕อূ
 ͞Ε͍ͯΔ

    ‣ ͱΓ͋͑ͣಈ͚͹͍͍ίʔυ Λॻ͘෼ʹ͸ָ σϝϦοτ ‣ ܕࢦఆ͢Δͷ͕໘౗͍͘͞ ‣ ܕνΣοΫ͕ਖ਼͘͠ͳ͍ͱ࣮ ߦͰ͖ͳ͍ ‣ ϦϑΝΫλϦϯά͕೉͍͠ ‣ ΦϒδΣΫτͷϓϩύςΟ໊ มߋͰ͢Β݁ߏେม
  9. ಈతܕ෇͚ ࡞Γ࢝Ί͸ָɺޙ͕େม ੩తܕ෇͚ ࡞Γ࢝Ί͸େมɺޙָ͕

  10. ൺֱతେ͖͍ϓϩδΣΫτͳΒ อकָ͕ͳํ͕خ͍͠Ͱ͢ΑͶ

  11. ͳΒ+BWB4DSJQUʹ΋ ੩తܕ෇͚ΛऔΓೖΕ·͠ΐ͏ʂʂ

  12. ΞδΣϯμ ಋೖ qPXجຊߨ࠲ qPXΛ࢖͏ʹ͸ ·ͱΊ

  13. qPXͱ͸ +BWB4DSJQUʹ੩తܕ෇͚Λఏڙ͢Δ΋ͷ ੩తܕ෇͚͚ͩΛఏڙ͍ͯ͠ΔͷͰɺ
 ϓϩδΣΫτͷ్த͔ΒͰ΋ಋೖ͠΍͍͢ ˢ͸ڝ߹ͷ5ZQF4DSJQUʹ༏͍ͬͯΔ఺ͩͱࢥ͏

  14. جຊతͳॻ͖ํ ߦ಄ʹʮ!qPXʯίϝϯτΛ͔͘͜ͱͰɺ
 qPXΛ࢖͏͜ͱΛએݴ͢Δ ٯʹʮ!qPXʯΛॻ͔ͳ͍ͱɺ
 ී௨ͷ+4ͱͯ͠ѻΘΕΔ ʮม਺໊ܕ໊ʯͱ͍͏ܗࣜͰܕࢦఆΛ͢Δ // @flow let value1:

    number = 10; // OK let value2: number = ’10'; // NG
  15. ओͳϓϦϛςΟϒܕ ϓϦϛςΟϒܕ આ໌ OVNCFS ਺ࣈ TUSJOH จࣈ CPPMFBO ϒʔϦΞϯ ܕ໊<>·ͨ͸"SSBZܕ໊

    ഑ྻ 0CKFDU ΦϒδΣΫτ 'VODUJPO ؔ਺
  16. ϓϦϛςΟϒܕίʔυྫ // @flow let num: number = 12; let name:

    string = 'τϜ'; let isSuccess: boolean = true; let numArray: number[] = [1, 2, 3]; let strArray: Array<string> = ['abc', 'def', 'ghi']; let obj: Object = {name: 'τϜ', age: 20}; let fn: Function = function() { return 0};
  17. ϓϦϛςΟϒܕ஫ҙ఺ 0CKFDUɺ'VODUJPO͸Ͱ͖ΔݶΓ࢖Θͳ͍ ܕͱͯ͠ͷ৘ใ͕ແ͍ʹ౳͍͔͠Β طଘίʔυʹͱΓ͋͑ͣܕΛ͚ͭΔ࣌ʹ࢖͏ ͘Β͍ ݪଇͱͯ࣍͠ͷεϥΠυͰ঺հ͢Δํ๏Λ࢖͏

  18. Ϣʔβఆٛܕ ʮUZQFܕ໊\ʜ^ʯͰطଘܕΛ૊Έ߹Θͤͨ
 Ϣʔβఆٛܕ͕࡞ΕΔ ಉ͡ܕఆٛΛϓϩδΣΫτதͰ࢖͍·ΘͤΔ // @flow type Product = {

    id: number, name: string, price: number, productType: string, tag: string[], } let item: Product = {id: 1, ...};
  19. ؔ਺ʹܕΛ͚ͭΔ // @flow function welcomeMessage(count: number): string { return `Α͏ͦ͜ɺ͋ͳͨ͸${count}ਓ໨ͷ͓٬༷Ͱ͢ɻ`;

    } ʮؔ਺໊ Ҿ਺ܕʜ ໭Γ஋ͷܕʯͱݴ͏ܗࣜͰ
 Ҿ਺ɺ໭Γ஋ʹܕΛઃఆ͢Δ͜ͱ͕Ͱ͖Δ
  20. ϥϜμࣜʹܕΛ͚ͭΔ ʮ Ҿ਺σʔλܕʜ ໭Γ஋ͷσʔλܕʯͱݴ͏ ܗࣜͰϥϜμࣜʹܕΛ͚ͭΔ͜ͱ͕Ͱ͖Δ ͔͑ͬͯ৑௕ʹͳΔ৔߹΋͋ΔͷͰɺ࢖͍ͲΖ͜Λ ߟ͑Δඞཁ͕͋Δ // @flow const

    array: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; array.filter((value: number): boolean => value % 3 === 0);
  21. ίʔϧόοΫʹܕΛ͚ͭΔ ϥϜμࣜͱಉ͡ܗࣜͰɺίʔϧόοΫؔ਺ʹ΋ ܕΛ͚ͭΔ͜ͱ͕Ͱ͖Δ ࢖༻ײΛ఻͑ͮΒ͍ίʔϧόοΫؔ਺Ͱ΋ɺ
 όονϦͱ࢓༷͕෼͔ΔΑ͏ʹͳΔ // @flow function load(fn: (value:

    string) => void): void { // ...... }
  22. 1SPNJTFΛฦؔ͢਺ 1SPNJTFΛฦؔ͢਺͸ʮ1SPNJTFσʔλܕʯ
 Ͱܕ͕ఆٛͰ͖Δ ͜ΕͰ1SPNJTFܥؔ਺ͷ࢓༷΋εϚʔτʹॻ͚Δ // @flow function fetchProduct(id: number): Promise<Product>

    { return fetch(`xxxxxx/products/${id}`) .then(resp => resp.json()); }
  23. ΫϥεΛܕͱͯ͠࢖͏ &4Ϋϥε΋Ϣʔβఆٛܕͱͯ͠࢖͏͜ͱ͕Մೳ ϝϯόؔ਺͸΋ͪΖΜɺϝϯόม਺ʹ΋σʔλܕΛ
 ઃఆ͢Δ͜ͱ͕Ͱ͖Δ

  24. ΫϥεΛܕͱͯ͠࢖͏ྫ // @flow class Player { level: number; name: string;

    constructor(name: string, level: number) { this.name = name; this.level = level; }; hello(): string { return `hello myname is ${this.name}. lebel is ${this.level}`; } } let p1: Player = new Player('name', 99);
  25. ৭ʑͱ঺հ͠·͕ͨ͠ɺ ·ͱΊΔͱ

  26. 999ܕ໊ ͱॻ͚͹ܕ͕෇͘

  27. ΞδΣϯμ ಋೖ qPXجຊߨ࠲ qPXΛ࢖͏ʹ͸ ·ͱΊ

  28. qPXͷ࢖͍ํ େ·͔ʹݴ͏ͱɺҎԼͷ̎छྨ ίϚϯυϥΠϯ͔Β࣮ߦ *%&ͱ࿈ܞͯ͠ɺΤσΟλ্ʹ
 ϦΞϧλΠϜͰܕΤϥʔΛදࣔ͢Δ

  29. ίϚϯυϥΠϯ͔Β࣮ߦ OQN͔ΒqPXCJOΛΠϯετʔϧ͢Δ͚ͩͰɺ ಋೖ͸׬ྃ νΣοΫ͍ͨ͠+4͕͋ΔϑΥϧμʹҠಈͯ͠ɺ
 ʮqPXDIFDLʯͱೖྗ͢Δ

  30. ίϚϯυϥΠϯ࣮ߦྫ $ flow check flow-basic.js:4 4: let value2: number =

    '10' // NG ^^^^ string. This type is incompatible with 4: let value2: number = '10' // NG ^^^^^^ number static-type-check.js:4 4: return number + 2; ^^^^^^ identifier `number`. Could not resolve name static-type-check.js:8 8: add('2'); // NG ^^^ string. This type is incompatible with the expected param type of 3: function add(value: number): number { ^^^^^^ number
  31. *%&ͱ࿈ܞ ηοτΞοϓํ๏͸*%&͝ͱʹҟͳΔ 8FC4UPSNͷ৔߹ɺެࣜϒϩάʹ΍Γํ͕
 ॻ͍ͯ͋Δ IUUQTCMPHKFUCSBJOTDPNXFCTUPSN VTJOHqPXJOXFCTUPSN

  32. ܕνΣοΫҎ֎ͷԸܙ ΠϯςϦηϯεਫ਼౓ͷ޲্ ܕʹΑΔݕࡧ *%&ͷϦϑΝΫΞϦϯάػೳͷ޲্

  33. +BWB &DMJQTFͷΑ͏ʹ *%&ͷػೳϦϑΝΫΞϦϯά ػೳΛϑϧ׆༻Ͱ͖Δ

  34. *%&࿈ܞྫͦͷ̍ ΤϥʔΛϦΞϧλΠϜʹදࣔ

  35. *%&࿈ܞྫͦͷ ΠϯςϦηϯεਫ਼౓ͷ޲্

  36. ΞδΣϯμ ಋೖ qPXجຊߨ࠲ qPXΛ࢖͏ʹ͸ ·ͱΊ

  37. ·ͱΊ qPXͱ͸+4ʹ੩తܕ෇͚Λఏڙ͢Δ΋ͷͰ͋Δ ੩తܕνΣοΫͰέΞϨεϛε͕ݮΔ ʮ999ܕ໊ʯͱ΍Ε͹େମ͸ܕ͕෇͘ qPXͱ*%&Λ࿈ܞͤͯ͞ޮ཰తʹ։ൃͰ͖Δ

  38. ͝੩ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠