Share
Embed
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.jsonanyͱͳΒͣʹܕҾͰ͞Εͨͷͱղऍ͞ΕΔ
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)} />
)
}
ٕҭCAMPΞΧσϛΞ
48
͜Μʹͪɺ{name} ͞Μ!
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)} />
)
}
ٕҭCAMPΞΧσϛΞ
52
͜Μʹͪɺ{name} ͞Μ!
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ΞΧσϛΞ 57Slide 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ΞΧσϛΞ 61Slide 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