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

    View Slide

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

    View Slide

  3. ( min)
    #hatenaintern

    View Slide

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

    View Slide

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

    View Slide

  6. : React
    1.
    TypeScript JavaScript
    2.
    Web
    3. Web
    html
    4.
    (accessibility, a y)
    TypeScript - TypeScript Deep Dive
    #hatenaintern

    View Slide

  7. : React
    ˝ Web
    ˝
    ˝ (accessibility,
    a y)
    ⪮⛮氳מעלֹס׻ֹמ㵚瓀׊יַׂס
    ־յꝧ氦ס孱׿כ⪦מ釤יַ׀ױ׌ն
    #hatenaintern

    View Slide

  8. : React
    React JavaScript
    html
    > ls
    index.html main.js






    #hatenaintern

    View Slide

  9. : React
    React/TypeScript









    // main.tsx
    const App = () => {
    const user: User | null = useUser()
    return (

    Α͏ͦ͜ɺ{user?.name ?? 'ήετ'}͞Μɻ

    )
    }
    const container = document.getElementById('root')
    const root = createRoot(container!)
    root.render()
    #hatenaintern

    View Slide

  10. : React
    TypeScript
    JavaScript const user = useUser()
    TypeScript const user: User | null = useUser()
    jsx
    jsx const label = () => (...) HTML
    ES ?. ??
    => JSX TypeScript JavaScript
    Null (??) - JavaScript | MDN
    (?.) - JavaScript | MDN
    JSX React
    #hatenaintern

    View Slide

  11. عٚ٤تقٜؕ
    僃二ס乃嫎ך傴ַגؤ٭غ؅㛡ׂס⹿ַ梪㗞⹿ַهٚؗاםלך׵
    Ⳃׂ׻ֹמ⹿ַ鋗嫎׫㚺䬵׌׾׆כ
    Null (??)
    const hello = (name) => `hello, ${name ?? "ήετ"}!`
    hello("hatena")
    // > hello, hatena!
    hello()
    // > hello, ήετ!
    #hatenaintern

    View Slide

  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

    View Slide

  13. ص٭ٜزؘؕ٤
    3
    (Rome , Deno )
    عٚ٤تقؕٚ
    Babel (JavaScript)
    SWC (Rust)
    esbuild (Golang)
    ف٤غٚ
    Webpack
    Rollup
    Parcel (SWC)
    Snowpack, Vite (esbuild)
    https://deno.land/
    https://rome.tools
    #hatenaintern

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  17. (accessibility, a y)
    ( HTML)
    alt
    (Tab )
    HTML - | MDN
    Semantics ( ) - MDN Web Docs : | MDN
    #hatenaintern

    View Slide

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

    View Slide

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

    View Slide

  20. : React
    1.
    TypeScript JavaScript
    2.
    Transpile, Polyfill
    Bundle, Code Splitting
    3. Web
    html
    4.
    #hatenaintern

    View Slide

  21. JavaScript ( min)
    #hatenaintern

    View Slide

  22. JavaScript ( min)
    ES (ES ) JavaScript
    JavaScript
    JavaScript · JavaScript Primer #jsprimer
    #hatenaintern

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  26. Arrow Function
    ˝ 䌕丗ֿ邾丗ֵ׾㕙⺬ע()ך㍱ֹ
    ˝ ꞊丗⫂ס鋗鳭ֿ邾丗车מ峚׾כ׀ע{}כreturn؅榫ַ׾
    const hello = (name, lang) => {
    if (lang === "ja") return `͜Μʹͪ͸ɺ${name}`
    if (lang === "es") return `Hola, ${name}`
    return `Hello, ${name}`
    }
    #hatenaintern

    View Slide

  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

    View Slide

  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 {} ɾɾɾ ᶃ
    #hatenaintern

    View Slide

  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

    View Slide

  30. Promise
    const promises = [
    getFromCache(), // cache͕ۭͷͱ͖͸ࣦഊ͢Δ
    getFromApi(),
    ]
    Promise.race()
    1 Promise Resolve
    Reject
    Promise.any()
    Resolve Promise
    Reject
    #hatenaintern

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  35. default export
    // module.js
    export default function doSomething() {}
    ˝ export defaultךؙؠتَ٭ع׌׾כյimport侇מע♳䙫ס⺲
    ⯥؅錃㲊ך׀׾
    import awesome from "./module"
    #hatenaintern

    View Slide

  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

    View Slide

  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

    View Slide

  38. Tips
    #hatenaintern

    View Slide

  39. for...of
    (iterable)
    NodeList Map Set
    const iterable = [10, 20, 30]
    for (const value of iterable) {
    console.log(value)
    }
    #hatenaintern

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  44. TypeScript ( min)
    #hatenaintern

    View Slide

  45. TypeScript is
    JavaScript
    JavaScript JavaScript
    node React JavaScript
    JavaScript
    API
    Uncaught TypeError: Cannot read property 'foo' of undefined
    JavaScript Alternative JavaScript TypeScript
    #hatenaintern

    View Slide

  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

    View Slide

  47. 㑔㲚銧鼧⮆؅鐆״׾׻ֹמם؀ֹ
    TypeScript
    Playground
    #hatenaintern

    View Slide

  48. 㚺丗㲚銧侇ס㑔ؓؿط٭ب٘٤
    // JavaScriptͷ৔߹
    const a = 'hello';
    // TypeScriptͷ৔߹͸ม਺໊ͱ=ͷؒʹ:Λஔ͍ͯܕΞϊςʔγϣϯΛॻ͘
    const a: ʲ͜͜ʹܕΞϊςʔγϣϯʳ = 'hello';
    // ྫ͑͹
    const a: string = 'hello';
    ׆׿ׂ׼ַדזג׼䫟鑜׊יׂ׿׾סךյ㲔꤀מע傴־םַ׆כ
    ׵㛡ַ
    #hatenaintern

    View Slide

  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 = [1, 2, 3, 5, 8]
    const arr3: [string, number] = ["year", 2021] // λϓϧ(Tuple)ܕͱ΋
    #hatenaintern

    View Slide

  50. JavaScript
    ?
    const person: {
    name: string
    age: number
    address?: string
    } = {
    name: "john",
    age: 21,
    }
    string | undefined JavaScript (Object.keys() )
    TypeScript . exactOptionalPropertyTypes tsc
    #hatenaintern

    View Slide

  51. type
    type؅✳ֹכ㑔辐杯מؙؕٛؓت؅♀ׄ׼׿׾
    type Person = {
    name: string
    age: number
    }
    type Team = Person[]
    #hatenaintern

    View Slide

  52. Union Type ( )
    邾丗ס㑔סַ׍׿־؅嵹ג׌
    type Primitive = string | number | boolean | undefined | null
    type Color = "red" | "green" | "blue" | "yellow" | "purple"
    #hatenaintern

    View Slide

  53. (Type Guard)
    JavaScript
    JavaScript
    TypeScript
    typeof in JavaScript
    #hatenaintern

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  59. as (Type Assertion)
    TypeScript
    (
    )
    #hatenaintern

    View Slide

  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

    View Slide

  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

    View Slide

  62. any unknown
    TypeScript
    #hatenaintern

    View Slide

  63. any
    ˝ ⛰׼־ס⡁ֿ⪌זיַ׾׆כ؅炐׌նundefined־׼؛هةؘؠ
    ع־׼꞊丗ױך⛰ֿ⪌זיַי׵荁ַնtscֿ㑔ס吾錞؅׊םַ
    סךյas⺱喋מ鹴ׄ׼׿׾㕙⺬ע鹴ׄ׾ն
    let anything: any = {}
    // anyʹ͸ԿͰ΋୅ೖͰ͖Δ
    anything = () => {}
    anything = null
    anything.split(",") // anyͷ৔߹͸ϝιου΋ͳΜͰ΋ࢀরͰ͖Δ
    #hatenaintern

    View Slide

  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

    View Slide

  65. typeכinterface
    ˝ typeעؙؕٛؓت
    ˝ interfaceע؛هةؘؠعמ㑔؅♀ׄ׾⮯ס亠嫎ն
    ˝ 仴㰆ס׵סמ䏲־׼وٞقطؔ؅鴑ⱶך׀׾סעinterface
    ˝ ٚؕهֿٚٛ䬠❠׊גinterface؅⮵榫縖ֿ舅榺מ䦡䍖ך׀׾
    ˝ typeע⮯ס⺲⯥؅♀ׄ׾䑒釐ֵֿ׾
    ˝ typeכinterfaceס✳ַ⮆ׄעؤ٭غ釨硜םלך荇չם孱孬׷╚䍖ֵֿ׾
    סךյ齁מ⪌׿ף齁מ䏼זיׂד׈ַ
    #hatenaintern

    View Slide

  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 {
    length: number
    toString(): string
    ...
    }
    // lib.es2022.array.d.ts
    interface Array {
    at(index: number): T | undefined
    }
    #hatenaintern

    View Slide

  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

    View Slide

  68. (Generics)
    TypeScript querySelector - Hatena Developer Blog
    const getJSON = (url: string): Promise => {
    // res.json͸anyͱͳΒͣʹܕҾ਺Ͱ౉͞Εͨ΋ͷͱղऍ͞ΕΔ
    return fetch(url).then((res) => res.json())
    }
    // ͜͜Ͱusers͸User[]ʹͳΔ
    const users = await getJSON("/api/users")
    // ͜͜Ͱblogs͸Blog[]ʹͳΔ
    const blogs = await getJSON("/api/blogs")
    #hatenaintern

    View Slide

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

    View Slide

  70. never
    never
    void never never (
    )
    const infiniteLoop = (): never => {
    while (true) {}
    }
    strictNullChecking JavaScript undefined
    #hatenaintern

    View Slide

  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

    View Slide

  72. ׉זכדׄ浊״׾ؤ٭ػ٭
    ˝ ׆׆ױך؅杼鉮׊גכ׀מ鐆׳כ➘⮵םؤ٭ػ٭ך׌
    ˝ ה׺זכ׊גطؠؼشؠכ⺬؂׎י傴ַיֽ׀ױ׌
    #hatenaintern

    View Slide

  73. Readonly / ReturnType
    ˝ Readonlyע؛هةؘؠع׷鿥⮛ס釐碛؅鐆ײ鱮ײ㵠榫מך׀׾
    ˝ ⫋䅯氳מע鸵榫׈׿םַ׆כמ嫰䙫
    type PersonRo = Readonly
    ˝ ReturnTypeע꞊丗ס鲭׽⡁㑔כ׊י䐂׾
    type Func = () => string
    type ReturnVal = ReturnType // ReturnVal͸stringͱղऍ͞ΕΔ
    #hatenaintern

    View Slide

  74. typeof
    TypeScript
    JavaScript
    const hello = () => "hello"
    type Func = typeof hello
    type P = ReturnType // P͸stringͱղऍ͞ΕΔ
    #hatenaintern

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  78. Conditional Types
    JavaScript
    condition ? trueExpression : falseExpression // JavaScriptͷࡾ߲ԋࢉࢠ
    // SomeType͕OtherTypeΛຬͨͤ͹TrueTypeΛಘΔ
    SomeType extends OtherType ? TrueType : FalseType;
    Overloads
    declare function getID(
    fancy: T
    ): T extends true ? string : number
    const stringReturnValue = getID(true)
    const numberReturnValue = getID(false)
    const stringOrNumber = getID(Math.random() < 0.5)
    #hatenaintern

    View Slide

  79. Overloads
    Overloads
    function request(url: string): Promise
    function request(url: string, onlyIsOk: true): Promise
    function request(url: string, onlyIsOk = false) {
    const promise = fetch(url)
    if (onlyIsOk) return promise.then((res) => res.ok)
    return promise
    }
    #hatenaintern

    View Slide

  80. Overloads
    ˝ 㓹儖ע湾ׂ傴ׂס؅✳זיֽׄף荁ַך׌
    type f = (x: number) => number
    ˝ ⺱喋ס׆כ؅׆ס׻ֹמ׵傴ׄ׾
    type f = {
    (x: number): number
    }
    Overloads
    type func = {
    (x: number): number
    (x: string): string
    }
    #hatenaintern

    View Slide

  81. React ( min)
    #hatenaintern

    View Slide

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

    View Slide

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

    View Slide

  84. JavaScript
    #hatenaintern

    View Slide

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

    View Slide

  86. React
    #hatenaintern

    View Slide

  87. React
    UI
    UI
    GUI
    GUI
    #hatenaintern

    View Slide

  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

    View Slide

  89. React
    #hatenaintern

    View Slide

  90. JSX
    JSX JavaScript
    My name is Clementine!
    React DOM HTML
    class className class
    JavaScript
    #hatenaintern

    View Slide

  91. ؠٚتؤ٤َ٭ؾ٤عכ꞊丗ؤ٤َ٭ؾ٤ع
    React 2

    ؠٚتؤ٤َ٭ؾ٤ع
    class HelloMessage extends React.Component {
    render() {
    return Hello {this.props.name}
    }
    }
    ꞊丗ؤ٤َ٭ؾ٤ع
    const HelloMessage = ({ name }) => {
    return Hello {name}
    }
    #hatenaintern

    View Slide

  92. ؠٚتؤ٤َ٭ؾ٤عכ꞊丗ؤ٤َ٭ؾ٤ع
    ؠٚتؤ٤َ٭ؾ٤عע㵧全氳ם䉬塛ֿ◀㲊׈׿יַ׾ג״յ꞊丗ؤ٤َ٭ؾ٤ع؅✳榫׌׾׆כ؅䍚ׂ䫟㝢׊ױ׌ն
    ؠٚتؤ٤َ٭ؾ٤ع
    React Error Boundary
    (Function Component)
    React Component
    React Component React Component
    null
    Presenter/View
    React Component
    Unit Test
    #hatenaintern

    View Slide

  93. Function Component TypeScript
    TypeScript JSX .tsx
    () => JSX.Element
    React.FC
    type Props = { name: string }
    const Welcome: React.FC = ({ name }) => {
    return Welcome {name}
    }
    React Component undefined
    #hatenaintern

    View Slide

  94. Props State
    React Component 2
    Props State
    #hatenaintern

    View Slide

  95. Props /
    1
    type Props = { name: string }
    const Welcome: React.FC = ({ name }) => {
    return Welcome {name}
    }
    ( ) JSX

    // Welcome John
    #hatenaintern

    View Slide

  96. React Fragmentמחַי
    <> > React Fragment
    React Component 1 Element
    2 React Component
    const Component = () => {
    return (
    <>
    hello


    ͜Μʹͪ͸
    >
    )
    }
    key
    #hatenaintern

    View Slide

  97. Function Component Hooks
    Hooks React . 2019
    SFC ( Stateless Functional
    Component )
    #hatenaintern

    View Slide

  98. (State)
    useState
    use
    React
    (Hooks)
    const Counter = () => {
    const [count, setCount] = useState(0)
    const increaseCount = ()
    => setCount((prevCount) => prevCount + 1)
    return (

    Χ΢ϯτ: {count}
    Χ΢ϯτ

    )
    }
    #hatenaintern

    View Slide

  99. Hooks
    Rules of Hooks React
    use
    if
    early return
    ׆׿׼עeslint-plugin-react-hooksך吾⭳׊יׂ׿׾׻ֹמ⭳全׾
    #hatenaintern

    View Slide

  100. Hooks
    #hatenaintern

    View Slide

  101. useState
    useState() 1
    2 setter
    ( )
    setter Component
    DOM
    const [color, setColor] = useState("red")
    #hatenaintern

    View Slide

  102. useState setter
    ˝ 二׊ַ⡁؅峚׌
    const [color, setColor] = useState("red")
    const change2Blue = () => setColor("blue")
    ˝ 泡⯥ס⡁؅⮵榫׊י二׊ַ⡁؅婊㲊׌׾
    const [count, setCount] = useState(0)
    const increaseCount = () => setCount((prevCount) => prevCount + 1)
    #hatenaintern

    View Slide

  103. useEffect
    React Component
    Hooks
    DOM
    DOM props state
    #hatenaintern

    View Slide

  104. Component
    alert
    const Counter = () => {
    const [count, setCount] = useState(0)
    const increaseCount = () => setCount((prevCount) => prevCount + 1)
    alert(count)
    return {/* ུ */}
    }
    alert OK
    #hatenaintern

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  108. useEffectכؠٛ٭٤ػشو
    ˝ useEffectע꞊丗؅鲭׌׆כךאס꞊丗ֿ域סⰜ⛼榫ֿ⽛צ⭳׈׿׾⯥מ㲔车׈׿׾
    ˝ ׆׿؅⮵榫׌׾כⰜ⛼榫סؠٛ٭٤ػشوֿ⭳全׾
    roomIdֿ㚺催׈׿׾כյزٔشعס⹿ַ頇鐆؅⹦׽寕׊յ二׊ַ頇鐆؅ꝧ㡎׌׾❆
    useEffect(() => {
    const handler = () => {
    /* ৽͍͠ϝοηʔδΛड͚औͬͨͱ͖ͷॲཧ */
    }
    chat.subscribe(roomId, handler)
    return () => {
    chat.unsubscribe(roomId)
    }
    }, [roomId])
    #hatenaintern

    View Slide

  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

    View Slide

  110. Tips
    Component
    useState useMemo useEffect useCallback
    ( )
    useEffect
    useCallback - uhyo/blog
    #hatenaintern

    View Slide

  111. ֽ檄׿׈ױך׊ג
    TypeScript React
    TypeScript React
    JavaScript
    #hatenaintern

    View Slide

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

    View Slide

  113. Arrow Function
    function (new )
    arguments
    this
    #hatenaintern

    View Slide

  114. Arrow Function this
    Arrow Function function
    this
    #hatenaintern

    View Slide

  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

    View Slide

  116. thisסتؤ٭وס鷿ַמחַי
    Arrow Function
    const person = {
    name: "chris",
    say: function () {
    setTimeout(() => {
    console.log(`I'm ${this.name}`)
    }, 100)
    },
    }
    person.say() // I'm chris
    #hatenaintern

    View Slide

  117. useState state
    二׊ַ⡁؅峚׌כ׀ס蛽כ׊狌
    const [count, setCount] = useState(0)
    const increaseCount = () => setCount(count + 1)
    כ׊י׊ױֹכյ
    const increaseDouble = () => {
    increment()
    increment()
    }
    ס׻ֹם׵ס؅⛼זגכ׀מյincreaseDouble؅⽛؆ך׵1׊־㘃ֻםַכַֹ杯霄מ鸿鷔׌׾ך׊׺ֹն
    #hatenaintern

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  121. ❣㰆鿥⮛מ؛هةؘؠع؅⪌׿׾آ٭تמחַי
    const config = { theme: "sports" }
    useEffect(() => {
    loadConfig(config).then(() => {})
    }, [config])
    config
    [config.theme]
    #hatenaintern

    View Slide

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

    View Slide

  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 Lorem ipsum dolor sit amet
    #hatenaintern

    View Slide

  124. useCallbackך꞊丗؅ْٓ⴫׌׾
    ˝ ⡁⺱喋מ꞊丗؅ْٓ⴫׊גַ㕙⺬עuseCallback؅⮵榫׌׾
    ˝ ْٓ⴫׊םַכ夵ٝ٤رٛ٤ء侇מ꞊丗؛هةؘؠعֿ榟䡗
    ׈׿י׊ױֹ
    const handler = useCallback((val) => alert(val), [])
    useEffect(() => {
    Api.notification.subscribe(handler)
    }, [handler])
    #hatenaintern

    View Slide

  125. useMemo׷useCallback؅榫ַגقنؚ٭ُ٤
    ت䷉ャ
    ˝ useMemo׷useCallbackע⡁׷꞊丗סْٓ⴫מ׻זיuseEffectםלס┘釐ם⽛צ⭳׊؅䤰⯆׌׾׆כמ׻זיقنؚ٭ُ٤ت
    ס䷉ャ؅僿䏨ך׀׾
    ˝ 攐מuseMemoךע❣㰆מ✳؂םַ㕙⺬ך׵յ⭚杼סꄆַ銶畀磵冽؅ْٓ⴫׌׾׆כךٝ٤رٛ٤ء侇סهٞشؠ؅䤰ֻ׾׆כ
    ׵⭳全׾
    function Component ({a, b}) => {
    const resultA = useMemo(() => superDuperHighCostCalculation(a), [a]);
    const resultB = useMemo(() => superDuperHighCostCalculation(b), [b]);
    return <>
    {a}͔ΒʮΊͪΌͪ͘Όॏ͍ܭࢉʯΛͨ݁͠Ռ: {resultA}
    {b}͔ΒʮΊͪΌͪ͘Όॏ͍ܭࢉʯΛͨ݁͠Ռ: {resultB}
    >
    }
    #hatenaintern

    View Slide

  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 (



    )
    #hatenaintern

    View Slide

  127. DOM
    DOM React
    const [text, setText] = useState("")
    const submit = (e) => {
    e.preventDefault()
    if (text < 100) return alert("101จࣈҎ্͕ඞཁͰ͢")
    createPost({ body: text })
    }
    return (

    setText(e.target.value)} />

    )
    #hatenaintern

    View Slide

  128. JavaScript
    TypeScript/JavaScript
    #hatenaintern

    View Slide

  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

    View Slide

  130. webpack
    TypeScript JavaScript
    babel(babel-loader )
    webpack
    Terser(webpack-terser-plugin )
    #hatenaintern

    View Slide

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

    View Slide

  132. JavaScript
    ( )
    JavaScript DOM HTML CSS API
    ECMAScript
    WHATWG HTML Living Standard
    WHATWG DOM Living Standard
    W C CSS Speci cations
    #hatenaintern

    View Slide

  133. ם׏☼喋؅湳׾ס־
    API
    JavaScript CSS
    -
    #hatenaintern

    View Slide

  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

    View Slide

  135. ECMAScript Stage
    ECMAScript (proposal)
    Github proposal issue PR TC
    Stage
    ⾒ Issue
    Stage ECMAScript
    #hatenaintern

    View Slide

  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

    View Slide

  137. ECMAScript
    Stage ECMAScript
    core-js poly ll babel
    ECMAScript Open Open
    JavaScript
    ECMAScript
    #hatenaintern

    View Slide

  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

    View Slide

  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

    View Slide

  140. W C CSS Speci cations
    CSS CSS
    WHATWG W C
    All CSS speci cations
    #hatenaintern

    View Slide