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

はてなリモートインターンシップ2022 フロントエンドブートキャンプ 講義資料

Hatena
December 19, 2022

はてなリモートインターンシップ2022 フロントエンドブートキャンプ 講義資料

Hatena

December 19, 2022
Tweet

More Decks by Hatena

Other Decks in Programming

Transcript

  1. Frontend Boot Camp 2022-08-23 #hatenaintern

  2. ׆סه٭ع؞ٔ٤وסإ٭ٜ "نٞ٤عؙ٤غ" JavaScript/TypeScript/React Web React TypeScript #hatenaintern

  3. ( min) #hatenaintern

  4. 杯♏סنٞ٤عؙ٤غמ חַי React ٝؕؓؗع؅磝׳׆כע׵ה؀؆յؓوٛ آ٭ب٘٤ֿ辐炐׈׿׾ױךס孱׿؅縒ֻ יײ׾כ䑒釐כ׈׿׾湳閁׵㛡ׂםזי׀ ױ׌ն Frontend Developer Roadmap:

    Learn to become a modern frontend developer React JavaScript #hatenaintern
  5. 喋չםⳂ⛼梪㗞ס┉❆ א׿ב׿ס梪㗞מעյ׆׿׼ס䤗软מ׻זי⤓ֻ׾׆כֿך׀ױ׌ն IE Web (accessibility, a y) א׿ב׿յלס׻ֹמ㵚瓀׌׾ס־釤יַ׀ױ׌ն #hatenaintern

  6. : React 1. TypeScript JavaScript 2. Web 3. Web html

    4. (accessibility, a y) TypeScript - TypeScript Deep Dive #hatenaintern
  7. : React ˝ Web ˝ ˝ (accessibility, a y) ⪮⛮氳מעלֹס׻ֹמ㵚瓀׊יַׂס

    ־յꝧ氦ס孱׿כ⪦מ釤יַ׀ױ׌ն #hatenaintern
  8. : React React JavaScript html > ls index.html main.js <!--

    index.html --> <html> <head> <script type="module" src="main.js"></script> </head> </html> #hatenaintern
  9. : React React/TypeScript <!-- index.html --> <html> <head> <script type="module"

    src="main.tsx"></script> </head> <body> <div id="root"></div> </body> </html> // main.tsx const App = () => { const user: User | null = useUser() return ( <div> Α͏ͦ͜ɺ{user?.name ?? 'ήετ'}͞Μɻ </div> ) } const container = document.getElementById('root') const root = createRoot(container!) root.render(<App />) #hatenaintern
  10. : React TypeScript JavaScript const user = useUser() TypeScript const

    user: User | null = useUser() jsx jsx const label = () => (<div>...</div>) HTML ES ?. ?? => JSX TypeScript JavaScript Null (??) - JavaScript | MDN (?.) - JavaScript | MDN JSX React #hatenaintern
  11. عٚ٤تقٜؕ 僃二ס乃嫎ך傴ַגؤ٭غ؅㛡ׂס⹿ַ梪㗞⹿ַهٚؗاםלך׵ Ⳃׂ׻ֹמ⹿ַ鋗嫎׫㚺䬵׌׾׆כ Null (??) const hello = (name) =>

    `hello, ${name ?? "ήετ"}!` hello("hatena") // > hello, hatena! hello() // > hello, ήετ! #hatenaintern
  12. عٚ٤تقٜؕ ES (ES ) Null (??) ES var hello =

    function hello(name) { return "hello, " + (name !== null && name !== void 0 ? name : "ήετ") + "!" } hello("hatena") // > hello, hatena! hello() // > hello, ήετ! #hatenaintern
  13. ص٭ٜزؘؕ٤ 3 (Rome , Deno ) عٚ٤تقؕٚ Babel (JavaScript) SWC

    (Rust) esbuild (Golang) ف٤غٚ Webpack Rollup Parcel (SWC) Snowpack, Vite (esbuild) https://deno.land/ https://rome.tools #hatenaintern
  14. Web Chrome, IE, Safari, Firefox Web API JavaScript(ECMAScript) HTML DOM

    API CSS API poly ll JavaScript transpile 2021 | gihyo.jp Web standards ( ) - MDN Web Docs : | MDN #hatenaintern
  15. Web هٚؗاׇכסئَ٭ع敯媲ע♓┖סئؕعך澬鏀׌׾׆כֿך׀ױ׌ն MDN https://developer.mozilla.org/ja/docs/Web MDN Can I use https://caniuse.com mozilla

    Google Open Web Docs https://opencollective.com/open-web-docs/updates/ introducing-open-web-docs #hatenaintern
  16. (accessibility, a y) | MDN ؘؗهꝧ氦מֽׄ׾ؓؠجبلٛطؔכעյ⛰׼־ס杼榺מ׻׽耆ⱱמ⯆硜ֵֿ׾㕙⺬ך׵յ⺎耆ם꡾׽㛡ׂ ס☔չֿؘؗهئؕع؅✳榫ך׀׾׻ֹמ׌׾׆כ؅䙫⽏׊ױ׌նؓؠجبلٛطؔכעյ⠕☔ס骰⛮氳٬鏀 湳氳耆ⱱ׷ؘؗه׫סؓؠجت亠嫎מ꞊؂׼׍յ⺎耆ם꡾׽ؓؠجت⺎耆םؤ٤ط٤ص؅ꝧ氦׌׾׆כך׌ն W C

    - Accessibility / #hatenaintern
  17. (accessibility, a y) ( HTML) alt (Tab ) HTML -

    | MDN Semantics ( ) - MDN Web Docs : | MDN #hatenaintern
  18. قنؚ٭ُ٤ت㵚瓀 ⮵榫⯆꡾ֿ־־זיַ׾鷐ַ٬┘㱦㲊םؕ٤ذ٭ؾشع؅✳זיַ׾ٗ٭ا٭ֿ ╚מ㵚霄כם׾ն js css 1 => 僃⮣סً٭ةמ䑒釐ם׵סדׄرؗ٤ٞ٭غ׊י碛企ׂ辐炐׌׾׬׀ Cumulative Layout

    Shift (CLS) https://web.dev/i n/ja/cls/ #hatenaintern
  19. قنؚ٭ُ٤ت㵚瓀 ⮵榫⯆꡾ֿ־־זיַ׾鷐ַ٬┘㱦㲊םؕ٤ذ٭ؾشع؅✳זיַ׾ٗ٭ا٭ֿ╚מ㵚霄כם ׾ն (CDN, Edge) CDN 1 (Code Splitting) (preload,

    defer, lazy) #hatenaintern
  20. : React 1. TypeScript JavaScript 2. Transpile, Polyfill Bundle, Code

    Splitting 3. Web html 4. #hatenaintern
  21. JavaScript ( min) #hatenaintern

  22. JavaScript ( min) ES (ES ) JavaScript JavaScript JavaScript ·

    JavaScript Primer #jsprimer #hatenaintern
  23. 1/2 // ม਺ͱએݴ var a = "a" // ม਺ʢάϩʔόϧʣ let

    b = "b" // ม਺ʢϩʔΧϧʣ const c = "c" // ఆ਺ /* ஫ҙ * var Λ༻͍ͨม਺એݴ͸ɺ window ΦϒδΣΫτΛ্ॻ͖ͯ͠͠·͏ */ var console = null console.log("xxx") // Error: window.console is null const id = "1234" // string const name = null // null const age = 2022 // number const isAdmin = false // boolean // object const user = { id, username: name age, isAdmin, memo, } user.age // 2022 // ະఆٛϓϩύςΟͩͱ undefined ͕ฦΔ user.abc #hatenaintern
  24. 2/2 // ؔ਺ function getUser(id) { return db.users.find(id) } const

    getBlog = (id) => { return db.blogs.find(id) } // ഑ྻ const array1 = [1, 2] const array2 = new Array(1, 2) // ഑ྻॲཧ for (elm in array1) { console.log(elm) } array2.forEach((elm) => { console.log(elm) }) array1.map((elm) => elm * 2) // [2, 4] array2.at(0) // 1 #hatenaintern
  25. Arrow Function ˝ function׷return؅✳؂׍מ꞊丗؅榟䡗ך׀׾ ˝ 㓹儖氳מע׆ס亠嫎ך꞊丗؅榟䡗׊יֽׄףـُ׼םַ const hello = (name)

    => `Hello, ${name}` hello("world") // hello, world 1 () Tips: () const getProps = () => ({ a: "foo", b: "bar" }) this Arrow Function #hatenaintern
  26. Arrow Function ˝ 䌕丗ֿ邾丗ֵ׾㕙⺬ע()ך㍱ֹ ˝ ꞊丗⫂ס鋗鳭ֿ邾丗车מ峚׾כ׀ע{}כreturn؅榫ַ׾ const hello = (name,

    lang) => { if (lang === "ja") return `͜Μʹͪ͸ɺ${name}` if (lang === "es") return `Hola, ${name}` return `Hello, ${name}` } #hatenaintern
  27. Promiseמחַי Pending( ) (resolve) Fulfilled (reject) Rejected Fulfilled Rejected (

    ) Settled then catch const sleep = (ms) => new Promise((resolve) => { setTimeout(() => resolve(ms), ms) }) sleep(1000) .then((ms /* resolveͨ͠஋Λड͚औΕΔ */) => console.log(`sleep: ${ms}ms`)) .catch((e) => { console.error(e) }) #hatenaintern
  28. fetch؅✳זג❆ fetch HTTP API Promise Promise console / /* Ϣʔβʔ৘ใΛऔಘ͢ΔAPIͷྫɻҎԼͷΑ͏ͳJSON͕ฦͬͯ͘Δͱ͍͏૝ఆɻ

    { user: {id: 1, name: 'hatena'} } */ const promise = fetch("https://api.example.com/user/1") .then((res) => res.json()) .then((json) => json.user) .then((user) => { console.log(`${user.name}ͷid͸${user.id}`) }) .catch(console.error) console.log(promise) // Promise {<pending>} ɾɾɾ ᶃ #hatenaintern
  29. Promise Promiseס鿥⮛؅⛼䡗׊յא׿؅䣽ֹ׆כך䴧⛍氳ם┾⮛⭚杼؅车ֹ׆כֿ⭳全׾ն const promises = urls.map((url) => fetch(url)) // ෳ਺ͷAPIͳͲΛฒྻʹୟ͘

    Promise.all() Resolve( ) 1 Reject Promise.allSettled() Resolve Reject Promise Promise: {status: 'fulfilled', value: resolveͨ͠஋}, Promise: {status: 'rejected', reason: reject͞ΕͨΤϥʔ} #hatenaintern
  30. Promise const promises = [ getFromCache(), // cache͕ۭͷͱ͖͸ࣦഊ͢Δ getFromApi(), ]

    Promise.race() 1 Promise Resolve Reject Promise.any() Resolve Promise Reject #hatenaintern
  31. async/await async function await Promise try {} catch (e) {}

    async function throw const getUser = async (id) => { try { const res = await fetch(`https://api.example.com/user/${id}`) const json = await res.json() const user = json.user console.log(`${user.name}ͷid͸${user.id}`) return user } catch (e) { console.error(e) throw new Error("error reason: *********") } } ECMAScript Top-level await async function await #hatenaintern
  32. async/await async function Promise Promise then Promise await getUser(1) .then(console.log)

    // {id: 1, name: 'hatena'} .catch(console.error) ˝ 扛⺲꞊丗כ׊י㲔车׌׾׆כ׵׵ה؀؆⭳全׾ ;(async () => { const user = await getUser(1) console.log(user.name) // 'hatena' })() #hatenaintern
  33. class ES class class Rect { constructor(width, height) { this.width

    = width this.height = height } // getter΍setterΛఆٛͰ͖Δ get area() { return this.getArea() } getArea() { return this.width * this.height } } const rect = new Rect(5, 10) console.log(rect.area) // 50 function class https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritanceandtheprototypechain #hatenaintern
  34. ECMAScript Modules ٓةٖ٭ٜ 1 == 1 import/export CommonJS Node.js ECMAScript

    Node.js Babel 1 webpack JavaScript ECMAScript JavaScript ECMAScript JavaScript ( ) module.exports require https://nodejs.org/docs/latest/api/modules.html #hatenaintern
  35. default export // module.js export default function doSomething() {} ˝

    export defaultךؙؠتَ٭ع׌׾כյimport侇מע♳䙫ס⺲ ⯥؅錃㲊ך׀׾ import awesome from "./module" #hatenaintern
  36. (named export) ˝ constך㚺丗㲚銧׌׾כ׀מexport؅♀ⱶ׌׾׆כך⺲⯥♀׀ؙؠتَ٭عֿ⭳ 全׾ // namedModule.js export const logType

    = { error: 'error', log: 'log' }; export const log = (message, type) => { if (type === 'error') return console.error(message); return console.log(message); } export const hello => log('hello'); #hatenaintern
  37. ؕ٤َ٭عס亠嫎מחַי export import { log, hello } from "./namedModule" ˝

    asךٛؾ٭ّ⭳全׾ import { logType as LOGTYPE } from "./namedModule" * as export import * as Logger from "./namedModule" Logger.hello() // 'hello' (webpack TreeShaking ) * as #hatenaintern
  38. Tips #hatenaintern

  39. for...of (iterable) NodeList Map Set const iterable = [10, 20,

    30] for (const value of iterable) { console.log(value) } #hatenaintern
  40. Nullish coalescing operator ?? JavaScript || const rect = (width:

    number, height?: number) => ({ width: width, height: height || 100, // ߴ͞Λলུͨ͠ͱ͖͸σϑΥϧτ஋Λ༩͑Δ }) rect(50, 0) // {width: 50, height: 100} 0 ''( ) Falsy height 0 ?? null undefined ?? ?? !!0 !!'' boolean false JavaScript false null undefined NaN Falsy boolean true Truthy https://developer.mozilla.org/en-US/docs/Glossary/Falsy JavaScript || Truthy Falsy && Falsy Truthy #hatenaintern
  41. Optional chaining ?. ˝ ؛هةؘؠعֿnull׷undefinedם⺎耆䓪ֵֿ׾כ׀յאס؛هةؘؠعסوٞقطؔ؅⽛שג״מifמ׻׾⮆㹎׷&&מ׻׾湾 礘鍐❫؅傴ׂ䑒釐ֵֿזגն const val = nullOrObject

    && nullOrObject.method() const result = val && val.methodOfReturnValue() ˝ .?؅榫ַ׾כյ⽛צ⭳׊⩕ֿnullױגעundefinedסכ׀עא׿♓꡸סوٞقطؔؓؠجت؅׊םַնױגյאס㕙⺬ע undefinedכ׊י鍐❫׈׿׾ն const result = nullOrObject?.method()?.methodOfReturnValue() nullOrObject׵nullOrObject.method()ס鲭׽⡁ֿ⪦מnullך׵undefinedך׵םַכ׀מյ nullOrObject.method().methodOfReturnValue()ס磵冽؅䐂׼׿׾ն && Falsy null undefined && || Falsy Optional chaining #hatenaintern
  42. Spread Syntax ˝ ...؅✳ֹכ鿥⮛׷؛هةؘؠع؅㷣ꝧ⭳全׾ const sum = (a, b, c,

    d) => a + b + c + d const nums = [1, 2] const copied = [...nums] // த਎Λෳ੡ͨ͠഑ྻΛ࡞ΕΔ const moreNums = [...copied, 5] // [1, 2, 5] sum(...nums, 10) // 18 const obj = { a: 10, b: "foo" } const obj2 = { b: "bar", c: true } // 2ͭҎ্ͷobjectΛmerge͢ΔɻΩʔ͕ॏෳ͍ͯ͠Δ৔߹͸ޙʹॻ͍ͨํͰ্ॻ͖͞ΕΔ const merged = { ...obj, ...obj2 } // {a: 10, b: 'bar', c: true} const getUserConfig = (received) => ({ force: false, allowJs: false, ...received, // σϑΥϧτ஋Λ౉͞Εͨ஋͕͋Ε͹্ॻ͖͢Δ }) #hatenaintern
  43. Rest Parameters ... Spread Syntax 1 // const sum =

    (num1, num2, ...nums) => num1 + num2 + nums.reduce((a, b) => a + b, 0) const numbers = [1, 2, 3] sum(3, ...numbers, 6) // 15 #hatenaintern
  44. TypeScript ( min) #hatenaintern

  45. TypeScript is JavaScript JavaScript JavaScript node React JavaScript JavaScript API

    Uncaught TypeError: Cannot read property 'foo' of undefined JavaScript Alternative JavaScript TypeScript #hatenaintern
  46. tsc: TypeScript compiler TypeScript TypeScript https://github.com/microsoft/TypeScript TypeScript JavaScript ( )

    --noEmit TypeScript JavaScript JavaScript ( ) JavaScript Babel, esbuild babel @babel/preset-typescript babel enum enum typeof JavaScript ( ) #hatenaintern
  47. 㑔㲚銧鼧⮆؅鐆״׾׻ֹמם؀ֹ TypeScript Playground #hatenaintern

  48. 㚺丗㲚銧侇ס㑔ؓؿط٭ب٘٤ // JavaScriptͷ৔߹ const a = 'hello'; // TypeScriptͷ৔߹͸ม਺໊ͱ=ͷؒʹ:Λஔ͍ͯܕΞϊςʔγϣϯΛॻ͘ const

    a: ʲ͜͜ʹܕΞϊςʔγϣϯʳ = 'hello'; // ྫ͑͹ const a: string = 'hello'; ׆׿ׂ׼ַדזג׼䫟鑜׊יׂ׿׾סךյ㲔꤀מע傴־םַ׆כ ׵㛡ַ #hatenaintern
  49. : string, number, boolean, null, undefined 'hello', 12, true, false

    ( ) const a: number = 10 const b: boolean = false const c: string = 11 // Type Error const d: "hello" = "hello" const n: null = null ˝ 鿥⮛ const arr: string[] = ["hello", "world"] const arr2: Array<number> = [1, 2, 3, 5, 8] const arr3: [string, number] = ["year", 2021] // λϓϧ(Tuple)ܕͱ΋ #hatenaintern
  50. JavaScript ? const person: { name: string age: number address?:

    string } = { name: "john", age: 21, } string | undefined JavaScript (Object.keys() ) TypeScript . exactOptionalPropertyTypes tsc #hatenaintern
  51. type type؅✳ֹכ㑔辐杯מؙؕٛؓت؅♀ׄ׼׿׾ type Person = { name: string age: number

    } type Team = Person[] #hatenaintern
  52. Union Type ( ) 邾丗ס㑔סַ׍׿־؅嵹ג׌ type Primitive = string |

    number | boolean | undefined | null type Color = "red" | "green" | "blue" | "yellow" | "purple" #hatenaintern
  53. (Type Guard) JavaScript JavaScript TypeScript typeof in JavaScript #hatenaintern

  54. typeof ( " " JavaScript ) 'string', 'number', 'boolean', 'object',

    'function', 'undefined' console.log(typeof "hello world") // 'string' const n = 10 console.log(typeof n) // 'number' const p: Person = { name: "jonh", age: 20 } console.log(typeof p) // 'object' console.log(typeof undefined) // 'undefined' console.log(typeof null) // 'object' console.log(typeof ["a"]) // 'object' #hatenaintern
  55. typeof ˝ 攐מnumber׷stringךֵ׾׆כמ⯆꡾׊גַכ׀מ값⭳ // paddingʹ͸ۭനͷ਺·ͨ͸λϒจࣈͳͲ͕΍ͬͯ͘Δ͜ͱΛ૝ఆͨؔ͠਺ const padLeft = (val: string,

    padding: string | number) => { if (typeof padding === "number") { return " ".repeat(padding) + val } // padding͕numberͰͳ͍ͷͰɺstringͰ͋Δͱਪ࿦͞ΕΔ return padding + val } #hatenaintern
  56. in API type Fish = { name: string swim: ()

    => void } type Bird = { name: string fly: () => void } const move = (x: Fish | Bird) => { if ("swim" in x) { // swim͕༗Δͷ͸FishܕͷΈ return x.swim() } // ͳͷͰɺ͜͜ʹ౸ୡ͢Δͱ͸BirdܕͰ͋Δͱ෼͔Δ return x.fly() } #hatenaintern
  57. Object.hasOwn() 2022/08/18 TypeScript ES Object.hasOwn() const move = (x: Fish

    | Bird) => { if (Object.hasOwn(x, "swim")) { // swim͕༗Δͷ͸FishܕͷΈ͚ͩͲɺ Fish͔ Bird͔ͷͲͪΒ͔Λ൑ఆͰ͖ͳ͍ return x.swim() // error: Property 'swim' does not exist on type 'Fish | Bird'. } ... } Support for Object.hasOwn (lib.d.ts and narrowing) · Issue # · microsoft/TypeScript #hatenaintern
  58. Tagged Union Types ˝ type׷kindס׻ֹםوٞقطؔמٛطٜٚ㑔؅錃㲊׊יַֽיյאס╈骰؅===׷switch؅✳זי奂鬳׌׾׆כךյ㑔ס礓׽鱮ײ؅车ֹ ˝ ⠕☔氳ם䚉釶דכյinךס礓׽鱮ײ׻׽׵׆ה׼סقذ٭٤ס亠ֿ׻ׂ⮵榫׌׾妳ֿ׊ױ׌ ˝ ٛطٜٚ㑔ס奂鬳ס亠ֿ傴ׂסֿ癨ⶡךյ־ח׆ה׼ס׮ֹֿ׻׽㱦⪒ך׌ն type

    Fish = { kind: "fish" name: string swim: () => void } type Bird = { kind: "bird" name: string fly: () => void } const move = (x: Fish | Bird) => { if (x.kind === "fish") { return x.swim() } return x.fly() } #hatenaintern
  59. as (Type Assertion) TypeScript ( ) #hatenaintern

  60. as JavaScript // ܕFooΛ௥Ճ͢Δ type Foo = { bar: number

    piyo: string } const something = (x: Foo) => { // ܕͱͯ͠͸߹͍ͬͯΔ͕ɺϥϯλΠϜ্Ͱͷ࣮ߦ࣌ʹ͸piyo͕undefinedʹͳΔͷͰΤϥʔ͕ى͖Δ return x.piyo.split(",") } var foo = {} as Foo // Fooͱͯ͠ѻ͑ΔΑ͏ʹ͓ͯ͘͠ // ࣮ࡍʹ͸barͳͲ͸ແ͍͕Fooͱͯ͠Ξαʔγϣϯ͍ͯ͠ΔͷͰ౉ͤΔ something(foo) #hatenaintern
  61. const as as const ( readonly ) const a =

    [1, 2, 3] // aͷܕ͸number[]ͱͳΔ const b = [1, 2, 3] as const // bͷܕ͸readonly [1, 2, 3]ͱͳΔ type Pallet = { colors: readonly Color[] } const setPallet = (p: Pallet) => { /* do something */ } const pallet = { colors: ["red"], } // ͜͜ʹ as const Λ෇͚ͳ͍ͱ{ color: string[] }ͱਪ࿦͞ΕͯΤϥʔʹͳΔ setPallet(pallet) #hatenaintern
  62. any unknown TypeScript #hatenaintern

  63. any ˝ ⛰׼־ס⡁ֿ⪌זיַ׾׆כ؅炐׌նundefined־׼؛هةؘؠ ع־׼꞊丗ױך⛰ֿ⪌זיַי׵荁ַնtscֿ㑔ס吾錞؅׊םַ סךյas⺱喋מ鹴ׄ׼׿׾㕙⺬ע鹴ׄ׾ն let anything: any = {}

    // anyʹ͸ԿͰ΋୅ೖͰ͖Δ anything = () => {} anything = null anything.split(",") // anyͷ৔߹͸ϝιου΋ͳΜͰ΋ࢀরͰ͖Δ #hatenaintern
  64. unknown any any unknown unknown {} | null | undefined

    const getObjectValues = (obj: {}) => Object.values(obj) // ݺͼग़͠ଆ͸unknownͳͷͰ޷͖ͳ஋Λ౉ͤΔ const stringifyForLog = (val: unknown) => { if (val === null || val === undefined) return "(anonymous)" return JSON.stringify(getObjectValues(val)) } #hatenaintern
  65. typeכinterface ˝ typeעؙؕٛؓت ˝ interfaceע؛هةؘؠعמ㑔؅♀ׄ׾⮯ס亠嫎ն ˝ 仴㰆ס׵סמ䏲־׼وٞقطؔ؅鴑ⱶך׀׾סעinterface ˝ ٚؕهֿٚٛ䬠❠׊גinterface؅⮵榫縖ֿ舅榺מ䦡䍖ך׀׾ ˝

    typeע⮯ס⺲⯥؅♀ׄ׾䑒釐ֵֿ׾ ˝ typeכinterfaceס✳ַ⮆ׄעؤ٭غ釨硜םלך荇չם孱孬׷╚䍖ֵֿ׾ סךյ齁מ⪌׿ף齁מ䏼זיׂד׈ַ #hatenaintern
  66. typeכinterface Type Type type Blog = { title: string content:

    string } // NG: Duplicate identifier 'Blog'. type Blog = { tags: string[] } // OK type NewBlog = Blog & { tags: string[] } Interface Interface ES Array at() TypeScript . Array // lib.es5.d.ts interface Array<T> { length: number toString(): string ... } // lib.es2022.array.d.ts interface Array<T> { at(index: number): T | undefined } #hatenaintern
  67. ꞊丗 仴מئ٤وٜךע⛰䈱׵⭳י׀יַ׾ׄלյ䌕丗׷鲭׽⡁ס㑔ס傴׀亠סقذ٭٤גה磆☭׊יֽ׀ױ׌ն const f = (x: string): number => {

    return x.length } // ಛʹreturnΛ͠ͳ͍৔߹͸ฦΓ஋ʹvoidΛࢦఆ͢Δ const a: () => void = () => { console.log("a") } // ΦϓγϣφϧͳҾ਺͸keyʹ?Λ෇͚Δ // ਪ࿦͞ΕΔ΋ͷͰྑ͍ͳΒฦΓ஋ͷܕ͸লུՄ const b = (n?: number) => `${n}` // Rest ParametersΛड͚औΔ৔߹͸͜͏͍͏ײ͡ const c = (...texts: string[]) => { return texts.join("|") } #hatenaintern
  68. (Generics) TypeScript querySelector - Hatena Developer Blog const getJSON =

    <T>(url: string): Promise<T> => { // res.json͸anyͱͳΒͣʹܕҾ਺Ͱ౉͞Εͨ΋ͷͱղऍ͞ΕΔ return fetch(url).then<T>((res) => res.json()) } // ͜͜Ͱusers͸User[]ʹͳΔ const users = await getJSON<User[]>("/api/users") // ͜͜Ͱblogs͸Blog[]ʹͳΔ const blogs = await getJSON<Blog[]>("/api/blogs") #hatenaintern
  69. : extends / const echo = <T extends string>(text: T):

    T => { return text } const a = echo("foo") // a ͷܕ͸ 'foo' const str: string = "foo" const b = echo(str) // b ͷܕ͸ 'string' #hatenaintern
  70. never never void never never ( ) const infiniteLoop =

    (): never => { while (true) {} } strictNullChecking JavaScript undefined #hatenaintern
  71. never؅榫ַג禿糵䓪زؘشؠ ˝ never؅榫ַ׾׆כך㑔؝٭غםלךס禿糵䓪؅زؘشؠך׀׾ type Color = "red" | "yellow" |

    "purple" const magical = (color: Color) => { switch (color) { case "red": return "tomato" case "yellow": return "banana" default: // શͯͷcase͕໢ཏ͞Ε͍ͯΕ͹͜͜ʹ౸ୡ͢Δ͜ͱ͸ͳ͍ // ͜ͷ৔߹͸'purple'͕୅ೖ͞ΕΔՄೳੑ͕͋ΔͷͰɺ੩తղੳ࣌ʹΤϥʔʹͳͬͯݕग़Ͱ͖Δ const val: never = color throw new Error(`"${color}" is not implemented`) } } #hatenaintern
  72. ׉זכדׄ浊״׾ؤ٭ػ٭ ˝ ׆׆ױך؅杼鉮׊גכ׀מ鐆׳כ➘⮵םؤ٭ػ٭ך׌ ˝ ה׺זכ׊גطؠؼشؠכ⺬؂׎י傴ַיֽ׀ױ׌ #hatenaintern

  73. Readonly / ReturnType ˝ Readonlyע؛هةؘؠع׷鿥⮛ס釐碛؅鐆ײ鱮ײ㵠榫מך׀׾ ˝ ⫋䅯氳מע鸵榫׈׿םַ׆כמ嫰䙫 type PersonRo =

    Readonly<Person> ˝ ReturnTypeע꞊丗ס鲭׽⡁㑔כ׊י䐂׾ type Func = () => string type ReturnVal = ReturnType<Func> // ReturnVal͸stringͱղऍ͞ΕΔ #hatenaintern
  74. typeof TypeScript JavaScript const hello = () => "hello" type

    Func = typeof hello type P = ReturnType<Func> // P͸stringͱղऍ͞ΕΔ #hatenaintern
  75. keyof key union type const config = { checkJs: false,

    force: true, } // typeofͰconfigͷܕΛಘͯɺkeyofͰͦͷΦϒδΣΫτͷܕͷΩʔΛྻڍ͢Δ type ConfigKey = keyof typeof config // "checkJs" | "force" const getConfigVal = (key: ConfigKey) => config[key] getConfigVal("ignore") // Τϥʔͱͯ͠ݕग़Ͱ͖Δ #hatenaintern
  76. Indexed Access Types JavaScript [] typeof keyof JavaScript type Person

    = { name: string age: number } type Age = Person["age"] // number const signalColors = ["red", "blue", "yellow"] as const // as const͠ͳ͍ͱstring[]ʹͳΔ // Arrayʹ[number]ͰΞΫηε͢Δͱ഑ྻͷ஋Λྻڍͨ͠ܕΛಘΒΕΔ type Signal = typeof signalColors[number] // 'red' | 'blue' | 'yellow' #hatenaintern
  77. (Intersection Types) 邾丗ס㑔؅磝ײ⺬؂׎י㑔؅榟䡗׌׾ն❆ֻףٗ٭ا٭ס嘤꡾מ 䑴׋יٝتَ٤تס㑔؅㚺ֻ׾㕙⺬ע׆ַֹֹ䚉׋ն type Blog = { title: string;

    domain: string } type Editor = { editable: true; authority: ["edit"] } type Owner = { editable: true; authority: ["edit", "publish"] } type ResponseForEditor = Blog & Editor type ResponseForOwner = Blog & Owner #hatenaintern
  78. Conditional Types JavaScript condition ? trueExpression : falseExpression // JavaScriptͷࡾ߲ԋࢉࢠ

    // SomeType͕OtherTypeΛຬͨͤ͹TrueTypeΛಘΔ SomeType extends OtherType ? TrueType : FalseType; Overloads declare function getID<T extends boolean>( fancy: T ): T extends true ? string : number const stringReturnValue = getID(true) const numberReturnValue = getID(false) const stringOrNumber = getID(Math.random() < 0.5) #hatenaintern
  79. Overloads Overloads function request(url: string): Promise<Response> function request(url: string, onlyIsOk:

    true): Promise<boolean> function request(url: string, onlyIsOk = false) { const promise = fetch(url) if (onlyIsOk) return promise.then((res) => res.ok) return promise } #hatenaintern
  80. Overloads ˝ 㓹儖ע湾ׂ傴ׂס؅✳זיֽׄף荁ַך׌ type f = (x: number) => number

    ˝ ⺱喋ס׆כ؅׆ס׻ֹמ׵傴ׄ׾ type f = { (x: number): number } Overloads type func = { (x: number): number (x: string): string } #hatenaintern
  81. React ( min) #hatenaintern

  82. React React View React https://ja.reactjs.org/ #hatenaintern

  83. ْؕ٭ة׊יײ׾ TODO #hatenaintern

  84. JavaScript #hatenaintern

  85. JavaScript Ⳃ氳榟䡗סゖ갭憠 UI #hatenaintern

  86. React #hatenaintern

  87. React UI UI GUI GUI #hatenaintern

  88. (Virtual) DOM React DOM DOM DOM React DOM DOM UI

    key https://ja.reactjs.org/docs/reconciliation.html Document Object Model HTML XML https://zenn.dev/mizchi/books/ c c f cc c b #hatenaintern
  89. React #hatenaintern

  90. JSX JSX JavaScript <h1 className="hello">My name is Clementine!</h1> React DOM

    HTML class className class JavaScript #hatenaintern
  91. ؠٚتؤ٤َ٭ؾ٤عכ꞊丗ؤ٤َ٭ؾ٤ع React 2 <HelloMessage name="hatena" /> ؠٚتؤ٤َ٭ؾ٤ع class HelloMessage extends

    React.Component { render() { return <div>Hello {this.props.name}</div> } } ꞊丗ؤ٤َ٭ؾ٤ع const HelloMessage = ({ name }) => { return <div>Hello {name}</div> } #hatenaintern
  92. ؠٚتؤ٤َ٭ؾ٤عכ꞊丗ؤ٤َ٭ؾ٤ع ؠٚتؤ٤َ٭ؾ٤عע㵧全氳ם䉬塛ֿ◀㲊׈׿יַ׾ג״յ꞊丗ؤ٤َ٭ؾ٤ع؅✳榫׌׾׆כ؅䍚ׂ䫟㝢׊ױ׌ն ؠٚتؤ٤َ٭ؾ٤ع React Error Boundary (Function Component) React Component

    React Component React Component null Presenter/View React Component Unit Test #hatenaintern
  93. Function Component TypeScript TypeScript JSX .tsx () => JSX.Element React.FC

    type Props = { name: string } const Welcome: React.FC<Props> = ({ name }) => { return <h1>Welcome {name}</h1> } React Component undefined #hatenaintern
  94. Props State React Component 2 Props State #hatenaintern

  95. Props / 1 type Props = { name: string }

    const Welcome: React.FC<Props> = ({ name }) => { return <h1>Welcome {name}</h1> } ( ) JSX <Welcome name="John" /> // <h1>Welcome John</h1> #hatenaintern
  96. React Fragmentמחַי <> </> React Fragment React Component 1 Element

    <div> 2 React Component const Component = () => { return ( <> <span>hello</span> <br /> <span>͜Μʹͪ͸</span> </> ) } key <React.Fragment> </React.Fragment> #hatenaintern
  97. Function Component Hooks Hooks React . 2019 SFC ( Stateless

    Functional Component ) #hatenaintern
  98. (State) useState use React (Hooks) const Counter = () =>

    { const [count, setCount] = useState(0) const increaseCount = () => setCount((prevCount) => prevCount + 1) return ( <div> Χ΢ϯτ: {count} <button onClick={increaseCount}>Χ΢ϯτ</button> </div> ) } #hatenaintern
  99. Hooks Rules of Hooks React use if early return ׆׿׼עeslint-plugin-react-hooksך吾⭳׊יׂ׿׾׻ֹמ⭳全׾

    #hatenaintern
  100. Hooks #hatenaintern

  101. useState useState() 1 2 setter ( ) setter Component DOM

    const [color, setColor] = useState<Color>("red") #hatenaintern
  102. useState setter ˝ 二׊ַ⡁؅峚׌ const [color, setColor] = useState<Color>("red") const

    change2Blue = () => setColor("blue") ˝ 泡⯥ס⡁؅⮵榫׊י二׊ַ⡁؅婊㲊׌׾ const [count, setCount] = useState(0) const increaseCount = () => setCount((prevCount) => prevCount + 1) #hatenaintern
  103. useEffect React Component Hooks DOM DOM props state #hatenaintern

  104. Component alert const Counter = () => { const [count,

    setCount] = useState(0) const increaseCount = () => setCount((prevCount) => prevCount + 1) alert(count) return <div>{/* ུ */}</div> } alert OK #hatenaintern
  105. useEffectס╈ךalert؅⽛ש const Counter = () => { const [count, setCount]

    = useState(0) const increaseCount = () => setCount((prevCount) => prevCount + 1) useEffect(() => { alert(count) }) return <div>{/* ུ */}</div> } Component Component alert alert alert UI UI Component #hatenaintern
  106. useEffectכ❣㰆鿥⮛ 2 ❣㰆؅辐׌鿥⮛؅峚׌ Component useEffect(೚ҙͷॲཧؔ਺, []) state useEffect(೚ҙͷॲཧؔ਺, [state]) state

    Component 2 alert const [countA, setCountA] = useState(0) const [countB, setCountB] = useState(0) useEffect(() => { alert(`conutAͷ஋͕${countA}ʹߋ৽͞Ε·ͨ͠`) }) useEffect(() => { alert(`conutAͷ஋͕${countB}ʹߋ৽͞Ε·ͨ͠`) }) countA countB #hatenaintern
  107. useEffectכ❣㰆鿥⮛ ˝ ❣㰆鿥⮛؅錃㲊׌׾׆כךյא׿ב׿ס❣㰆鿥⮛⫂סַ׍׿־ס⡁ֿ㚺催׈׿גכ׀סײⰜ⛼榫ֿ⽛צ⭳׈׿׾׻ֹמ⭳全׾ const [countA, setCountA] = useState(0) const [countB,

    setCountB] = useState(0) useEffect(() => { alert(`conutAͷ஋͕${countA}ʹߋ৽͞Ε·ͨ͠`) }, [countA]) useEffect(() => { alert(`conutAͷ஋͕${countB}ʹߋ৽͞Ε·ͨ͠`) }, [countB]) [] Component Component DOM ( ) (mount) DOM (unmount) Hooks #hatenaintern
  108. useEffectכؠٛ٭٤ػشو ˝ useEffectע꞊丗؅鲭׌׆כךאס꞊丗ֿ域סⰜ⛼榫ֿ⽛צ⭳׈׿׾⯥מ㲔车׈׿׾ ˝ ׆׿؅⮵榫׌׾כⰜ⛼榫סؠٛ٭٤ػشوֿ⭳全׾ roomIdֿ㚺催׈׿׾כյزٔشعס⹿ַ頇鐆؅⹦׽寕׊յ二׊ַ頇鐆؅ꝧ㡎׌׾❆ useEffect(() => { const

    handler = () => { /* ৽͍͠ϝοηʔδΛड͚औͬͨͱ͖ͷॲཧ */ } chat.subscribe(roomId, handler) return () => { chat.unsubscribe(roomId) } }, [roomId]) #hatenaintern
  109. (Custom Hook) use Hook Hooks Component 1 const useGetStatus =

    ({ userId }) => { const [status, setStatus] = useState(null) useEffect(() => { const handler = (user) => { setStatus(user.status) } Api.subscribe(userId, handler) return () => Api.unsubscribe(userId, handler) }) return status } #hatenaintern
  110. Tips Component useState useMemo useEffect useCallback ( ) useEffect useCallback

    - uhyo/blog #hatenaintern
  111. ֽ檄׿׈ױך׊ג TypeScript React TypeScript React JavaScript #hatenaintern

  112. ♀ꎰ 儖稴מ⪌׽⮉׼ם־זג馐ײ鱮؆ד遨餉׷鉮鐄מחַי傴 ַיַױ׌ն艄⽏ֵֿ׿ף鐆؆ךׂד׈ַ氳םؤ٭ػ٭ך ׌ն 泘域 Arrow Function useState state Hooks

    useMemo useCallback React Component DOM JavaScript JavaScript JavaScript ( ) #hatenaintern
  113. Arrow Function function (new ) arguments this #hatenaintern

  114. Arrow Function this Arrow Function function this #hatenaintern

  115. thisסتؤ٭وס鷿ַמחַי ˝ function؅榫ַג꞊丗ס㕙⺬ const person = { name: "chris", say:

    function () { setTimeout(function () { console.log(`I'm ${this.name}`) }, 100) }, } person.say() // I'm this window.setTimeout(window ) window https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/ setTimeout#thethisproblem #hatenaintern
  116. thisסتؤ٭وס鷿ַמחַי Arrow Function const person = { name: "chris", say:

    function () { setTimeout(() => { console.log(`I'm ${this.name}`) }, 100) }, } person.say() // I'm chris #hatenaintern
  117. useState state 二׊ַ⡁؅峚׌כ׀ס蛽כ׊狌 const [count, setCount] = useState(0) const increaseCount

    = () => setCount(count + 1) כ׊י׊ױֹכյ const increaseDouble = () => { increment() increment() } ס׻ֹם׵ס؅⛼זגכ׀מյincreaseDouble؅⽛؆ך׵1׊־㘃ֻםַכַֹ杯霄מ鸿鷔׌׾ך׊׺ֹն #hatenaintern
  118. ꞊丗⫂ס㚺丗تؤ٭وכuseState ❆ֻףյcountֿ5ךֵ׾כ׌׾כ const Component = () => { const [count,

    setCount] = useState(0) // ͜͜Ͱม਺count͸είʔϓ಺Ͱݻఆ͞ΕΔ(5) const increaseCount = () => setCount(count + 1) // ↑Ͱݻఆ͞Εͨcount + 1(=6)ΛsetCountʹ౉͢ const increaseDouble = () => { increment() // ↑Ͱ࡞ͬͨؔ਺ΛݺͿͱɺ6͕setCountʹ౉͞ΕΔ increment() // ͜ͷؔ਺ΛݺͿͱ͖΋ɺ6͕setCountʹ౉͞ΕΔͷͰɺ஋͸6ͷ·· } } #hatenaintern
  119. ؤ٭ٜفشؠ꞊丗؅峚׌亠嫎ך傴׀泡׌ ❆ֻףյcountֿ5ךֵ׾כ׌׾כ const Component = () => { const [count,

    setCount] = useState(0) // ͜͜Ͱม਺count͸είʔϓ಺Ͱݻఆ͞ΕΔ(5) const increaseCount = () => setCount((prevCount) => prevCount + 1) // prevCount͸ݺͼग़࣌͠ͷ௚લͷ஋ const increaseDouble = () => { increment() // ͜͜ͰݺͿͱɺprevCountʹ͸5͕ೖ͍ͬͯΔͷͰɺprevCount+1=6͕setCount͞ΕΔ increment() // ͜͜ͰݺͿͱɺprevCountʹ͸6͕ೖ͍ͬͯΔͷͰɺprevCount+1=7͕setCount͞ΕΔ } } state #hatenaintern
  120. Hooks === Object.is const a = "foo" const b =

    "foo" console.log(a === b) // true const objA = { a: "foo", b: 10 } const objB = { a: "foo", b: 10 } console.log(objA === objB) // true console.log(Object.is(objA, objB)) // false #hatenaintern
  121. ❣㰆鿥⮛מ؛هةؘؠع؅⪌׿׾آ٭تמחַי const config = { theme: "sports" } useEffect(() =>

    { loadConfig(config).then(() => {}) }, [config]) config [config.theme] #hatenaintern
  122. ب٤وٜם㍑鹴瓀 Component const config = { theme: "sports" } function

    Component() { useEffect(() => { loadConfig(config).then(() => {}) }, [config]) } Props #hatenaintern
  123. useMemo useMemo React Hooks 1 Component function WordCount({ children })

    { // text͸stringͳͷͰɺͦͷ··ґଘ഑ྻʹग़དྷΔ const words = useMemo(() => children.split(" "), [text]) useEffect(() => { alert(`୯ޠ਺͸${words.length}Ͱ͢`) }, [words]) } Component children <WordCount>Lorem ipsum dolor sit amet</WordCount> #hatenaintern
  124. useCallbackך꞊丗؅ْٓ⴫׌׾ ˝ ⡁⺱喋מ꞊丗؅ْٓ⴫׊גַ㕙⺬עuseCallback؅⮵榫׌׾ ˝ ْٓ⴫׊םַכ夵ٝ٤رٛ٤ء侇מ꞊丗؛هةؘؠعֿ榟䡗 ׈׿י׊ױֹ const handler = useCallback((val)

    => alert(val), []) useEffect(() => { Api.notification.subscribe(handler) }, [handler]) #hatenaintern
  125. useMemo׷useCallback؅榫ַגقنؚ٭ُ٤ ت䷉ャ ˝ useMemo׷useCallbackע⡁׷꞊丗סْٓ⴫מ׻זיuseEffectםלס┘釐ם⽛צ⭳׊؅䤰⯆׌׾׆כמ׻זיقنؚ٭ُ٤ت ס䷉ャ؅僿䏨ך׀׾ ˝ 攐מuseMemoךע❣㰆מ✳؂םַ㕙⺬ך׵յ⭚杼סꄆַ銶畀磵冽؅ْٓ⴫׌׾׆כךٝ٤رٛ٤ء侇סهٞشؠ؅䤰ֻ׾׆כ ׵⭳全׾ function Component

    ({a, b}) => { const resultA = useMemo(() => superDuperHighCostCalculation(a), [a]); const resultB = useMemo(() => superDuperHighCostCalculation(b), [b]); return <> <span>{a}͔ΒʮΊͪΌͪ͘Όॏ͍ܭࢉʯΛͨ݁͠Ռ: {resultA}</span> <span>{b}͔ΒʮΊͪΌͪ͘Όॏ͍ܭࢉʯΛͨ݁͠Ռ: {resultB}</span> </> } #hatenaintern
  126. React Component DOM React ref useRef ref current const textInput

    = useRef(null) const submit = (e) => { e.preventDefault() if (textInput.current.value.length < 100) return alert("101จࣈҎ্͕ඞཁͰ͢") createPost({ body: textInput.current.value }) } return ( <form onSubmit={submit}> <input type="text" ref={textInput} /> </form> ) #hatenaintern
  127. DOM DOM React const [text, setText] = useState("") const submit

    = (e) => { e.preventDefault() if (text < 100) return alert("101จࣈҎ্͕ඞཁͰ͢") createPost({ body: text }) } return ( <form onSubmit={submit}> <input type="text" onChange={(e) => setText(e.target.value)} /> </form> ) #hatenaintern
  128. JavaScript TypeScript/JavaScript #hatenaintern

  129. TypeScript TypeScript JavaScript tsc babel JavaScript JavaScript API babel poly

    ll TS JS babel JavaScript JavaScript webpack JavaScript (bundle) ES Modules 1 JavaScript JavaScript(+sourcemap) minify TS/JS sourcemap 1 webpack Terser TreeShaking #hatenaintern
  130. webpack TypeScript JavaScript babel(babel-loader ) webpack Terser(webpack-terser-plugin ) #hatenaintern

  131. create-react-app React OK webpack, babel, eslint npm start npm test

    react-scripts create-react-app React create-react-app React #hatenaintern
  132. JavaScript ( ) JavaScript DOM HTML CSS API ECMAScript WHATWG

    HTML Living Standard WHATWG DOM Living Standard W C CSS Speci cations #hatenaintern
  133. ם׏☼喋؅湳׾ס־ API JavaScript CSS - #hatenaintern

  134. ECMAScript JavaScript ECMAScript Ecma International Technical Committee TC https://github.com/tc /ecma

    Living Standard 6 ECMAScript babel tsc poly ll Ecma International C# #hatenaintern
  135. ECMAScript Stage ECMAScript (proposal) Github proposal issue PR TC Stage

    ⾒ Issue Stage ECMAScript #hatenaintern
  136. Stage 2 ECMAScript · JavaScript Primer #jsprimer Stage pre x

    API 2 JavaScript Google Chrome Node.js V Safari JavaScriptCore Firefox SpiderMonkey Facebook Hermes #hatenaintern
  137. ECMAScript Stage ECMAScript core-js poly ll babel ECMAScript Open Open

    JavaScript ECMAScript #hatenaintern
  138. JavaScript ECMAScript JavaScript ECMAScript location.assign WHATWG HTML Living Standard document.querySelector

    WHATWG DOM Living Standard WHATWG HTML/DOM Living Standard ECMAScript HTML DOM (Node.js ) W C HTML HTML . 399 5 WHATWG 2021 1 29 WHATWG Living Standard W C / : [https://future-architect.github.io/articles/ a/ HTML | ] 2004 Apple Mozilla Opera 3 W C HTML Living Standard #hatenaintern
  139. WHATWG Google Chrome HTML DOM API Google Chrome Apple Moziila

    Chrome : Chrome Platform Status Mozilla : Mozilla Speci cation Positions W C Web Incubator Community Group https://scrapbox.io/pastak-pub/ WebAPI #hatenaintern
  140. W C CSS Speci cations CSS CSS WHATWG W C

    All CSS speci cations #hatenaintern