Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

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

9 156 vues

Publié le

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

http://learnjskanazawa.com/

Publié dans : Technologie
  • Soyez le premier à commenter

"今" 使える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?

×