JavaScript入門講座

Kazuhito Hokamura (@hokaccha)

2010/11/20

今日の内容

  • 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のコラボ連載が始まります
  • マークアップエンジニアあたりを対象に書く予定
  • こうご期待

調べ方

デバッグ方法

  • 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が書けるので敷居が低くなってます

終わり