Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web フロントエンドで仕事をしてご飯をおいしく食べる話

Web フロントエンドで仕事をしてご飯をおいしく食べる話

トライデントコンピュータ専門学校 Web デザイン学科 業界研究の授業で、1,2年生の皆さんにむけてお話したスライドです。本編90分(!?)

Ayumu Sato

July 06, 2016
Tweet

More Decks by Ayumu Sato

Other Decks in Education

Transcript

  1. ‣ 爡僽⚅秀׾➿邌ׅ׷⠓爡׾ⶼ׷ ‣ 鏣甧䎃剢傈 ؟؎غ٦ך傈  ‣ 鸬穠爡㆞侧 せ 䎃剢劣儗挿

     ‣ 鸬穠㡰♳넝⭙ⰼ 䎃剢寸皾儗  ‣ Ꟛ涪䬿挿幪靼ծ猧衝⾱ٓنծ㣐ꢻծ状䀤 ⠓爡嚊銲
  2. ؙٔؒأزؙٓ؎،ٝز̔؟٦غ٦ GET /foo.html HTTP/1.1 Host: example.com User-Agent: ...Chrome/51.0.2704.103... Accept: text/html...;q=0.9,image/webp,*/*;q=0.8

    Accept-Encoding: gzip, deflate, sdch Accept-Language: en-US,en;q=0.8 ٖأهٝأؙٓ؎،ٝز̒؟٦غ٦ HTTP/1.1 200 OK Content-Encoding: gzip Content-Type: text/html Content-Length: 606 Expires: Tue, 12 Jul 2016 10:57:56 GMT Last-Modified: Fri, 09 Aug 2013 23:54:35 GMT
  3. <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="author" href="mailto:[email protected]">

    <title lang="en">HyperText Markup Language - Wikipedia</title> </head> <body> <article> <h1 lang="en">HyperText Markup Language</h1> <p>HTML͸ɺ<a href="http://ja.wikipedia.org/wiki/SGML">SGML</a> ΞϓϦέʔγϣϯͷҰͭͰɺϋΠύʔςΩετΛར༻ͯ͠ϫʔϧυ ϫΠυ΢Σϒ্Ͱ৘ใΛൃ৴͢ΔͨΊʹ࡞ΒΕɺ ϫʔϧυϫΠυ΢Σϒͷ<strong>جװత໾ׂ</strong>Λͳ͍ͯ͠Δɻ ৘ใΛൃ৴͢ΔͨΊͷจॻߏ଄Λఆٛ͢ΔͨΊʹ࢖ΘΕɺ ͋Δఔ౓ػց͕ཧղՄೳͳݴޠͰɺ ࣸਅͷຒΊࠐΈ΍ɺϑΥʔϜͷ࡞੒ɺ ϋΠύʔςΩετʹΑΔHTMLؒͷ࿈ܞ͕ՄೳͰ͋Δɻ</p> </article> </body> </html>
  4. $44 body { overflow: hidden; background: #000000; } h1 {

    color: pink; } +BWB4DSJQU function sayHello() { var helloText = document.createTextNode('Hello World'); var foo = document.getElementById('foo'); foo.appendChild(helloText); } sayHello();
  5. 0 25 50 75 100 0 20 40 60 80

    100 ⳿勻׋鴟׶ד䝢׫ָ㟓ִ׷ 湱锑֮׶ 湱锑ז׃ 㸣䧭䏝ך 䨽銲儗꟦
  6. 0 25 50 75 100 0 20 40 60 80

    100 㸣䧭䏝ך 䨽銲儗꟦ ׌ְע葺ֻז׏גֹ׋ךד ׉׹׉׹ٔٔ٦أ ワ׶ך؎ً٦آה麩ֲ ➬♳ָ׶׌׏׋ךדٔذ؎ؙ 湱锑֮׶ 湱锑ז׃
  7. 湱锑 0 25 50 75 100 0 20 40 60

    80 100 㸣䧭䏝ך 䨽銲儗꟦ ؒٝآص،׮ꟼ⤘罏׮ ׫׿ז秛䖤ך㸣䧭䏝 㸣䧭䏝׾넝׭ֹ׸׆ 儗꟦ⴖ׸ٔٔ٦أ 湱锑
  8. ‣ ـؚٗ ‣ ⹈䓼⠓ ‣ 剅硂 ‣ ٓ؎غٕ䱱׃ ‣ ًٝة٦䱱׃

    䞔㜠 ꧊،ؐزفحزكٝثو٦ؙ ‣ (PPHMF׷ ‣ 3FGFSFODF׷ ‣ 4UBDL0WFSPX׷ ‣ 2JJUB׷ ‣ (JU)VC׷