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.

Node.js をさりげなく取り入れた 最近のフロントエンド事情について

Grand Frontend 2016

  • Be the first to comment

Node.js をさりげなく取り入れた 最近のフロントエンド事情について

  1. 1. …
  2. 2. Node.js ECMAScript6
  3. 3. Node.js
  4. 4. JavaScript
  5. 5. Node.js
  6. 6. <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/ moment.min.js"></script>
 <script src=“https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/ locale/ja.js"></script> 
 <script>
 var interval = 1000;
 document.addEventListener("DOMContentLoaded", function(e) {
 var dom = document.querySelector(".timer");
 setInterval(function(){
 console.log(moment().format("YYYY/MM/DD HH:mm:ss"));
 dom.textContent = " " + moment().format('YYYY/MM/DD HH:mm:ss') + " ";
 }, interval)
 });
 </script> 
 </head>
 <body>
 <div class="timer"></div> </body>
  7. 7. var moment = require('moment-timezone');
 
 var interval = 1000;
 setInterval(function(){
 console.log(" " + moment().tz("Asia/Tokyo").format("YYYY/MM/ DD HH:mm:ss”) + " ");
 }, interval);
  8. 8. ES5 ES5
  9. 9. var moment = require('moment-timezone');
 
 var interval = 1000;
 document.addEventListener("DOMContentLoaded", function(e) {
 var dom = document.querySelector(".timer");
 setInterval(function(){
 console.log(moment().tz("Asia/Tokyo").format("YYYY/MM/DD HH:mm:ss"));
 dom.textContent = " " + moment().format("YYYY/MM/DD HH:mm:ss") + " ";
 }, interval)
 });
  10. 10. ES5ES5 Node.js ES5
  11. 11. ECMAScript6 (ES6)
  12. 12. const moment = require('moment-timezone');
 
 const interval = 1000;
 setInterval(()=>{
 console.log(` ${moment().tz("Asia/Tokyo").format("YYYY/MM/DD HH:mm:ss")} `);
 }, interval);
  13. 13. ES5 ES6 ES5 ES6 Node.js ES5
  14. 14. import moment from 'moment-timezone';
 
 const interval = 1000;
 setInterval(()=>{
 console.log(` ${moment().tz("Asia/ Tokyo").format("YYYY/MM/DD HH:mm:ss")} `);
 }, interval);
  15. 15. ES5ES5 Node.js ES5 ES6ES6
  16. 16. <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/ moment.min.js"></script>
 <script src=“https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/ locale/ja.js"></script> 
 <script>
 const interval = 1000;
 document.addEventListener("DOMContentLoaded", function(e) {
 var dom = document.querySelector(".timer");
 setInterval(()=>{
 console.log(moment().format("YYYY/MM/DD HH:mm:ss"));
 dom.textContent = ` ${moment().format("YYYY/MM/DD HH:mm:ss")} `;
 }, interval);
 });
 </script> </head>
 <body>
 <div class="timer"></div> </body>
  17. 17. import moment from 'moment-timezone';
 
 const interval = 1000;
 document.addEventListener("DOMContentLoaded", function(e) {
 const dom = document.querySelector(".timer");
 setInterval(()=>{
 console.log(moment().tz("Asia/Tokyo").format("YYYY/ MM/DD HH:mm:ss”)); 
 dom.textContent = ` ${moment().tz("Asia/ Tokyo").format("YYYY/MM/DD HH:mm:ss")} `;
 }, interval)
 });
  18. 18. ES5ES5 Node.js ES5 ES6ES6 Node.js ES6
  19. 19. jQuery FrontEnd

×