Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ゆるく学ぼう!現在のフロントエンドまとめ

5,566 views

Published on

『HTML5感。 ~今使われているHTML5。今知っておきたいHTML5のすごい技術。~』の資料 2016.7.24

2017.05.10 タイトルを更新

Published in: Engineering
  • 素晴らしすぎるスライドでした!こちらを拝見し初めて最近のフロントエンド界隈技術が分かりました!Thank you so much! ( 66ページafterのクラス名が古いままかもしれませんが些細な事です^^)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

ゆるく学ぼう!現在のフロントエンドまとめ

  1. 1. ~ 2016.08 taskey
  2. 2. • • • 25 • @Taskey.inc • html, css, javascript, ruby, node, google app script,,
  3. 3. 2 • twitter: @fukamiiiiinmin i 5 • GO !!!!! !!!!
  4. 4. taskey
  5. 5. html zine
  6. 6. html5 html css
  7. 7. We are startup company!
  8. 8. 2
  9. 9. html
  10. 10. slim
  11. 11. css
  12. 12. Sass css
  13. 13. js
  14. 14. ES2015 js
  15. 15. not working
  16. 16.
  17. 17. HTML
  18. 18. HTML • html4 html5 •
  19. 19. HTML5? HTML4? • HTML
  20. 20. HTML5? • HTML • HTML5 • header, main, footer…
  21. 21. HTML5? •
  22. 22. HTML5? •
  23. 23. HTML5? • PC
  24. 24. HTML5? • SEO
  25. 25. HTML5? •
  26. 26. HTML5? •
  27. 27. A html5 B class=“header” <header>
  28. 28. • html • html • html
  29. 29. html • class=“”
  30. 30. pug •
  31. 31. pug html
  32. 32. pug • html
  33. 33. pug class, id
  34. 34. html
  35. 35. A B pug rails slim C html
  36. 36. CSS
  37. 37. CSS • CSS • CSS bootstrap, purecss • Sass SASS, SCSS , Less, Stylus • CSS BEM, OOCSS, FLOCSS
  38. 38. CSS CSS
  39. 39. CSS • CSS
  40. 40. A css B CSS html
  41. 41. CSS • web class CSS
  42. 42. class ?
  43. 43. 2
  44. 44. 1
  45. 45. CSS
  46. 46. float box-wrap div float box , padding class clear html box-wrap clear
  47. 47. float
  48. 48. .box
  49. 49. .clear
  50. 50. before → after
  51. 51. .wrap-float • div float • float • float .wrap-float
  52. 52. web
  53. 53. CSS
  54. 54. ex)bootstrap! purees! etc…
  55. 55. bootstrap • •
  56. 56. bootstrap class
  57. 57. purecss • •
  58. 58. • class • class class style •
  59. 59. CSS
  60. 60. A css B bootstrap purecss
  61. 61. CSS • CSS • CSS • •
  62. 62. Sass • Sass 2 • SASS .sass • SCSS .scss • CSS Sass SASS
  63. 63. Sass
  64. 64. DEMO
  65. 65. Sass
  66. 66. web
  67. 67. css .css
  68. 68. CSS
  69. 69. A CSS B Sass SASS stylus stylus
  70. 70. CSS BEM, SMACSS, OOCSS, FLOCSS • CSS •
  71. 71. CSS .header{} .header-logo{} .header-menus{} .header-menus .header-menu{}
  72. 72. The
  73. 73. level1
  74. 74. flocss
  75. 75. A CSS B FLOCSS css css html
  76. 76. javascript • javascript • jquery • ajax • JS • ECMAScript2015(ES6)
  77. 77. javascript • Web DOM html
  78. 78. DOM •
  79. 79. DOM • id=“boxes”
  80. 80. javascript
  81. 81. jquery • DOM
  82. 82. DOM •
  83. 83. DOM • id=“boxes”
  84. 84. jquery
  85. 85. A jquery B DOM
  86. 86. Ajax •
  87. 87. Google map •
  88. 88. map •
  89. 89. • facebook etc…etc…etc…
  90. 90. Ajax • SPA Single Page Application • DOM html •
  91. 91. DOM
  92. 92. jquery
  93. 93. jquery DOM DOM
  94. 94. Web A Ajax html .html() Web B 1 1 10 Web A Web B javascript html Web A
  95. 95. Web B
  96. 96. Web B ajax ajax html html Web B
  97. 97. Web A Web B div js html html js Web B sex div div Web B
  98. 98. web B javascript html
  99. 99. web B javascript html
  100. 100. Web B web B web A web A
  101. 101. JS web A,B
  102. 102. JS javascript html html web A,B
  103. 103. JS • DOM • knockout • react, angular vue
  104. 104. microsoft Facebook google
  105. 105. microsoft Facebook google
  106. 106. • javascript jquery html • html
  107. 107. • • •
  108. 108. ES6 ES2015 • Javascript
  109. 109. class let const var () etc…
  110. 110. function () var say = function(){ console.log(‘hello!’) } var say = () => { console.log(‘hello!’) } say() // hello!
  111. 111. var say = function(greeting){ if(greeting == undefined){ greeting = ‘hello!’ } console.log(greeting); } var say = (greeting = ‘hello!’) => { console.log(greeging) } say() // hello!
  112. 112. 2mm
  113. 113. web
  114. 114. es6 es5
  115. 115. es6 es5
  116. 116. DEMO
  117. 117. A ES6 B JavaScript ES2015 JavaScript class
  118. 118. • • • • Sass ES6
  119. 119. gulp grunt
  120. 120. • ○○ xx • index.html •
  121. 121. 2,3 index.scss index.css →Sass CSS index.es6 index.js →ES6 ES5
  122. 122. • index.scss, index.es6 index.css, index.js • index.css, index.js
  123. 123. DEMO
  124. 124. A B gulp Sass gulp
  125. 125. A B html pug css sass FLOCSS js es6 react gulp
  126. 126. A A B html pug css sass FLOCSS js es6 react gulp
  127. 127. • • • • JS

×