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

Transcript

• 1. https://flic.kr/p/m9738v Learn JS in Kanazawa kakenai.js ver.1.0
• 2. https://flic.kr/p/npvsQJ
• 3. @pocotan001 Hayato Mizuno
• 4. https://frontendweekly.tokyo/
• 5. http://blocsapp.com/
• 6. http://electron.atom.io/
• 7. http://electron.atom.io/
• 8. https://flic.kr/p/9gpNkP
• 9. https://flic.kr/p/dSuxV1 Choose JS Tools Today
• 10. EditorConfig http://editorconfig.org/
• 11. root = true ! [*] indent_style = space indent_size = 2 trim_trailing_whitespace = true ! [*.md] trim_trailing_whitespace = false .editorconfig
• 12. 黒い画面
• 13. command -options arguments sh
• 14. command -options arguments ! coffee -wc a.coffee sh
• 15. command -options arguments ! coffee -wc a.coffee # coffee -w -c a.coffee # coffee --watch --compile a.coffee sh
• 16. パッケージ マネージャー
• 17. &
• 18. npm i -g xxx # npm install —-global xxx
• 19. https://goo.gl/2Uq21X その他 56% grunt 4% pm2 4% gulp 7% bower 11% grunt-cli 18%
• 20. ~/…lib # npm root -g node_modules coffee-script npm i -g coffee-script coffee … sh
• 21. your-project node_modules coffee-script npm i coffee-script coffee … # command not found: coffee sh
• 22. your-project node_modules coffee-script npm i -D coffee-script sh —save-dev package.json
• 23. { … "dependencies": { … }, "devDependencies": { "coffee-script": "^1.9.2" } } package.json
• 24. your-project node_modules coffee-script npm i -S jquery sh —save package.json jquery
• 25. { … "dependencies": { "jquery": "^2.1.4" }, "devDependencies": { "coffee-script": "^1.9.2" } } package.json
• 26. https://plugins.jquery.com/
• 27. https://plugins.jquery.com/ We recommend moving to npm, using "jquery-plugin" as the keyword in your package.json.
• 28. http://blog.npmjs.org/post/101775448305/npm-and-front-end-packaging
• 29. https://speakerdeck.com/watilde/npm-update-g-npm
• 30. モジュールローダー
• 31. http://browserify.org/
• 32. var $ = require('jquery'); ! console.log($.fn.jquery); // 2.1.4 a.js
• 33. npm i -g browserify browserify a.js -o bundle.js # your-project/bundle.js sh
• 34. Browserify WebPack
• 35. https://gist.github.com/substack/68f8d502be42d5cd4942
• 36. タスクランナー
• 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. 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. 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. gulp.src(['./a.coffee']) .pipe(coffee()) .pipe(uglify()) .pipe(rename('a.min.js')) .pipe(gulp.dest('./')); Gulpfile.js
• 41. https://github.com/greypants/gulp-starter
• 42. { … "scripts": { "build": "coffee -c a.coffee" } } package.json sh npm i -D coffee-script npm run build
• 43. http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/
• 44. altJS, トランスパイラ
• 45. http://coffeescript.org/
• 46. greeting = -> "Hello" alert greeting() ! // var greeting; // // greeting = function() { // return "Hello"; // }; // // alert(greeting()); a.coffee
• 47. https://babeljs.io/
• 48. let greeting = () => 'Hello'; alert( greeting() ); ! // 'use strict'; // // var greeting = function greeting() { // return 'Hello'; // }; // // alert(greeting()); a.js
• 49. http://browserify.org/
• 50. var $ = require('jquery'); ! console.log($.fn.jquery); // 2.1.4 a.js
• 51. import $ from 'jquery'; ! console.log($.fn.jquery); // 2.1.4 a.js
• 52. npm i browserify babelify browserify a.js -t babelify -o bundle.js sh
• 53. http://codemix.com/blog/why-babel-matters
• 54. http://havelog.ayumusato.com/develop/javascript/e665-ts_jsx_flux.html
• 55. Lint
• 56. http://eslint.org/
• 57. .eslintrc { "parser": "babel-eslint", "rules": { "quotes": [1, "single"], "no-var": 2, ... }, "env": { "browser": true, ... } }
• 58. https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb
• 59. https://github.com/feross/eslint-config-standard
• 60. npm -D eslint eslint-config-airbnb sh .eslintrc { "extends": "airbnb" ... }
• 61. http://jscs.info/
• 62. https://github.com/jscs-dev/node-jscs/tree/master/presets
• 63. https://medium.com/dev-channel/auto-formatting-javascript-code-style-fe0f98a923b8
• 64. ユニットテスト
• 65. console.assert(1 + 1 == 2); test.js
• 66. console.assert( 1 + 1 == 2, '1 + 1 は 2 であること' ); test.js
• 67. console.assert( 1 + 1 == 3, '1 + 1 は 2 であること' ); ! Assertion failed: 1 + 1 は 2 であること test.js
• 68. http://mochajs.org/
• 69. describe('足し算のテスト', function() { ! it('1 + 1 は 2 であること', function() { console.assert(1 + 1 == 2); }) ! }); test.js
• 70. mocha test.js sh 足し算のテスト ✓ 1 + 1 は 2 であること ! 1 passing
• 71. mocha test.js sh 足し算のテスト 1) 1 + 1 は 2 であること ! 0 passing 1 failing
• 72. https://nodejs.org/api/assert.html
• 73. var assert = require('assert'); ! describe('足し算のテスト', function() { ! it('1 + 1 は 2 であること', function() { assert.equal(1 + 1, 2); }) ! }); test.js
• 74. assert.equal(); assert.notEqual(); ! assert.deepEqual(); assert.notDeepEqual(); ! assert.throws(); …
• 75. mocha test.js // console.assert sh … AssertionError: false == true + expected - actual ! -false +true
• 76. mocha test.js // node.js assert sh … AssertionError: 2 == 3 + expected - actual ! -2 +3
• 77. mocha test.js // power-assert sh … # test.js:6 ! assert(1 + 1 === 3) | | 2 false ! [number] 3 => 3 [number] 1 + 1 => 2
• 78. https://github.com/power-assert-js
• 79. http://dev.classmethod.jp/testing/10_errors_about_unit_testing/
• 80. MVなんたら
• 81. http://www.slideshare.net/ginpei_jp/js-modelview
• 82. https://goo.gl/2J3ZCr
• 83. https://facebook.github.io/flux/docs/overview.html Flux?
• 84. https://medium.com/@milankinen/good-bye-flux-welcome-bacon-rx-23c71abfb1a7
• 85. コンポーネント
• 86. - Custom Elements - HTML Imports - Template - Shadow DOM http://webcomponents.org/
• 87. http://webcomponents.org/articles/interview-with-joshua-peek/
• 88. https://customelements.io/
• 89. https://www.polymer-project.org/1.0/
• 90. https://facebook.github.io/react/
• 91. - Just the UI - Virtual DOM - Data Flow https://facebook.github.io/react/
• 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. setState()
• 94. setState() 再描画 再描画
• 95. http://blog.500tech.com/is-reactjs-fast/
• 96. …
• 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. https://flic.kr/p/m9738v QUESTION?