質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

92.04%

  • JavaScript

    7508questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    3396questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

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

解決済

回答 5

投稿 2015/03/20 11:44 ・編集 2015/03/20 13:57

  • 評価
  • クリップ 11
  • VIEW 4,791

zico_teratail

score 473

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

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


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


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

・記述例
1:★★という本
2:■■1というサイト
3:■■2というサイト
・・・etc.


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

    クリップした質問に回答があった場合に通知・メールを受け取ることができます。

    クリップした質問はマイページの「クリップ」タブからいつでも見ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • munyaX

    2015/03/20 12:21

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

    キャンセル

  • zico_teratail

    2015/03/20 13:56

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

    キャンセル

回答 5

checkベストアンサー

+4

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

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

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

投稿 2015/03/20 12:00

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    以下のような回答は評価を下げられます

    • 間違っている回答
    • 質問の回答になっていない投稿
    • 不快な投稿

    評価を下げる際はその理由をコメントに書き込んでください。

  • 2015/03/20 15:45

    ありがとうございます!
    まさに「順番」に読むべき書籍が列挙されているまとめページで大変参考になります。

    またご提示いただいたサイトもシンプルで勉強しやすそうです。

    キャンセル

  • 2015/03/30 01: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 16:35

    Cf_cwd様、詳細な学習項目を挙げていただきありがとうございます。
    ただ、気が遠くなりそうな内容ですね・・・(^-^;

    当初の質問文にも書きました通り、個人的にはとりあえず流行っているライブラリを迷わずに利用できる程度の知識があれば当面は間に合いそうなところです。

    ご提示いただいたようなマスターレベルを目指すのは時間もかかるし自分の能力では到底難しそうです(笑)。

    キャンセル

  • 2015/03/31 02: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 14:24

    ありがとうございます!
    ライブラリごとの短評、個人的にはすごく役に立ってうれしいです!

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

    キャンセル

  • 2015/04/01 21: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の記述などを学んでからライブラリを使用したほうがいいと考えています。
    そうしないと各ライブラリのメリット、デメリットの判断が難しくなり、他人がいいというから使うといった姿勢になってしまう気がしますので。(もちろん多くの人がいいと判断するならそれなりの信頼性、利便性があるということだと思いますが)

    キャンセル

0

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

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

<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="js/test.js"></script>
</head>
<body>
    <div id='continer'></div>
</body>
</html>
/* /js/test.js */
$(document).ready(function(){
    $('#continer').append('<div>テスト</div>');
});
※ jQueryだけは読み込むようにしていますが、DOM操作をJavascriptの元の操作で扱うのはかなり面倒なので、何かしらそれ系のライブラリは最初から利用されることをお勧めします。


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


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


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

投稿 2015/03/20 15:05

編集 2015/03/20 15:18

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    以下のような回答は評価を下げられます

    • 間違っている回答
    • 質問の回答になっていない投稿
    • 不快な投稿

    評価を下げる際はその理由をコメントに書き込んでください。

  • 2015/03/20 15:42

    「PHPがバッチリ」かと言われるとちょっと怪しいです。OOPが苦手なので、クラスライブラリを使うことは出来ても自分で複雑なクラス設計(抽象だのインターフェイスだの継承だのがよく理解できていない)はほぼ出来ません。OOPを無視すれば、一応「バッチリ」と言ってもいいかもしれません。

    しかしご提示いただいたような方法でJS(というよりもjQuery?)の使い方に習熟していくのはたしかに近道かなぁと感じています。

    素晴らしいご提案ありがとうございます。

    キャンセル

0

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

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

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

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

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

投稿 2015/03/20 23:40

編集 2015/03/20 23:58

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    以下のような回答は評価を下げられます

    • 間違っている回答
    • 質問の回答になっていない投稿
    • 不快な投稿

    評価を下げる際はその理由をコメントに書き込んでください。

  • 2015/03/21 02:20

    何故ActionScriptが出てくるのでしょう?もちろん使えるならば使えた方がいいと思いますがJavaScriptの勉強を今から始める人が学ぶ必要性はほぼないかと。
    (Flashも使用するなら当然必要だと思いますが……)
    また即時関数に関して記載してるサイトはたくさんありますし話題として出すならきちんと単語を出してあげるといいのではないでしょうかね?

    捕捉として高階関数や即時関数の解説をいれておきます。

    高階関数:引数に関数を受け取る関数

    即時関数(==無名関数==匿名関数):定義と同時に実行する関数(JavaScript特有)。JavaScriptは関数がスコープを持っているのでグローバルに出す必要のない変数をラップすることでグローバルの無駄な汚染を防ぐことができる。
    (function (){
    /**/
    })();

    (function (){
    /**/
    }());
    といったものが即時関数と呼ばれます。

    jQueryでは高階関数も即時関数もよく使いますね

    キャンセル

  • 2015/03/21 06:36

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

    キャンセル

  • 2015/03/22 02:21

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

    キャンセル

  • 2015/03/29 08:48

    Cf_cwd様がご指摘くださったように、あくまでもJavaScriptに限ってご指導いただけますと助かります。

    正しいか正しくないか、美しいか美しくないか等には個人的にはあまり興味がありません。
    実用的かどうか、多くの人に普及しているかどうか、等に焦点を合わせて、JavaScriptを学びたいなと考えております。

    キャンセル

0

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

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

投稿 2015/03/24 06:30

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    以下のような回答は評価を下げられます

    • 間違っている回答
    • 質問の回答になっていない投稿
    • 不快な投稿

    評価を下げる際はその理由をコメントに書き込んでください。

0

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

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


投稿 2015/04/02 07:06

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    以下のような回答は評価を下げられます

    • 間違っている回答
    • 質問の回答になっていない投稿
    • 不快な投稿

    評価を下げる際はその理由をコメントに書き込んでください。

15分調べてもわからないことは、teratailで質問しよう!

ただいまの回答率

92.04%

関連した質問

同じタグがついた質問を見る

  • JavaScript

    7508questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    3396questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

閲覧数の多いJavaScriptの質問