flowでjavascriptに型付けしよう

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

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

ΞδΣϯμ ಋೖ qPXجຊߨ࠲ qPXΛ࢖͏ʹ͸ ·ͱΊ

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

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

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

੩తɾಈతܕ෇͚ൺֱ ੩తܕ෇͚ ಈతܕ෇͚ ϝϦοτ ‣ ϦϑΝΫλϦϯά͕ൺֱత  ༰қ ‣ ͋Δఔ౓ͷ੔߹ੑ͕อূ  ͞Ε͍ͯΔ
‣ ͱΓ͋͑ͣಈ͚͹͍͍ίʔυ Λॻ͘෼ʹ͸ָ σϝϦοτ ‣ ܕࢦఆ͢Δͷ͕໘౗͍͘͞ ‣ ܕνΣοΫ͕ਖ਼͘͠ͳ͍ͱ࣮ ߦͰ͖ͳ͍ ‣ ϦϑΝΫλϦϯά͕೉͍͠ ‣ ΦϒδΣΫτͷϓϩύςΟ໊ มߋͰ͢Β݁ߏେม

ಈతܕ෇͚ ࡞Γ࢝Ί͸ָɺޙ͕େม ੩తܕ෇͚ ࡞Γ࢝Ί͸େมɺޙָ͕

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

ͳΒ+BWB4DSJQUʹ΋ ੩తܕ෇͚ΛऔΓೖΕ·͠ΐ͏ʂʂ

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

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

ओͳϓϦϛςΟϒܕ ϓϦϛςΟϒܕ આ໌ OVNCFS ਺ࣈ TUSJOH จࣈ CPPMFBO ϒʔϦΞϯ ܕ໊<>·ͨ͸"SSBZܕ໊
഑ྻ 0CKFDU ΦϒδΣΫτ 'VODUJPO ؔ਺

ϓϦϛςΟϒܕίʔυྫ // @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};

ϓϦϛςΟϒܕ஫ҙ఺ 0CKFDUɺ'VODUJPO͸Ͱ͖ΔݶΓ࢖Θͳ͍ ܕͱͯ͠ͷ৘ใ͕ແ͍ʹ౳͍͔͠Β طଘίʔυʹͱΓ͋͑ͣܕΛ͚ͭΔ࣌ʹ࢖͏ ͘Β͍ ݪଇͱͯ࣍͠ͷεϥΠυͰ঺հ͢Δํ๏Λ࢖͏

Ϣʔβఆٛܕ ʮUZQFܕ໊\ʜ^ʯͰطଘܕΛ૊Έ߹Θͤͨ  Ϣʔβఆٛܕ͕࡞ΕΔ ಉ͡ܕఆٛΛϓϩδΣΫτதͰ࢖͍·ΘͤΔ // @flow type Product = {
id: number, name: string, price: number, productType: string, tag: string[], } let item: Product = {id: 1, ...};

ؔ਺ʹܕΛ͚ͭΔ // @flow function welcomeMessage(count: number): string { return `Α͏ͦ͜ɺ͋ͳͨ͸${count}ਓ໨ͷ͓٬༷Ͱ͢ɻ`;
} ʮؔ਺໊ Ҿ਺ܕʜ ໭Γ஋ͷܕʯͱݴ͏ܗࣜͰ  Ҿ਺ɺ໭Γ஋ʹܕΛઃఆ͢Δ͜ͱ͕Ͱ͖Δ

ϥϜμࣜʹܕΛ͚ͭΔ ʮ Ҿ਺σʔλܕʜ ໭Γ஋ͷσʔλܕʯͱݴ͏ ܗࣜͰϥϜμࣜʹܕΛ͚ͭΔ͜ͱ͕Ͱ͖Δ ͔͑ͬͯ৑௕ʹͳΔ৔߹΋͋ΔͷͰɺ࢖͍ͲΖ͜Λ ߟ͑Δඞཁ͕͋Δ // @flow const
array: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; array.filter((value: number): boolean => value % 3 === 0);

ίʔϧόοΫʹܕΛ͚ͭΔ ϥϜμࣜͱಉ͡ܗࣜͰɺίʔϧόοΫؔ਺ʹ΋ ܕΛ͚ͭΔ͜ͱ͕Ͱ͖Δ ࢖༻ײΛ఻͑ͮΒ͍ίʔϧόοΫؔ਺Ͱ΋ɺ  όονϦͱ࢓༷͕෼͔ΔΑ͏ʹͳΔ // @flow function load(fn: (value:
string) => void): void { // ...... }

1SPNJTFΛฦؔ͢਺ 1SPNJTFΛฦؔ͢਺͸ʮ1SPNJTFσʔλܕʯ  Ͱܕ͕ఆٛͰ͖Δ ͜ΕͰ1SPNJTFܥؔ਺ͷ࢓༷΋εϚʔτʹॻ͚Δ // @flow function fetchProduct(id: number): Promise<Product>
{ return fetch(`xxxxxx/products/${id}`) .then(resp => resp.json()); }

ΫϥεΛܕͱͯ͠࢖͏ &4Ϋϥε΋Ϣʔβఆٛܕͱͯ͠࢖͏͜ͱ͕Մೳ ϝϯόؔ਺͸΋ͪΖΜɺϝϯόม਺ʹ΋σʔλܕΛ  ઃఆ͢Δ͜ͱ͕Ͱ͖Δ

ΫϥεΛܕͱͯ͠࢖͏ྫ // @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);

৭ʑͱ঺հ͠·͕ͨ͠ɺ ·ͱΊΔͱ

999ܕ໊ ͱॻ͚͹ܕ͕෇͘

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

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

ίϚϯυϥΠϯ࣮ߦྫ $ 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

*%&ͱ࿈ܞ ηοτΞοϓํ๏͸*%&͝ͱʹҟͳΔ 8FC4UPSNͷ৔߹ɺެࣜϒϩάʹ΍Γํ͕  ॻ͍ͯ͋Δ IUUQTCMPHKFUCSBJOTDPNXFCTUPSN VTJOHqPXJOXFCTUPSN

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

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

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

*%&࿈ܞྫͦͷ ΠϯςϦηϯεਫ਼౓ͷ޲্

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

͝੩ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠

flowでjavascriptに型付けしよう

flowでjavascriptに型付けしよう

More Decks by kaidouji85

Other Decks in Technology

Featured

Transcript