60分で学ぶ最新Webフロントエンド

2026/04/16 に「技育CAMPアカデミア」で話したスライドです。2025 年のはてなインターンの講義資料 (https://speakerdeck.com/hatena/internship-2025-frontend) に手を加えたものになってます。

https://talent.supporterz.jp/events/b4d7e64d-d315-4e61-b6cc-319e5a541ae9/

Transcript

1. 60෼ͰֶͿ࠷৽WebϑϩϯτΤϯυ 2026-04-16 id:mizdra ٕҭCAMPΞΧσϛΞ 1
2. ࣗݾ঺հ • mizdra (ΈͣͲΒ) • Πϯλʔωοτେ޷͖ • גࣜձࣾ͸ͯͳ • ϑϩϯτΤϯυΤΩεύʔτ • ࣾ಺ͷϑϩϯτΤϯυܒൃ׆ಈ ٕҭCAMPΞΧσϛΞ 2
3. ߨٛςʔϚ͸ʮWeb ϑϩϯτΤϯυʯ • Web ։ൃʹ͓͍ͯ೥ʑॏཁ౓Λ૿͍ͯ͠Δ • ͜ͷߨٛͰ͸ɺ60 ෼Ͱߴ଎ೖ໳͢Δ • ։ൃʹඞਢͷ஌ࣝΛԡ͑ͯ͞΋Β͏ ٕҭCAMPΞΧσϛΞ 3
4. ඞཁͳ஌ࣝͷҰྫ • Webϖʔδ/ϒϥ΢β/αʔόͷؔ܎ੑɾ໾ׂ • HTML/CSS/JavaScript (ݴޠ) • React, Next.js (View ϥΠϒϥϦ/ϑϨʔϜϫʔΫ) • XSS, CSP (ηΩϡϦςΟ) • Web Vitals (ύϑΥʔϚϯε) • ΞΫηγϏϦςΟ • bundler, linter, formatter, test runner (։ൃπʔϧ) ٕҭCAMPΞΧσϛΞ 4
5. ϑϩϯτΤϯυ΁ͷΑ͋͘Δҹ৅ • ʮ֮͑Δ͜ͱ͕ଟ͍ʯʮٕज़ͷྲྀΕ͕ૣ͍ʯ • ϑϩϯτΤϯυ͸Ϣʔβʹۙͯ͘ɺίʔσΟϯάਓޱ͕ଟ͍ྖҬ • ͦͷͨΊɺසൟʹ৽ٕज़͕ग़ͯ͘Δ 1 • ৽৘ใΛશ෦௥͍ͬͯͯ͸େม • ޲͖߹͍ํΛม͑Δ΂͖ • ྲྀߦΛ௥͏ͷ΋ྑ͍͚Ͳ...ͦͷٕज़͕ొ৔ͨ͠എܠΛߟ͑Α͏ • ϥΠϒϥϦͷ࢖͍ํΛ֮͑Δͷ΋ྑ͍͚Ͳ...௕͘௨༻͢Δ஌ࣝ΋਎ʹ͚ͭΑ͏ 1 ॾઆ͋Γ·͢ɻ ٕҭCAMPΞΧσϛΞ 5
6. ͜ͷߨٛͷΰʔϧ • ϑϩϯτΤϯυͷ։ൃͰඞਢͷ஌ࣝΛԡ͑͞Δ • ͦΕͧΕͷٕज़͕ొ৔ͨ͠എܠΛ஌Δ • ௕͘௨༻͢Δ஌ࣝΛ਎ʹ͚ͭΔ ߨ͕ٛऴΘͬͨޙ΋ɺWebϑϩϯτΤϯυΛֶ΂ΔΑ͏ͳखॿ͚ ʹͳΕ͹ྑ͍ͱࢥ͍ͬͯ·͢ɻ ٕҭCAMPΞΧσϛΞ 6
7. JavaScript ʹ͍ͭͯ(15min) ٕҭCAMPΞΧσϛΞ 7
8. JavaScript ʹ͍ͭͯ • ϒϥ΢β্Ͱಈ࡞͢Δϓϩάϥϛϯάݴޠ • ϑϩϯτΤϯυͰͷ։ൃʹ࢖ΘΕΔ • ม਺એݴɾؔ਺ɾ഑ྻͳͲͷجຊߏจ͸஌͍ͬͯΔલఏͰਐΊ ·͢ • ίʔυΛಡΈॻ͖͢Δࡍʹ஌͓ͬͯ͘΂͖ JavaScript ͷ֓೦Λ ঺հ͠·͢ ٕҭCAMPΞΧσϛΞ 8
9. ม਺એݴͱϓϦϛςΟϒܕ // ม਺એݴ (const Λ༏ઌͯ͠࢖͏) let a = "a" // ্ॻ͖Մೳ const b = "b" // ্ॻ͖ෆՄೳ // ϓϦϛςΟϒܕ const name = "hatena" // string const age = 20 // number const isStudent = true // boolean const undef = undefined // undefined const nul = null // null ٕҭCAMPΞΧσϛΞ 9
10. ΦϒδΣΫτɾ഑ྻ const user = { id: "hatena", age: 20 } user.id // "1234" const arr = [1, 2, 3] arr[0] // 1 ٕҭCAMPΞΧσϛΞ 10
11. ؔ਺ // function એݴ function add(a, b) { return a + b } // Arrow Function (؆ܿʹؔ਺Λॻ͘ߏจ) const add = (a, b) => a + b const hello = name => `Hello, ${name}` ٕҭCAMPΞΧσϛΞ 11
12. Nullish coalescing operator ?? • a ?? b ͷΑ͏ʹͯ͠࢖͏ • ࠨล͕ undefined or null ͷ࣌ʹӈลͷ஋Λฦ͢ • ͦΕҎ֎ͳΒࠨลͷ஋Λฦ͢ function greet(name) { return `Hello, ${name ?? "mizdra"}!` } σϑΥϧτ஋ʹ fallback ͤ͞ΔͷʹΑ͘࢖͏ɻ ٕҭCAMPΞΧσϛΞ 12
13. Optional chaining ?. • a?.b ͷΑ͏ʹॻ͘ • a ͕ null ·ͨ͸ undefined ͷͱ͖͸ undefined Λฦ͢ • ͦΕҎ֎ͷͱ͖͸௨ৗ௨ΓϓϩύςΟΞΫηεΛߦ͏ const userId1 = session.user?.id; // const userId1 = session.user ? session.user.id : undefined; ͱಉ͡ • ؔ਺ݺͼग़͠ͱ΋૊Έ߹ΘͤΒΕΔ const result = someObject?.someMethod?.(arg1, arg2); ٕҭCAMPΞΧσϛΞ 13
14. Spread Syntax • ... Λ࢖͏ͱ഑ྻ΍ΦϒδΣΫτΛల։ग़དྷΔ const nums = [1, 2] const moreNums = [...nums, 5] // [1, 2, 5] const obj1 = { a: "foo", b: "bar" } const obj2 = { c: "baz" } const merged = { ...obj1, ...obj2 } // {a: "foo", b: "bar", c: "baz"} ٕҭCAMPΞΧσϛΞ 14
15. Pending ॳظঢ়ଶ ੒ޭ (resolve) ࣦഊ (reject) Fulfilled ඇಉظॲཧ͕੒ޭ Rejected ඇಉظॲཧ͕ࣦഊ Promise • ඇಉظॲཧͷ݁ՌΛද͢ΦϒδΣΫτ 2 • 3ͭͷঢ়ଶΛදݱͰ͖Δ • Pending: ॳظঢ়ଶɻ੒ޭ΋ࣦഊ΋͍ͯ͠ͳ ͍ɻ • Fulfilled: ඇಉظॲཧ͕੒ޭͨ͠ • Rejected: ඇಉظॲཧ͕ࣦഊͨ͠ • Pending => Fulfilled or Rejected ͷॱͰঢ়ଶ͕ มԽ 2 Promise ͸ඇಉظॲཧΛѻ͏ͨΊͷΦϒδΣΫτͰɺJavaScript ͷඇಉ ظॲཧͷجຊతͳ࢓૊ΈͰ͢ɻৄࡉ͸෇࿥ʮPromise ʹ͍ͭͯʯΛࢀর ͍ͯͩ͘͠͞ɻ ٕҭCAMPΞΧσϛΞ 15
16. Promise ͷੜ੒ํ๏ • new Promise((resolve, reject) => {...}) Ͱ Promise Λੜ੒ • resolve ΛݺͿͱ Fulfilled ʹͳΓɺreject ΛݺͿͱ Rejected ʹͳΔ function sleep(ms) { return new Promise((resolve, reject) => { if (typeof ms !== "number") { reject(new Error("ms must be a number")) return } setTimeout(() => { resolve(ms) }, ms) }) } ٕҭCAMPΞΧσϛΞ 16
17. ίʔϧόοΫͷొ࿥ ඇಉظॲཧ͕׬ྃͨ࣌͠ʹݺ͹ΕΔίʔϧόοΫΛొ࿥Ͱ͖Δɻ sleep(1000) // `Fulfilled` ʹͳͬͨ࣌ʹݺ͹ΕΔίʔϧόοΫΛొ࿥ .then((ms) => console.log(`sleep: ${ms}ms`)) // `Rejected` ʹͳͬͨ࣌ʹݺ͹ΕΔίʔϧόοΫΛొ࿥ .catch((e) => console.error(e)) ٕҭCAMPΞΧσϛΞ 17
18. fetch Λ࢖ͬͨྫ • fetch ͸ HTTP ϦΫΤετΛૹ৴͢Δ API • ϦΫΤετૹ৴͸ඇಉظॲཧͳͷͰɺPromise Λฦ͢Α͏ʹͳͬͯΔ const promise = fetch("https://api.example.com/user/1") // ᶃ .then((res) => /* ᶄ */ res.json()) .then((json) => /* ᶅ */ console.log(json.user)) .catch((e) => /* ᶆ */ console.error(e)) console.log(promise) // ᶇ • ᶃ => ᶇ => ᶄ => ᶅ => ᶆ ͷॱʹ࣮ߦ͞ΕΔ͜ͱʹ஫ҙ • ίʔϧόοΫؔ਺͸ඇಉظॲཧ͕׬ྃޙʹ࣮ߦ͞ΕΔ (஗Ԇ͞ΕΔ) ٕҭCAMPΞΧσϛΞ 18
19. async/await • ඇಉظॲཧΛ؆ܿʹॻͨ͘Ίͷߏจ • then ΍ catch Λ࢖ΘͣʹɺಉظతͳίʔυͬΆ͘ॻ͚Δ ٕҭCAMPΞΧσϛΞ 19
20. async/await 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: *********") } } ΤϥʔϋϯυϦϯάʹ͸ try {} catch (e) {} Λ࢖༻͠·͢ɻ ٕҭCAMPΞΧσϛΞ 20
21. async/await • async function ࣗମ΋҉໧తʹ Promise Λฦ͢ • ؔ਺ͷฦΓ஋ʹରͯ͠ɺthen Λݺͼग़ͤΔ getUser(1) .then(console.log) // {id: 1, name: 'hatena'} .catch(console.error) ٕҭCAMPΞΧσϛΞ 21
22. ECMAScript Modules (ES Modules) • ϓϩάϥϜΛϞδϡʔϧͱ͍͏୯Ґʹ෼ׂ͢Δػೳ • 1 ϑΝΠϧ == 1 Ϟδϡʔϧ • είʔϓ͸Ϟδϡʔϧ͝ͱ • ؔ਺΍ม਺ͳͲΛ import/export Ͱ͖Δ ٕҭCAMPΞΧσϛΞ 22
23. named export, named import • ม਺એݴ΍ؔ਺એݴʹ export Λ෇Ճ͢Δͱ named export Ͱ͖Δ // lib.js export const logLevel = { WARN: "warn", ERROR: "error", }; export function log(message, level) {/* ... */} // main.js import { logLevel, log } from './lib.js' ٕҭCAMPΞΧσϛΞ 23
24. default export // lib.js export default function (message, level) {/* ... */} // main.js import awesome from "./lib" • export default ͱ͍͏ΩʔϫʔυͰ΋ export Ͱ͖Δ • ໊લΛ෇͚ͣʹΤΫεϙʔτͰ͖Δ • import ࣌ʹ೚ҙͷ໊લΛઃఆͰ͖Δ • export default Ͱ͖Δͷ͸ɺ1ͭͷϞδϡʔϧʹ͖ͭ 1 ͚ͭͩ ٕҭCAMPΞΧσϛΞ 24
25. TypeScript ʹ͍ͭͯ(10min) ٕҭCAMPΞΧσϛΞ 25
26. TypeScript ʹ͍ͭͯ • JavaScript ʹ੩తܕ෇͚Λಋೖͨ͠ݴޠ • JavaScript + ܕ஫ऍ • ίϯύΠϥ (tsc) ͰܕνΣοΫΛߦ͏ • ݱ୅Ͱ͸ੜͷ JavaScript ॻ͘ΑΓɺTypeScript Ͱॻ͘͜ͱ͕ଟ͍ function hello(name: string): string { return `Hello, ${name}!` } const result = hello(1) // ^ // Type Error: Argument of type '1' is not assignable to parameter of type 'string'. ٕҭCAMPΞΧσϛΞ 26
27. ͳͥ TypeScript ͕ඞཁ͔ʁ • ෆ۩߹ʹؾ෇͖΍͘͢͢ΔͨΊ • ܕͷؒҧ͍Λࣄલʹݕ஌Ͱ͖Δ • ΤσΟλͷิॿػೳΛ࢖͑ΔΑ͏ʹ͢ΔͨΊ • ίʔυิ׬ɺఆٛݩ΁ͷҠಈɺϦωʔϜͳͲ ٕҭCAMPΞΧσϛΞ 27
28. tsc: TypeScript compiler • TypeScript ݴޠͷͨΊͷίϯύΠϥ • ओͳػೳ • ܕνΣοΫΛ͢Δ • TypeScript Ͱॻ͔ΕͨίʔυΛ JavaScript ʹม׵͢Δ • ม׵ͱݴͬͯ΋ɺܕΞϊςʔγϣϯ౳ͷ࡟আ͘Β͍ ٕҭCAMPΞΧσϛΞ 28
29. ܕએݴ෦෼ΛಡΊΔΑ͏ʹͳΖ͏ TypeScript ͷ୅දతͳදݱͳͲΛ঺հ͍͖ͯ͠·͢ɻ ٕҭCAMPΞΧσϛΞ 29
30. ม਺એݴ࣌ͷܕΞϊςʔγϣϯ // JavaScriptͷ৔߹ const a = 'hello'; // TypeScriptͷ৔߹ const a: string = 'hello'; ٕҭCAMPΞΧσϛΞ 30
31. ϓϦϛςΟϒܕɾϦςϥϧܕ const a: number = 10 const b: boolean = false const c: string = "hello" const d: null = null const e: "hello" = "hello" const f: "hello" = "world" // Type Error const g: 10 = 10 const h: 10 = 20 // Type Error ٕҭCAMPΞΧσϛΞ 31
32. ഑ྻܕɾΦϒδΣΫτܕ const arr: string[] = ["hello", "world"] const arr2: Array<number> = [1, 2, 3, 5, 8] const arr3: [string, number] = ["year", 2021] // λϓϧ(Tuple)ܕͱ΋ const person: { name: string age: number address?: string // ? Λ෇͚ΔͱΦϓγϣφϧʹͳΔ } = { name: "john", age: 21, // address: "tokyo" // ͋ͬͯ΋ͳͯ͘΋ྑ͍ } ٕҭCAMPΞΧσϛΞ 32
33. ܕͷਪ࿦ • TypeScript ͸ίʔυ͔ΒܕΛ༧ଌͯ͠࠾༻͢Δ (ਪ࿦) • Ͱ͖Δ͚ͩਪ࿦ͤ͞ɺܕΞϊςʔγϣϯ͸লུ͢Δͷ͕Ұൠత const a = 10 // number const b = false // boolean const c = ["hello", "world"] // string[] ٕҭCAMPΞΧσϛΞ 33
34. type ܕʹΤΠϦΞεΛ෇͚ΒΕΔɻ type Person = { name: string age: number } type Team = Person[] ٕҭCAMPΞΧσϛΞ 34
35. Union Type (߹ซܕ) ෳ਺ͷܕͷ͍ͣΕ͔Λຬͨ͢ɻ type Color = "red" | "green" | "blue" | "yellow" | "purple" const c: Color = "red" const d: Color = "black" // Type Error ٕҭCAMPΞΧσϛΞ 35
36. Narrowing • ؇͍ܕΛΑΓڱ͍ܕʹߜΓࠐΉςΫχοΫ • typeof ԋࢉࢠͳͲΛ࢖͏ͱɺܕͷߜΓࠐΈ͕Ͱ͖Δ // ίʔυ͸ https://www.typescriptlang.org/docs/handbook/2/narrowing.html ΑΓҾ༻ function padLeft(padding: number | string, input: string): string { if (typeof padding === "number") { // ͜ͷϒϩοΫ಺Ͱ͸ `padding` ͸ `number` ܕ return " ".repeat(padding) + input } else if (typeof padding === "string") { // ͜ͷϒϩοΫ಺Ͱ͸ `padding` ͸ `string` ܕ return padding + input } } ٕҭCAMPΞΧσϛΞ 36
37. in ԋࢉࢠ • JavaScript ʹ͋Δԋࢉࢠ • TypeScript Ͱ͸ɺಛఆͷϓϩύςΟΛ࣋ͭܕ΁ͱߜΓࠐΊΔ type Fish = { name: string, swim: () => void } type Bird = { name: string, fly: () => void } const move = (x: Fish | Bird) => { if ("swim" in x) { // Fish ܕʹߜΓࠐ·ΕΔ return x.swim() } // ͜͜Ͱ͸ Bird ܕʹߜΓࠐ·ΕΔ return x.fly() } ٕҭCAMPΞΧσϛΞ 37
38. Tagged Union Types • Union Type ͷݸʑͷܕʹɺkind ͷΑ͏ͳϓϩύςΟΛ࣋ͨͤΔςΫχοΫͷ͜ͱ • x.kind === ... ͰܕͷߜΓࠐΈ͕Ͱ͖Δ type Fish = { kind: "fish" swim: () => void } type Bird = { kind: "bird" fly: () => void } const move = (x: Fish | Bird) => { if (x.kind === "fish") { return x.swim() } return x.fly() } ٕҭCAMPΞΧσϛΞ 38
39. as Λ༻͍ͨܕΞαʔγϣϯ(Type Assertion) • ਪ࿦͞ΕͨܕΛ্ॻ͖Ͱ͖Δߏจ • ਪ࿦͞Εͨܕ͕ظ଴௨ΓͰͳ͍৔߹ʹ࢖͏ // ຊདྷ͸ `Element | null` ͕ͩɺ`HTMLTextAreaElement` ʹ্ॻ͖͢Δ const editor = document.querySelector(".editor") as HTMLTextAreaElement ٕҭCAMPΞΧσϛΞ 39
40. ஫ҙ: as Ͱ͸࣮ߦ࣌ͷڍಈ͸มΘΒͳ͍ • ͋͘·Ͱ TypeScript ίϯύΠϥ಺Ͱ࢖ΘΕΔܕ͕มΘΔ͚ͩ • "str" as number ͱॻ͍ͯ΋ɺจࣈྻ͔Β਺஋ʹม׵͞Εͳ͍ const a = "1" as number console.log(a) // "1" console.log(typeof a) // "string" ٕҭCAMPΞΧσϛΞ 40
41. any ͱ unknown any • ͲΜͳ஋Ͱ΋ೖΕΒΕΔܕ -ϓϩύςΟΞΫηε͕ܕΤ ϥʔʹͳΒͳ͍ let val: any = { foo: 1 } val.foo // ΤϥʔʹͳΒͳ͍ val.bar // ΤϥʔʹͳΒͳ͍ unknown • ͲΜͳ஋Ͱ΋ೖΕΒΕΔܕ • ϓϩύςΟΞΫηε͕ܕΤ ϥʔʹͳΔ const val: unknown = { foo: 1 } val.foo // ΤϥʔʹͳΔ val.bar // ΤϥʔʹͳΔ ٕҭCAMPΞΧσϛΞ 41
42. Ͳ͏͍͏࣌ʹ࢖͏? ֎෦ API ͔ΒͷϨεϙϯεͳͲɺܕ͕ෆ໌ͳ஋Λѻ͏ͱ͖ʹ࢖͏ɻ const res = await fetch("/api/data") // ·ͣ unknown ͱͯ͠ड͚औΔ const data: unknown = await res.json() // Narrowing ͰߜΓࠐΉ if ( (typeof data === "object" && data !== null) && ("name" in data && typeof data.name === "string") ) { // ͜ͷதͰ͸ data.name ͸ string ܕ console.log("Hello, " + data.name) } ٕҭCAMPΞΧσϛΞ 42
43. ؔ਺ function add(x: number, y: number): number { return x + y } // Arrow Function Ͱ΋ಉ༷ const add = (x: number, y: number): number => { return x + y } // ୅ೖࣜ (=) ͷࠨลʹॻ͘͜ͱ΋Ͱ͖Δ const add: (x: number, y: number) => number = (x, y) => { return x + y } // ಛʹ return ͠ͳ͍৔߹͸ void Λࢦఆ͢Δ const a: () => void = () => { console.log("a") } ٕҭCAMPΞΧσϛΞ 43
44. ܕҾ਺(Generics) • ܕΛҾ਺ͱͯ͠౉ͤΔػೳ 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") ٕҭCAMPΞΧσϛΞ 44
45. TypeScript ͷॻ͖ํͰࠔͬͨΒ? • ެࣜυΩϡϝϯτͷ Handbook Λಡ΋͏ • https://www.typescriptlang.org/docs/handbook/intro.html • Playground Ͱࢼ͠ॻ͖͠Α͏ • https://www.typescriptlang.org/play • ೉͍͠ܕͷॻ͖ํ͸ Type Challenges ΛݟͯΈΑ͏ • https://github.com/type-challenges/type-challenges ٕҭCAMPΞΧσϛΞ 45
46. React ʹ͍ͭͯ(20min) ٕҭCAMPΞΧσϛΞ 46
47. React ͱ͸ • ϢʔβΠϯλʔϑΣʔε (UI) Λߏங͢ΔͨΊͷϥΠϒϥϦ • UI Λؔ਺Ͱఆٛ͢Δ • JSX ͱ͍͏ HTML-like ͳ֦ுߏจΛ࢖͏ ٕҭCAMPΞΧσϛΞ 47
48. ίʔυྫ const Greeting = () => { const [name, setName] = useState('') return ( <div> <input value={name} onChange={(e) => setName(e.target.value)} /> <p>͜Μʹͪ͸ɺ{name} ͞Μ!</p> </div> ) } ٕҭCAMPΞΧσϛΞ 48
49. React ͷԿ͕خ͍͠? React Λ࢖Θͳ͔ͬͨ࣌ͱൺֱ͢ΔͱΑ͘Θ͔Δɻ ٕҭCAMPΞΧσϛΞ 49
50. React Λ࢖Θͳ͔ͬͨ࣌ <div> <input id="name" /> <p>͜Μʹͪ͸ɺ<span id="display"></span> ͞Μ!</p> </div> <script> document.getElementById('name').addEventListener('change', (e) => { document.getElementById('display').textContent = e.target.value }) </script> ٕҭCAMPΞΧσϛΞ 50
51. React Λ࢖Θͳ͔ͬͨ࣌ • DOM API Ͱૢ࡞͢Δ • document.getElementById ͰཁૉΛऔͬͯ͘Δ • element.addEventListener ͰΠϕϯτϦεφʔΛొ࿥ • ςΩετͷߋ৽͸ element.textContent = "ߋ৽ޙͷςΩετ" • ϚʔΫΞοϓ (HTML෦෼) ͱϩδοΫ (JavaScript෦෼) ͕཭Εͯ ͍Δ ٕҭCAMPΞΧσϛΞ 51
52. React Λ࢖ͬͨ࣌ const Greeting = () => { const [name, setName] = useState('') return ( <div> <input value={name} onChange={(e) => setName(e.target.value)} /> <p>͜Μʹͪ͸ɺ{name} ͞Μ!</p> </div> ) } ٕҭCAMPΞΧσϛΞ 52
53. React Λ࢖ͬͨ࣌ • DOM API Λ࢖Θͣ؆ܿʹॻ͚Δ 3 • ΠϕϯτϦεφʔ͸ onChange={(e) => ...} Ͱొ࿥ • ςΩετͷߋ৽͸ {name} ͱॻ͚ͩ͘ • ϚʔΫΞοϓͱϩδοΫΛۙ͘ʹஔ͚Δ • ϝϯςφϯε͠΍͍͢ 3 Ϣʔβ͕௚઀ DOM API Λ࢖ΘͣʹࡁΉ͚ͩͰɺReact ಺෦Ͱ͸ DOM API ͕࢖ΘΕ͍ͯΔɻ ٕҭCAMPΞΧσϛΞ 53
54. Virtual DOM (Ծ૝ DOM) • state ͕มΘΔͱ React ͕৽͍͠ Virtual DOM Λੜ੒ • લճͱͷࠩ෼Λܭࢉ͠ɺมΘͬͨॴ͚࣮ͩࡍͷ DOM ʹ൓ө ٕҭCAMPΞΧσϛΞ 54
55. લճͷ Virtual DOM div input value="Alice" p [text] "͜Μʹͪ͸ɺAlice ͞Μ!" setName Ͱ ࠶ϨϯμϦϯά ৽͍͠ Virtual DOM div input value="Bob" p [text] "͜Μʹͪ͸ɺBob ͞Μ!" React ͕ࠩ෼Λܭࢉͯ͠൓ө ࣮ࡍͷ DOM div input .value = "Bob" p .textContent = ... "͜Μʹͪ͸ɺBob ͞Μ!" ٕҭCAMPΞΧσϛΞ 55
56. React ͷॻ͖ํɾಡΈํ ٕҭCAMPΞΧσϛΞ 56
57. JSX • JavaScript ʹ HTML ͬΆ͍ه๏Λ௥Ճ֦ͨ͠ுߏจ <h1 className="hello">My name is Clementine!</h1> • HTML ͷଐੑ໊Ͱ͸ͳ͘ɺΩϟϝϧέʔεͷ໋໊نଇΛ࢖༻ 4 • class ͸ className ͱॻ͘ • class ͕ JavaScript ͷ༧໿ޠͰ͋ΔͨΊɺผͷ໊લʹͳͬͯΔ 5 5 https://github.com/facebook/react/issues/13525#issuecomment-671892643 4 aria-* ΍ data-* ଐੑ͸ྫ֎Ͱ͢ɻ ٕҭCAMPΞΧσϛΞ 57
58. ίϯϙʔωϯτ • UI Λߏ੒͢Δ෦඼ͷ͜ͱ • ϘλϯɺϑΥʔϜɺϔομʔͳͲ • ؔ਺Λ࢖ͬͯఆٛ͢Δ const Button = ({ label }) => { return <button>{label}</button> } ٕҭCAMPΞΧσϛΞ 58
59. ίϯϙʔωϯτΛ૊Έ߹Θͤͯ UI Λߏங͢Δ • ίϯϙʔωϯτ͸૊Έ߹ΘͤΒΕΔ • খ͍͞ίϯϙʔωϯτΛ࢖ͬͯɺΑΓେ͖ͳίϯϙʔωϯτΛ࡞͍ͬͯ͘ const SignupForm = () => { return ( <div> <h1>ొ࿥ϑΥʔϜ</h1> <Input type="text" name="username" /> <Input type="password" name="password" /> <Button label="ૹ৴" /> </div> ) } ٕҭCAMPΞΧσϛΞ 59
60. Props ͱ State • ίϯϙʔωϯτʹ͸஋Λ࣋ͭํ๏͕େ͖͘ 2 ͭ͋Δ • ؔ਺ͷҾ਺ͱͯ͠ड͚औΔPropsͱ಺෦ঢ়ଶΛอ࣋͢ΔState ٕҭCAMPΞΧσϛΞ 60
61. Props Λ౉͢/ड͚औΔ • ड͚औΔଆ͸ؔ਺ͷୈ 1 Ҿ਺ͰΦϒδΣΫτͱͯ͠ड͚औΔ type Props = { name: string } const Welcome = ({ name }: Props) => { return <h1>Welcome {name}</h1> } • ౉͢ଆ(਌ଆ)͸ prop=஋ ͱॻ͘ <Welcome name="John" /> ٕҭCAMPΞΧσϛΞ 61
62. useState • ίϯϙʔωϯτʹঢ়ଶΛ࣋ ͨͤΔͨΊͷ API const Counter = () => { const [count, setCount] = useState(0) const increaseCount = () => setCount((prevCount) => prevCount + 1) return ( <div> Χ΢ϯτ: {count} <button onClick={increaseCount}>Χ΢ϯτ</button> </div> ) } ٕҭCAMPΞΧσϛΞ 62
63. Hooks • useState ͸ React ͕ఏڙ͢ΔHookͷҰͭ • Hook ͱ͸ • ίϯϙʔωϯτͷதͰঢ়ଶ΍ϥΠϑαΠΫϧͳͲػೳΛѻ͏ ͨΊͷ࢓૊Έ • খ೉͍͠ݴ͍ํΛ͢Δͱɺ෭࡞༻Λѻ͏ͨΊͷ࢓૊Έ ٕҭCAMPΞΧσϛΞ 63
64. Hooks ͷᎄ ϑοΫͷϧʔϧ – React • ໊લ͸ use ͔Β࢝ΊΔ • ίϯϙʔωϯτؔ਺ͷτοϓϨϕϧͰݺͿ • if ͷதͰݺ͹ͳ͍ • early return ͢ΔલʹඞͣݺͿ ٕҭCAMPΞΧσϛΞ 64
65. ୅දతͳ૊ΈࠐΈ Hooks ͷ঺հ ٕҭCAMPΞΧσϛΞ 65
66. useState • useState(ॳظ஋) ͱݺͼग़ͯ͠࢖͏ const Counter = () => { const [count, setCount] = useState(0) // count ͸ݱࡏͷ஋Λද͢ม਺ // setCount(1) ͱݺͿͱ count ͕ 1 ʹͳΔ } • setter ΛݺͿͱ಺෦ঢ়ଶ͕ߋ৽͞Εͨ͜ͱ͕ React ʹ௨஌͞ΕΔ • Ծ૝ DOM ͷ࠶ੜ੒ 6ɺൺֱɺ࣮ DOM ͷߋ৽͕ߦΘΕΔ 6 React ʹΑͬͯؔ਺ίϯϙʔωϯτࣗମ͕࠶࣮ߦ͞ΕɺͦͷฦΓ஋͕৽͍͠Ծ૝ DOM ͱͳΓ·͢ ٕҭCAMPΞΧσϛΞ 66
67. useEffect • ֎෦γεςϜʹ઀ଓ͠ɺಉظͤ͞ΔͨΊͷ Hook • ྫ͑͹ • API αʔόʔ ͔ΒσʔλΛऔಘ͢Δ • ੜͷ DOM API Λݺͼग़͢ ٕҭCAMPΞΧσϛΞ 67
68. useEffect ͷྫ const Header = ({apiHost}: { apiHost: string }) => { const [user, setUser] = useState<User | undefined>(undefined) useEffect(() => { fetch(`${apiHost}/api/user`) .then(res => res.json()) .then(data => setUser(data)) }) return ( <header> {user ? `${user.name} ͰϩάΠϯத` : "Loading..."} </header> ) } ٕҭCAMPΞΧσϛΞ 68
69. useEffectͱґଘ഑ྻ • σϑΥϧτͰ͸ɺΤϑΣΫτ͸Ϩϯμʔ࣌ʹຖճ࣮ߦ͞ΕΔ • useEffect ͷୈ 2 Ҿ਺ (ґଘ഑ྻ) Λ࢖͏ͱɺෆඞཁͳ࣮ߦΛ๷͛Δ useEffect(() => { // ґଘ഑ྻͷ஋ (apiHost) ͕มΘ͚ͬͨ࣌ͩ࠶࣮ߦ͞ΕΔ fetch(`${apiHost}/api/user`) .then(res => res.json()) .then(data => setUser(data)) }, [apiHost]) ٕҭCAMPΞΧσϛΞ 69
70. ґଘ഑ྻ͸ࣗ෼ͰબͿ΋ͷͰ͸ͳ͍ • جຊతʹ͸ɺΤϑΣΫτ͔Βࢀর͞ΕͯΔ஋Λશͯґଘ഑ྻʹೖΕΔ • ESLint + eslint-plugin-react-hooks Λ࢖͏ͱɺೖΕ๨ΕͯΔ஋Λܯࠂͯ͘͠ΕΔ • ͜ͷܯࠂʹै͏ͷ͕ηΦϦʔ useEffect(() => { fetch(`${apiHost}/api/user`) .then(res => res.json()) .then(data => setUser(data)) }, []) // ^^ React Hook useEffect has a missing dependency: 'apiHost'. // Either include it or remove the dependency array. ESLint + eslint-plugin-react-hooks ͸ޙ͔Βͷಋೖ͕໘౗ͳͷͰɺॳखͰඞͣಋೖ͠·͠ΐ͏ɻ ٕҭCAMPΞΧσϛΞ 70
71. useEffect ͱΫϦʔϯΞοϓ • ࣮͸ΤϑΣΫτ͔Βؔ਺ΛฦͤΔ • ΫϦʔϯΞοϓؔ਺ ͱݺ͹ΕΔ • ࣍ͷΤϑΣΫτ͕࣮ߦ͞ΕΔલʹݺ͹ΕΔ useEffect(() => { const id = setInterval(() => { console.log("tick") }, duration) return () => { clearInterval(id) // λΠϚʔΛఀࢭ } }, [duration]) ٕҭCAMPΞΧσϛΞ 71
72. ಠࣗϑοΫ(Custom Hook) Hook ͸૊ΈࠐΈͷ΋ͷ͚ͩͰͳ͘ɺࣗ෼Ͱ࡞Δ͜ͱ΋Ͱ͖Δɻ const useUserStatus = ({ userId }) => { const [status, setStatus] = useState(null) useEffect(() => { const handler = (user) => { setStatus(user.status) } Api.subscribe(userId, handler) return () => Api.unsubscribe(userId, handler) }) return status } function SomeComponent({ userId }) { const status = useUserStatus({ userId }) return <div>{status}</div> } ٕҭCAMPΞΧσϛΞ 72
73. React ͷֶͼํ • ެࣜυΩϡϝϯτΛಡΉͷ͕Φεεϝ • https://ja.react.dev/learn • ஸೡʹ৭ʑͳ͜ͱ͕ॻ͍ͯ͋ΔͷͰɺօҰ౓͸ಡΜͰཉ͠ ͍ʂ ٕҭCAMPΞΧσϛΞ 73
74. ඪ४Խʹ͍ͭͯ (5min) ٕҭCAMPΞΧσϛΞ 74
75. ඪ४Խʹ͍ͭͯ ϒϥ΢βͰಈ͘ݴޠ΍ API ͳͲ͸ͦΕͧΕҎԼͷΑ͏ͳ࢓༷Ͱඪ४Խ͞Εͯ·͢ɻ ඪ४Խஂମ ࡦఆ͍ͯ͠Δ࢓༷ WHATWG HTML Living Standard DOM Living Standard Fetch Living Standard W3C CSS Specifications WCAG TC39 ECMAScript Internationalization API IETF RFC xxx ٕҭCAMPΞΧσϛΞ 75
76. ͜͏ͨ͠࢓༷Λ஌Δ͜ͱ͸ॏཁ • API ͷਖ਼͍͠ৼΔ෣͍Λఆ͍ٛͯ͠Δͷ͸࢓༷ • ੈͷதʹެ։͞Ε͍ͯΔ৘ใ͕਺ଟ͋͘Δ͕... • ͦͷ৘ใͷਖ਼͠͞Λ࠷ऴతʹอূ͢ΔͨΊͷ৘ใݯ͕࢓༷ • ྫ͑͹ JavaScript ΍ CSS ͳͲͷৼΔ෣͍͕ϒϥ΢βؒͰҟͳΔ৔߹... • ͦͷ࣌ʹਖ਼͠͞Λอূͯ͘͠ΕΔͷ͸࢓༷Ͱ͋Δ • ࣮ࡍɺ։ൃΛͯ͠Δͱ࢓༷ͱϒϥ΢βͷࠩҟʹૺ۰͢Δ͜ͱ΋ 7 7 ΢Σϒϒϥ΢βʹόάใࠂΛ͢Δͱ͖ʹ΍Δ͜ͱ - ͺ͚ͨ͢೔ه ٕҭCAMPΞΧσϛΞ 76
77. ECMAScript ʹ͍ͭͯ • JavaScript ͷඪ४࢓༷͸ ECMAScript ͱݺ͹ΕΔ • Ecma International8ͷதͷ Technical Committee 39ʢTC39ʣͱ͍͏ٕज़ҕһձʹΑΓࡦఆ • ݱࡏͷ࢓༷͸https://github.com/tc39/ecma262 • ৗʹ࠷৽൛͕ެ։͞Εଓ͚ͯΔ • ͜͏͍͏ܗࣜΛ Living Standard ͱݺͿ • ຖ೥ 6 ݄ࠒʹ ECMAScript 2021 ͷΑ͏ͳλά͕ଧͨΕΔ • όʔδϣϯ൪߸͕෇༩ͨ͠΋ͷ΋ެ։͞ΕΔ 8 Ecma International ͸ C#ͳͲͷඪ४Խ࡞ۀ΋ߦ͍ͬͯΔ ٕҭCAMPΞΧσϛΞ 77
78. ECMAScript ͷ Stage • ECMAScript ʹ͸ࣗ༝ʹఏҊ(proposal)Λग़ͤΔ • GitHub ্Ͱ proposal ͕ެ։͞ΕΔ • issueɺPRɺTC39 ͷϛʔςΟϯάͳͲͰͷٞ࿦Λܦͯɺ Stage ্͕͕Δ 9 • Stage 4 ʹͳΔͱ࢓༷ʹऔΓࠐ·ΕΔ 9 ੹೚ऀͰ͋ΔνϟϯϐΦϯͷεςʔδΛਐΊ͍ͨͱ͍͏ҙࢥ΋ඞཁ ٕҭCAMPΞΧσϛΞ 78
79. Stage ͷৄࡉ https://jsprimer.net/basic/ecmascript/ ΑΓҾ༻ɾҰ෦վมɻ εςʔδ εςʔδͷ֓ཁ 0 ΞΠσΞͷஈ֊ 1 ػೳఏҊͷஈ֊ 2 ػೳͷ࢓༷ॻυϥϑτΛ࡞੒ͨ͠ঢ়ଶ 2.7 ࢓༷͕͋Δఔ౓ݻ·ͬͯͯɺ࣮૷લʹϓϩτλΠϓͳͲΛ࡞ ࣮ͬͯݧ͢Δஈ֊ 3 ࢓༷ͱͯ͠͸׬੒͓ͯ͠Γɺϒϥ΢βͷ࣮૷΍ϑΟʔυόο ΫΛٻΊΔஈ֊ 4 ࢓༷ࡦఆ͕׬ྃ͠ɺ2 ͭҎ্ͷ࣮૷͕ଘࡏ͍ͯ͠Δঢ়ଶ ٕҭCAMPΞΧσϛΞ 79
80. ECMAScript ͷ࢓༷ͱ࣮૷ • Stage 4 ʹͳΔલʹɺϒϥ΢βͳͲʹ࣮૷͞ΕΔ • ࣮૷্ͷࠔ೉͞ɺ࢖༻্΍࢓༷ͷ໰୊ͳͲΛ֬ೝ͢ΔͨΊ • ͦͷաఔͰ࢓༷ʹϑΟʔυόοΫ͕Ͱ͖ͨΓɺ༗༻ੑΛࣔͤΔ • Stage 4 ʹͳΔલʹɺpolyfill ΍ Babel ʹΑΔτϥϯεύΠϧ͕α ϙʔτ͞ΕΔ͜ͱ΋ • ϒϥ΢βʹ࣮૷͢ΔΑΓલʹɺϢʔβʹࢼͯ͠΋Β͑Δ ٕҭCAMPΞΧσϛΞ 80
81. ECMAScript ͸શ͕ͯ Open • ୭Ͱ΋ϓϩϙʔβϧΛग़ͤΔ͠ɺಡΊΔ͠ɺٞ࿦Ͱ͖Δ • ڵຯͷ͋ΔఏҊ͕͋ͬͨΒ೷͍ͨΓɺ࢖ͬͯΈΑ͏ • ϑΟʔυόοΫ͢Ε͹ɺJavaScript ΛΑΓྑ͘Ͱ͖Δ 10 10 ECMAScript ͷϓϩϙʔβϧ͸ଟ͘ͷ৔߹ɺͦͷఏҊ͕ʮͲͷΑ͏ͳϞνϕʔγϣϯ͕͋Δͷ͔ʯɺʮͲͷΑ͏ ͳ໰୊Λղܾ͢Δͷ͔ʯɺʮͲͷΑ͏ͳϢʔεέʔε͕͋Δͷ͔ʯͳͲ͕ه͞Ε͍ͯΔͷͰɺͦͷ༗༻ੑͳͲΛࣔ ͢͜ͱ΋ߩݙʹܨ͕Γ·͢ɻ ٕҭCAMPΞΧσϛΞ 81
82. JavaScript API Λࡦఆ͢Δ࢓༷ ࣮͸ɺJavaScript ͷશ͕ͯ ECMAScript Ͱࡦఆ͞ΕͯΔ༁Ͱ͸ແ͍Ͱ͢ɻ ࢓༷ ࡦఆ͍ͯ͠Δ಺༰ ECMAScript (TC39) JavaScript ͷߏจ΍جຊతͳ API DOM Living Standard (WHATWG) document.querySelector ͳͲͷ DOM API Fetch Living Standard (WHATWG) fetch API Internationalization API (TC39) Intl.DateTimeFormat ͳͲͷࠃࡍԽ API ٕҭCAMPΞΧσϛΞ 82
83. ϒϥ΢βϕϯμͱ WHATWG ࢓༷ • Google ͸ HTML ΍ DOM ʹؔΘΔ API11ͷఏҊΛ਺ଟ͘ߦͬͯΔ • Chrome ʹ͸औΓࠐ·ΕΔ͕ɺApple ΍ Moziila ͷ൓ରʹΑΓɺඪ४Խ͞Εͳ͍͜ͱ΋ • Chrome ͷ࢓༷τϥοΧʔ: Chrome Platform Status • Apple ΍ Mozilla ͦΕͧΕ͔Βཱ৔Λද໌͢Δ΢ΣϒαΠτ͕͋Δ • Mozilla Specification Positions • Standards Positions | Webkit • W3C ಺ͷ Web Incubator Community GroupͰ༷ʑͳఏҊ͕࡞੒ɾٞ࿦͞Ε͍ͯΔ 11 https://scrapbox.io/pastak-pub/໘ന WebAPI100 ࿈ൃ Ͱ৭ʑ঺հ͍ͯ͠·͢ ٕҭCAMPΞΧσϛΞ 83
84. Ϗϧυπʔϧʹ͍ͭͯ (5min) ٕҭCAMPΞΧσϛΞ 84
85. Ϗϧυπʔϧʹ͍ͭͯ • TypeScript ͕ͦͷ··࣮ߦ͞ΕΔ͜ͱ͸গͳ͍ • ࠷దԽͳͲͷ༷ʑͳ౎߹ʹΑΓɺେ఍͸ίʔυΛม׵͔ͯ͠Β ࣮ߦ͢Δ • ͦͷม׵ʹ࢖ΘΕΔπʔϧΛʮϏϧυπʔϧʯͱݺͿ ٕҭCAMPΞΧσϛΞ 85
86. ୅දతͳϏϧυπʔϧ ᶃ • .ts => .js ΁ม׵͢Δπʔϧ • .ts ͸ JavaScript ϥϯλΠϜͰ௚઀࣮ߦͰ͖ͳ͍ͷͰɺม׵͕ඞཁ • tsc, swc, esbuild ͳͲ 12 • ݹ͍ ECMAScript όʔδϣϯ΁ม׵ (downlevel) ͢Δπʔϧ • ݹ͍ϒϥ΢βͳͲΛαϙʔτ͢ΔͨΊʹඞཁ • tsc, babel, swc, esbuild ͳͲ 12 Node.js Ͱ͸࠷ۙʹͳͬͯม׵ͤͣͱ΋࣮ߦՄೳʹͳΓ·ͨ͠: https://nodejs.org/api/typescript.html ٕҭCAMPΞΧσϛΞ 86
87. ୅දతͳϏϧυπʔϧ ᶄ • JavaScript ϑΝΠϧΛ݁߹͢Δπʔϧ (bundler) • ϖʔδΞΫηε௚ޙͷωοτϫʔΫϦΫΤετͷ਺ΛݮΒͨ͢Ίʹඞཁ • webpack, rollup ͳͲ • CSS ΍ը૾ϑΝΠϧͳͲ΋ bundle Ͱ͖Δ • JavaScript ϑΝΠϧΛѹॖ͢Δπʔϧ (minifier) • ωοτϫʔΫసૹྔΛݮΒͨ͢Ίʹඞཁ • terser ͳͲ ٕҭCAMPΞΧσϛΞ 87
88. ୅දతͳϏϧυπʔϧ ᶅ • ౷߹తͳϏϧυπʔϧ • ্هͷػೳΛ·ͱΊͯఏڙ͢Δπʔϧ • next build/next dev, Vite ͳͲ • ಺෦తʹ͸ swc ΍ terser ͳͲΛ࢖ͬͯΔ • جຊతʹ͸ɺ͜ΕΛ࢖͏ͱྑ͍ ٕҭCAMPΞΧσϛΞ 88
89. ౷߹తͳϏϧυπʔϧʹඋΘͬͯΔػೳ ࣮͸ଞʹ΋৭ʑͳػೳ͕උΘͬͯ·͢ɻ • Watch Ϗϧυ • ϑΝΠϧͷมߋΛ؂ࢹͯ͠ɺมߋ͕͋ͬͨΒࣗಈͰϦϏϧυ͢Δ • ։ൃαʔόʔ • localhost:3000 ͳͲͰ։ൃதͷΞϓϦέʔγϣϯΛ഑৴ͯ͘͠ΕΔ • Hot Module Replacement (HMR) • ϦϏϧυ݁ՌΛϒϥ΢βʹ։͍͍ͯΔϖʔδʹɺϦϩʔυͳ͠Ͱ൓ө͢Δ13 13 ಺෦తʹ͸ɺWebSocket Λ࢖ͬͯϦϏϧυ݁ՌΛϒϥ΢βʹૹ৴ͯ͠ɺϒϥ΢βଆͰͦͷ൓өΛߦͬͯ·͢ɻΑ Γৄ͍͠࢓૊Έ͸ https://qiita.com/haradakunihiko/items/9840f1ea2ffa0ee0874d Λࢀর͍ͯͩ͘͠͞ɻ ٕҭCAMPΞΧσϛΞ 89
90. Web ϑϨʔϜϫʔΫʹ͍ͭͯ • Web ϑϨʔϜϫʔΫͱݺ͹ΕΔ΋ͷ΋͋Δ • Next.js, Remix, Nuxt.js, Astro, ... • ϑϩϯτΤϯυ։ൃΛ͙͢ʹ࢝ΊΒΕΔΑ͏ɺ৭ʑ૊Έࠐ·Ε ͯΔ ٕҭCAMPΞΧσϛΞ 90
91. Web ϑϨʔϜϫʔΫ͕૊ΈࠐΜͰΔ΋ͷ • Ϗϧυπʔϧͱͦͷਪ঑ઃఆ • ͍͍ײ͡ͷઃఆ͕૊Έࠐ·Εͯͯɺ΄΅ઃఆෆཁͰ࢖͑Δ • ϧʔλʔ • ιϑτφϏήʔγϣϯ΍ File-based routing ͳͲͷػೳΛఏڙ • αʔόʔαΠυϨϯμϦϯά (SSR) • Node.js αʔόʔ্ͰίϯϙʔωϯτΛϨϯμʔ͔ͯ͠Β HTML Λฦٕ͢ज़ • SEO ΍ॳճදࣔͷߴ଎Խʹد༩͢Δ • ςετϥϯφʔ ٕҭCAMPΞΧσϛΞ 91
92. ͲΕΛ࢖͑͹ྑ͍͔ ࡞Γ͍ͨ΋ͷͷཁ݅ʹԠͯ͡ద੾ͳ΋ͷΛબͼ·͠ΐ͏ɻ • React ࢖ͬͯ SSR ΋͍ͨ͠ • Next.js Λ࢖͏ • React ࢖͏͚Ͳ SSR ͸ෆཁͰɺSEO ΋ؾʹ͠ͳ͍ • Vite + React Λ࢖͏ • Node.js ޲͚ϥΠϒϥϦΛ࡞Γ͍ͨ • tsc ͚ͩͰे෼ • .js ΛωοτϫʔΫܦ༝Ͱऔಘ͠ͳ͍ͷͰɺbundler/minifier ͸ෆཁ ͦΕͧΕͷπʔϧͷ໾ׂ΍໨తΛ஌͍ͬͯΕ͹ɺࣗͣͱ෼͔Δ͸ͣͰ͢ɻ ٕҭCAMPΞΧσϛΞ 92
93. ͓ർΕ͞·Ͱͨ͠ • JavaScript/TypeScript/React ʹ͍ͭͯͬ͟ͱ঺հ͠·ͨ͠ • ͜Ε͚ͩͰ׬ᘳʹཧղͨ͠ʂͱͳΒͳ͍ͱࢥ͍·͕͢... • ։ൃʹೖΔͨΊɾֶͿͨΊͷ଍͕͔Γʹͳͬͨ͸ͣ • JavaScript ΍ϑϩϯτΤϯυͷੈք͸ߋʹ޿͕͍ͬͯ·͢ • ϒϥ΢βΛհͯ͠ɺ͜͜·Ͱଟ͘ͷϢʔβͷ໨ʹ৮ΕΔ෼໺͸தʑ͋Γ ·ͤΜ • ੋඇϑϩϯτΤϯυͷੈքΛָ͠ΜͰ͍ͩ͘͞ ٕҭCAMPΞΧσϛΞ 93
94. ٕҭCAMPΞΧσϛΞ 94