Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
JavaScriptと共に 
歩いて行く 
決意をした君へ
自己紹介 
• むゆう @anticyborg 
• IT僧侶 
• フロントエンドエンジニア 
• エンジニア2年目
今日話すこと 
• 今日から使える便利TIPS 
• 規模にあわせたフレームワークの選定 
• 言語仕様をもう1歩深く理解する
今日話すこと 
• 今日から使える便利TIPS 
• 規模にあわせたフレームワークの選定 
• 言語仕様をもう1歩深く理解する
今日話すこと 
• 如何にして僕がJSを覚えたか 
• 挫折しないJSの習得の流れ
プログラム
書けますか?
html/cssが生業の人は次のステップとして 
JavaScriptの習得に向かうケースも多い
最初の壁
プログラム
書けますか?
そう
プログラムは 
最初の1歩が 
踏み出しにくい
JSに限らず、プログラムはhtml/cssと違って習得 
にあたり障壁が多いように思う
html/css/JSの役割分担 
(Webブラウザ限定) 
• html 
• 自然言語に意味をつけるための仕組み 
• css 
• htmlにスタイルを充てるための言語 
• JavaScript 
• 動的にページを書き換える
html/cssには俗に言う「プログラムとしての要 
素」はほぼない
html/cssと 
JavaScriptは 
かなり違うジャンル
でも覚えたい
そうだ 
本を買おう
やさしくわかるモダンJavaScript入門
JavaScriptプログラミング入門
入門 JavaScript
「いいえ、結構です」
「まくらですか?」
入門書という名の高等技術書に
我々は何度煮え湯を飲まされたか
JavaScriptなんぞやめちまえ!
そこでjQuery
jQueryは特徴として「DOM操作を手軽に行う」 
事を念頭に置いて開発されたため、とてもWeb制 
作者フレンドリーな記述が可能になるため、とに 
かく敷居が低い。
ボタンクリックでモーダルウィンドウを表示の動作をjQueryで記述 
$(function(){ 
// ボタンをクリック 
$('.btn').click(function(){ 
$('.modal').css({'display': 'b...
あ、これならわかるかも
Web制作の現場で使うjQueryデザイン入門
• プログラムの習得要素が少ない 
• WebのUIをちょっと覚えるならこれ一本で 
• すげー丁寧
JavaScriptに入門する
JavaScriptに入門する
jQueryに入門する
jQueryデザイン入門以降はしばらくガリガリ書く 
他の本はとりあえずいらない
え、なんで
• やってかないと疑問が出てこない 
• 次の壁にぶち当たれない
思うに
何かを習得するために一番必要なこと
読む->書く 
繰り返し
以降の壁 
• プログラム的な仕組み/言語仕様 
• 処理の分割
プログラム的な仕組み 
jQueryでUIを作る際に幾度もご登場願うGoogle 
先生が教えてくれる参照先で、必ず変数・関数・ 
条件分岐・繰り返し等のいわゆるプログラム的な 
処理を目にする機会が増える
$(function(){ 
// よく使う要素をあらかじめ変数化 
var $modal = $('.modal'); 
// モーダルを開く関数を作る 
var openModal = function () { 
$modal.css({...
まだ何となく読める感じはするけど、段々と分か 
んなっていく。。。
そろそろ 
も1歩 
進もう
言語仕様・TIP等を紹介してる書籍
開眼! JavaScript ―言語仕様から学ぶJavaScriptの 
本質
JavaScript: The Good Parts ―「良いパーツ」に 
よるベストプラクティス
すべての人に知っておいてほしい JavaScriptの基 
本原則
ついでに 
簡単なゲームとかにチャレンジするのもおすすめ 
• 条件分岐を何となくじゃなくて割ときっちりで 
きるようになる 
• アクションに対して行う事が多いので処理をま 
とめる良い練習になる 
• ブラウザ毎の対応が結構必要なことに気付...
これで1歩進めた
またガリガリ書く
次の壁
処理の分割
そろそろJSファイルを1ファイルで完結させるの 
が辛くなってくる
そろそろJSファイルを1ファイルで完結させるの 
が辛くなってくる 
• グローバル変数を使わない 
• グローバル変数を使う 
• モジュール化 
• ファイルの分割 
• タスク自動化(concat)
JavaScriptパターン ―優れたアプリケーションの 
ための作法
moduleA.js 
var app = app || {}; 
(function($, app){ 
app.moduleA = { 
element: $('.moduleA'), 
get: function(){ 
// 何か処理 ...
run.js 
(function($, app){ 
var modA = app.moduleA; 
modA.element.click(modA.get); 
})(jQuery, app);
var app = app || {};
グローバル変数 
appを作る
その中でのみ 
開発を進める
read 
<script src='moduleA.js'></script> 
<script src='run.js'></script> 
</body> 
</html>
read 
<script src='moduleA.js'></script> 
<script src='moduleB.js'></script> 
<script src='moduleC.js'></script> 
<script ...
read 
<script src='moduleA.js'></script> 
<script src='moduleB.js'></script> 
<script src='moduleC.js'></script> 
<script ...
そんないっぱいJS読むの?
バカなの?
まとめましょう
grunt-contrib-concat 
grunt.initConfig({ 
concat: { 
options: { 
separator: ';', 
}, 
dist: { 
src: ['moduleA.js', 'run.js...
gulp-concat 
var concat = require('gulp-concat'); 
gulp.task('concat', function() { 
gulp.src('*.js') 
.pipe(concat('app.j...
app.js 
var app = app || {}; 
(function($, app){ 
app.moduleA = { 
element: $('.moduleA'), 
get: function(){ 
// 何か処理 
}, ...
read 
<script src='app.js'></script> 
</body> 
</html>
まとめ
• 何だかんだで書籍は優秀 
• 必要なタイミングで必要な書籍が必要 
• 良いからとにかく量を書け
今必要なのが 
どれか分からない
全部買おう
全部買おう
知ってそうな人に聞こう
あと、とりあえず書こう
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
Upcoming SlideShare
Loading in …5
×

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

8,060 views

Published on

春のJavaScript祭りで発表した資料です

http://javascript-fes.doorkeeper.jp/events/14171

Published in: Technology
  • Be the first to comment

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

  1. 1. JavaScriptと共に 歩いて行く 決意をした君へ
  2. 2. 自己紹介 • むゆう @anticyborg • IT僧侶 • フロントエンドエンジニア • エンジニア2年目
  3. 3. 今日話すこと • 今日から使える便利TIPS • 規模にあわせたフレームワークの選定 • 言語仕様をもう1歩深く理解する
  4. 4. 今日話すこと • 今日から使える便利TIPS • 規模にあわせたフレームワークの選定 • 言語仕様をもう1歩深く理解する
  5. 5. 今日話すこと • 如何にして僕がJSを覚えたか • 挫折しないJSの習得の流れ
  6. 6. プログラム
  7. 7. 書けますか?
  8. 8. html/cssが生業の人は次のステップとして JavaScriptの習得に向かうケースも多い
  9. 9. 最初の壁
  10. 10. プログラム
  11. 11. 書けますか?
  12. 12. そう
  13. 13. プログラムは 最初の1歩が 踏み出しにくい
  14. 14. JSに限らず、プログラムはhtml/cssと違って習得 にあたり障壁が多いように思う
  15. 15. html/css/JSの役割分担 (Webブラウザ限定) • html • 自然言語に意味をつけるための仕組み • css • htmlにスタイルを充てるための言語 • JavaScript • 動的にページを書き換える
  16. 16. html/cssには俗に言う「プログラムとしての要 素」はほぼない
  17. 17. html/cssと JavaScriptは かなり違うジャンル
  18. 18. でも覚えたい
  19. 19. そうだ 本を買おう
  20. 20. やさしくわかるモダンJavaScript入門
  21. 21. JavaScriptプログラミング入門
  22. 22. 入門 JavaScript
  23. 23. 「いいえ、結構です」
  24. 24. 「まくらですか?」
  25. 25. 入門書という名の高等技術書に
  26. 26. 我々は何度煮え湯を飲まされたか
  27. 27. JavaScriptなんぞやめちまえ!
  28. 28. そこでjQuery
  29. 29. jQueryは特徴として「DOM操作を手軽に行う」 事を念頭に置いて開発されたため、とてもWeb制 作者フレンドリーな記述が可能になるため、とに かく敷居が低い。
  30. 30. ボタンクリックでモーダルウィンドウを表示の動作をjQueryで記述 $(function(){ // ボタンをクリック $('.btn').click(function(){ $('.modal').css({'display': 'block'}); $('.modal').animate({ 'opacity': 1 }, 400); }); });
  31. 31. あ、これならわかるかも
  32. 32. Web制作の現場で使うjQueryデザイン入門
  33. 33. • プログラムの習得要素が少ない • WebのUIをちょっと覚えるならこれ一本で • すげー丁寧
  34. 34. JavaScriptに入門する
  35. 35. JavaScriptに入門する
  36. 36. jQueryに入門する
  37. 37. jQueryデザイン入門以降はしばらくガリガリ書く 他の本はとりあえずいらない
  38. 38. え、なんで
  39. 39. • やってかないと疑問が出てこない • 次の壁にぶち当たれない
  40. 40. 思うに
  41. 41. 何かを習得するために一番必要なこと
  42. 42. 読む->書く 繰り返し
  43. 43. 以降の壁 • プログラム的な仕組み/言語仕様 • 処理の分割
  44. 44. プログラム的な仕組み jQueryでUIを作る際に幾度もご登場願うGoogle 先生が教えてくれる参照先で、必ず変数・関数・ 条件分岐・繰り返し等のいわゆるプログラム的な 処理を目にする機会が増える
  45. 45. $(function(){ // よく使う要素をあらかじめ変数化 var $modal = $('.modal'); // モーダルを開く関数を作る var openModal = function () { $modal.css({'display': 'block'}); $modal.animate({ 'opacity': 1 }, 400); }; // クリックしたらモーダルを開く関数を実行 $('.btn').click(openModal); });
  46. 46. まだ何となく読める感じはするけど、段々と分か んなっていく。。。
  47. 47. そろそろ も1歩 進もう
  48. 48. 言語仕様・TIP等を紹介してる書籍
  49. 49. 開眼! JavaScript ―言語仕様から学ぶJavaScriptの 本質
  50. 50. JavaScript: The Good Parts ―「良いパーツ」に よるベストプラクティス
  51. 51. すべての人に知っておいてほしい JavaScriptの基 本原則
  52. 52. ついでに 簡単なゲームとかにチャレンジするのもおすすめ • 条件分岐を何となくじゃなくて割ときっちりで きるようになる • アクションに対して行う事が多いので処理をま とめる良い練習になる • ブラウザ毎の対応が結構必要なことに気付く • オブジェクトについての理解が深まる
  53. 53. これで1歩進めた
  54. 54. またガリガリ書く
  55. 55. 次の壁
  56. 56. 処理の分割
  57. 57. そろそろJSファイルを1ファイルで完結させるの が辛くなってくる
  58. 58. そろそろJSファイルを1ファイルで完結させるの が辛くなってくる • グローバル変数を使わない • グローバル変数を使う • モジュール化 • ファイルの分割 • タスク自動化(concat)
  59. 59. JavaScriptパターン ―優れたアプリケーションの ための作法
  60. 60. moduleA.js var app = app || {}; (function($, app){ app.moduleA = { element: $('.moduleA'), get: function(){ // 何か処理 }, set: function(){ // 何か処理 } }; })(jQuery, app);
  61. 61. run.js (function($, app){ var modA = app.moduleA; modA.element.click(modA.get); })(jQuery, app);
  62. 62. var app = app || {};
  63. 63. グローバル変数 appを作る
  64. 64. その中でのみ 開発を進める
  65. 65. read <script src='moduleA.js'></script> <script src='run.js'></script> </body> </html>
  66. 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. 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. 68. そんないっぱいJS読むの?
  69. 69. バカなの?
  70. 70. まとめましょう
  71. 71. grunt-contrib-concat grunt.initConfig({ concat: { options: { separator: ';', }, dist: { src: ['moduleA.js', 'run.js'], dest: 'app.js', } } });
  72. 72. gulp-concat var concat = require('gulp-concat'); gulp.task('concat', function() { gulp.src('*.js') .pipe(concat('app.js')) .pipe(gulp.dest('./')) });
  73. 73. 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);
  74. 74. read <script src='app.js'></script> </body> </html>
  75. 75. まとめ
  76. 76. • 何だかんだで書籍は優秀 • 必要なタイミングで必要な書籍が必要 • 良いからとにかく量を書け
  77. 77. 今必要なのが どれか分からない
  78. 78. 全部買おう
  79. 79. 全部買おう
  80. 80. 知ってそうな人に聞こう
  81. 81. あと、とりあえず書こう

×