する質問をすることでしか得られない、回答やアドバイスがある。467JavaScriptをこれから勉強し始め、トレンドを一通り抑えたい場合。どのようなサイト(または書籍)をどんな順番で見ていくのが最も効率的な最短ルートでしょうか?・前提JSに関しては完全な素人。JSの基本から学ぶ(文法すら知らない状態)。ライブラリ(jQueryとか)を使えと言われても、それをHTML内のどこにどう書けばいいかも分からない。PHPとMySQLを10年くらい触ってますので、スクリプト言語の基礎はあります。HTMLとCSSももちろん一通り理解しています。JSだけなぜか強い苦手意識を持っていて、ずっと無視し続けてきてしまいました。・最終目標http://www.buildinsider.net/web/popularjslib/2015上記URLで紹介されているトレンド・ライブラリの中から自分で取捨選択して理解しながらサクッと使えるようになること。少々のカスタマイズやツール自作が出来るようになる。・知りたいこと「これは押さえておけ!」というサイトや書籍をいくつか挙げてほしい(習得すべき順番で)。・記述例1:★★という本2:■■1というサイト3:■■2というサイト・・・etc.・例外ドットインストールは除外してください。理由:動画を一つ一つ見なければいけない=ざっと斜め読みしたりできない・一覧性に欠ける・時短できないため。attachmentクリップ17気になる質問をクリップするクリップした質問は、後からいつでもマイページで確認できます。クリップした質問に回答があった際、通知やメールを受け取ることができます。自分も答えを知りたい質問者以外のユーザにも役立つ評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。質問の評価を上げたことを取り消します低評価-評価を下げられる数の上限に達しました評価を下げることができません1日5回まで評価を下げられます1日に1ユーザに対して2回まで評価を下げられます質問の評価を下げるteratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。コメントをしてください。送信する質問の評価を下げる機能の利用条件この機能を利用するためには、以下の事項を行う必要があります。12:21プログラムやシステム関連の知識があるかどうかでも変わってきますので、そこらへんの情報を追記されると良いかと思います。以前C言語を学校で習っていました、仕事で業務系システムの構築をJavaやCOBOLでやってます、など。プログラムやシステム関連の知識があるかどうかでも変わってきますので、そこらへんの情報を追記されると良いかと思います。以前C言語を学校で習っていました、仕事で業務系システムの構築をJavaやCOBOLでやってます、など。13:56おっしゃる通りです。PHPとMySQLを10年くらい触ってますので、スクリプト言語の基礎はあります。HTMLとCSSももちろん一通り理解しています。JSだけなぜか強い苦手意識を持っていて、ずっと無視し続けてきていましました。PHPとMySQLを10年くらい触ってますので、スクリプト言語の基礎はあります。HTMLとCSSももちろん一通り理解しています。趣味レベルですがLAMPサーバを立てたりもしています。JSだけなぜか強い苦手意識を持っていて、ずっと無視し続けてきていましました。件sort評価が高い順sort新着順sort古い順linkcheckベストアンサー+7基礎を学ぶという点でいえばこの順番で読めばOK!JavaScriptを理解するための14冊このサイトが書籍の紹介をしている様子。私はパーフェクトJavaScriptを推奨しますね。初めに読むにはほんの少しつらい本かもしれませんが分かり始めてから読むと非常に良い本だと思います。学習に役立つのではないかという点で言えばJavaScript初級者から中級者になろうこのサイトは比較的簡単に要点を説明してくれていると思います。リファレンスでしょう。JavaScriptの辞書といったところでしょうか。基本的にここをよく見ればメソッドの使い方などはわかるのではないでしょうか。評価が高い回答ほどページの上位に表示されます。remove低評価0回答の評価を下げる下記のような回答は推奨されていません。評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。15:45ありがとうございます!まさに「順番」に読むべき書籍が列挙されているまとめページで大変参考になります。ご提示いただいたサイトもシンプルで勉強しやすそうです。「順番」に読むべき書籍が列挙されているまとめページで大変参考になります。ご提示いただいたサイトもシンプルで勉強しやすそうです。01:19自身の回答に付け加えますがLv1まずビルドインのオブジェクトに何があるか理解する。JavaScriptの奇妙なスコープを理解する。JavaScriptの暗黙の型変換を理解する。Lv2JavaScriptにおけるオブジェクトとは何かを理解する(関数含めてすべてオブジェクト)JavaScriptのコンストラクタを知る(コンストラクタをfunctionで作る)。thisの特殊なふるまいを理解する。JavaScriptのprototypeを理解する(自分はここで苦労しました)JavaScriptのメソッドチェーンの作り方とは?と疑問を持つ。JavaScript特有のシンタックスシュガーや特殊な機能(?)を知る。callメソッド、applyメソッド、bindメソッドを使える。DOM、StyleSheetなどをJavaScriptで操作できる。ブラウザ間の実装に差異があることを理解する。凄くIEを気にする)Lv3prototype、コンストラクタ(JavaScriptでは関数)を用いた継承を完全に理解する。DOMやCSSの操作を行うコードに関して適切なリファクトができる。(もしくはそれに特化したライブラリなどを使用できる)ブラウザ間の互換性を持たせることができる。(もしくはそれを補完するライブラリのコードを理解できる)OOP的設計(プロトタイプベース)を完全に理解し作成できる。------MAXデファクトスタンダードと呼ばれるレベルのライブラリを自作する......のような感じでステップアップするのがいいですよね。上手く言えないのでLvとか残念な表現になりましたが。ビルドインのオブジェクトに何があるか理解する。JavaScriptの奇妙なスコープを理解する。JavaScriptの暗黙の型変換を理解する。JavaScriptのコンストラクタを知る(コンストラクタをfunctionで作る)。thisの特殊なふるまいを理解する。JavaScriptのメソッドチェーンの作り方とは?と疑問を持つ。JavaScript特有のシンタックスシュガーや特殊な機能(?)を知る。callメソッド、applyメソッド、bindメソッドを使える。DOM、StyleSheetなどをJavaScriptで操作できる。ブラウザ間の実装に差異があることを理解する。prototype、コンストラクタ(JavaScriptでは関数)を用いた継承を完全に理解する。DOMやCSSの操作を行うコードに関して適切なリファクトができる。ブラウザ間の互換性を持たせることができる。OOP的設計(プロトタイプベース)を完全に理解し作成できる。......のような感じでステップアップするのがいいですよね。上手く言えないのでLvとか残念な表現になりましたが。16:35Cf_cwd様、詳細な学習項目を挙げていただきありがとうございます。気が遠くなりそうな内容ですね・・・(^-^;当初の質問文にも書きました通り、個人的にはとりあえず流行っているライブラリを迷わずに利用できる程度の知識があれば当面は間に合いそうなところです。ご提示いただいたようなマスターレベルを目指すのは時間もかかるし自分の能力では到底難しそうです(笑)。Cf_cwd様、詳細な学習項目を挙げていただきありがとうございます。当初の質問文にも書きました通り、個人的にはとりあえず流行っているライブラリを迷わずに利用できる程度の知識があれば当面は間に合いそうなところです。ご提示いただいたようなマスターレベルを目指すのは時間もかかるし自分の能力では到底難しそうです(笑)。・JavaScript特有の記述(即時関数、コンストラクタ、メソッドチェーン、スコープチェーン)あとは簡潔にでも仕様を理解していれば十分でしょうね。個人的に学習するとメリットがあると思うライブラリ(もしくはフレームワーク)は・jQueryサイト制作の際、使用できると面倒な処理などが簡潔に利用できるライブラリ。学習コストが多少かかることと少しファイルが大きいこと、コードに結構癖があるのが短所かもしれません。UIの実装などを素のJavaScriptに比べると非常に簡潔に記述できますね・AngularJSWebアプリケーションの制作の際、描画(出力)などの処理などを含め様々な処理を簡潔に記述できるフレームワークjQueryとは違った意味で癖のあるコードの書き方を求められる、HTMLの記述自体の書き方を変える必要がある点などが短所かもしれませんね。リアルタイムに値の変更を出力する機能を非常に簡潔に記述できるのは非常に魅力的ですね。HTML内で簡単な処理を記述することができるなどの機能も特色でしょうか。・CAATやenchant.js、tmlib.jsなどゲーム開発ライブラリJSを使用してゲームを開発することも考えるならこのあたりも気になりますねthree.jsのような3Dを扱うライブラリやcanon.js、box2d.jsなどの物理演算ライブラリも使えば3Dゲームを作成できるようですしね。あとは簡潔にでも仕様を理解していれば十分でしょうね。サイト制作の際、使用できると面倒な処理などが簡潔に利用できるライブラリ。学習コストが多少かかることと少しファイルが大きいこと、コードに結構癖があるのが短所かもしれません。jQueryとは違った意味で癖のあるコードの書き方を求められる、HTMLの記述自体の書き方を変える必要がある点などが短所かもしれませんね。リアルタイムに値の変更を出力する機能を非常に簡潔に記述できるのは非常に魅力的ですね。HTML内で簡単な処理を記述することができるなどの機能も特色でしょうか。three.jsのような3Dを扱うライブラリやcanon.js、box2d.jsなどの物理演算ライブラリも使えば3Dゲームを作成できるようですしね。14:24ありがとうございます!ライブラリごとの短評、個人的にはすごく役に立ってうれしいです!「jQueryはUIが楽に作れるらしい」という程度の知識しか無かったので、有名どころのライブラリの違いや使用目的などを簡潔に教えていただいてとても参考になります。むやみに全部学習してたら時間もないので、非常に助かります。「jQueryはUIが楽に作れるらしい」という程度の知識しか無かったので、有名どころのライブラリの違いや使用目的などを簡潔に教えていただいてとても参考になります。むやみに全部学習してたら時間もないので、非常に助かります。21:29そういえば基礎的なことですが現在はJSは別ファイルに記載してリンクすることが多いですよ。特別な理由がある場合はHTMLに記述されている場合がありますが(高速化のためにしている場合がある?)。JSファイルのリンクに関してもhead内で行うことが多いですがbodyタグの最後にリンクを記述する場合があります。(){},bool)などのイベントを使用せず「ページが読み込まれた時、実行」というような処理を行うことができますね。onclick="func()"></div>という書き方は現在推奨されていません。(どのブラウザでも動作するというメリットはありますが)(以下のelementはdocument.getElementById()で取得したElementやdocument.createElement()で作成したElement)現在はelement.addEventListener()というメソッドを使用します。IEの古いバージョンにてこのメソッドがなく、element.attachEvent()という独自実装を使用していました。いったブラウザ間の実装の違いがなかなかに厄介です。その点jQueryなどはjQuery内部にイベント管理の機構や便利なメソッドを持っており、ブラウザ間の実装の際をある程度吸収します。個人的な考えですがある程度、素のJavaScriptの記述などを学んでからライブラリを使用したほうがいいと考えています。しないと各ライブラリのメリット、デメリットの判断が難しくなり、他人がいいというから使うといった姿勢になってしまう気がしますので。(もちろん多くの人がいいと判断するならそれなりの信頼性、利便性があるということだと思いますが)そういえば基礎的なことですが現在はJSは別ファイルに記載してリンクすることが多いですよ。特別な理由がある場合はHTMLに記述されている場合がありますが(高速化のためにしている場合がある?)。JSファイルのリンクに関してもhead内で行うことが多いですがbodyタグの最後にリンクを記述する場合があります。(){},bool)などのイベントを使用せず「ページが読み込まれた時、実行」というような処理を行うことができますね。onclick="func()"></div>という書き方は現在推奨されていません。現在はelement.addEventListener()というメソッドを使用します。IEの古いバージョンにてこのメソッドがなく、element.attachEvent()という独自実装を使用していました。いったブラウザ間の実装の違いがなかなかに厄介です。その点jQueryなどはjQuery内部にイベント管理の機構や便利なメソッドを持っており、ブラウザ間の実装の際をある程度吸収します。個人的な考えですがある程度、素のJavaScriptの記述などを学んでからライブラリを使用したほうがいいと考えています。しないと各ライブラリのメリット、デメリットの判断が難しくなり、他人がいいというから使うといった姿勢になってしまう気がしますので。(もちろん多くの人がいいと判断するならそれなりの信頼性、利便性があるということだと思いますが)キャンセル完了するlink0HTML、CSS、PHPがバッチリ出来るなら、基礎から学ぶ必要はあまりありません。あと、PHPができるなら基礎的なプログラミング知識はあると思うので、入門書とかを見るのは時間の無駄かと思います。以下の様なHTMLのみを元に、レスポンシブなWebページを自作してみては如何でしょうか。DOMの追加、CSS定義等、全てJavascriptから行い、PHP側で用意したAPIから適当な内容を取得して表示するようなものを作れれば、ほぼJavascriptのキモは網羅できるかと思います。jQueryだけは読み込むようにしていますが、DOM操作をJavascriptの元の操作で扱うのはかなり面倒なので、何かしらそれ系のライブラリは最初から利用されることをお勧めします。transitionやjQueryのanimate等を使い、動きのあるボタンやプルダウン等を作る3、何かのボタンを押したタイミングで、ajaxにてにデータを投げ、結果を受け取り、それをWebページ上に反映させる但し、PHPと大きく違う以下の2点は事前に調べておくことをお勧めします。1、クラスの作り方2、コールバックの使い方(特に無名関数をコールバックとして記述することが非常に多いので、その辺りです)以上、ご参考になれば幸いです。評価が高い回答ほどページの上位に表示されます。remove低評価0回答の評価を下げる下記のような回答は推奨されていません。評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。15:42「PHPがバッチリ」かと言われるとちょっと怪しいです。OOPが苦手なので、クラスライブラリを使うことは出来ても自分で複雑なクラス設計(抽象だのインターフェイスだの継承だのがよく理解できていない)はほぼ出来ません。OOPを無視すれば、一応「バッチリ」と言ってもいいかもしれません。ご提示いただいたような方法でJS(というよりもjQuery?)の使い方に習熟していくのはたしかに近道かなぁと感じています。素晴らしいご提案ありがとうございます。「PHPがバッチリ」かと言われるとちょっと怪しいです。OOPが苦手なので、クラスライブラリを使うことは出来ても自分で複雑なクラス設計(抽象だのインターフェイスだの継承だのがよく理解できていない)はほぼ出来ません。OOPを無視すれば、一応「バッチリ」と言ってもいいかもしれません。ご提示いただいたような方法でJS(というよりもjQuery?)の使い方に習熟していくのはたしかに近道かなぁと感じています。素晴らしいご提案ありがとうございます。学ぶとよいと思います。別言語と考えたほうがいいかもしれません。版スクリプト)もまた然り。発展させるなどとなると、障害が多すぎる。仕様にまず目を通して、それから、各ブラウザの癖を学ぶとよいと思います。時代の産物はもはや気にする必要はないと思います。使うつもりならなおさら。公式サイトにまずは目を通されるとよいと思います。そこで分からなければ一般サイトで具体的な使用法を、というのが私のいつものやり方です。当然かもしれませんが関数などに関する解説は、公式サイトに敵うサイトを見たことがありません。バグ、コードの記述法、日本語訳に関しては、優秀なサイトもあります。)こんなコードを掲載しているサイトは数少ない印象です。グローバルに頼りがちな言語で、変数や関数の隠蔽、クロージャを使用することで、無駄な名前空間の消費の抑制。リークパターンなどは公式ではなく一般サイトで私は学びました。グローバル空間を汚すことなくブラウザの差異を吸収して書かれたコードはさすがだと思います。評価が高い回答ほどページの上位に表示されます。remove低評価0回答の評価を下げる下記のような回答は推奨されていません。評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。02:20何故ActionScriptが出てくるのでしょう?もちろん使えるならば使えた方がいいと思いますがJavaScriptの勉強を今から始める人が学ぶ必要性はほぼないかと。(Flashも使用するなら当然必要だと思いますが......)また即時関数に関して記載してるサイトはたくさんありますし話題として出すならきちんと単語を出してあげるといいのではないでしょうかね?捕捉として高階関数や即時関数の解説をいれておきます。即時関数(==無名関数==匿名関数):定義と同時に実行する関数(JavaScript特有)。JavaScriptは関数がスコープを持っているのでグローバルに出す必要のない変数をラップすることでグローバルの無駄な汚染を防ぐことができる。(){/**/}());といったものが即時関数と呼ばれます。jQueryでは高階関数も即時関数もよく使いますね何故ActionScriptが出てくるのでしょう?もちろん使えるならば使えた方がいいと思いますがJavaScriptの勉強を今から始める人が学ぶ必要性はほぼないかと。捕捉として高階関数や即時関数の解説をいれておきます。即時関数(==無名関数==匿名関数):定義と同時に実行する関数(JavaScript特有)。JavaScriptは関数がスコープを持っているのでグローバルに出す必要のない変数をラップすることでグローバルの無駄な汚染を防ぐことができる。いったものが即時関数と呼ばれます。仕様を考えると、ActionScriptはよほど綺麗な言語に思えるからです。仕様を考えると、ActionScriptはよほど綺麗な言語に思えるからです。02:21JScriptを学ぶとは書かれていないように思うのですが......。その意味であれば同意いたします。JScriptは学ぶ意味が(あまり)ないでしょう。JavaScriptであれば話は別かと......。JScriptを学ぶとは書かれていないように思うのですが......。その意味であれば同意いたします。JScriptは学ぶ意味が(あまり)ないでしょう。JavaScriptであれば話は別かと......。08:48Cf_cwd様がご指摘くださったように、あくまでもJavaScriptに限ってご指導いただけますと助かります。正しいか正しくないか、美しいか美しくないか等には個人的にはあまり興味がありません。実用的かどうか、多くの人に普及しているかどうか、等に焦点を合わせて、JavaScriptを学びたいなと考えております。Cf_cwd様がご指摘くださったように、あくまでもJavaScriptに限ってご指導いただけますと助かります。正しいか正しくないか、美しいか美しくないか等には個人的にはあまり興味がありません。実用的かどうか、多くの人に普及しているかどうか、等に焦点を合わせて、JavaScriptを学びたいなと考えております。評価が高い回答ほどページの上位に表示されます。remove低評価0回答の評価を下げる下記のような回答は推奨されていません。評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。つくるテトリスの例がたくさんあります。一つでもそれなりに動くものがつくれれば、そこを起点にしていろいろ発展させていけると思います。評価が高い回答ほどページの上位に表示されます。remove低評価1回答の評価を下げる下記のような回答は推奨されていません。評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。1「C4819:ファイルは現在のコードページ(932)で表示できない文字を含んでいます。頂いたご意見への回答は行っておりません。