Slide 1

Slide 1 text

60෼ͰֶͿ࠷৽WebϑϩϯτΤϯυ 2026-04-16 id:mizdra ٕҭCAMPΞΧσϛΞ 1

Slide 2

Slide 2 text

ࣗݾ঺հ • mizdra (ΈͣͲΒ) • Πϯλʔωοτେ޷͖ • גࣜձࣾ͸ͯͳ • ϑϩϯτΤϯυΤΩεύʔτ • ࣾ಺ͷϑϩϯτΤϯυܒൃ׆ಈ ٕҭCAMPΞΧσϛΞ 2

Slide 3

Slide 3 text

ߨٛςʔϚ͸ʮWeb ϑϩϯτΤϯυʯ • Web ։ൃʹ͓͍ͯ೥ʑॏཁ౓Λ૿͍ͯ͠Δ • ͜ͷߨٛͰ͸ɺ60 ෼Ͱߴ଎ೖ໳͢Δ • ։ൃʹඞਢͷ஌ࣝΛԡ͑ͯ͞΋Β͏ ٕҭCAMPΞΧσϛΞ 3

Slide 4

Slide 4 text

ඞཁͳ஌ࣝͷҰྫ • Webϖʔδ/ϒϥ΢β/αʔόͷؔ܎ੑɾ໾ׂ • HTML/CSS/JavaScript (ݴޠ) • React, Next.js (View ϥΠϒϥϦ/ϑϨʔϜϫʔΫ) • XSS, CSP (ηΩϡϦςΟ) • Web Vitals (ύϑΥʔϚϯε) • ΞΫηγϏϦςΟ • bundler, linter, formatter, test runner (։ൃπʔϧ) ٕҭCAMPΞΧσϛΞ 4

Slide 5

Slide 5 text

ϑϩϯτΤϯυ΁ͷΑ͋͘Δҹ৅ • ʮ֮͑Δ͜ͱ͕ଟ͍ʯʮٕज़ͷྲྀΕ͕ૣ͍ʯ • ϑϩϯτΤϯυ͸Ϣʔβʹۙͯ͘ɺίʔσΟϯάਓޱ͕ଟ͍ྖҬ • ͦͷͨΊɺසൟʹ৽ٕज़͕ग़ͯ͘Δ 1 • ৽৘ใΛશ෦௥͍ͬͯͯ͸େม • ޲͖߹͍ํΛม͑Δ΂͖ • ྲྀߦΛ௥͏ͷ΋ྑ͍͚Ͳ...ͦͷٕज़͕ొ৔ͨ͠എܠΛߟ͑Α͏ • ϥΠϒϥϦͷ࢖͍ํΛ֮͑Δͷ΋ྑ͍͚Ͳ...௕͘௨༻͢Δ஌ࣝ΋਎ʹ͚ͭΑ͏ 1 ॾઆ͋Γ·͢ɻ ٕҭCAMPΞΧσϛΞ 5

Slide 6

Slide 6 text

͜ͷߨٛͷΰʔϧ • ϑϩϯτΤϯυͷ։ൃͰඞਢͷ஌ࣝΛԡ͑͞Δ • ͦΕͧΕͷٕज़͕ొ৔ͨ͠എܠΛ஌Δ • ௕͘௨༻͢Δ஌ࣝΛ਎ʹ͚ͭΔ ߨ͕ٛऴΘͬͨޙ΋ɺWebϑϩϯτΤϯυΛֶ΂ΔΑ͏ͳखॿ͚ ʹͳΕ͹ྑ͍ͱࢥ͍ͬͯ·͢ɻ ٕҭCAMPΞΧσϛΞ 6

Slide 7

Slide 7 text

JavaScript ʹ͍ͭͯ(15min) ٕҭCAMPΞΧσϛΞ 7

Slide 8

Slide 8 text

JavaScript ʹ͍ͭͯ • ϒϥ΢β্Ͱಈ࡞͢Δϓϩάϥϛϯάݴޠ • ϑϩϯτΤϯυͰͷ։ൃʹ࢖ΘΕΔ • ม਺એݴɾؔ਺ɾ഑ྻͳͲͷجຊߏจ͸஌͍ͬͯΔલఏͰਐΊ ·͢ • ίʔυΛಡΈॻ͖͢Δࡍʹ஌͓ͬͯ͘΂͖ JavaScript ͷ֓೦Λ ঺հ͠·͢ ٕҭCAMPΞΧσϛΞ 8

Slide 9

Slide 9 text

ม਺એݴͱϓϦϛςΟϒܕ // ม਺એݴ (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

Slide 10

Slide 10 text

ΦϒδΣΫτɾ഑ྻ const user = { id: "hatena", age: 20 } user.id // "1234" const arr = [1, 2, 3] arr[0] // 1 ٕҭCAMPΞΧσϛΞ 10

Slide 11

Slide 11 text

ؔ਺ // function એݴ function add(a, b) { return a + b } // Arrow Function (؆ܿʹؔ਺Λॻ͘ߏจ) const add = (a, b) => a + b const hello = name => `Hello, ${name}` ٕҭCAMPΞΧσϛΞ 11

Slide 12

Slide 12 text

Nullish coalescing operator ?? • a ?? b ͷΑ͏ʹͯ͠࢖͏ • ࠨล͕ undefined or null ͷ࣌ʹӈลͷ஋Λฦ͢ • ͦΕҎ֎ͳΒࠨลͷ஋Λฦ͢ function greet(name) { return `Hello, ${name ?? "mizdra"}!` } σϑΥϧτ஋ʹ fallback ͤ͞ΔͷʹΑ͘࢖͏ɻ ٕҭCAMPΞΧσϛΞ 12

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Pending ॳظঢ়ଶ ੒ޭ (resolve) ࣦഊ (reject) Fulfilled ඇಉظॲཧ͕੒ޭ Rejected ඇಉظॲཧ͕ࣦഊ Promise • ඇಉظॲཧͷ݁ՌΛද͢ΦϒδΣΫτ 2 • 3ͭͷঢ়ଶΛදݱͰ͖Δ • Pending: ॳظঢ়ଶɻ੒ޭ΋ࣦഊ΋͍ͯ͠ͳ ͍ɻ • Fulfilled: ඇಉظॲཧ͕੒ޭͨ͠ • Rejected: ඇಉظॲཧ͕ࣦഊͨ͠ • Pending => Fulfilled or Rejected ͷॱͰঢ়ଶ͕ มԽ 2 Promise ͸ඇಉظॲཧΛѻ͏ͨΊͷΦϒδΣΫτͰɺJavaScript ͷඇಉ ظॲཧͷجຊతͳ࢓૊ΈͰ͢ɻৄࡉ͸෇࿥ʮPromise ʹ͍ͭͯʯΛࢀর ͍ͯͩ͘͠͞ɻ ٕҭCAMPΞΧσϛΞ 15

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

ίʔϧόοΫͷొ࿥ ඇಉظॲཧ͕׬ྃͨ࣌͠ʹݺ͹ΕΔίʔϧόοΫΛొ࿥Ͱ͖Δɻ sleep(1000) // `Fulfilled` ʹͳͬͨ࣌ʹݺ͹ΕΔίʔϧόοΫΛొ࿥ .then((ms) => console.log(`sleep: ${ms}ms`)) // `Rejected` ʹͳͬͨ࣌ʹݺ͹ΕΔίʔϧόοΫΛొ࿥ .catch((e) => console.error(e)) ٕҭCAMPΞΧσϛΞ 17

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

async/await • ඇಉظॲཧΛ؆ܿʹॻͨ͘Ίͷߏจ • then ΍ catch Λ࢖ΘͣʹɺಉظతͳίʔυͬΆ͘ॻ͚Δ ٕҭCAMPΞΧσϛΞ 19

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

async/await • async function ࣗମ΋҉໧తʹ Promise Λฦ͢ • ؔ਺ͷฦΓ஋ʹରͯ͠ɺthen Λݺͼग़ͤΔ getUser(1) .then(console.log) // {id: 1, name: 'hatena'} .catch(console.error) ٕҭCAMPΞΧσϛΞ 21

Slide 22

Slide 22 text

ECMAScript Modules (ES Modules) • ϓϩάϥϜΛϞδϡʔϧͱ͍͏୯Ґʹ෼ׂ͢Δػೳ • 1 ϑΝΠϧ == 1 Ϟδϡʔϧ • είʔϓ͸Ϟδϡʔϧ͝ͱ • ؔ਺΍ม਺ͳͲΛ import/export Ͱ͖Δ ٕҭCAMPΞΧσϛΞ 22

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

TypeScript ʹ͍ͭͯ(10min) ٕҭCAMPΞΧσϛΞ 25

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

ͳͥ TypeScript ͕ඞཁ͔ʁ • ෆ۩߹ʹؾ෇͖΍͘͢͢ΔͨΊ • ܕͷؒҧ͍Λࣄલʹݕ஌Ͱ͖Δ • ΤσΟλͷิॿػೳΛ࢖͑ΔΑ͏ʹ͢ΔͨΊ • ίʔυิ׬ɺఆٛݩ΁ͷҠಈɺϦωʔϜͳͲ ٕҭCAMPΞΧσϛΞ 27

Slide 28

Slide 28 text

tsc: TypeScript compiler • TypeScript ݴޠͷͨΊͷίϯύΠϥ • ओͳػೳ • ܕνΣοΫΛ͢Δ • TypeScript Ͱॻ͔ΕͨίʔυΛ JavaScript ʹม׵͢Δ • ม׵ͱݴͬͯ΋ɺܕΞϊςʔγϣϯ౳ͷ࡟আ͘Β͍ ٕҭCAMPΞΧσϛΞ 28

Slide 29

Slide 29 text

ܕએݴ෦෼ΛಡΊΔΑ͏ʹͳΖ͏ TypeScript ͷ୅දతͳදݱͳͲΛ঺հ͍͖ͯ͠·͢ɻ ٕҭCAMPΞΧσϛΞ 29

Slide 30

Slide 30 text

ม਺એݴ࣌ͷܕΞϊςʔγϣϯ // JavaScriptͷ৔߹ const a = 'hello'; // TypeScriptͷ৔߹ const a: string = 'hello'; ٕҭCAMPΞΧσϛΞ 30

Slide 31

Slide 31 text

ϓϦϛςΟϒܕɾϦςϥϧܕ 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

Slide 32

Slide 32 text

഑ྻܕɾΦϒδΣΫτܕ const arr: string[] = ["hello", "world"] const arr2: Array = [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

Slide 33

Slide 33 text

ܕͷਪ࿦ • TypeScript ͸ίʔυ͔ΒܕΛ༧ଌͯ͠࠾༻͢Δ (ਪ࿦) • Ͱ͖Δ͚ͩਪ࿦ͤ͞ɺܕΞϊςʔγϣϯ͸লུ͢Δͷ͕Ұൠత const a = 10 // number const b = false // boolean const c = ["hello", "world"] // string[] ٕҭCAMPΞΧσϛΞ 33

Slide 34

Slide 34 text

type ܕʹΤΠϦΞεΛ෇͚ΒΕΔɻ type Person = { name: string age: number } type Team = Person[] ٕҭCAMPΞΧσϛΞ 34

Slide 35

Slide 35 text

Union Type (߹ซܕ) ෳ਺ͷܕͷ͍ͣΕ͔Λຬͨ͢ɻ type Color = "red" | "green" | "blue" | "yellow" | "purple" const c: Color = "red" const d: Color = "black" // Type Error ٕҭCAMPΞΧσϛΞ 35

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

as Λ༻͍ͨܕΞαʔγϣϯ(Type Assertion) • ਪ࿦͞ΕͨܕΛ্ॻ͖Ͱ͖Δߏจ • ਪ࿦͞Εͨܕ͕ظ଴௨ΓͰͳ͍৔߹ʹ࢖͏ // ຊདྷ͸ `Element | null` ͕ͩɺ`HTMLTextAreaElement` ʹ্ॻ͖͢Δ const editor = document.querySelector(".editor") as HTMLTextAreaElement ٕҭCAMPΞΧσϛΞ 39

Slide 40

Slide 40 text

஫ҙ: as Ͱ͸࣮ߦ࣌ͷڍಈ͸มΘΒͳ͍ • ͋͘·Ͱ TypeScript ίϯύΠϥ಺Ͱ࢖ΘΕΔܕ͕มΘΔ͚ͩ • "str" as number ͱॻ͍ͯ΋ɺจࣈྻ͔Β਺஋ʹม׵͞Εͳ͍ const a = "1" as number console.log(a) // "1" console.log(typeof a) // "string" ٕҭCAMPΞΧσϛΞ 40

Slide 41

Slide 41 text

any ͱ unknown any • ͲΜͳ஋Ͱ΋ೖΕΒΕΔܕ -ϓϩύςΟΞΫηε͕ܕΤ ϥʔʹͳΒͳ͍ let val: any = { foo: 1 } val.foo // ΤϥʔʹͳΒͳ͍ val.bar // ΤϥʔʹͳΒͳ͍ unknown • ͲΜͳ஋Ͱ΋ೖΕΒΕΔܕ • ϓϩύςΟΞΫηε͕ܕΤ ϥʔʹͳΔ const val: unknown = { foo: 1 } val.foo // ΤϥʔʹͳΔ val.bar // ΤϥʔʹͳΔ ٕҭCAMPΞΧσϛΞ 41

Slide 42

Slide 42 text

Ͳ͏͍͏࣌ʹ࢖͏? ֎෦ 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

Slide 43

Slide 43 text

ؔ਺ 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

Slide 44

Slide 44 text

ܕҾ਺(Generics) • ܕΛҾ਺ͱͯ͠౉ͤΔػೳ 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") ٕҭCAMPΞΧσϛΞ 44

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

React ʹ͍ͭͯ(20min) ٕҭCAMPΞΧσϛΞ 46

Slide 47

Slide 47 text

React ͱ͸ • ϢʔβΠϯλʔϑΣʔε (UI) Λߏங͢ΔͨΊͷϥΠϒϥϦ • UI Λؔ਺Ͱఆٛ͢Δ • JSX ͱ͍͏ HTML-like ͳ֦ுߏจΛ࢖͏ ٕҭCAMPΞΧσϛΞ 47

Slide 48

Slide 48 text

ίʔυྫ const Greeting = () => { const [name, setName] = useState('') return (
setName(e.target.value)} />

͜Μʹͪ͸ɺ{name} ͞Μ!

) } ٕҭCAMPΞΧσϛΞ 48

Slide 49

Slide 49 text

React ͷԿ͕خ͍͠? React Λ࢖Θͳ͔ͬͨ࣌ͱൺֱ͢ΔͱΑ͘Θ͔Δɻ ٕҭCAMPΞΧσϛΞ 49

Slide 50

Slide 50 text

React Λ࢖Θͳ͔ͬͨ࣌

͜Μʹͪ͸ɺ ͞Μ!

document.getElementById('name').addEventListener('change', (e) => { document.getElementById('display').textContent = e.target.value }) ٕҭCAMPΞΧσϛΞ 50

Slide 51

Slide 51 text

React Λ࢖Θͳ͔ͬͨ࣌ • DOM API Ͱૢ࡞͢Δ • document.getElementById ͰཁૉΛऔͬͯ͘Δ • element.addEventListener ͰΠϕϯτϦεφʔΛొ࿥ • ςΩετͷߋ৽͸ element.textContent = "ߋ৽ޙͷςΩετ" • ϚʔΫΞοϓ (HTML෦෼) ͱϩδοΫ (JavaScript෦෼) ͕཭Εͯ ͍Δ ٕҭCAMPΞΧσϛΞ 51

Slide 52

Slide 52 text

React Λ࢖ͬͨ࣌ const Greeting = () => { const [name, setName] = useState('') return (
setName(e.target.value)} />

͜Μʹͪ͸ɺ{name} ͞Μ!

) } ٕҭCAMPΞΧσϛΞ 52

Slide 53

Slide 53 text

React Λ࢖ͬͨ࣌ • DOM API Λ࢖Θͣ؆ܿʹॻ͚Δ 3 • ΠϕϯτϦεφʔ͸ onChange={(e) => ...} Ͱొ࿥ • ςΩετͷߋ৽͸ {name} ͱॻ͚ͩ͘ • ϚʔΫΞοϓͱϩδοΫΛۙ͘ʹஔ͚Δ • ϝϯςφϯε͠΍͍͢ 3 Ϣʔβ͕௚઀ DOM API Λ࢖ΘͣʹࡁΉ͚ͩͰɺReact ಺෦Ͱ͸ DOM API ͕࢖ΘΕ͍ͯΔɻ ٕҭCAMPΞΧσϛΞ 53

Slide 54

Slide 54 text

Virtual DOM (Ծ૝ DOM) • state ͕มΘΔͱ React ͕৽͍͠ Virtual DOM Λੜ੒ • લճͱͷࠩ෼Λܭࢉ͠ɺมΘͬͨॴ͚࣮ͩࡍͷ DOM ʹ൓ө ٕҭCAMPΞΧσϛΞ 54

Slide 55

Slide 55 text

લճͷ 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

Slide 56

Slide 56 text

React ͷॻ͖ํɾಡΈํ ٕҭCAMPΞΧσϛΞ 56

Slide 57

Slide 57 text

JSX • JavaScript ʹ HTML ͬΆ͍ه๏Λ௥Ճ֦ͨ͠ுߏจ

My name is Clementine!

• HTML ͷଐੑ໊Ͱ͸ͳ͘ɺΩϟϝϧέʔεͷ໋໊نଇΛ࢖༻ 4 • class ͸ className ͱॻ͘ • class ͕ JavaScript ͷ༧໿ޠͰ͋ΔͨΊɺผͷ໊લʹͳͬͯΔ 5 5 https://github.com/facebook/react/issues/13525#issuecomment-671892643 4 aria-* ΍ data-* ଐੑ͸ྫ֎Ͱ͢ɻ ٕҭCAMPΞΧσϛΞ 57

Slide 58

Slide 58 text

ίϯϙʔωϯτ • UI Λߏ੒͢Δ෦඼ͷ͜ͱ • ϘλϯɺϑΥʔϜɺϔομʔͳͲ • ؔ਺Λ࢖ͬͯఆٛ͢Δ const Button = ({ label }) => { return {label} } ٕҭCAMPΞΧσϛΞ 58

Slide 59

Slide 59 text

ίϯϙʔωϯτΛ૊Έ߹Θͤͯ UI Λߏங͢Δ • ίϯϙʔωϯτ͸૊Έ߹ΘͤΒΕΔ • খ͍͞ίϯϙʔωϯτΛ࢖ͬͯɺΑΓେ͖ͳίϯϙʔωϯτΛ࡞͍ͬͯ͘ const SignupForm = () => { return (

ొ࿥ϑΥʔϜ

) } ٕҭCAMPΞΧσϛΞ 59

Slide 60

Slide 60 text

Props ͱ State • ίϯϙʔωϯτʹ͸஋Λ࣋ͭํ๏͕େ͖͘ 2 ͭ͋Δ • ؔ਺ͷҾ਺ͱͯ͠ड͚औΔPropsͱ಺෦ঢ়ଶΛอ࣋͢ΔState ٕҭCAMPΞΧσϛΞ 60

Slide 61

Slide 61 text

Props Λ౉͢/ड͚औΔ • ड͚औΔଆ͸ؔ਺ͷୈ 1 Ҿ਺ͰΦϒδΣΫτͱͯ͠ड͚औΔ type Props = { name: string } const Welcome = ({ name }: Props) => { return

Welcome {name}

} • ౉͢ଆ(਌ଆ)͸ prop=஋ ͱॻ͘ ٕҭCAMPΞΧσϛΞ 61

Slide 62

Slide 62 text

useState • ίϯϙʔωϯτʹঢ়ଶΛ࣋ ͨͤΔͨΊͷ API const Counter = () => { const [count, setCount] = useState(0) const increaseCount = () => setCount((prevCount) => prevCount + 1) return (
Χ΢ϯτ: {count} Χ΢ϯτ
) } ٕҭCAMPΞΧσϛΞ 62

Slide 63

Slide 63 text

Hooks • useState ͸ React ͕ఏڙ͢ΔHookͷҰͭ • Hook ͱ͸ • ίϯϙʔωϯτͷதͰঢ়ଶ΍ϥΠϑαΠΫϧͳͲػೳΛѻ͏ ͨΊͷ࢓૊Έ • খ೉͍͠ݴ͍ํΛ͢Δͱɺ෭࡞༻Λѻ͏ͨΊͷ࢓૊Έ ٕҭCAMPΞΧσϛΞ 63

Slide 64

Slide 64 text

Hooks ͷᎄ ϑοΫͷϧʔϧ – React • ໊લ͸ use ͔Β࢝ΊΔ • ίϯϙʔωϯτؔ਺ͷτοϓϨϕϧͰݺͿ • if ͷதͰݺ͹ͳ͍ • early return ͢ΔલʹඞͣݺͿ ٕҭCAMPΞΧσϛΞ 64

Slide 65

Slide 65 text

୅දతͳ૊ΈࠐΈ Hooks ͷ঺հ ٕҭCAMPΞΧσϛΞ 65

Slide 66

Slide 66 text

useState • useState(ॳظ஋) ͱݺͼग़ͯ͠࢖͏ const Counter = () => { const [count, setCount] = useState(0) // count ͸ݱࡏͷ஋Λද͢ม਺ // setCount(1) ͱݺͿͱ count ͕ 1 ʹͳΔ } • setter ΛݺͿͱ಺෦ঢ়ଶ͕ߋ৽͞Εͨ͜ͱ͕ React ʹ௨஌͞ΕΔ • Ծ૝ DOM ͷ࠶ੜ੒ 6ɺൺֱɺ࣮ DOM ͷߋ৽͕ߦΘΕΔ 6 React ʹΑͬͯؔ਺ίϯϙʔωϯτࣗମ͕࠶࣮ߦ͞ΕɺͦͷฦΓ஋͕৽͍͠Ծ૝ DOM ͱͳΓ·͢ ٕҭCAMPΞΧσϛΞ 66

Slide 67

Slide 67 text

useEffect • ֎෦γεςϜʹ઀ଓ͠ɺಉظͤ͞ΔͨΊͷ Hook • ྫ͑͹ • API αʔόʔ ͔ΒσʔλΛऔಘ͢Δ • ੜͷ DOM API Λݺͼग़͢ ٕҭCAMPΞΧσϛΞ 67

Slide 68

Slide 68 text

useEffect ͷྫ const Header = ({apiHost}: { apiHost: string }) => { const [user, setUser] = useState(undefined) useEffect(() => { fetch(`${apiHost}/api/user`) .then(res => res.json()) .then(data => setUser(data)) }) return ( {user ? `${user.name} ͰϩάΠϯத` : "Loading..."} ) } ٕҭCAMPΞΧσϛΞ 68

Slide 69

Slide 69 text

useEffectͱґଘ഑ྻ • σϑΥϧτͰ͸ɺΤϑΣΫτ͸Ϩϯμʔ࣌ʹຖճ࣮ߦ͞ΕΔ • useEffect ͷୈ 2 Ҿ਺ (ґଘ഑ྻ) Λ࢖͏ͱɺෆඞཁͳ࣮ߦΛ๷͛Δ useEffect(() => { // ґଘ഑ྻͷ஋ (apiHost) ͕มΘ͚ͬͨ࣌ͩ࠶࣮ߦ͞ΕΔ fetch(`${apiHost}/api/user`) .then(res => res.json()) .then(data => setUser(data)) }, [apiHost]) ٕҭCAMPΞΧσϛΞ 69

Slide 70

Slide 70 text

ґଘ഑ྻ͸ࣗ෼ͰબͿ΋ͷͰ͸ͳ͍ • جຊతʹ͸ɺΤϑΣΫτ͔Βࢀর͞ΕͯΔ஋Λશͯґଘ഑ྻʹೖΕΔ • 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

Slide 71

Slide 71 text

useEffect ͱΫϦʔϯΞοϓ • ࣮͸ΤϑΣΫτ͔Βؔ਺ΛฦͤΔ • ΫϦʔϯΞοϓؔ਺ ͱݺ͹ΕΔ • ࣍ͷΤϑΣΫτ͕࣮ߦ͞ΕΔલʹݺ͹ΕΔ useEffect(() => { const id = setInterval(() => { console.log("tick") }, duration) return () => { clearInterval(id) // λΠϚʔΛఀࢭ } }, [duration]) ٕҭCAMPΞΧσϛΞ 71

Slide 72

Slide 72 text

ಠࣗϑοΫ(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
{status}
} ٕҭCAMPΞΧσϛΞ 72

Slide 73

Slide 73 text

React ͷֶͼํ • ެࣜυΩϡϝϯτΛಡΉͷ͕Φεεϝ • https://ja.react.dev/learn • ஸೡʹ৭ʑͳ͜ͱ͕ॻ͍ͯ͋ΔͷͰɺօҰ౓͸ಡΜͰཉ͠ ͍ʂ ٕҭCAMPΞΧσϛΞ 73

Slide 74

Slide 74 text

ඪ४Խʹ͍ͭͯ (5min) ٕҭCAMPΞΧσϛΞ 74

Slide 75

Slide 75 text

ඪ४Խʹ͍ͭͯ ϒϥ΢βͰಈ͘ݴޠ΍ API ͳͲ͸ͦΕͧΕҎԼͷΑ͏ͳ࢓༷Ͱඪ४Խ͞Εͯ·͢ɻ ඪ४Խஂମ ࡦఆ͍ͯ͠Δ࢓༷ WHATWG HTML Living Standard DOM Living Standard Fetch Living Standard W3C CSS Specifications WCAG TC39 ECMAScript Internationalization API IETF RFC xxx ٕҭCAMPΞΧσϛΞ 75

Slide 76

Slide 76 text

͜͏ͨ͠࢓༷Λ஌Δ͜ͱ͸ॏཁ • API ͷਖ਼͍͠ৼΔ෣͍Λఆ͍ٛͯ͠Δͷ͸࢓༷ • ੈͷதʹެ։͞Ε͍ͯΔ৘ใ͕਺ଟ͋͘Δ͕... • ͦͷ৘ใͷਖ਼͠͞Λ࠷ऴతʹอূ͢ΔͨΊͷ৘ใݯ͕࢓༷ • ྫ͑͹ JavaScript ΍ CSS ͳͲͷৼΔ෣͍͕ϒϥ΢βؒͰҟͳΔ৔߹... • ͦͷ࣌ʹਖ਼͠͞Λอূͯ͘͠ΕΔͷ͸࢓༷Ͱ͋Δ • ࣮ࡍɺ։ൃΛͯ͠Δͱ࢓༷ͱϒϥ΢βͷࠩҟʹૺ۰͢Δ͜ͱ΋ 7 7 ΢Σϒϒϥ΢βʹόάใࠂΛ͢Δͱ͖ʹ΍Δ͜ͱ - ͺ͚ͨ͢೔ه ٕҭCAMPΞΧσϛΞ 76

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

ECMAScript ͷ Stage • ECMAScript ʹ͸ࣗ༝ʹఏҊ(proposal)Λग़ͤΔ • GitHub ্Ͱ proposal ͕ެ։͞ΕΔ • issueɺPRɺTC39 ͷϛʔςΟϯάͳͲͰͷٞ࿦Λܦͯɺ Stage ্͕͕Δ 9 • Stage 4 ʹͳΔͱ࢓༷ʹऔΓࠐ·ΕΔ 9 ੹೚ऀͰ͋ΔνϟϯϐΦϯͷεςʔδΛਐΊ͍ͨͱ͍͏ҙࢥ΋ඞཁ ٕҭCAMPΞΧσϛΞ 78

Slide 79

Slide 79 text

Stage ͷৄࡉ https://jsprimer.net/basic/ecmascript/ ΑΓҾ༻ɾҰ෦վมɻ εςʔδ εςʔδͷ֓ཁ 0 ΞΠσΞͷஈ֊ 1 ػೳఏҊͷஈ֊ 2 ػೳͷ࢓༷ॻυϥϑτΛ࡞੒ͨ͠ঢ়ଶ 2.7 ࢓༷͕͋Δఔ౓ݻ·ͬͯͯɺ࣮૷લʹϓϩτλΠϓͳͲΛ࡞ ࣮ͬͯݧ͢Δஈ֊ 3 ࢓༷ͱͯ͠͸׬੒͓ͯ͠Γɺϒϥ΢βͷ࣮૷΍ϑΟʔυόο ΫΛٻΊΔஈ֊ 4 ࢓༷ࡦఆ͕׬ྃ͠ɺ2 ͭҎ্ͷ࣮૷͕ଘࡏ͍ͯ͠Δঢ়ଶ ٕҭCAMPΞΧσϛΞ 79

Slide 80

Slide 80 text

ECMAScript ͷ࢓༷ͱ࣮૷ • Stage 4 ʹͳΔલʹɺϒϥ΢βͳͲʹ࣮૷͞ΕΔ • ࣮૷্ͷࠔ೉͞ɺ࢖༻্΍࢓༷ͷ໰୊ͳͲΛ֬ೝ͢ΔͨΊ • ͦͷաఔͰ࢓༷ʹϑΟʔυόοΫ͕Ͱ͖ͨΓɺ༗༻ੑΛࣔͤΔ • Stage 4 ʹͳΔલʹɺpolyfill ΍ Babel ʹΑΔτϥϯεύΠϧ͕α ϙʔτ͞ΕΔ͜ͱ΋ • ϒϥ΢βʹ࣮૷͢ΔΑΓલʹɺϢʔβʹࢼͯ͠΋Β͑Δ ٕҭCAMPΞΧσϛΞ 80

Slide 81

Slide 81 text

ECMAScript ͸શ͕ͯ Open • ୭Ͱ΋ϓϩϙʔβϧΛग़ͤΔ͠ɺಡΊΔ͠ɺٞ࿦Ͱ͖Δ • ڵຯͷ͋ΔఏҊ͕͋ͬͨΒ೷͍ͨΓɺ࢖ͬͯΈΑ͏ • ϑΟʔυόοΫ͢Ε͹ɺJavaScript ΛΑΓྑ͘Ͱ͖Δ 10 10 ECMAScript ͷϓϩϙʔβϧ͸ଟ͘ͷ৔߹ɺͦͷఏҊ͕ʮͲͷΑ͏ͳϞνϕʔγϣϯ͕͋Δͷ͔ʯɺʮͲͷΑ͏ ͳ໰୊Λղܾ͢Δͷ͔ʯɺʮͲͷΑ͏ͳϢʔεέʔε͕͋Δͷ͔ʯͳͲ͕ه͞Ε͍ͯΔͷͰɺͦͷ༗༻ੑͳͲΛࣔ ͢͜ͱ΋ߩݙʹܨ͕Γ·͢ɻ ٕҭCAMPΞΧσϛΞ 81

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

ϒϥ΢βϕϯμͱ 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

Slide 84

Slide 84 text

Ϗϧυπʔϧʹ͍ͭͯ (5min) ٕҭCAMPΞΧσϛΞ 84

Slide 85

Slide 85 text

Ϗϧυπʔϧʹ͍ͭͯ • TypeScript ͕ͦͷ··࣮ߦ͞ΕΔ͜ͱ͸গͳ͍ • ࠷దԽͳͲͷ༷ʑͳ౎߹ʹΑΓɺେ఍͸ίʔυΛม׵͔ͯ͠Β ࣮ߦ͢Δ • ͦͷม׵ʹ࢖ΘΕΔπʔϧΛʮϏϧυπʔϧʯͱݺͿ ٕҭCAMPΞΧσϛΞ 85

Slide 86

Slide 86 text

୅දతͳϏϧυπʔϧ ᶃ • .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

Slide 87

Slide 87 text

୅දతͳϏϧυπʔϧ ᶄ • JavaScript ϑΝΠϧΛ݁߹͢Δπʔϧ (bundler) • ϖʔδΞΫηε௚ޙͷωοτϫʔΫϦΫΤετͷ਺ΛݮΒͨ͢Ίʹඞཁ • webpack, rollup ͳͲ • CSS ΍ը૾ϑΝΠϧͳͲ΋ bundle Ͱ͖Δ • JavaScript ϑΝΠϧΛѹॖ͢Δπʔϧ (minifier) • ωοτϫʔΫసૹྔΛݮΒͨ͢Ίʹඞཁ • terser ͳͲ ٕҭCAMPΞΧσϛΞ 87

Slide 88

Slide 88 text

୅දతͳϏϧυπʔϧ ᶅ • ౷߹తͳϏϧυπʔϧ • ্هͷػೳΛ·ͱΊͯఏڙ͢Δπʔϧ • next build/next dev, Vite ͳͲ • ಺෦తʹ͸ swc ΍ terser ͳͲΛ࢖ͬͯΔ • جຊతʹ͸ɺ͜ΕΛ࢖͏ͱྑ͍ ٕҭCAMPΞΧσϛΞ 88

Slide 89

Slide 89 text

౷߹తͳϏϧυπʔϧʹඋΘͬͯΔػೳ ࣮͸ଞʹ΋৭ʑͳػೳ͕උΘͬͯ·͢ɻ • Watch Ϗϧυ • ϑΝΠϧͷมߋΛ؂ࢹͯ͠ɺมߋ͕͋ͬͨΒࣗಈͰϦϏϧυ͢Δ • ։ൃαʔόʔ • localhost:3000 ͳͲͰ։ൃதͷΞϓϦέʔγϣϯΛ഑৴ͯ͘͠ΕΔ • Hot Module Replacement (HMR) • ϦϏϧυ݁ՌΛϒϥ΢βʹ։͍͍ͯΔϖʔδʹɺϦϩʔυͳ͠Ͱ൓ө͢Δ13 13 ಺෦తʹ͸ɺWebSocket Λ࢖ͬͯϦϏϧυ݁ՌΛϒϥ΢βʹૹ৴ͯ͠ɺϒϥ΢βଆͰͦͷ൓өΛߦͬͯ·͢ɻΑ Γৄ͍͠࢓૊Έ͸ https://qiita.com/haradakunihiko/items/9840f1ea2ffa0ee0874d Λࢀর͍ͯͩ͘͠͞ɻ ٕҭCAMPΞΧσϛΞ 89

Slide 90

Slide 90 text

Web ϑϨʔϜϫʔΫʹ͍ͭͯ • Web ϑϨʔϜϫʔΫͱݺ͹ΕΔ΋ͷ΋͋Δ • Next.js, Remix, Nuxt.js, Astro, ... • ϑϩϯτΤϯυ։ൃΛ͙͢ʹ࢝ΊΒΕΔΑ͏ɺ৭ʑ૊Έࠐ·Ε ͯΔ ٕҭCAMPΞΧσϛΞ 90

Slide 91

Slide 91 text

Web ϑϨʔϜϫʔΫ͕૊ΈࠐΜͰΔ΋ͷ • Ϗϧυπʔϧͱͦͷਪ঑ઃఆ • ͍͍ײ͡ͷઃఆ͕૊Έࠐ·Εͯͯɺ΄΅ઃఆෆཁͰ࢖͑Δ • ϧʔλʔ • ιϑτφϏήʔγϣϯ΍ File-based routing ͳͲͷػೳΛఏڙ • αʔόʔαΠυϨϯμϦϯά (SSR) • Node.js αʔόʔ্ͰίϯϙʔωϯτΛϨϯμʔ͔ͯ͠Β HTML Λฦٕ͢ज़ • SEO ΍ॳճදࣔͷߴ଎Խʹد༩͢Δ • ςετϥϯφʔ ٕҭCAMPΞΧσϛΞ 91

Slide 92

Slide 92 text

ͲΕΛ࢖͑͹ྑ͍͔ ࡞Γ͍ͨ΋ͷͷཁ݅ʹԠͯ͡ద੾ͳ΋ͷΛબͼ·͠ΐ͏ɻ • React ࢖ͬͯ SSR ΋͍ͨ͠ • Next.js Λ࢖͏ • React ࢖͏͚Ͳ SSR ͸ෆཁͰɺSEO ΋ؾʹ͠ͳ͍ • Vite + React Λ࢖͏ • Node.js ޲͚ϥΠϒϥϦΛ࡞Γ͍ͨ • tsc ͚ͩͰे෼ • .js ΛωοτϫʔΫܦ༝Ͱऔಘ͠ͳ͍ͷͰɺbundler/minifier ͸ෆཁ ͦΕͧΕͷπʔϧͷ໾ׂ΍໨తΛ஌͍ͬͯΕ͹ɺࣗͣͱ෼͔Δ͸ͣͰ͢ɻ ٕҭCAMPΞΧσϛΞ 92

Slide 93

Slide 93 text

͓ർΕ͞·Ͱͨ͠ • JavaScript/TypeScript/React ʹ͍ͭͯͬ͟ͱ঺հ͠·ͨ͠ • ͜Ε͚ͩͰ׬ᘳʹཧղͨ͠ʂͱͳΒͳ͍ͱࢥ͍·͕͢... • ։ൃʹೖΔͨΊɾֶͿͨΊͷ଍͕͔Γʹͳͬͨ͸ͣ • JavaScript ΍ϑϩϯτΤϯυͷੈք͸ߋʹ޿͕͍ͬͯ·͢ • ϒϥ΢βΛհͯ͠ɺ͜͜·Ͱଟ͘ͷϢʔβͷ໨ʹ৮ΕΔ෼໺͸தʑ͋Γ ·ͤΜ • ੋඇϑϩϯτΤϯυͷੈքΛָ͠ΜͰ͍ͩ͘͞ ٕҭCAMPΞΧσϛΞ 93

Slide 94

Slide 94 text

ٕҭCAMPΞΧσϛΞ 94