トライデントコンピュータ専門学校 Web デザイン学科 業界研究の授業で、1,2年生の皆さんにむけてお話したスライドです。本編90分(!?)
8FCؿٗٝزؒٝسד➬✲׃ג׀궢ְֶ׃ֻ굸ץ鑧زٓ؎رٝز؝ٝؾُ٦ة㼔㷕吤噟歲灇瑔!BIPNV"ZVNV4BUP
View Slide
❓⡦׃ג׀궢굸ץ➂ד׃׳ֲ
ֿחכ!BIPNVדׅ
Frontend WeeklyIUUQTGSPOUFOEXFFLMZUPLZP㕂ⰻ㢩ךؿٗٝزؒٝسꟼ鸬صُ٦أ嫣鹈ֶ㾈ֽًׅ٦ٕوؖآٝ
‣ ה֮㣐㷕ד钠濼䗰椚㷕הַ遤⹛猰㷕הַ㷕ע‣ ה֮㼔㷕吤ד8FCرؠ؎ٝהַ㷕ע‣ 剣،حفٕحفٕד1)1ؒٝآص،ה׃גխխ8FC؟؎زװءأذيך「鎶ծ$.4ך涪ח䵿‣ 吳؟؎غ٦ؒ٦آؑٝزד8FCؿٗٝزؒٝسխؒٝآص،ה׃ג荈爡؟٦ؽأך涪ח䵿殛娖
$ZCFS"HFOU
‣ 爡僽⚅秀➿邌ׅ⠓爡ⶼ‣ 鏣甧䎃剢傈 ؟؎غ٦ך傈‣ 鸬穠爡㆞侧 せ 䎃剢劣儗挿‣ 鸬穠㡰♳넝⭙ⰼ 䎃剢寸皾儗‣ 涪䬿挿幪靼ծ猧衝⾱ٓنծ㣐ꢻծ状䀤⠓爡嚊銲
https://www.cyberagent.co.jp/features/detail/id=1221
‣ 8FCؿٗٝزؒٝسؒٝآص،הכ‣ 8FC䪮遭ה6*ךֿה‣ 噟ⰻ㺁ךֿה‣ 欰㶷䨌殛ךֿה➙傈ֶ鑧ֿׅה
8FCؿٗٝزؒٝسؒٝآص،הכ
8FCך⚥ךؿٗٝزؒٝس
$ ⇆ &(S)FTPͱ͔ͰΞοϓϩʔυ͢Δઌී௨ʹωοτϫʔΫCDNͱؚ͔ΉϢʔβʔ͕͏WebϒϥβαʔόʔΠϯϑϥΫϥΠΞϯτ
$ ⇆ &(S)FTPΞοϓϩʔυ͢Δઌී௨ʹωοτϫʔΫCDNϢʔβʔ͕͏WebϒϥβαʔόʔΠϯϑϥΫϥΠΞϯτϑϩϯτΤϯυ!!
8FC؟؎ز
&$؟؎ز
ً٦ٕ
㖑㔳
ؒٝةً
٦ي
鏾ⵙ《䒷
ⰻ㺁כغٓغָٓוِ٦ؠ٦ָ鍗
8FCؿٗٝزؒٝس㹋鄲ׅ➂
‣ 8FCـٓؐؠ♳ד⹛⡲ׅ鿇ⴓ⡲‣ )5.-$44+BWB4DSJQUד8FC䪮遭䪔ֲ‣ 㥨ת׃ְ6*װ؎ٝةؙٓءّٝ㹋植ׅ‣ 葿ղז橆㞮䟝㹀׃גծ䘯黝ח⹛⡲ׇׁ8FCؿٗٝزؒٝسؒٝآص،
‣ 8FCـٓؐؠ♳ד⹛⡲ׅ鿇ⴓ⡲‣ )5.-$44+BWB4DSJQUד8FC䪮遭䪔ֲ‣ 㥨ת׃ְ6*װ؎ٝةؙٓءّٝ㹋植ׅ‣ 葿ղז橆㞮䟝㹀׃גծ䘯黝ח⹛⡲ׇׁ8FCؿٗٝزؒٝسؒٝآص،ٌظאֻⰻ㺁חꟼ
‣ 8FCـٓؐؠ♳ד⹛⡲ׅ鿇ⴓ⡲‣ )5.-$44+BWB4DSJQUד8FC䪮遭䪔ֲ‣ 㥨ת׃ְ6*װ؎ٝةؙٓءّٝ㹋植ׅ‣ 葿ղז橆㞮䟝㹀׃גծ䘯黝ח⹛⡲ׇׁ8FCؿٗٝزؒٝسؒٝآص،⡲ٌظך⣣⦼חꟼ
葿ղז橆㞮䟝㹀ׅהְֲֿהhttps://www.flickr.com/photos/adactio/6153481666/
‣ 8FCل٦آכ葿ղז橆㞮ד㹋遤ׁך‣ 歗ך؟؎ؤכرغ؎أך珏겲כ‣ 04כـٓؐؠכغ٦آّٝכ‣ 㔐简橆㞮כرغ؎أך䚍腉כׁתׂתז㹋遤橆㞮
❓ؒٝآص،זךرؠ؎ٝ׃זְך
ؒٝآص،ؚٔٝהرؠ؎ٝך⚕ַ剑穄ך،ؐزفحز⡲鴥顑⟣ָ֮
‣ ⾱周הـٓؐؠ♳ך鋅湡ך䊴㙵‣ ،صً٦ءّٝךػًٓ٦ة锃侭ׅ‣ ؟٦غה鸬䵿׃ג⹛涸ז堣腉װ6*⡲‣ 䊨玎荈⹛⻉׃גծ⸬桦涸ז涪橆㞮חׅוך鋔挿֮ה葺ְө
8FC䪮遭ה6*ךֿה
8FCה8FC垥彊
‣ ؎ٝة٦طحزד剑♧菙涸זًر؍،‣ ؟٦غהؙٓ؎،ٝزָװ《ׅ➬穈‣ ⚺ח)551הְֲفٗز؝ָٕ⢪גծխذؗأزծ歗⫷ծ⹛歗FUDָװ《ׁ8FCג⡦ֽ
‣ 63-͡63*הְֲٔا٦أך陎ⴽ㶨‣ )551הְֲ鸐⥋فٗز؝ٕ‣ )5.-הְֲر٦ةؿؓ٦وحز‣ $44ה+BWB4DSJQUח״邌植⸂8FC佄ִ㣐➬圫ē
https://example.com/foo.htmlhttps://example.com/foo.html?bar=bazhttps://example.com/foo.html#barhttps://user:[email protected]:8080فٗز؝ٕ مأز ػأؙؒٔؿًؚٓٝز钠鏾䞔㜠 ه٦ز殢〾
ؙٔؒأزؙٓ؎،ٝز̔؟٦غ٦GET /foo.html HTTP/1.1Host: example.comUser-Agent: ...Chrome/51.0.2704.103...Accept: text/html...;q=0.9,image/webp,*/*;q=0.8Accept-Encoding: gzip, deflate, sdchAccept-Language: en-US,en;q=0.8ٖأهٝأؙٓ؎،ٝز̒؟٦غ٦HTTP/1.1 200 OKContent-Encoding: gzipContent-Type: text/htmlContent-Length: 606Expires: Tue, 12 Jul 2016 10:57:56 GMTLast-Modified: Fri, 09 Aug 2013 23:54:35 GMT
HyperText Markup Language - WikipediaHyperText Markup LanguageHTMLɺSGMLΞϓϦέʔγϣϯͷҰͭͰɺϋΠύʔςΩετΛར༻ͯ͠ϫʔϧυϫΠυΣϒ্ͰใΛൃ৴͢ΔͨΊʹ࡞ΒΕɺϫʔϧυϫΠυΣϒͷجװతׂΛͳ͍ͯ͠ΔɻใΛൃ৴͢ΔͨΊͷจॻߏΛఆٛ͢ΔͨΊʹΘΕɺ͋Δఔػց͕ཧղՄೳͳݴޠͰɺࣸਅͷຒΊࠐΈɺϑΥʔϜͷ࡞ɺϋΠύʔςΩετʹΑΔHTMLؒͷ࿈ܞ͕ՄೳͰ͋Δɻ
$44body {overflow: hidden;background: #000000;}h1 {color: pink;}+BWB4DSJQUfunction sayHello() {var helloText = document.createTextNode('Hello World');var foo = document.getElementById('foo');foo.appendChild(helloText);}sayHello();
https://platform.html5.org/8FC垥彊8FC4UBOEBSET
⚺ז垥彊➬圫ה垥彊⻉㔚⡤8FC(-)5.-ծ$4447(ծ8FC35$FUD)551ծ63*$PPLJFTծ5-4FUD&$."4DSJQU͑+BWB4DSJQU4*.%ծ+40/FUD
‣ אךٔا٦أח圫ղז䩛媮ד،ؙإأ׃ג㢌׆ⵃ欽דֹ״ֲחׅ‣ ـٓؐؠָ㥨ֹ䩛ח杝荈ך堣腉אֻה涪罏הِ٦ؠָ♶ⵃ渣鄃 麓ךـٓؐؠ䨌✯‣ 垥彊⻉ׁ䪮遭כծ葿ղז⢪ְ㔐׃ָֹֻ鋉呓垥彊⻉ 窟♧ׅ椚歋
8FCכ侧ղך垥彊䪮遭ה湱✼⸕⸂ד佄ִגְ
8FC䪮遭ך〳腉䚍
8FC"TTFNCMZBOFXJOUFSNFEJBUFSFQSFTFOUBUJPOGPSTBGFDPEFhttps://webassembly.github.io/
8FC35$3FBM5JNF$PNNVOJDBUJPOhttps://www.youtube.com/watch?v=MsAWR_rJ5n8
8FC(-(SBQIJDT-JCSBSZhttp://stars.chromeexperiments.com/
%FWJDF"1*https://whatwebcando.today/
https://www.youtube.com/watch?v=w-tFdreZB94
‣ 垥彊⻉ׁ⢪ְ㔐׃ךֹֻ䪮遭‣ ➙דؕ٦شؽװذٖؽד䱰欽ׁגְ‣ 8JOEPXT،فٔ8FC䪮遭דאֻ‣ ֮ײ㜥䨽ח8FC䪮遭ָ兛⿹ַׅ8FC䪮遭ָ䭁ָ〳腉䚍
噟ⰻ㺁ךֿה
ؿٗٝزؒٝسךٗ٦ٌٕرٕ
ؽآُ،ٕװ⢪ְ䩛⡲鴥6*㹋鄲㾊 ،صً٦ءّٝהַ؎ٝةؙٓذ؍ـ邌植㾊 8FCؿٗٝزؒٝسך،فٔ؛٦ءّٝ鏣鎘㾊ٗ٦ٌٕرٕכ㣐תַחא
‣ 崢䩛ׁכזֻג㛙㹋ח⢪ְװְׅ6*ָ㥨ֹ‣ )5.-$44+BWB4DSJQU⨉זֻ⢪ְֿזׅ‣ 8FCرؠ؎ش٦⳿魦ךמה㢳ְ‣ 欰䜁侧ֶָֻ♧殢㢳ֻ넝銲ؽآُ،ٕװ⢪ְ䩛⡲鴥6*㹋鄲㾊
‣ ؕح؝ְְծ繟׃ְ邌植ָ㥨ֹ䖤䠐‣ $BOWBTהַ47(הַ8FC(-הַ㥨ֹ‣ 僓כ'MBTIדⵖ⡲׃ג➂ְ‣ ألءٍٔأزכꅾ㹇ׁ،صً٦ءّٝהַ؎ٝةؙٓذ؍ـ邌植㾊
‣ 㣐鋉垷ז؟؎زװءؚٕٝل٦آ،فָٔ㥨ֹ‣ ְְזֿה罋ִגծⰋ⡤鏣鎘ׅ‣ ،٦ؗذؙثٍװٓ؎ـٓٔח鋅陎ָ帾ֻז‣ 銲כקו㢳ֻזְ 8FCؿٗٝزؒٝسך،فٔ؛٦ءّٝ鏣鎘㾊
‣ ؟٦غ٦؟؎سה+BWB4DSJQUⰯדװ‣ ؝٦ر؍ؚٝדֹرؠ؎ش٦הⴓ噟ׅ‣ ְײفؚٗٓو٦ծ)5.-$44כ蕱䩛‣ 㖑חֻׁ欰䜁׃גְֶתֽ؟٦غ٦؟؎س㹋鄲ה+BWB4DSJQUךⰯ噟
‣ 匢䮠תֺׅג鹌遤盖椚דֹ״ֲחז‣ չ⥯僓כ؝٦ر؍ؚٝ׃גגׁ֭պ‣ 顑⟣ָ㟓ִגֻהوط٦آٍ٦חז‣ ֮䠐ծ갫䔲זٍؗٔ،ֶתֽ匢䮠ה⚥盖椚噰׃ر؍ؙٖة٦
涪ؿٗ٦ך⢽
խխխխرؠ؎ش٦فٓٝش٦խխխխ؟٦غ٦ؒٝآص،،فٔؒٝآص،堣腉ך⟰歗װ➬圫剅ٙ؎َ٦ؿٖ٦يזוⰟ剣"1*ָ鵤ׅر٦ة鏣鎘װؙٓ؎،ٝزךׅさׇؔٔؒٝ 鏣鎘 涪 ٖؽُ٦ ٔٔ٦أذأز
խխխխرؠ؎ش٦فٓٝش٦խխխխ؟٦غ٦ؒٝآص،،فٔؒٝآص،➬圫♳ך㉏겗ָּׅ֮湱锑׃ג锃侭㣐ְֹ㉏겗ָ婍גְזְַ״ֻ״ֻ然钠׃ג涪פؔٔؒٝ 鏣鎘 涪 ٖؽُ٦ ٔٔ٦أذأز
խխխխرؠ؎ش٦فٓٝش٦խխխխ؟٦غ٦ؒٝآص،،فٔؒٝآص،رؠ؎ٝؕٝفװ،صً٦ءٌّٝحؙⰟ剣䗳銲זر٦ة鵤ׅ"1*؟٦غ٦ָ䲿⣘ؔٔؒٝ 鏣鎘 涪 ٖؽُ٦ ٔٔ٦أذأز
խխխխرؠ؎ش٦فٓٝش٦խխխխ؟٦غ٦ؒٝآص،،فٔؒٝآص،㹋鄲׃גְג孡בְ6*ך㉏겗ؿ؍٦سغحؙ׃ג⿾僥؟٦غ٦ַךر٦ة䕎䒭װⰻ㺁ח㉏겗ָזְַ然钠׃זָ涪ؔٔؒٝ 鏣鎘 涪 ٖؽُ٦ ٔٔ٦أذأز
խխխխرؠ؎ش٦فٓٝش٦խխխխ؟٦غ٦ؒٝآص،،فٔؒٝآص،㹋鄲כ➬圫וֶַ⢪ְ䩛ח㉏겗ָזְַٖؽُ٦ד⡦ַ֮ל⥜姻ךח鷄⸇涪ؔٔؒٝ 鏣鎘 涪 ٖؽُ٦ ٔٔ٦أذأز
խխխխرؠ؎ش٦فٓٝش٦խխխխ؟٦غ٦ؒٝآص،،فٔؒٝآص،♧鸐װذأز㹋倵㉏겗ָ鋅אַל⼿⸂׃ג⥜姻ؔٔؒٝ 鏣鎘 涪 ٖؽُ٦ ٔٔ٦أذأز
խխխխرؠ؎ش٦فٓٝش٦խխխխ؟٦غ٦ؒٝآص،،فٔؒٝآص،ؔٔؒٝ 鏣鎘 涪 ٖؽُ٦ ٔٔ٦أذأزֶאַׁתד׃
؝ىُص؛٦ءّٝ㣐ⴖחׅ椚歋
‣ 剑ⴱכׅץגؙاծؙا涺ד熊ֻךָث٦ي‣ 醱侧ך➂ָ㼔崞ַ׃ג嫣㔐葺ְٌظխ⡲חծ麓玎何葺׃竲ֽךָث٦ي‣ 铩ַָوؚٖד葺ְٌظ⡲ֿׅהחծխ劍䖉׃⣛㶷׃ׅךכث٦يׄׯזְث٦يדٌظאֻ䲿
02550751000 20 40 60 80 100⳿勻鴟ד䝢ָ㟓ִ湱锑֮湱锑ז׃㸣䧭䏝ך䨽銲儗
02550751000 20 40 60 80 100㸣䧭䏝ך䨽銲儗ְע葺ֻזגֹךדٔٔ٦أワך؎ً٦آה麩ֲ➬♳ָךדٔذ؎ؙ湱锑֮湱锑ז׃
湱锑02550751000 20 40 60 80 100㸣䧭䏝ך䨽銲儗ؒٝآص،ꟼ⤘罏ז秛䖤ך㸣䧭䏝㸣䧭䏝넝ֹ׆儗ⴖٔٔ٦أ湱锑
涪⡲噟
‣ 8FC4PDLFUⵃ欽׃ٔ،ٕة؎يثٍحز‣ 7JEFPKTⵃ欽׃⹛歗فٖ؎َ٦‣ 3FBDUח״6*ךؙٓ؎،ٝز؟؎س㹋鄲‣ /PEFKTח״؟٦غ٦؟؎س㹋鄲'3&4)CZ"CFNB57ך涪
‣ 8FC4UPSN窟さ涪橆㞮‣ 4LFUDI歗⫷ךأٓ؎أ‣ (JUغ٦آّٝ盖椚‣ J5FSN؝وٝسٓ؎ٝ‣ ぐ珏ـٓؐؠך涪罏خ٦ٕ涪ך麣Ⱗ
⡲噟ךꨜ㔲孡رأؙزحفדرٌ׃תׅ
暴ח涪罏خ٦ٕ⢪ְֿזׅךכ䗳갭إٔؗ
欰㶷䨌殛ךֿה
8FC䎢ֻ㷕רֲ
‣ رؠ؎ٝװ)5.-$44+BWB4DSJQUֽדזֻ؟٦غ؟؎سծو٦؛ذ؍ؚٝזו鋅ׅ‣ ➬✲㨣הծ湡ךך➬✲ח䗳娤חזג鋔ꅿָ杞תַ㷕欰ך➙ָثٍٝأ‣ ꦄ➂椚鍑ׅח葿ղז濼陎גֶֻ➙ךֲח鋔ꅿ䎢־״ֲ
‣ ꨇ׃ְֿהכꨇ׃ְ‣ ꨇ׃ְֿהחכזך椚歋ה⣣⦼ָ֮‣ ꨇ׃ְⴓ鍑׃גծמהא׆אװאֽ‣ 8FC䪮遭חꟼז㷕ן竲ֽֿהָꅾ銲濼גֶַזֽלזזְֿה
،فٔ؛٦ءّٝא⟃♳אֲֻ
‣ וזחث٦فדծⰋ鿇⡲♳־穗꿀כךבֻךⰋ⡤⫷ח鵚בֻ鵚麣‣ 1BB4װ*BB4ך兛⿹ד兛鸐ך8FC؟٦ؽأխ⡲䪮遭涸ז侲㽿כꬊ䌢ח⡚ֻזגְ‣ ٖٝةٕ؟٦غ⢪ג葺ְֽוծإُؗٔذ؍חכ孡אֽ״ֲךבֻךⰋ⡤⫷濼
‣ ꦄ䱸䊨玎תֻ濼זֻג⡲קוխ넝䏝ז欰欵盖椚ָ遤גְ植㜥כקרזְ‣ 荈ⴓ荈魦ָ➭ךًٝغ٦װؽآطأה䎢ֻ帾ֻխխꟼさֲֿהד⡲♳־ⶼ鸡涸ז➬✲‣ ➙䖓"*װ堣唒㷕统ך鹌娄ח״ג岞荍ְ⡲噟ָⰋ徦ׅ〳腉䚍כֽ֮וծכ姝鵒ׅץֹ8FCכתⶼ鸡涸ז➬✲
㽟耵׃
‣ 颵㉏ך➬倯ד䊴אֽ‣ 䞔㜠 ꧊ךثٍٝطٕה统䢪אֻ‣ 㷕ֿהכוַֿח،ؐزفحزׅ‣ 爡㢩חكٝثو٦ؙ㼎韋א倜⼼ぢֽח،سغ؎أ׃גֿה
‣ չוֲ׃ְְדַׅպ鼘ֽ‣ ְֹז瘶ִ耀ֻךכثٍٝأ鷕׃ג‣ 罋ִ穠卓瘶ִさׇדֹל如ח籬ָ‣ 8FC噟歲ך鋅统ְ劍כꬊ䌢ח瀉ְ颵㉏ך➬倯ד䊴אֽ
‣ ـؚٗ‣ ⹈䓼⠓‣ 剅硂‣ ٓ؎غٕ䱱׃‣ ًٝة٦䱱׃䞔㜠 ꧊،ؐزفحزكٝثو٦ؙ‣ (PPHMF‣ 3FGFSFODF‣ 4UBDL0WFSPX‣ 2JJUB‣ (JU)VC
⚠⠓爡כꟗׄ⚅歲הְֲ荈鋙ה䋐㜥⣣⦼罋ִֿהכꅾ銲
⡲噟鋙ִג➬✲כ㷕ן竲ֽ
‣ ؝٦ر؍ؚٝװؽآُ،ٕכ⡲噟ח麓ֺזְ‣ 㼭䩛⯓ךذؙصحؙכ濼陎ח麓ֺזְ‣ ➬✲ד実ךכ濼䜋ה䊨㣗‣ 䌢ח㉏겗כ㢌⻉ׅךדծ䌢ח걧⢪ֲ⡲噟ָֽ➬✲דכזְ
❓걧⢪ֲגאת
ℹջ㉏ְ甧ג⸂ռ
شئֲֿזגְךַ
شصָ铬겗זךַ
劤颵涸זرؠ؎ٝ䙼罋
铬겗鍑寸ח8FCך㼔䚍崞ַׇ♧➂ך8FCؿٗٝزؒٝسؒٝآص،
תה
‣ 8FCؿٗٝزؒٝسכ6*㹋鄲׃תׅ‣ رؠ؎ش٦װؒٝآص،ה⼿⸂׃さְתׅ‣ 8FC䪮遭ח莆גֻה㴍׃ְדׅ‣ ➙ךֲחرؠ؎ٝ䙼罋熊ֻה״ְדׅ⠗ִַֿה
稆湫דְְَخ倜׃ְֿהח䮋䨌َׅخ䌢ח䧭ꞿ׃竲ֽَخ実➂暟⫷
2VFTUJPOTIUUQBIPNV!BIPNVHJUIVCDPNBIPNV!"⌂
ahomu
wingnus
signer
ashitanoterakoya
mimiguri
kfujita
matleenalaakso
bernhardsvt
gmoriki
yasslab
asial_corp
robinlee
brettharned
zenorocha
iamctodd
keithpitt
wjessup
destraynor
malarkey
rocio
addyosmani
brad_frost
pedronauck
holman