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

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

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

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

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

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

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

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

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

var john = {
  name: "John",
  sayName: function() { console.log(this.name + " Due"); }
};

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

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

// コンストラクタ
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 再入門！ from Yuji Nojima

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

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

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

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

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

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

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

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

CoffeeScriptの基礎文法の説明です。CoffeeScriptには基礎的な文法の中にもJavaScriptではできない「かゆい所に手が届く」的な書き方をフレキシブルに実現できます！

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

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

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

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です。

// 複数プロパティの変更
$('#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のリファレンス

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の習熟度を上げるための勉強フローを追加

🖥 VULTRおすすめ

「VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります！

酒と泪とRubyとRailsと