酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です!

JavaScript 徹底入門のための資料&書籍まとめ

JavaScriptはブラウザから簡単に使えるし、jQuery Pluginも簡単に追加できるので、つい基礎をおろそかにしたまま使っていて、ちょっと凝った事をしようとした時にいつもハマっていました。ということで今回は、独習JavaScriptの第二版を購入して読み進めつつ、ネットのおすすめのドキュメントを見て、補足しながら勉強していったのでそのメモです。

(03/09 21:50) JavaScriptの習熟度を上げるための勉強フローを追加


[動画] ドットインストール JavaScript入門

http://dotinstall.com/lessons/basic_javascript

JavaScriptを本当に使ったことがない初学者の方におすすめしたいのがドットインストールの動画。説明が環境構築からスタートしてくれるので、躓くことなく最初の一歩を踏み出すことができます。

[Web] JavaScript基礎文法最速マスター

http://gifnksm.hatenablog.jp/entry/20100131/1264934942

JavaScript基礎文法最速マスター』はJavaScriptの基礎的な文法を学ぼうと思った時に読んでほしい、まとめ記事です。これだけでJavaScriptで最低限のプログラムを組むことができます。また、Tips集には他言語との違いでつまずきそうなところが丁寧にまとめられているので読んでおくとJSのプログラム中に詰まる確率がかなり減ると思います!

JavaScriptでクラス的にメソッドを定義

いろいろ試していて忘れがちなので忘備録。クラスのメソッド的な定義の仕方。まずは連想配列内に定義する方法。

1
2
3
4
5
6
var john = {
  name: "John",
  sayName: function() { console.log(this.name + " Due"); }
};

john.sayName(); //=> John Due

次はコンストラクタっぽいオブジェクトを定義して、そのオブジェクトのprototypeにメソッドを定義する方法。

1
2
3
4
5
6
7
8
9
10
11
12
// コンストラクタ
var Girl = function(name, age) {
  this.name = name;
  this.age = age;
};
// prototypeにメソッドを定義
Girl.prototype = {
  sayAge: function() { console.log("My age is " + this.age); }
}
// オブジェクトを生成して、sayAgeメソッドを呼び出し
var sadako = new Girl('Sadako', 12);
sadako.sayAge();  //=> My age is 12

[SLIDE] 最強オブジェクト指向言語 JavaScript 再入門

今回幾つか資料を探してきた中で、特に勉強になった資料の中の一つがこの『最強オブジェクト指向言語 JavaScript 再入門』のスライドです。 

JavaScriptを使っている中で出てくる「プロトタイプチェーンやスコープチェーン」といった概念が本当にわかりやすく書かれていて、その後の勉強をかなりスムーズにしてくれました。

一方で、ビジュアル的ではなくって、コードを書いていく中で理解できそうな『クロージャーthis』については更に別途資料を見ていくことをおすすめします!

[Web] JavaScript基本概念最速マスター

http://d.hatena.ne.jp/kagigotonet/20100202/1265080352

JavaScript基礎文法最速マスター』に触発されて作られた記事だそうです。基本的な内容は、先ほどの『最強オブジェクト指向言語 JavaScript 再入門』と近いですが、より綺麗にまとまっているので、PDFを読み進めた上で、もう一度読むと頭の整理になります!

[Web] Javascriptのコーディング規約について

http://www.hp-stylelink.com/news/2013/10/20131008.php

Javascriptのコーディング規約、初めて読みました。JSDocも同じく所見でした。とりあえずコメントを書いていくようにしつつ、可読性を上げるためのトライを続けていきます!

[Web] CoffeeScript基礎文法最速マスター

http://www.infiniteloop.co.jp/blog/2011/03/coffeescript-master/

CoffeeScriptの基礎文法の説明です。CoffeeScriptには基礎的な文法の中にもJavascriptではできない「痒い所に手が届く」的な書き方をフレキシブルに実現することができます!

[Web記事] CoffeeScript クラスベースのオブジェクト指向基礎

http://d.hatena.ne.jp/kitokitoki/20120701/p1

JavaScriptはプロトタイプベースのオブジェクト指向ですが、CoffeeScriptを使うと、『CoffeeScript でクラスベースのオブジェクト指向プログラミングをするための基礎知識 - わからん』を書くことができます。これをわかりやすく説明して頂いている記事です。

ちなみにサンプルとしてはこんなかんじです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
class Dog
  # コンストラクタ
  constructor: (@name) ->

  # Public メソッド
  action_public: (verb) ->
    console.log "#{verb} #{@name} (public)."

  call_action_private: (verb) ->
    action_private(verb)

  # Private メソッド
  action_private = (verb) ->
    console.log "#{verb} #{@name} (private)."

  @var1: "a" #=> Dog.var1 = "a";
  @var2= "b" #=> Dog.var2 = "b";
  var3: "c" #=> Dog.prototype.var3 = "c";
  var4= "d" #=> var4 = "d"

# Dogを継承したLabradorクラス
class Labrador extends Dog
  action: (verb) ->
    #基底クラスのメンバ呼び出し
    alert "#{verb} #{@name}."

Hana = new Dog "Hana"
Hana.action_public('Running') #=> Running Hana (public).
Hana.action_private('Running') #=> Error no method 'action_private'
Hana.action_action_private('Running') #=> Running (private).

Hana = new Dog "Hana"
console.log Dog.var1 #=> a
console.log Dog.var2 #=> b
console.log Hana.var3 #=> c
console.log Hana.var4 #=> undefined

変数の定義などは、まだまだ理解できていないので忘備録のメモ書きです!

[書籍] 独習 JavaScript 第2版

独習』と名前がつくだけあって、JavaScriptを一からAll in Oneで一冊で学ぶのには最適な本です。一方で、書き方が若干教科書的なので、好きな人と嫌いな人が少し別れてしまいそうです。僕は途中でわからなかったり、飽きそうになったらネット資料で補足しながら読み進めています。

ちなみによくネットで探してしまうURIエンコードのメソッドがあったので念のためメモ。

encodeURI() #=> URIで特殊な文字列(:, ;, /とか)はエンコードしない
encodeURIComponent() #=> URIで特殊な意味を持つ文字(;, :, /とか)も含めてエンコードする

[書籍] jQuery 最高の教科書

jQuery 最高の教科書』も読み始めました。この本はjQueryの基礎や、Tips、サンプルを使ったチュートリアルなどが数多く乗っています。「例題付きの読みやすい教科書」という印象でサクサク読み進めることができています!


幾つか備忘録のTipsです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 複数プロパティの変更
$('#type').css({
    'fontsize' : '50px',
    'background-color' : '#ae5e9b',
    'color' : 'ebc000'
})

// メソッドチェーン
$('#type')
    .on('mouseover', function(){
        # hogehoge...
    })
    .on('mouseout', function(){
        # fugafuga...
    })

JavaScriptの習熟度を上げるための勉強フロー

はじめてのJavaScript / JS Girls Tokyo #1

1) 書籍などでJavascriptの基礎知識を深める => ブログ書く
2) jQuery Pluginを作る => ブログ書く
3) Node.jSを使ったWebサービスを構築する => ブログ書く

ブログを使って知識を整理したり、教えてもらったりするのはとってもいい方法だと思う!

[Web] CoffeeScriptのリファレンス

http://coffeescript.org/

CoffeeScriptの本家サイトで、かなりリファレンスが充実しています。CoffeeScriptのコーディングを開始する前に一度精読しておくのはかなりありだと思います!

[Web] CoffeeScriptの入門記事

実際JavaScriptで色々書いているとCoffeeScriptの理解も少しずつ深まってきました。でこれから再度読みなおす予定の資料も合わせて追記。

CoffeeScript入門 - Qiita [キータ]

あとがき

ネットでおすすめのサイト・資料があればぜひ教えて下さい。また、書籍は他にもJavaScript系の本を2冊購入しています。読み進んでいったら、紹介していきます。

変更来歴

(01/18 15:40) 新規作成
(01/18 18:55) CoffeeScript系を中心にコードを追記
(01/22 22:00) JavaScriptのコーディング規約についてを追記
(01/25 16:30) Chrome Developer ToolsやjQuery 最高の教科書の書評を追記
(02/05 20:50) Typoの修正
(02/07 16:30) いろいろ読み直して、構成を変更
(03/09 21:50) JavaScriptの習熟度を上げるための勉強フローを追加

おすすめの書籍