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.

"今" 使えるJavaScriptのトレンド

8,731 views

Published on

Learn JS in Kanazawa - Kakenai.js ver1.0(2015年6月6日開催)で使用したスライドです。

http://learnjskanazawa.com/

Published in: Technology
  • Be the first to comment

"今" 使えるJavaScriptのトレンド

  1. 1. https://flic.kr/p/m9738v Learn JS in Kanazawa kakenai.js ver.1.0
  2. 2. https://flic.kr/p/npvsQJ
  3. 3. @pocotan001 Hayato Mizuno
  4. 4. https://frontendweekly.tokyo/
  5. 5. http://blocsapp.com/
  6. 6. http://electron.atom.io/
  7. 7. http://electron.atom.io/
  8. 8. https://flic.kr/p/9gpNkP
  9. 9. https://flic.kr/p/dSuxV1 Choose JS Tools Today
  10. 10. EditorConfig http://editorconfig.org/
  11. 11. root = true ! [*] indent_style = space indent_size = 2 trim_trailing_whitespace = true ! [*.md] trim_trailing_whitespace = false .editorconfig
  12. 12. 黒い画面
  13. 13. command -options arguments sh
  14. 14. command -options arguments ! coffee -wc a.coffee sh
  15. 15. command -options arguments ! coffee -wc a.coffee # coffee -w -c a.coffee # coffee --watch --compile a.coffee sh
  16. 16. パッケージ マネージャー
  17. 17. &
  18. 18. npm i -g xxx # npm install —-global xxx
  19. 19. https://goo.gl/2Uq21X その他 56% grunt 4% pm2 4% gulp 7% bower 11% grunt-cli 18%
  20. 20. ~/…lib # npm root -g node_modules coffee-script npm i -g coffee-script coffee … sh
  21. 21. your-project node_modules coffee-script npm i coffee-script coffee … # command not found: coffee sh
  22. 22. your-project node_modules coffee-script npm i -D coffee-script sh —save-dev package.json
  23. 23. { … "dependencies": { … }, "devDependencies": { "coffee-script": "^1.9.2" } } package.json
  24. 24. your-project node_modules coffee-script npm i -S jquery sh —save package.json jquery
  25. 25. { … "dependencies": { "jquery": "^2.1.4" }, "devDependencies": { "coffee-script": "^1.9.2" } } package.json
  26. 26. https://plugins.jquery.com/
  27. 27. https://plugins.jquery.com/ We recommend moving to npm, using "jquery-plugin" as the keyword in your package.json.
  28. 28. http://blog.npmjs.org/post/101775448305/npm-and-front-end-packaging
  29. 29. https://speakerdeck.com/watilde/npm-update-g-npm
  30. 30. モジュールローダー
  31. 31. http://browserify.org/
  32. 32. var $ = require('jquery'); ! console.log($.fn.jquery); // 2.1.4 a.js
  33. 33. npm i -g browserify browserify a.js -o bundle.js # your-project/bundle.js sh
  34. 34. Browserify WebPack
  35. 35. https://gist.github.com/substack/68f8d502be42d5cd4942
  36. 36. タスクランナー
  37. 37. npm i -g grunt-cli npm i –D grunt grunt-contrib-coffee grunt build sh npm i -g gulp npm i –D gulp gulp-coffee gulp build
  38. 38. module.exports = function(grunt) { grunt.initConfig({ coffee: { compile: { files: { './a.js': './a.coffee' } } } }); ! grunt.loadNpmTasks('grunt-contrib-coffee'); grunt.registerTask('build', ['coffee']); }; Gruntfile.js
  39. 39. var gulp = require('gulp'); var coffee = require('gulp-coffee'); ! gulp.task('coffee', function() { return gulp.src(['./a.coffee']) .pipe(coffee()) .pipe(gulp.dest('./')); }); ! gulp.task('build', ['coffee']); Gulpfile.js
  40. 40. gulp.src(['./a.coffee']) .pipe(coffee()) .pipe(uglify()) .pipe(rename('a.min.js')) .pipe(gulp.dest('./')); Gulpfile.js
  41. 41. https://github.com/greypants/gulp-starter
  42. 42. { … "scripts": { "build": "coffee -c a.coffee" } } package.json sh npm i -D coffee-script npm run build
  43. 43. http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/
  44. 44. altJS, トランスパイラ
  45. 45. http://coffeescript.org/
  46. 46. greeting = -> "Hello" alert greeting() ! // var greeting; // // greeting = function() { // return "Hello"; // }; // // alert(greeting()); a.coffee
  47. 47. https://babeljs.io/
  48. 48. let greeting = () => 'Hello'; alert( greeting() ); ! // 'use strict'; // // var greeting = function greeting() { // return 'Hello'; // }; // // alert(greeting()); a.js
  49. 49. http://browserify.org/
  50. 50. var $ = require('jquery'); ! console.log($.fn.jquery); // 2.1.4 a.js
  51. 51. import $ from 'jquery'; ! console.log($.fn.jquery); // 2.1.4 a.js
  52. 52. npm i browserify babelify browserify a.js -t babelify -o bundle.js sh
  53. 53. http://codemix.com/blog/why-babel-matters
  54. 54. http://havelog.ayumusato.com/develop/javascript/e665-ts_jsx_flux.html
  55. 55. Lint
  56. 56. http://eslint.org/
  57. 57. .eslintrc { "parser": "babel-eslint", "rules": { "quotes": [1, "single"], "no-var": 2, ... }, "env": { "browser": true, ... } }
  58. 58. https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb
  59. 59. https://github.com/feross/eslint-config-standard
  60. 60. npm -D eslint eslint-config-airbnb sh .eslintrc { "extends": "airbnb" ... }
  61. 61. http://jscs.info/
  62. 62. https://github.com/jscs-dev/node-jscs/tree/master/presets
  63. 63. https://medium.com/dev-channel/auto-formatting-javascript-code-style-fe0f98a923b8
  64. 64. ユニットテスト
  65. 65. console.assert(1 + 1 == 2); test.js
  66. 66. console.assert( 1 + 1 == 2, '1 + 1 は 2 であること' ); test.js
  67. 67. console.assert( 1 + 1 == 3, '1 + 1 は 2 であること' ); ! Assertion failed: 1 + 1 は 2 であること test.js
  68. 68. http://mochajs.org/
  69. 69. describe('足し算のテスト', function() { ! it('1 + 1 は 2 であること', function() { console.assert(1 + 1 == 2); }) ! }); test.js
  70. 70. mocha test.js sh 足し算のテスト ✓ 1 + 1 は 2 であること ! 1 passing
  71. 71. mocha test.js sh 足し算のテスト 1) 1 + 1 は 2 であること ! 0 passing 1 failing
  72. 72. https://nodejs.org/api/assert.html
  73. 73. var assert = require('assert'); ! describe('足し算のテスト', function() { ! it('1 + 1 は 2 であること', function() { assert.equal(1 + 1, 2); }) ! }); test.js
  74. 74. assert.equal(); assert.notEqual(); ! assert.deepEqual(); assert.notDeepEqual(); ! assert.throws(); …
  75. 75. mocha test.js // console.assert sh … AssertionError: false == true + expected - actual ! -false +true
  76. 76. mocha test.js // node.js assert sh … AssertionError: 2 == 3 + expected - actual ! -2 +3
  77. 77. mocha test.js // power-assert sh … # test.js:6 ! assert(1 + 1 === 3) | | 2 false ! [number] 3 => 3 [number] 1 + 1 => 2
  78. 78. https://github.com/power-assert-js
  79. 79. http://dev.classmethod.jp/testing/10_errors_about_unit_testing/
  80. 80. MVなんたら
  81. 81. http://www.slideshare.net/ginpei_jp/js-modelview
  82. 82. https://goo.gl/2J3ZCr
  83. 83. https://facebook.github.io/flux/docs/overview.html Flux?
  84. 84. https://medium.com/@milankinen/good-bye-flux-welcome-bacon-rx-23c71abfb1a7
  85. 85. コンポーネント
  86. 86. - Custom Elements - HTML Imports - Template - Shadow DOM http://webcomponents.org/
  87. 87. http://webcomponents.org/articles/interview-with-joshua-peek/
  88. 88. https://customelements.io/
  89. 89. https://www.polymer-project.org/1.0/
  90. 90. https://facebook.github.io/react/
  91. 91. - Just the UI - Virtual DOM - Data Flow https://facebook.github.io/react/
  92. 92. var Button = React.createClass({ render: function() { return ( <button type={this.props.type}> {this.props.children} </button> ); } }); ! React.render( <Button type="submit">Hello</Button>, document.getElementById('example') ); a.jsx
  93. 93. setState()
  94. 94. setState() 再描画 再描画
  95. 95. http://blog.500tech.com/is-reactjs-fast/
  96. 96.
  97. 97. The most dangerous thought you can have as a creative person is to think you know what you re doing. Learn tools, and use tools, but don t accept tools. Always distrust them; always be alert for alternative ways of thinking. “想像的であり続けるために避けなければならないことは、 自分がやっていることを知っていると思い込むことです。 ツールを学び、ツールを使いこなす。しかし、ツールの全 てを受け入れてはなりません。 どんな時でも別の視点で考えるようにするべきです。 - Victor, Bret. “The Future of Programming.” http://quote.enja.io/post/the-most-dangerous-thought-you-can-have.../
  98. 98. https://flic.kr/p/m9738v QUESTION?

×