"今" 使えるJavaScriptのトレンド
52 likes10,415 views
The document discusses various JavaScript tools and techniques. It covers topics like transpilers like CoffeeScript and Babel, module bundlers like Browserify, task runners like Grunt and Gulp, linting with ESLint, unit testing with Mocha and Assertions, MV patterns like Flux, and components with React. It provides links to documentation and resources for learning more about each topic.
![root = true
!
[*]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
!
[*.md]
trim_trailing_whitespace = false
.editorconfig](https://image.slidesharecdn.com/slide-150606063133-lva1-app6891/85/JavaScript-16-320.jpg)
![module.exports = function(grunt) {
grunt.initConfig({
coffee: {
compile: {
files: {
'./a.js': './a.coffee'
}
}
}
});
!
grunt.loadNpmTasks('grunt-contrib-coffee');
grunt.registerTask('build', ['coffee']);
};
Gruntfile.js](https://image.slidesharecdn.com/slide-150606063133-lva1-app6891/85/JavaScript-45-320.jpg)
![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](https://image.slidesharecdn.com/slide-150606063133-lva1-app6891/85/JavaScript-46-320.jpg)
![gulp.src(['./a.coffee'])
.pipe(coffee())
.pipe(uglify())
.pipe(rename('a.min.js'))
.pipe(gulp.dest('./'));
Gulpfile.js](https://image.slidesharecdn.com/slide-150606063133-lva1-app6891/85/JavaScript-47-320.jpg)
![.eslintrc
{
"parser": "babel-eslint",
"rules": {
"quotes": [1, "single"],
"no-var": 2,
...
},
"env": {
"browser": true,
...
}
}](https://image.slidesharecdn.com/slide-150606063133-lva1-app6891/85/JavaScript-66-320.jpg)
![mocha test.js // power-assert
sh
…
# test.js:6
!
assert(1 + 1 === 3)
| |
2 false
!
[number] 3
=> 3
[number] 1 + 1
=> 2](https://image.slidesharecdn.com/slide-150606063133-lva1-app6891/85/JavaScript-86-320.jpg)
"今" 使えるJavaScriptのトレンド
- 1. https://flic.kr/p/m9738v Learn JS in Kanazawa kakenai.js ver.1.0
- 14. https://flic.kr/p/dSuxV1 Choose JS Tools Today
- 16. root = true ! [*] indent_style = space indent_size = 2 trim_trailing_whitespace = true ! [*.md] trim_trailing_whitespace = false .editorconfig
- 18. 黒い画面
- 20. command -options arguments ! coffee -wc a.coffee sh
- 21. command -options arguments ! coffee -wc a.coffee # coffee -w -c a.coffee # coffee --watch --compile a.coffee sh
- 22. パッケージ マネージャー
- 23. &
- 24. npm i -g xxx # npm install —-global xxx
- 26. ~/…lib # npm root -g node_modules coffee-script npm i -g coffee-script coffee … sh
- 27. your-project node_modules coffee-script npm i coffee-script coffee … # command not found: coffee sh
- 28. your-project node_modules coffee-script npm i -D coffee-script sh —save-dev package.json
- 29. { … "dependencies": { … }, "devDependencies": { "coffee-script": "^1.9.2" } } package.json
- 30. your-project node_modules coffee-script npm i -S jquery sh —save package.json jquery
- 31. { … "dependencies": { "jquery": "^2.1.4" }, "devDependencies": { "coffee-script": "^1.9.2" } } package.json
- 33. https://plugins.jquery.com/ We recommend moving to npm, using "jquery-plugin" as the keyword in your package.json.
- 36. モジュールローダー
- 38. var $ = require('jquery'); ! console.log($.fn.jquery); // 2.1.4 a.js
- 39. npm i -g browserify browserify a.js -o bundle.js # your-project/bundle.js sh
- 42. タスクランナー
- 44. 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
- 45. module.exports = function(grunt) { grunt.initConfig({ coffee: { compile: { files: { './a.js': './a.coffee' } } } }); ! grunt.loadNpmTasks('grunt-contrib-coffee'); grunt.registerTask('build', ['coffee']); }; Gruntfile.js
- 46. 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
- 50. { … "scripts": { "build": "coffee -c a.coffee" } } package.json sh npm i -D coffee-script npm run build
- 52. altJS, トランスパイラ
- 54. greeting = -> "Hello" alert greeting() ! // var greeting; // // greeting = function() { // return "Hello"; // }; // // alert(greeting()); a.coffee
- 56. let greeting = () => 'Hello'; alert( greeting() ); ! // 'use strict'; // // var greeting = function greeting() { // return 'Hello'; // }; // // alert(greeting()); a.js
- 58. var $ = require('jquery'); ! console.log($.fn.jquery); // 2.1.4 a.js
- 59. import $ from 'jquery'; ! console.log($.fn.jquery); // 2.1.4 a.js
- 60. npm i browserify babelify browserify a.js -t babelify -o bundle.js sh
- 63. Lint
- 66. .eslintrc { "parser": "babel-eslint", "rules": { "quotes": [1, "single"], "no-var": 2, ... }, "env": { "browser": true, ... } }
- 69. npm -D eslint eslint-config-airbnb sh .eslintrc { "extends": "airbnb" ... }
- 72. https://medium.com/dev-channel/auto-formatting-javascript-code-style-fe0f98a923b8
- 73. ユニットテスト
- 74. console.assert(1 + 1 == 2); test.js
- 75. console.assert( 1 + 1 == 2, '1 + 1 は 2 であること' ); test.js
- 76. console.assert( 1 + 1 == 3, '1 + 1 は 2 であること' ); ! Assertion failed: 1 + 1 は 2 であること test.js
- 78. describe('足し算のテスト', function() { ! it('1 + 1 は 2 であること', function() { console.assert(1 + 1 == 2); }) ! }); test.js
- 79. mocha test.js sh 足し算のテスト ✓ 1 + 1 は 2 であること ! 1 passing
- 80. mocha test.js sh 足し算のテスト 1) 1 + 1 は 2 であること ! 0 passing 1 failing
- 82. var assert = require('assert'); ! describe('足し算のテスト', function() { ! it('1 + 1 は 2 であること', function() { assert.equal(1 + 1, 2); }) ! }); test.js
- 83. assert.equal(); assert.notEqual(); ! assert.deepEqual(); assert.notDeepEqual(); ! assert.throws(); …
- 84. mocha test.js // console.assert sh … AssertionError: false == true + expected - actual ! -false +true
- 85. mocha test.js // node.js assert sh … AssertionError: 2 == 3 + expected - actual ! -2 +3
- 86. mocha test.js // power-assert sh … # test.js:6 ! assert(1 + 1 === 3) | | 2 false ! [number] 3 => 3 [number] 1 + 1 => 2
- 89. MVなんたら
- 94. コンポーネント
- 95. - Custom Elements - HTML Imports - Template - Shadow DOM http://webcomponents.org/
- 100. - Just the UI - Virtual DOM - Data Flow https://facebook.github.io/react/
- 101. 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
- 103. setState()
- 104. setState() 再描画 再描画
- 106. …
- 107. 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.../