![root = true![*]indent_style = spaceindent_size = 2trim_trailing_whitespace = true![*.md]trim_trailing_whitespace = false.editorconfig](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fslide-150606063133-lva1-app6891%2f75%2fJavaScript-16-2048.jpg&f=jpg&w=240)
![module.exports = function(grunt) {grunt.initConfig({coffee: {compile: {files: {'./a.js': './a.coffee'}}}});!grunt.loadNpmTasks('grunt-contrib-coffee');grunt.registerTask('build', ['coffee']);};Gruntfile.js](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fslide-150606063133-lva1-app6891%2f75%2fJavaScript-45-2048.jpg&f=jpg&w=240)
![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](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fslide-150606063133-lva1-app6891%2f75%2fJavaScript-46-2048.jpg&f=jpg&w=240)
![gulp.src(['./a.coffee']).pipe(coffee()).pipe(uglify()).pipe(rename('a.min.js')).pipe(gulp.dest('./'));Gulpfile.js](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fslide-150606063133-lva1-app6891%2f75%2fJavaScript-47-2048.jpg&f=jpg&w=240)
![.eslintrc{"parser": "babel-eslint","rules": {"quotes": [1, "single"],"no-var": 2,...},"env": {"browser": true,...}}](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fslide-150606063133-lva1-app6891%2f75%2fJavaScript-66-2048.jpg&f=jpg&w=240)
![mocha test.js // power-assertsh…# test.js:6!assert(1 + 1 === 3)| |2 false![number] 3=> 3[number] 1 + 1=> 2](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fslide-150606063133-lva1-app6891%2f75%2fJavaScript-86-2048.jpg&f=jpg&w=240)
Uploaded byHayato Mizuno
10,420 views
"今" 使える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.
Recommended
"今" 使えるJavaScriptのトレンド
- 1.https://flic.kr/p/m9738vLearn JS inKanazawakakenai.js ver.1.0
- 2.
- 3.
- 6.
- 7.
- 8.
- 9.
- 10.
- 14.
- 15.
- 16.root = true![*]indent_style= spaceindent_size = 2trim_trailing_whitespace = true![*.md]trim_trailing_whitespace = false.editorconfig
- 18.
- 19.
- 20.command -options arguments!coffee-wc a.coffeesh
- 21.command -options arguments!coffee-wc a.coffee# coffee -w -c a.coffee# coffee --watch --compile a.coffeesh
- 22.
- 23.
- 24.npm i -gxxx# npm install —-global xxx
- 25.
- 26.~/…lib # npmroot -gnode_modulescoffee-scriptnpm i -g coffee-scriptcoffee …sh
- 27.your-projectnode_modulescoffee-scriptnpm i coffee-scriptcoffee…# command not found: coffeesh
- 28.your-projectnode_modulescoffee-scriptnpm i -Dcoffee-scriptsh—save-devpackage.json
- 29.{…"dependencies": { …},"devDependencies": {"coffee-script": "^1.9.2"}}package.json
- 30.your-projectnode_modulescoffee-scriptnpm i -Sjquerysh—savepackage.jsonjquery
- 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 thekeyword in your package.json.
- 34.
- 35.
- 36.
- 37.
- 38.var $ =require('jquery');!console.log($.fn.jquery); // 2.1.4a.js
- 39.npm i -gbrowserifybrowserify a.js -o bundle.js# your-project/bundle.jssh
- 40.
- 41.
- 42.
- 44.npm i -ggrunt-clinpm i –D grunt grunt-contrib-coffeegrunt buildshnpm i -g gulpnpm i –D gulp gulp-coffeegulp 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.jsonshnpm i -D coffee-scriptnpm 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.4a.js
- 59.import $ from'jquery';!console.log($.fn.jquery); // 2.1.4a.js
- 60.npm i browserifybabelifybrowserify a.js -t babelify -o bundle.jssh
- 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-airbnbsh.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.jssh足し算のテスト✓ 1+ 1 は 2 であること!1 passing
- 80.mocha test.jssh足し算のテスト1) 1+ 1 は 2 であること!0 passing1 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.assertsh…AssertionError: false == true+ expected - actual!-false+true
- 85.mocha test.js //node.js assertsh…AssertionError: 2 == 3+ expected - actual!-2+3
- 86.mocha test.js //power-assertsh…# 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 DOMhttp://webcomponents.org/
- 96.
- 97.
- 98.
- 99.
- 100.- Just theUI- Virtual DOM- Data Flowhttps://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 tothink you know what you re doing. Learn tools, and use tools, butdon t accept tools. Always distrust them; always be alert foralternative ways of thinking.“想像的であり続けるために避けなければならないことは、自分がやっていることを知っていると思い込むことです。ツールを学び、ツールを使いこなす。しかし、ツールの全てを受け入れてはなりません。どんな時でも別の視点で考えるようにするべきです。- Victor, Bret. “The Future of Programming.”http://quote.enja.io/post/the-most-dangerous-thought-you-can-have.../
- 108.