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

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

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

1644fba8a219c89987390ef4f23d06bf?s=128

Ayumu Sato

July 06, 2016
Tweet

Transcript

  1. 7.

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

     ‣ 鸬穠㡰♳넝⭙ⰼ 䎃剢寸皾儗  ‣ Ꟛ涪䬿挿幪靼ծ猧衝⾱ٓنծ㣐ꢻծ状䀤 ⠓爡嚊銲
  2. 8.
  3. 9.
  4. 10.
  5. 18.
  6. 19.
  7. 20.
  8. 21.
  9. 22.
  10. 39.

    ؙٔؒأزؙٓ؎،ٝز̔؟٦غ٦ 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
  11. 40.

    <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="author" href="mailto:mail@example.com">

    <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>
  12. 41.

    $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();
  13. 71.

    0 25 50 75 100 0 20 40 60 80

    100 ⳿勻׋鴟׶ד䝢׫ָ㟓ִ׷ 湱锑֮׶ 湱锑ז׃ 㸣䧭䏝ך 䨽銲儗꟦
  14. 72.

    0 25 50 75 100 0 20 40 60 80

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

    湱锑 0 25 50 75 100 0 20 40 60

    80 100 㸣䧭䏝ך 䨽銲儗꟦ ؒٝآص،׮ꟼ⤘罏׮ ׫׿ז秛䖤ך㸣䧭䏝 㸣䧭䏝׾넝׭ֹ׸׆ 儗꟦ⴖ׸ٔٔ٦أ 湱锑
  16. 91.

    ‣ ـؚٗ ‣ ⹈䓼⠓ ‣ 剅硂 ‣ ٓ؎غٕ䱱׃ ‣ ًٝة٦䱱׃

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