JSの王道かつ効率的な勉強順番を教えてください

JavaScriptをこれから勉強し始め、トレンドを一通り抑えたい場合。
どのようなサイト（または書籍）をどんな順番で見ていくのが最も効率的な最短ルートでしょうか？

・前提
JSに関しては完全な素人。
JSの基本から学ぶ（文法すら知らない状態）。
ライブラリ（jQueryとか）を使えと言われても、それをHTML内のどこにどう書けばいいかも分からない。
PHPとMySQLを１０年くらい触ってますので、スクリプト言語の基礎はあります。
HTMLとCSSももちろん一通り理解しています。
趣味レベルですがLAMPサーバを立てたりもしています。
基本情報処理技術者を持っています。
JSだけなぜか強い苦手意識を持っていて、ずっと無視し続けてきてしまいました。

・最終目標
http://www.buildinsider.net/web/popularjslib/2015
上記URLで紹介されているトレンド・ライブラリの中から自分で取捨選択して理解しながらサクッと使えるようになること。
少々のカスタマイズやツール自作が出来るようになる。

・知りたいこと
「これは押さえておけ！」というサイトや書籍をいくつか挙げてほしい（習得すべき順番で）。

・記述例
１：★★という本
２：■■１というサイト
３：■■２というサイト
・・・etc.

・例外
ドットインストールは除外してください。
理由：動画を一つ一つ見なければいけない＝ざっと斜め読みしたりできない・一覧性に欠ける・時短できないため。

munyaX

2015/03/20 03:21

プログラムやシステム関連の知識があるかどうかでも変わってきますので、そこらへんの情報を追記されると良いかと思います。例えば以前C言語を学校で習っていました、仕事で業務系システムの構築をJavaやCOBOLでやってます、など。

退会済みユーザー

2015/03/20 04:56

おっしゃる通りです。 PHPとMySQLを１０年くらい触ってますので、スクリプト言語の基礎はあります。 HTMLとCSSももちろん一通り理解しています。趣味レベルですがLAMPサーバを立てたりもしています。基本情報処理技術者を持っています。 JSだけなぜか強い苦手意識を持っていて、ずっと無視し続けてきていましました。

行動規範の内容に同意します

回答5件

ベストアンサー

基礎を学ぶという点でいえば
この順番で読めばOK！JavaScriptを理解するための14冊
このサイトが書籍の紹介をしている様子。
私はパーフェクトJavaScriptを推奨しますね。
初めに読むにはほんの少しつらい本かもしれませんが分かり始めてから読むと非常に良い本だと思います。

そして学習に役立つのではないかという点で言えば
JavaScript初級者から中級者になろう
このサイトは比較的簡単に要点を説明してくれていると思います。
(情報の取捨選択は重要ですが)

また、ある意味万能なサイトが
MDN/開発者向けのWeb技術
 MDN/JavaScript リファレンス
でしょう。
JavaScriptの辞書といったところでしょうか。基本的にここをよく見ればメソッドの使い方などはわかるのではないでしょうか。

投稿2015/03/20 03:00

Cf_cwd

総合スコア730

退会済みユーザー

2015/03/20 06:45

ありがとうございます！まさに「順番」に読むべき書籍が列挙されているまとめページで大変参考になります。またご提示いただいたサイトもシンプルで勉強しやすそうです。

Cf_cwd

2015/03/29 16:19

自身の回答に付け加えますが Lv1 まずビルドインのオブジェクトに何があるか理解する。 JavaScriptの奇妙なスコープを理解する。 JavaScriptの暗黙の型変換を理解する。 Lv2 JavaScriptにおけるオブジェクトとは何かを理解する(関数含めてすべてオブジェクト) JavaScriptのコンストラクタを知る(コンストラクタをfunctionで作る)。 thisの特殊なふるまいを理解する。 JavaScriptのprototypeを理解する(自分はここで苦労しました) JavaScriptのメソッドチェーンの作り方とは?と疑問を持つ。 JavaScript特有のシンタックスシュガーや特殊な機能(?)を知る。 callメソッド、applyメソッド、bindメソッドを使える。 DOM、StyleSheetなどをJavaScriptで操作できる。ブラウザ間の実装に差異があることを理解する。(特にIE。凄くIEを気にする) Lv3 prototype、コンストラクタ(JavaScriptでは関数)を用いた継承を完全に理解する。 DOMやCSSの操作を行うコードに関して適切なリファクトができる。 (もしくはそれに特化したライブラリなどを使用できる) ブラウザ間の互換性を持たせることができる。 (もしくはそれを補完するライブラリのコードを理解できる) OOP的設計(プロトタイプベース)を完全に理解し作成できる。 ------ MAX デファクトスタンダードと呼ばれるレベルのライブラリを自作する ……のような感じでステップアップするのがいいですよね。上手く言えないのでLvとか残念な表現になりましたが。 (Lv2の範囲がかなり大きい気がしますがLv2後半からLv3まで行けば十分JavaScriptを使えると言っていい気がします)

退会済みユーザー

2015/03/30 07:35

Cf_cwd様、詳細な学習項目を挙げていただきありがとうございます。ただ、気が遠くなりそうな内容ですね・・・(^-^; 当初の質問文にも書きました通り、個人的にはとりあえず流行っているライブラリを迷わずに利用できる程度の知識があれば当面は間に合いそうなところです。ご提示いただいたようなマスターレベルを目指すのは時間もかかるし自分の能力では到底難しそうです（笑）。

Cf_cwd

2015/03/30 17:06

そうですねーそういった利用であれば・ビルドインオブジェクトとJavaScriptのシンタックスシュガー・JavaScript特有の記述(即時関数、コンストラクタ、メソッドチェーン、スコープチェーン) あとは簡潔にでも仕様を理解していれば十分でしょうね。個人的に学習するとメリットがあると思うライブラリ(もしくはフレームワーク)は・jQuery サイト制作の際、使用できると面倒な処理などが簡潔に利用できるライブラリ。学習コストが多少かかることと少しファイルが大きいこと、コードに結構癖があるのが短所かもしれません。 UIの実装などを素のJavaScriptに比べると非常に簡潔に記述できますね・AngularJS Webアプリケーションの制作の際、描画(出力)などの処理などを含め様々な処理を簡潔に記述できるフレームワーク jQueryとは違った意味で癖のあるコードの書き方を求められる、HTMLの記述自体の書き方を変える必要がある点などが短所かもしれませんね。しかしながらリアルタイムに値の変更を出力する機能を非常に簡潔に記述できるのは非常に魅力的ですね。 HTML内で簡単な処理を記述することができるなどの機能も特色でしょうか。・CAATやenchant.js、tmlib.jsなどゲーム開発ライブラリ JSを使用してゲームを開発することも考えるならこのあたりも気になりますね three.jsのような3Dを扱うライブラリやcanon.js、box2d.jsなどの物理演算ライブラリも使えば3Dゲームを作成できるようですしね。(実際本格的に作るにはいろいろと問題はありそうですけど) こんな感じでしょうか? どういったことをするのかによってやはり学習目標が変わりますし、使用するべきライブラリなども変わってきますね

退会済みユーザー

2015/03/31 05:24

ありがとうございます！ライブラリごとの短評、個人的にはすごく役に立ってうれしいです！「jQueryはUIが楽に作れるらしい」という程度の知識しか無かったので、有名どころのライブラリの違いや使用目的などを簡潔に教えていただいてとても参考になります。むやみに全部学習してたら時間もないので、非常に助かります。

Cf_cwd

2015/04/01 12:29

そういえば基礎的なことですが現在はJSは別ファイルに記載してリンクすることが多いですよ。特別な理由がある場合はHTMLに記述されている場合がありますが(高速化のためにしている場合がある?)。またJSファイルのリンクに関してもhead内で行うことが多いですがbodyタグの最後にリンクを記述する場合があります。こうすることでwindow.onloadやaddEventListener("load",function (){},bool)などのイベントを使用せず「ページが読み込まれた時、実行」というような処理を行うことができますね。ついでにイベントに関してですが<div onclick="func()"></div>という書き方は現在推奨されていません。(どのブラウザでも動作するというメリットはありますが) (以下のelementはdocument.getElementById()で取得したElementやdocument.createElement()で作成したElement) 現在はelement.addEventListener()というメソッドを使用します。ですがIEの古いバージョンにてこのメソッドがなく、element.attachEvent()という独自実装を使用していました。こういったブラウザ間の実装の違いがなかなかに厄介です。その点jQueryなどはjQuery内部にイベント管理の機構や便利なメソッドを持っており、ブラウザ間の実装の際をある程度吸収します。個人的な考えですがある程度、素のJavaScriptの記述などを学んでからライブラリを使用したほうがいいと考えています。そうしないと各ライブラリのメリット、デメリットの判断が難しくなり、他人がいいというから使うといった姿勢になってしまう気がしますので。(もちろん多くの人がいいと判断するならそれなりの信頼性、利便性があるということだと思いますが)

行動規範の内容に同意します

どんな手段でもよいので、テトリス作っみては？

web 上には、 javascipr でつくるテトリスの例がたくさんあります。
一つでもそれなりに動くものがつくれれば、そこを起点にしていろいろ発展させていけると思います。

投稿2015/04/01 22:06

編集2019/01/19 04:06

katoy

総合スコア22326

基礎ができてらっしゃるならこの手の本は如何でしょうか？？

http://www.oreilly.co.jp/books/9784873114682/

投稿2015/03/23 21:30

h-yoshinaka

総合スコア118

DOM、ECMAScript 発展させるなら、ActiveScript などと学ぶとよいと思います。

jQuery は、もはや別言語と考えたほうがいいかもしれません。jscript(MDN に記載されている Microsofut 版スクリプト)もまた然り。DOM、ECMAScript をかじっているにすぎず、ActiveScript に発展させるなどとなると、障害が多すぎる。

W3C と ECMAScript の仕様にまず目を通して、それから、各ブラウザの癖を学ぶとよいと思います。

追記：
多くのサイト、本に記載されている、IE、Netscape 時代の産物はもはや気にする必要はないと思います。
jQuery を使うつもりならなおさら。
W3C と ECMAScript の仕様、jQuery の公式サイトにまずは目を通されるとよいと思います。
そこで分からなければ一般サイトで具体的な使用法を、というのが私のいつものやり方です。
当然かもしれませんが関数などに関する解説は、公式サイトに敵うサイトを見たことがありません。
ですが、バグ、コードの記述法、日本語訳に関しては、優秀なサイトもあります。

たとえば、

lang
1(function ( fuga ) {
2  var a = fuga();
3  ...
4} )( function () {
5  ...
6} )

こんなコードを掲載しているサイトは数少ない印象です。グローバルに頼りがちな言語で、変数や関数の隠蔽、クロージャを使用することで、無駄な名前空間の消費の抑制。リークパターンなどは公式ではなく一般サイトで私は学びました。ちなみに上記コードおよび、オブジェクトを連発してるのが jQuery です。
グローバル空間を汚すことなくブラウザの差異を吸収して書かれたコードはさすがだと思います。

投稿2015/03/20 14:40

編集2015/03/20 14:58

miya

総合スコア81

Cf_cwd

2015/03/20 17:20

何故ActionScriptが出てくるのでしょう?もちろん使えるならば使えた方がいいと思いますがJavaScriptの勉強を今から始める人が学ぶ必要性はほぼないかと。 (Flashも使用するなら当然必要だと思いますが……) また即時関数に関して記載してるサイトはたくさんありますし話題として出すならきちんと単語を出してあげるといいのではないでしょうかね？捕捉として高階関数や即時関数の解説をいれておきます。高階関数:引数に関数を受け取る関数即時関数(==無名関数==匿名関数):定義と同時に実行する関数(JavaScript特有)。JavaScriptは関数がスコープを持っているのでグローバルに出す必要のない変数をラップすることでグローバルの無駄な汚染を防ぐことができる。 (function (){ /**/ })(); や (function (){ /**/ }()); といったものが即時関数と呼ばれます。 jQueryでは高階関数も即時関数もよく使いますね

miya

2015/03/20 21:36

ActionScript を引き合いに出したのは、苦し紛れに作り出され、既に放棄されていると思わせるような JScript の仕様を考えると、ActionScriptはよほど綺麗な言語に思えるからです。 JScript を学ぶくらいなら、ActionScript と思っただけです

Cf_cwd

2015/03/21 17:21

JScriptを学ぶとは書かれていないように思うのですが……。当然その意味であれば同意いたします。JScriptは学ぶ意味が(あまり)ないでしょう。ですがJavaScriptであれば話は別かと……。

退会済みユーザー

2015/03/28 23:48

Cf_cwd様がご指摘くださったように、あくまでもJavaScriptに限ってご指導いただけますと助かります。正しいか正しくないか、美しいか美しくないか等には個人的にはあまり興味がありません。実用的かどうか、多くの人に普及しているかどうか、等に焦点を合わせて、JavaScriptを学びたいなと考えております。

行動規範の内容に同意します

HTML、CSS、PHPがバッチリ出来るなら、基礎から学ぶ必要はあまりありません。
あと、PHPができるなら基礎的なプログラミング知識はあると思うので、入門書とかを見るのは時間の無駄かと思います。

以下の様なHTMLのみを元に、レスポンシブなWebページを自作してみては如何でしょうか。
DOMの追加、CSS定義等、全てJavascriptから行い、PHP側で用意したAPIから適当な内容を取得して表示するようなものを作れれば、ほぼJavascriptのキモは網羅できるかと思います。

lang
1<html>
2<head>
3<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
4<script src="js/test.js"></script>
5</head>
6<body>
7    <div id='continer'></div>
8</body>
9</html>

lang
1/* /js/test.js */
2$(document).ready(function(){
3	$('#continer').append('<div>テスト</div>');
4});

※ jQueryだけは読み込むようにしていますが、DOM操作をJavascriptの元の操作で扱うのはかなり面倒なので、何かしらそれ系のライブラリは最初から利用されることをお勧めします。

例えばこんな感じです。
１、ページ表示時に基本ページ用のデータをajaxにて取得、及び表示
２、css transitionやjQueryのanimate等を使い、動きのあるボタンやプルダウン等を作る
３、何かのボタンを押したタイミングで、ajaxにてにデータを投げ、結果を受け取り、それをWebページ上に反映させる

但し、PHPと大きく違う以下の2点は事前に調べておくことをお勧めします。
１、クラスの作り方
２、コールバックの使い方
（特に無名関数をコールバックとして記述することが非常に多いので、その辺りです）

以上、ご参考になれば幸いです。

投稿2015/03/20 06:05

編集2015/03/20 06:18

utun

総合スコア384

退会済みユーザー

2015/03/20 06:42

「PHPがバッチリ」かと言われるとちょっと怪しいです。OOPが苦手なので、クラスライブラリを使うことは出来ても自分で複雑なクラス設計（抽象だのインターフェイスだの継承だのがよく理解できていない）はほぼ出来ません。OOPを無視すれば、一応「バッチリ」と言ってもいいかもしれません。しかしご提示いただいたような方法でJS(というよりもjQuery？）の使い方に習熟していくのはたしかに近道かなぁと感じています。素晴らしいご提案ありがとうございます。

行動規範の内容に同意します

あなたの回答