javascriptと共に歩いて行く決意をした君へ
DESCRIPTION
春のJavaScript祭りで発表した資料です http://javascript-fes.doorkeeper.jp/events/14171TRANSCRIPT
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': 'block'}); $('.modal').animate({ 'opacity': 1 }, 400); });});
あ、これならわかるかも
Web制作の現場で使うjQueryデザイン入門
• プログラムの習得要素が少ない• WebのUIをちょっと覚えるならこれ一本で• すげー丁寧
JavaScriptに入門する
JavaScriptに入門する
jQueryに入門する
jQueryデザイン入門以降はしばらくガリガリ書く他の本はとりあえずいらない
え、なんで
• やってかないと疑問が出てこない• 次の壁にぶち当たれない
思うに
何かを習得するために一番必要なこと
読む->書く繰り返し
以降の壁• プログラム的な仕組み/言語仕様• 処理の分割
プログラム的な仕組みjQueryでUIを作る際に幾度もご登場願うGoogle先生が教えてくれる参照先で、必ず変数・関数・条件分岐・繰り返し等のいわゆるプログラム的な処理を目にする機会が増える
$(function(){ // よく使う要素をあらかじめ変数化 var $modal = $('.modal');
// モーダルを開く関数を作る var openModal = function () { $modal.css({'display': 'block'}); $modal.animate({ 'opacity': 1 }, 400); };
// クリックしたらモーダルを開く関数を実行 $('.btn').click(openModal);});
まだ何となく読める感じはするけど、段々と分かんなっていく。。。
そろそろも1歩進もう
言語仕様・TIP等を紹介してる書籍
開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質
JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス
すべての人に知っておいてほしい JavaScriptの基本原則
ついでに簡単なゲームとかにチャレンジするのもおすすめ• 条件分岐を何となくじゃなくて割ときっちりできるようになる
• アクションに対して行う事が多いので処理をまとめる良い練習になる
• ブラウザ毎の対応が結構必要なことに気付く• オブジェクトについての理解が深まる
これで1歩進めた
またガリガリ書く
次の壁
処理の分割
そろそろJSファイルを1ファイルで完結させるのが辛くなってくる
そろそろJSファイルを1ファイルで完結させるのが辛くなってくる• グローバル変数を使わない• グローバル変数を使う• モジュール化• ファイルの分割• タスク自動化（concat）
JavaScriptパターン ―優れたアプリケーションのための作法
moduleA.jsvar app = app || {};
(function($, app){ app.moduleA = { element: $('.moduleA'), get: function(){ // 何か処理 }, set: function(){ // 何か処理 } };})(jQuery, app);
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 src='run.js'></script></body></html>
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>
そんないっぱいJS読むの？
バカなの？
まとめましょう
grunt-contrib-concatgrunt.initConfig({ concat: { options: { separator: ';', }, dist: { src: ['moduleA.js', 'run.js'], dest: 'app.js', } }});
gulp-concatvar concat = require('gulp-concat');
gulp.task('concat', function() { gulp.src('*.js') .pipe(concat('app.js')) .pipe(gulp.dest('./'))});
app.jsvar 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);
read<script src='app.js'></script></body></html>
まとめ
• 何だかんだで書籍は優秀• 必要なタイミングで必要な書籍が必要• 良いからとにかく量を書け
今必要なのがどれか分からない
全部買おう
全部買おう
知ってそうな人に聞こう
あと、とりあえず書こう