春のJavaScript祭りで発表した資料です http://javascript-fes.doorkeeper.jp/events/14171

1. JavaScriptと共に
歩いて行く
決意をした君へ

2. 自己紹介
• むゆう @anticyborg
• IT僧侶
• フロントエンドエンジニア
• エンジニア2年目

3. 今日話すこと
• 今日から使える便利TIPS
• 規模にあわせたフレームワークの選定
• 言語仕様をもう1歩深く理解する

4. 今日話すこと
• 今日から使える便利TIPS
• 規模にあわせたフレームワークの選定
• 言語仕様をもう1歩深く理解する

5. 今日話すこと
• 如何にして僕がJSを覚えたか
• 挫折しないJSの習得の流れ

6. プログラム

7. 書けますか？

8. html/cssが生業の人は次のステップとして
JavaScriptの習得に向かうケースも多い

9. 最初の壁

10. プログラム

11. 書けますか？

12. そう

13. プログラムは
最初の1歩が
踏み出しにくい

14. JSに限らず、プログラムはhtml/cssと違って習得
にあたり障壁が多いように思う

15. html/css/JSの役割分担
(Webブラウザ限定)
• html
• 自然言語に意味をつけるための仕組み
• css
• htmlにスタイルを充てるための言語
• JavaScript
• 動的にページを書き換える

16. html/cssには俗に言う「プログラムとしての要
素」はほぼない

17. html/cssと
JavaScriptは
かなり違うジャンル

18. でも覚えたい

19. そうだ
本を買おう

20. やさしくわかるモダンJavaScript入門

21. JavaScriptプログラミング入門

22. 入門 JavaScript

23. 「いいえ、結構です」

24. 「まくらですか？」

25. 入門書という名の高等技術書に

26. 我々は何度煮え湯を飲まされたか

27. JavaScriptなんぞやめちまえ！

28. そこでjQuery

29. jQueryは特徴として「DOM操作を手軽に行う」
事を念頭に置いて開発されたため、とてもWeb制
作者フレンドリーな記述が可能になるため、とに
かく敷居が低い。

30. ボタンクリックでモーダルウィンドウを表示の動作をjQueryで記述
$(function(){
// ボタンをクリック
$('.btn').click(function(){
$('.modal').css({'display': 'block'});
$('.modal').animate({
'opacity': 1
}, 400);
});
});

31. あ、これならわかるかも

32. Web制作の現場で使うjQueryデザイン入門

33. • プログラムの習得要素が少ない
• WebのUIをちょっと覚えるならこれ一本で
• すげー丁寧

34. JavaScriptに入門する

35. JavaScriptに入門する

36. jQueryに入門する

37. jQueryデザイン入門以降はしばらくガリガリ書く
他の本はとりあえずいらない

38. え、なんで

39. • やってかないと疑問が出てこない
• 次の壁にぶち当たれない

40. 思うに

41. 何かを習得するために一番必要なこと

42. 読む->書く
繰り返し

43. 以降の壁
• プログラム的な仕組み/言語仕様
• 処理の分割

44. プログラム的な仕組み
jQueryでUIを作る際に幾度もご登場願うGoogle
先生が教えてくれる参照先で、必ず変数・関数・
条件分岐・繰り返し等のいわゆるプログラム的な
処理を目にする機会が増える

45. $(function(){
// よく使う要素をあらかじめ変数化
var $modal = $('.modal');
// モーダルを開く関数を作る
var openModal = function () {
$modal.css({'display': 'block'});
$modal.animate({
'opacity': 1
}, 400);
};
// クリックしたらモーダルを開く関数を実行
$('.btn').click(openModal);
});

46. まだ何となく読める感じはするけど、段々と分か
んなっていく。。。

47. そろそろ
も1歩
進もう

48. 言語仕様・TIP等を紹介してる書籍

49. 開眼! JavaScript ―言語仕様から学ぶJavaScriptの
本質

50. JavaScript: The Good Parts ―「良いパーツ」に
よるベストプラクティス

51. すべての人に知っておいてほしい JavaScriptの基
本原則

52. ついでに
簡単なゲームとかにチャレンジするのもおすすめ
• 条件分岐を何となくじゃなくて割ときっちりで
きるようになる
• アクションに対して行う事が多いので処理をま
とめる良い練習になる
• ブラウザ毎の対応が結構必要なことに気付く
• オブジェクトについての理解が深まる

53. これで1歩進めた

54. またガリガリ書く

55. 次の壁

56. 処理の分割

57. そろそろJSファイルを1ファイルで完結させるの
が辛くなってくる

58. そろそろJSファイルを1ファイルで完結させるの
が辛くなってくる
• グローバル変数を使わない
• グローバル変数を使う
• モジュール化
• ファイルの分割
• タスク自動化（concat）

59. JavaScriptパターン ―優れたアプリケーションの
ための作法

60. moduleA.js
var app = app || {};
(function($, app){
app.moduleA = {
element: $('.moduleA'),
get: function(){
// 何か処理
},
set: function(){
// 何か処理
}
};
})(jQuery, app);

61. run.js
(function($, app){
var modA = app.moduleA;
modA.element.click(modA.get);
})(jQuery, app);

62. var app = app || {};

63. グローバル変数
appを作る

64. その中でのみ
開発を進める

65. read
<script src='moduleA.js'></script>
<script src='run.js'></script>
</body>
</html>

66. read
<script src='moduleA.js'></script>
<script src='moduleB.js'></script>
<script src='moduleC.js'></script>
<script src='run.js'></script>
</body>
</html>

67. read
<script src='moduleA.js'></script>
<script src='moduleB.js'></script>
<script src='moduleC.js'></script>
<script src='moduleD.js'></script>
<script src='moduleE.js'></script>
<script src='run.js'></script>
</body>
</html>

68. そんないっぱいJS読むの？

69. バカなの？

70. まとめましょう

72. grunt-contrib-concat
grunt.initConfig({
concat: {
options: {
separator: ';',
},
dist: {
src: ['moduleA.js', 'run.js'],
dest: 'app.js',
}
}
});

74. gulp-concat
var concat = require('gulp-concat');
gulp.task('concat', function() {
gulp.src('*.js')
.pipe(concat('app.js'))
.pipe(gulp.dest('./'))
});

75. app.js
var app = app || {};
(function($, app){
app.moduleA = {
element: $('.moduleA'),
get: function(){
// 何か処理
},
set: function(){
// 何か処理
}
};
})(jQuery, app);
(function($, app){
var modA = app.moduleA;
modA.element.click(modA.get);
})(jQuery, app);

76. read
<script src='app.js'></script>
</body>
</html>

77. まとめ

78. • 何だかんだで書籍は優秀
• 必要なタイミングで必要な書籍が必要
• 良いからとにかく量を書け

79. 今必要なのが
どれか分からない

80. 全部買おう

81. 全部買おう

82. 知ってそうな人に聞こう

83. あと、とりあえず書こう