Learn JS in Kanazawa - Kakenai.js ver1.0（2015年6月6日開催）で使用したスライドです。 http://learnjskanazawa.com/

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

6. https://frontendweekly.tokyo/

7. http://blocsapp.com/

8. http://electron.atom.io/

9. http://electron.atom.io/

10. https://flic.kr/p/9gpNkP

14. https://flic.kr/p/dSuxV1
Choose JS Tools Today

15. EditorConfig
http://editorconfig.org/

16. root = true
!
[*]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
!
[*.md]
trim_trailing_whitespace = false
.editorconfig

18. 黒い画面

19. command -options arguments
sh

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

25. https://goo.gl/2Uq21X
その他
56%
grunt
4%
pm2
4%
gulp
7%
bower
11%
grunt-cli
18%

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

32. https://plugins.jquery.com/

33. https://plugins.jquery.com/
We recommend moving to npm,
using "jquery-plugin" as the
keyword in your package.json.

34. http://blog.npmjs.org/post/101775448305/npm-and-front-end-packaging

35. https://speakerdeck.com/watilde/npm-update-g-npm

36. モジュールローダー

37. http://browserify.org/

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

40. Browserify WebPack

41. https://gist.github.com/substack/68f8d502be42d5cd4942

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

47. gulp.src(['./a.coffee'])
.pipe(coffee())
.pipe(uglify())
.pipe(rename('a.min.js'))
.pipe(gulp.dest('./'));
Gulpfile.js

48. https://github.com/greypants/gulp-starter

50. {
…
"scripts": {
"build": "coffee -c a.coffee"
}
}
package.json
sh
npm i -D coffee-script
npm run build

51. http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/

52. altJS,
トランスパイラ

53. http://coffeescript.org/

54. greeting = -> "Hello"
alert greeting()
!
// var greeting;
//
// greeting = function() {
// return "Hello";
// };
//
// alert(greeting());
a.coffee

55. https://babeljs.io/

56. let greeting = () => 'Hello';
alert( greeting() );
!
// 'use strict';
//
// var greeting = function greeting() {
// return 'Hello';
// };
//
// alert(greeting());
a.js

57. http://browserify.org/

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

61. http://codemix.com/blog/why-babel-matters

62. http://havelog.ayumusato.com/develop/javascript/e665-ts_jsx_flux.html

63. Lint

64. http://eslint.org/

66. .eslintrc
{
"parser": "babel-eslint",
"rules": {
"quotes": [1, "single"],
"no-var": 2,
...
},
"env": {
"browser": true,
...
}
}

67. https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb

68. https://github.com/feross/eslint-config-standard

69. npm -D eslint eslint-config-airbnb
sh
.eslintrc
{
"extends": "airbnb"
...
}

70. http://jscs.info/

71. https://github.com/jscs-dev/node-jscs/tree/master/presets

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

77. http://mochajs.org/

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. https://nodejs.org/api/assert.html

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

87. https://github.com/power-assert-js

88. http://dev.classmethod.jp/testing/10_errors_about_unit_testing/

89. MVなんたら

90. http://www.slideshare.net/ginpei_jp/js-modelview

91. https://goo.gl/2J3ZCr

92. https://facebook.github.io/flux/docs/overview.html
Flux?

93. https://medium.com/@milankinen/good-bye-flux-welcome-bacon-rx-23c71abfb1a7

94. コンポーネント

95. - Custom Elements
- HTML Imports
- Template
- Shadow DOM
http://webcomponents.org/

96. http://webcomponents.org/articles/interview-with-joshua-peek/

97. https://customelements.io/

98. https://www.polymer-project.org/1.0/

99. https://facebook.github.io/react/

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()
再描画
再描画

105. http://blog.500tech.com/is-reactjs-fast/

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.../

108. https://flic.kr/p/m9738v
QUESTION?