JavaScript入門講座

Kazuhito Hokamura (@hokaccha)

2010/11/20

jstudy #2

今日の内容

JavaScriptを勉強し始めくらいの人を対象にしたJavaScript入門講座的なもの
文法とかは調べればわかるのでふれません
一人で勉強してもわからなそうな概念などを重点的に説明します
ライブコーディングするのでJavaScriptってこんな感じて作るんだなーというのがわかってもらえればと

アジェンダ

JavaScriptを勉強する前に
JavaScriptの基礎知識
ライブコーディング part1
jQueryの基礎知識
ライブコーディング part2

JavaScriptを
勉強する前に

JavaScriptの必要性

サーバーサイドは同じことをするのに自分が好きな言語を選択できる
クライアントサイドはJavaScript一択
覚えてないとウェブアプリ書けない
個人サービスとかでウェブサービスつくるときとかはほぼ必須

JavaScriptを覚えるメリット

ブラウザ上で動くアプリ（このスライドのツールとか）をちゃちゃっと書けるようになる
マークアップに色々お役立ち（もはや最近はMEには必須な感じも）
Bookmarkletとかブラウザのプラグインを書けるようになるので日常が便利になる
最近はiPhoneアプリとかAndroidアプリもJavaScriptで書ける
サーバーサイドJavaScriptも最近結構きてるので将来的にはJavaScriptだけ書ければOKという可能性も

JavaScriptは勉強しやすい

ブラウザとテキストエディタだけあればプログラムが動く
コンパイルとかコマンドラインとか一切必要なし
情報が豊富（だたしゴミ情報も多い）

勉強方法

コードを書く
コードを読む
本を読む

とにかく書くべし。本は最初に読んでもあんまりわからないと思うのである程度わかってきてから読むのがいいと思う

オススメの勉強方法

JavaScriptは勉強したいけど特に書きたいもの思い浮かばない人は車輪の再発明がおすすめ
既存のライブラリを自分で再実装してみる
コードをみないで書いてみて後で答え合わせでコードを見る
コードを書く、コードを読むを合わせて実施できる
自分が普段使ってるライブラリ（例えばロールオーバーとか）を再発明すると、自分好みにカスタマイズできるようになるので無駄にならない

オススメの勉強方法2（ただの宣伝）

来月くらいからgihyo.jpとjsdo.itのコラボ連載が始まります
マークアップエンジニアあたりを対象に書く予定
こうご期待

調べ方

ググると古い情報が多い
リファレンス的なものはMozilla Developer Center(MDC)がおすすめ
ECMAの仕様的なものは仕様書の和訳を見るとよい

デバッグ方法

alert
console.log
Firebug的なものを使う
最近はChromeのDeveloper Toolもかなりよい
ひたすらブラウザをリロード

JavaScriptの
基礎知識

これだけは抑えておきたい概念

DOM
イベント
スコープ

DOM

DOMとは

Document Object Model
HTMLやXMLを操作するためのAPI
HTML文章自体を指してDOMということもあり、意味が広義なのでわかりづらい

DOMの例

<p id='foo'>hoge</p>
<p id='bar'>hoge</p>

document.getElementsByTagName('p');
//=> すべてのp要素を取得

document.getElementById('foo');
//=> idがfooの要素を取得

DOMとscript

DOM構築前にはそのDOMは取得できない

<script>
document.getElementById('foo'); // NG
</script>
<p id='foo'>foo</p>

DOMとscript

これだとOK

<p id='foo'>foo</p>
<script>
document.getElementById('foo'); // OK
</script>

DOMContentLoaded

DOMが構築し終わったあとに発生するイベントを使う

document.addEventListener('DOMContentLoaded', function() { 
    // ここにメインの処理
}, false);

ただしIEでこのイベントがないのでwindowのonloadイベントを使うのが簡単（画像などの読み込みをまつので発火が遅いのが欠点）

windowとかdocumentとか何なの

windowはブラウザのwindowそのもの
documentはHTML文書
windowの中のdocumentなので window.document と書くのが正しい
ただしwindowは省略可なので単にdocumentと書いてもいい
URLなどの情報が入ったlocationや、履歴を管理するhistoryなどもすべてwindowに属する
windowはJavaScriptの一番上の起点にあるオブジェクト

windowの図

window

windowの例

window.alert('foo');

このウィンドウにアラートを出せという意味

alert('foo');

windowは省略してもOK

windowの例

window.document.getElementById('foo');

ウィンドウのドキュメント（HTML）の中にあるfooというidの要素をとってこいということ

windowの例

jQueryも例外ではない。windowを省略しなければこうなる。

window.$('#foo')

イベント

イベントとは

何かが起きたときに何かする
クリックされたらalertする
JavaScriptとイベントはとても密接に関係している
クリックやキー入力、ウィンドウのリサイズなど様々なイベントが定義されている

イベントの例

#btn1

function click_handler() {
    alert('clicked!')
}
var btn1 = document.getElementById('btn1');
btn1.addEventListener('click', click_handler, false);

イベントの例

無名関数という名前のない関数を使えるので以下のように書くことも可能

var btn1 = document.getElementById('btn1');
btn1.addEventListener('click', function() {
    alert('clicked!');
}, false);

イベントの例

もしくはonclick属性に書いてもいい

<p onclick='alert("clicked!")'>#btn1</p>

スコープ

スコープとは

変数の有効範囲のこと
JavaScriptではfunctionでスコープをつくる
変数宣言時にvarつけるとそのスコープのローカル変数になる
varをつけないとどこでつくった変数だろうと問答無用でグローバル変数になる

スコープとは

functionでスコープをつくるので、varをつけて宣言した変数にはfunctionの外からアクセスできない

function foo() {
    var x = 'hoge';
}
console.log(x); //=> undefined

スコープとは

varをつけないとグローバル変数になるのでfunctionの外からでもアクセスできる

function foo() {
    x = 'hoge';
}
console.log(x); //=> hoge

スコープチェイン

functionの外側で宣言された変数にはfunctionの中から参照できる。

var x = 'hoge';
function foo() {
    console.log(x);
}
foo(); //=> hoge

現在のスコープを探して変数が存在しなければ外側のスコープに探しにいく。これをスコープチェインといいます

スコープチェイン

スコープチェインでたどるとき、関数実行時の変数の値が参照される

var x = 'hoge';
function foo() {
    console.log(x);
}
x = 'fuga';
foo(); //=> fuga

スコープとは

(function() {
    ...
})();

こんなコード見たことないですか？

単にスコープを作りたいときに使う。

(function() {})() の意味

例えば以下のように書くと、変数fooはグローバル変数になり、他のコードに影響を及ぼしたりしてよろしくない

<script>
var foo = 'hoge';
// なんか処理
</script>

(function() {})() の意味

こう書けば変数fooはこの外では参照されないので安全

(function() {
    var foo = 'hoge';
    // なんか処理
})();
// ここではfooにアクセスできない

クロージャ

fooはどこからもアクセスできなくなるはずだが、clickのコールバック関数の中でのみ参照される。これをクロージャといいます

(function() {
    var foo = 'bar';
    hoge.addEventListener('click', function() {
        alert(foo); //=> bar
    }, false);
})();

ライブコーディング

ロールオーバーのJavaScriptをライブコーディングします

できたもの

jQuery入門

jQueryのいいところ

直感的にJavaScriptを書ける
CSSセレクタ互換の記述で要素を取得できる
拡張しやすい
クロスブラウザを（あまり）考えなくていい
アニメーションやAjaxなど実装が面倒だけどよく使うものが簡単に使える

jQueryのいいところ

特定のclass名の要素をとってくるだけで、クロスブラウザ対応してちゃんと書こうとすると数十行になる（面倒なのでコード書きません）

jQueryを使うとこう。超簡単。

$('.foo');

$ってなんぞ

$がjQueryです
jQueryを読み込むと$とjQueryというものだけ使えるようになります
$ = jQueryなのでどっちを使っても同じです
普通は短いので$を使います

jQueryで大事なこと

HTMLの要素をとってきて、それに対して何か操作をする

これが超基本でほとんどすべて

var p = $('p'); // すべてのp要素をとってきて
p.remove();     // 全部削除する

jQueryの簡単な例 1

要素を取得する

$('#foo'); // idがfooな要素
$('.foo'); // classがfooな要素
$('div');  // div要素全部
$('ul li:nth-child(3)'); // CSS3なセレクタだって使えちゃう
$(':checked'); // checked属性がついている要素（独自セレクタ）

jQueryの簡単な例 2

取得したものに対して操作する

var foo = $('.foo');
foo.hide();               // fooを非表示にする
foo.show();               // fooを表示する
foo.css('color', '#F00'); // fooにcssを適用する
foo.html('<p>xxx</p>');   // fooの中のHTMLを書き換える
foo.remove();             // fooを削除する

jQueryの簡単な例 3

つなげて書いてもOK（メソッドチェーン）

$('.foo').css('color', '#F00').html('hoge').show();

jQueryの簡単な例 4

jQueryでイベントを設定する。直感的でわかりやすい。

$('.foo').click(function() {
    alert('hoge');
});

jQueryの簡単な例 5

click!

$('.foo').animate({
    left: '1000px', // leftの値を1000pxに
    opacity: 0      // opacityの値を0に
}, 2000);           // 2000msかけて変化させる

jQueryの簡単な例 6

新しい要素を作ってHTMLに追加

var div = $('<div>').html('hoge');
$('.foo').append(div);

jQueryの簡単な例 7

jQueryで簡単にHTTP Request

$.ajax({
    type: 'GET',
    url: '/api/user',
    success: function() { ... },
    error: function() { ... }
});

DOMContentLoaded的なもの

DOMContentLoaded的なものを以下の書き方で書ける。もちろんIEでもOK

$(function() {
    // ここにメインの処理
});

ライブコーディング part2

さっき書いたロールオーバーをjQueryに書きかえます

できたもの

まとめ

JavaScriptを覚えると色々ハッピーになるかも
車輪の再発明すると勉強になると思います
jQueryを使えば簡単にJavaScriptが書けるので敷居が低くなってます

JavaScript入門講座

今日の内容

アジェンダ

JavaScriptを勉強する前に

JavaScriptの必要性

JavaScriptを覚えるメリット

JavaScriptは勉強しやすい

勉強方法

オススメの勉強方法

オススメの勉強方法2（ただの宣伝）

調べ方

デバッグ方法

JavaScriptの基礎知識

これだけは抑えておきたい概念

DOM

DOMとは

DOMの例

DOMとscript

DOMとscript

DOMContentLoaded

windowとかdocumentとか何なの

windowの図

windowの例

windowの例

windowの例

イベント

イベントとは

イベントの例

イベントの例

イベントの例

スコープ

スコープとは

スコープとは

スコープとは

スコープチェイン

スコープチェイン

スコープとは

(function() {})() の意味

(function() {})() の意味

クロージャ

ライブコーディング

jQuery入門

jQueryのいいところ

jQueryのいいところ

$ってなんぞ

jQueryで大事なこと

jQueryの簡単な例 1

jQueryの簡単な例 2

jQueryの簡単な例 3

jQueryの簡単な例 4

jQueryの簡単な例 5

jQueryの簡単な例 6

jQueryの簡単な例 7

DOMContentLoaded的なもの

ライブコーディング part2

まとめ

終わり

JavaScriptを
勉強する前に

JavaScriptの
基礎知識