![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)
Uploaded byHayato Mizuno
"今" 使えるJavaScriptのトレンド
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.
"今" 使えるJavaScriptのトレンド
- 1. https://flic.kr/p/m9738v Learn JS inKanazawa kakenai.js ver.1.0
- 2.
- 3.
- 6.
- 7.
- 8.
- 9.
- 10.
- 14.
- 15.
- 16. root = true ! [*] indent_style= space indent_size = 2 trim_trailing_whitespace = true ! [*.md] trim_trailing_whitespace = false .editorconfig
- 18.
- 19.
- 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 -gxxx # npm install —-global xxx
- 25.
- 26. ~/…lib # npmroot -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 -Dcoffee-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 -Sjquery sh —save package.json jquery
- 31. { … "dependencies": { "jquery": "^2.1.4" }, "devDependencies":{ "coffee-script": "^1.9.2" } } package.json
- 32.
- 33. https://plugins.jquery.com/ We recommend movingto npm, using "jquery-plugin" as the keyword in your package.json.
- 34.
- 35.
- 36.
- 37.
- 38. var $ =require('jquery'); ! console.log($.fn.jquery); // 2.1.4 a.js
- 39. npm i -gbrowserify browserify a.js -o bundle.js # your-project/bundle.js sh
- 40.
- 41.
- 42.
- 44. npm i -ggrunt-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
- 47.
- 48.
- 50. { … "scripts": { "build": "coffee-c a.coffee" } } package.json sh npm i -D coffee-script npm run build
- 51.
- 52.
- 53.
- 54. greeting = ->"Hello" alert greeting() ! // var greeting; // // greeting = function() { // return "Hello"; // }; // // alert(greeting()); a.coffee
- 55.
- 56. let greeting =() => 'Hello'; alert( greeting() ); ! // 'use strict'; // // var greeting = function greeting() { // return 'Hello'; // }; // // alert(greeting()); a.js
- 57.
- 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 browserifybabelify browserify a.js -t babelify -o bundle.js sh
- 61.
- 62.
- 63.
- 64.
- 66. .eslintrc { "parser": "babel-eslint", "rules": { "quotes":[1, "single"], "no-var": 2, ... }, "env": { "browser": true, ... } }
- 67.
- 68.
- 69. npm -D eslinteslint-config-airbnb sh .eslintrc { "extends": "airbnb" ... }
- 70.
- 71.
- 72.
- 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
- 77.
- 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
- 81.
- 82. var assert =require('assert'); ! describe('足し算のテスト', function() { ! it('1 + 1 は 2 であること', function() { assert.equal(1 + 1, 2); }) ! }); test.js
- 83.
- 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
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95. - Custom Elements -HTML Imports - Template - Shadow DOM http://webcomponents.org/
- 96.
- 97.
- 98.
- 99.
- 100. - Just theUI - 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.
- 104.
- 105.
- 106.
- 107. The most dangerousthought 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.../
- 108.