Downloaded 23 times
![grunt-contrib-concat
grunt.initConfig({
concat: {
options: {
separator: ';',
},
dist: {
src: ['moduleA.js', 'run.js'],
dest: 'app.js',
}
}
});](https://image.slidesharecdn.com/automnjavascriptfestival-140907022642-phpapp02/75/JavaScript-72-2048.jpg)
Uploaded byMuyuu Fujita
JavaScriptと共に歩いて行く決意をした君へ
春のJavaScript祭りで発表した資料です http://javascript-fes.doorkeeper.jp/events/14171
More Related Content
JavaScriptと共に歩いて行く決意をした君へ
- 1.
- 2. 自己紹介 • むゆう@anticyborg • IT僧侶 • フロントエンドエンジニア • エンジニア2年目
- 3. 今日話すこと • 今日から使える便利TIPS • 規模にあわせたフレームワークの選定 • 言語仕様をもう1歩深く理解する
- 4. 今日話すこと • 今日から使える便利TIPS • 規模にあわせたフレームワークの選定 • 言語仕様をもう1歩深く理解する
- 5. 今日話すこと • 如何にして僕がJSを覚えたか • 挫折しないJSの習得の流れ
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15. html/css/JSの役割分担 (Webブラウザ限定) •html • 自然言語に意味をつけるための仕組み • css • htmlにスタイルを充てるための言語 • JavaScript • 動的にページを書き換える
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30. ボタンクリックでモーダルウィンドウを表示の動作をjQueryで記述 $(function(){ //ボタンをクリック $('.btn').click(function(){ $('.modal').css({'display': 'block'}); $('.modal').animate({ 'opacity': 1 }, 400); }); });
- 31.
- 32.
- 33. • プログラムの習得要素が少ない •WebのUIをちょっと覚えるならこれ一本で • すげー丁寧
- 34.
- 35.
- 36.
- 37.
- 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.
- 48.
- 49.
- 50. JavaScript: The GoodParts ―「良いパーツ」に よるベストプラクティス
- 51.
- 52. ついでに 簡単なゲームとかにチャレンジするのもおすすめ •条件分岐を何となくじゃなくて割ときっちりで きるようになる • アクションに対して行う事が多いので処理をま とめる良い練習になる • ブラウザ毎の対応が結構必要なことに気付く • オブジェクトについての理解が深まる
- 53.
- 54.
- 55.
- 56.
- 57.
- 58. そろそろJSファイルを1ファイルで完結させるの が辛くなってくる •グローバル変数を使わない • グローバル変数を使う • モジュール化 • ファイルの分割 • タスク自動化（concat）
- 59.
- 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.
- 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.
- 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.