JavaScriptの勉強法について

Question

初心者です。JavaScript本格入門という本を図書館で借りてきて呼んでいるのですが、if、forまでは理解できたのですがオブジェクト指向になった瞬間にわからなくなりました。
みなさんはどうやってわからない所がわかるようになったのですか？
また、書籍で勉強する勉強法は正しいのでしょうか..？
他の勉強法の方がいいのでしょうか。

Comments

[m.ts10806]

過去質問に幾度となく出てきます。
まずは調べましょう

[m.ts10806]

https://teratail.com/questions/222681
↑の質問からなぜ退化しているのでしょう？

[Zuishin]

その質問のベストアンサーの通りにやってみたが、早々につまずいたので不安になったというところじゃないでしょうか。

[m.ts10806]

確かに図書館古本屋というのがありますね…。ただ他の回答をスルーしてるのが気になりました。

[hentaiman]

ifとforの次にいきなりオブジェクト指向に入る書籍のタイトルを教えてください

[Zuishin]

https://gihyo.jp/book/2016/978-4-7741-8411-1#toc
これですね。
確かに if と for の次にオブジェクト指向に入っています。

[miyabi_pudding]

if と forの次にオブジェクト指向って、階段何段か飛ばしてるような・・・。

[退会済みユーザー]

この質問者は、前回の質問に対してもBAつけるだけで、コメントすらよこさないんですね。
回答もらってどう思ったか、どう考えたかというリターンもないんじゃ、回答するだけ徒労に終わる。

[hentaiman]

書籍リンクありがとうございます
質問者が大げさに言ってるのか冗談かと思ったけど、本当にあるんですね
目次だけ見るとオブジェクト指向の説明だけ流し読みして進めば後々振り返った時に理解出来そうにも思えるけど、流し読みが無理だったんでしょうね

[think49]

個人的に信頼している「Promiseの本」の著者が書いたサイトでは、forの次は「オブジェクト初期化子」でした。
https://jsprimer.net/basic/object/

質問者は「オブジェクト指向」と書いていますが、章名を見る限り、「オブジェクト初期化子」の説明ですね。
個人的には「Number 値」「String 値」の説明が先と考えますが、「2.3　データ型」で終わっているのなら、そこでオブジェクト初期化子に入るのは理解できます。
逆にこの時点で「何を説明すべきだったのか」が気になります。

Answer 1

JavaScript本格入門という本を図書館で借りてきて呼んでいるのですが

読むだけではほぼ身につきません。実際にコードを書きましょう。

Answer 2

はじめに

この回答は質問者が期待する直接的な回答からずれていると感じられるかもしれません。
が、私はteratailで長く回答をしていて、勉強に対する姿勢が無視できないレベルで大きいと考えています。
例えば、同じ知識レベルで同じ本を読んだとしても、他人と質問者さん(@tino1さん)では「理解するまでの時間」に差が出る可能性があります。
「問題の捉え方」や「学習へのアプローチ」など、さまざまな要素で学習効率に違いが出ます。

反発があることを承知で書きますが、私の経験上、質問内容が曖昧で、質問範囲を絞りきれてない場合は、高確率で「できない人」です(詳細は後述参照)。
この質問は、そういう質問です。

書籍とWeb

比較要素	書籍	Web
長所	体系的知識をまとめて得られる	膨大な情報の海から検索できる
短所	情報鮮度が落ちやすい	誤情報や古い情報もある。正誤判定できる基礎知識が求められる

書籍で基礎をおさえて、Webで知識を広げる学習法は、どの分野でも使えます。

「できる人」と「できない人」

比較要素	できる人	できない人
怠惰	長期的に楽をする為、基礎勉強を怠らない	短期的に結果を得る為、簡単に作れる方法を探し回る
短気	遅いプログラムにイライラする。機械化可能な手作業にイライラする。	目的のプログラムを作れない経過にイライラする
傲慢	完璧なプログラムを求め、僅かなミスも許さない	動けばよい。完成度は気にしない。
確かなもの	コードを書いて確認した事実、Web標準仕様などの一次情報を確かなものと考える	自分は初心者なので、コードを書いても正しい理解には繋がらない。上級者に質問するのが確実である。
トラブルシューティング	分割統治法で小さな要素単位で問題点を捉え、各個撃破する。分割できる知識がない場合は、自分に理解可能な単位になるまで基礎に立ち返って、勉強をやり直す	ネットで全く同じケースがないか調べる。他人に聞く。

「分割統治法」は過去ログも参照。

• JavaScript - onloadの逆：一定時間読み込まれない時に動作させたい｜teratail

それから、Jonathan Bluks氏の記事が優良なので、参考までに。

• 10 Signs You Will Suck at Programming - Noteworthy - The Journal Blog
• [翻訳]あなたがプログラミングに向いていない10のサイン - Qiita

質問時の姿勢

「できない人」の質問は、

• 自分の状況を分析せずに、すぐに他人に尋ねます
• 質問はするものの、何が分からないのか分からないので、何の情報を出していいのか分かりません
• 中途半端に理解しているので、「本人が理解したと思っている知識」が間違っていることが往々にしてあります

回答者は、質問者の出した数少ない「あいまい」で「不正確」(出した情報に誤認から来る偽情報が紛れています)な情報から、

• 「初心者が陥るであろう状況」を想像します
• 「質問者の知識に間違いがある」と仮定して、質問者が思い込んでいる「間違った知識」を想像します
• 「掲示された情報に間違いがある」と仮定して、「正しい情報」を想像します
• 「掲示されていない情報」を想像します

というような想像ありきの、あてずっぽうで寄せられた数多くの回答の中から、たまたま質問者の状況にマッチした回答がくる事で、解決に至ります。
ただし、解決しても何が問題だったのかは質問者は理解できず、曖昧模糊とした知識からなんとなく理解した気になって、次の課題にのぞみます。
そして、次の課題で「全く同じ原因からくる問題」にあたりますが、理解できてないので解決できず、同じ問題にも関わらず、再び他人に質問します。

端的にいえば、基礎勉強が足りてないのが要因であり、以下のような状況なのでしょう。

• コピペ可能なコードで楽をしている
• 勉強はしていても、「結果優先で本文の大半を飛ばし読み」している
• 勉強はしていても、「分からない部分を飛ばし読み」している
• 「分からない部分」は想像で補完している

本当に理解する気があるなら、自分でも理解可能と判断できる平易な書籍からやり直すべきなのですが、基礎からコツコツと学習することが時間の無駄で、「今ならもっと簡単に勉強できるはず」という幻想を追い求めて、かえって遠回りをしている印象です。

---

当然ですが、「できる人」はこのような質問をしません。

• 確実に確かめた「間違いのない事実」を質問文に書きます
• 読む人が「事実」と「意見」を区別できるように書きます
• 「具体的」な情報を書きます
• 「理解している範囲」と「理解してない範囲」を区別し、要所を抑える事で、質問範囲を小さくします

過去ログ

• JavaScript - 今Javascriptの勉強を始める場合、教科書はどのECMAScriptに対応しているべきか｜teratail
• JavaScript - JavaScriptの入門を解説しているサイトはどこが良いでしょうか？｜teratail

Re: tino1 さん

Answer 3

前の質問についた回答をきちんと取り込まずに退化した状態で質問してる状態では身に付くものも身に付かないと思います。

既に勉強法についての回答ももらっています。それを差し置いてまた新たな質問を立てても同じか、さらに厳しい答えが返ってくるだけです。
前の質問についた回答で理解できないことがあればその場で聞き、もっと詳しく知りたいならその場で聞き、詰めていくようにしてください。

ひとつの問題に対して解決方法はひとつではないので回答が複数つくわけです。
ベストアンサーに選んだ回答だけが全てではありません。
すべての回答を吟味し、自身の血肉にしていってください。

一発で全てスッキリ解決とかなかなかないですよ。熟練者でも試行錯誤の連続で問題解決をしていっています。
初心者であれば尚更試行錯誤の回数はその倍以上は必要です。

Answer 4

書籍で勉強する勉強法は正しいのでしょうか..？

書籍から情報を得て、実機で試すならその方法でも正解の一つです
「if、for」などのフローと「オブジェクト指向」のような言語構造だと
覚える質が違うので、わからないことはとりあえず放置して
動作することだけ確認しながら進めればいいでしょう
初心者でしたら応用はスキルがついてからで良いと思います

Answer 5

「JavaScript本格入門」は良書だと思いますが、プログラミングがはじめての人にとっては、ちょっと難しかったかもしれません。

もう少し易しめの本を選び直すか、Progate で学習することをおすすめします。

Progate > Javascript
https://prog-8.com/languages/es6

また分からないところは、「javascript オブジェクト指向」のようなキーワードで Google 検索すれば、解説サイトが出てくるので参考にしてみてください。

それでも理解できなければ、teratial で質問すると良いと思います。

Answer 6

オブジェクト指向になった瞬間にわからなくなりました。

有効な学び方は人により違います。
オブジェクト指向といった概念を学ぶために、書籍を読むのは非常に有効ですが、抽象思考の苦手な人には難しいというか無理な気がします。
概念を学ぶために、多くの人に有効と思えるのは、わかっている人と対面で対話を通じて学ぶことです。
それが難しい場合は、いろいろな学び方を試してみて、自分に合った学び方を探すことでしょうか。

また、理解したことが正しいかを確認して理解にフィードバックするには、簡単なプログラムを書いて実行してみて、期待通りの結果になったかを一歩ずつ確認することが大事です。
基本の理解が不十分なのにもかかわらず、そこそこ複雑なプログラムを書こうとして躓いて、このサイトで質問している人多数。

Answer 7

みなさんはどうやってわからない所がわかるようになったのですか？

自分の場合は職場で教えていただける方がいます。
ただ、一から十まで手取り足取り教えてもらっている訳ではないです。基本は家に帰って黙々と勉強しどうしても分からない箇所だけslackを通して教えてもらってます。疑問に思ったことはテラテイルをうまく活用していくことが効果的です！

あと、質問する際は「質問スキル」がとても重要となります。

参考動画：成長速度の遅い人の特徴

もし、周りに教えていただける方がいない場合は独学を続けるかメンターさんを雇う方法が有効だと思う。

また、書籍で勉強する勉強法は正しいのでしょうか..？

書籍で勉強するのは基礎部分だけにしておくべきです。いつまでも基礎部分ばかりやってると先に進めません。
あとは実際に手を動かして「何か成果物を作る」ことです。

参考動画：分かってから始めたい病とは

何を作れば良いのかわからない場合はネット上にいっぱい転がってますが、個人的におすすめなのは「キータ」です。
自分は「ストップウォッチ」「スロットマシーン」「文字が1秒ごとに表示されるカウントタイマー」作成にチャレンジしてます。

他の勉強法の方がいいのでしょうか。

この勉強方法で良いと思いますが
分からないことがあれば教えてくれる環境を自分から率先して作る必要性があります。一番よろしくないのは分からなかったことをそのまま放置することです。そうなってしまうといつまで経っても上達しません。

Answer 8

本で学ぶのはありだと思いますが、JavaScriptは時代によって全然違うのでネットでの勉強もおすすめします。
それにある程度学んだら、やはり実際になにか作ってみるべきです。
オブジェクト指向はあとまわしにして、まずはちゃんと動くものを作れる程度の、関数や変数などの習得を優先したほうがいいと思います。

最初は侍チュートリアル、Progate(有料)などのわかりやすいサービスで学び、
それから公式、もしくはそれに準じる情報量の資料を読むことをおすすめします。
（おすすめは「現代のJavaScriptチュートリアル」、「js STUDIO」など）

金銭的に余裕があれば、MENTAで個別に質問できる先生を見つけるのが一番だと思います。
（安ければ月1000円の方も居ます。）

Progateはわかりやすいといいましたが、わたしはそれでも苦戦しました。
やはり初めてのプログラミング言語なので理解できない部分はかなり多いとおもいます。
最初は気にせず、ある程度のとこまで勉強したら、なにか作品をつくってみるのをオススメします。
（ToDoリストなど）

素のJavaScriptだと難解なので、最初はjQueryなどのわかりやすいライブラリを使用してもいいと思います。

Comments

[m.ts10806]

https://axia.co.jp/2018-10-17
侍は、ちょっと。

[H40831]

絶賛炎上中ですもんね。笑

侍さんにお金を支払う方法をオススメするわけではないのですが、
JavaScriptの勉強中によくGoogle検索でブログの方がヒットしたので、
無料で体得できる範囲の記事を読んで見るのはアリかなと思って掲載しました。
（図書館で本を借りているということから、出費の少ない方法で学びたいのかなと思ったので。）

[hentaiman]

リンク先笑った　武士道に反しておりますな

[m.ts10806]

下手にオンライン学習に手を出すくらいなら別途挙げられてるメンタのほうが良いかなと思います。

[hentaiman]

低評価の理由が気になるが、勉強法の例を出しているだけなのだから低評価するなら併せてよりよい学習法をコメントに書いた方が良いのではないですか？少なくともこの方は自分で学習できた方法を提示しているわけだし

[m.ts10806]

あ、ちなみに私は低評価はしておりません。
先にjQueryをすすめるのは若干悪手だなとは思いますが、私自身も途中からとっつきやすいのでjQueryばかり注力してた時期もあるので人のこと言えないなと。
手を動かさないと身に付かないのは回答者側の共通認識だと思うのでそこもきちんと冒頭で書かれているのはむしろgoodです。

[H40831]

低評価の方は、是非どの部分が良くなかったかコメントいただけると、自分も勉強になりますm(_ _)m
ただそんなことよりも、お二方からコメントいただけてる事の方が嬉しくてモチベあがりました(^.^)

[Zuishin]

js STUDIO ってコスト以外に本に対するアドバンテージあります？
MENTA で月 1000 円のメンターというのも非常に怪しい臭いがします。
個人的に侍を勧めてるというだけで低評価です。

[H40831]

Zuishinさん
js STUDIOは情報が古いということでしょうか？
情報量が多そうなのでオススメしましたが、私自身は包括的に読んでなかったので、注意不足でした。

MENTAの安い人に対する不信感については主観の部分が大きいので個々の判断におまかせしますが、
侍エンジニア塾は学費が数十万円もしますが信頼されてないようですし、
Teratailだって回答者がどんな人かはまったくわからないサービスですので、
結局良い人にあたるか悪い人にあたるかは運だと思います。

侍のコンテンツでの学習はオススメできないということでしたら、
それ自体が質問者さんのためになる情報かと思いますので、補足コメントありがとうございます。

[Zuishin]

怪しい情報は、初心者に勧めるべきものではないと思います。ある程度自分で判断できる人でなければ使えません。

[Zuishin]

teratail の回答については、多くの人が目にするので、誤った情報もある程度は抑えられます。また、その回答には信頼できる情報へのリンクがある、または正確に動くソースコードがあるはずです。しかし、侍の情報はそうではありません。

[H40831]

仰るとおりですね。
「この情報は怪しい」という情報も有益だと思うので、回答は編集しませんが、
質問者さんは、ぜひこのコメントと他の回答もふまえて、
どういう方法で学習していくか選択していっていただければと思います。

[Zuishin]

https://www.sejuku.net/blog/tutorial/109898
> let str = "Hello javaScript!"
> alert(str)

上記は侍チュートリアルの一部ですが、セミコロンの無いコードを教えています。
しかし、次のような罠があるため、初心者に教えるのは不適切と思います。

http://cou929.nu/data/google_javascript_style_guide/#id9

会員登録していないので、いちいちチェックすることはできません。
しかし侍関連のサイトの情報がいかにいい加減なものであるかは、少しググればすぐにいくらでも見つかると思います。

不適切な例が少し不適切だったので差し替えました。

Answer 9

書籍での勉強はお勧めできません。図書館の本なら尚更です。

言語は今や世界中で開発が行なわれています。
そのような中で書籍が最新の情報に合わせられるわけがありません。

JSにはMDNというMozila社のドキュメントのようなものがあります。
（Mozila社 = FireFoxの開発元）
そちらを読んで学習された方が良いかとは思います。

ちなみに本を借りて読んで失敗した例が私です。

Comments

[kyoya0819]

ただ、本質的な部分などの変わらないものは本で学習するのもありかとは思います。
ただ、コードを書かないことには何も始まらないことをご承知おきください。

[m.ts10806]

なぜ買わずに借りるんだろう
自腹切った方がモチベーション維持できるのに

[kyoya0819]

質問者じゃないのでわかりませんが

少なくとも自分の場合は「興味本位」が大きかったように思えます。

まぁ、その後本も買ったのですが情報古すぎて実際に使えませんでしたし。

[m.ts10806]

前にも借りた本で…
って質問に書いてて借りずに買えよってツッコミ受けまくってた質問者がいましたね。何人か。
出すべきコストを惜しんだり間違える人って結局挫折してやめていくんですよねー…

[kyoya0819]

問題にブチ当たっときに「俺には向いてない」って言ってやめていきそうですけどね
（知り合いに何人かいます）

Answer 10

必要なものでないと覚えられないと思います。
逆に言うと今、必要でないものはまず覚えられないと思います。

実際にソースコードを書く。
↓
何か同じことばっかり書いてるなあ、まとめてみよう、となる。
↓
他の人どういうふうにまとめてるんだろう、と調べる。
↓
これスッキリしてるなー、オブジェクト指向って言うんだ。
↓
オブジェクト指向について調べて使ってみよう。

自分はこんな感じでした。

※「同じことばっかり書いてるなあ」は一例で、「メンテ性悪いなあ」「もっとキレイに書きたいなあ」などもあります。

Answer 11

※ 一部、私の愚痴入ります。

---

私個人の意見として、JavaScriptでのオブジェクト指向を学ぶこと は おすすめできません。
私が知っているJavaScriptは古かったようです...

もし、入門書でわかりにくい部分があったら、実際に使ってみることです。
そう...ですね、プロの選手の技術を口だけで学ぶようなものです。
相手はプロなので、すでに分かっています。
なので「がーっといって、がーっと帰ってくる」みたいな抽象的な表現しかもらえないこともしばしば。
自分でコツを掴むとわかりやすいですよね。
(私は体育苦手だから詳しくはわからないけど...)

それと一緒で、実際に体験してみること。

[追記1]

maisumakunさんからご指摘を頂いたので追記。

「OOPをやろうとしてJavaScriptを始めた」のではなく、...

あ、確かにそうですね。修正しておきます。

そして、ES6以上ではクラスベースとしての見た目も整ってきて、...

マジですか... なるほど。修正しておきました。

Comments

[maisumakun]

この質問に対する回答としては適切ではないと考えます。

「OOPをやろうとしてJavaScriptを始めた」のではなく、「JavaScriptをやろうとしたらOOPに遭遇した」状況のようです。

そして、ES6以上ではクラスベースとしての見た目も整ってきて、入門者が通り一遍のことをやる上ではそう問題もないかなと思います。

Answer 12

「JavaScript サンプル」で検索すると良し悪しはありますが
サンプルコードにヒットします。
それをベースに勉強するのもありかなと思います。
わからないところは、QAサイトに質問する。

Answer 13

オブジェクト指向になった瞬間にわからなくなりました。

私も最初は「抽象化」について理解できずにいました。

オブジェクトは「抽象化の概念」で、実際の値を持たせて扱うことが具象化（新しいオブジェクトを作る/インスタンスを生成）と覚えています。

---

抽象化はこんなふうに考える。
1)「数値が１つあり、最初の値は0で、ある操作で１つずつ加算していく」を抽象化すると「カウンタ」。
2)「数値が２つあり、それぞれ、X座標、Y座標を表すもの」を抽象化すると「点」。
3)「数値が４つあり、２つずつに分けて２つの点（始点と終点）を表すもの」を抽象化すると「線」。
4)「数値が２つあり、それぞれ、X方向の大きさ、Y方向の大きさを表し、計算できるもの」を抽象化すると「2次元ベクトル」。

上記の「カウンタ」で教わった例をモダンな class ブロックで書いてみました。

---

オブジェクト（抽象化の概念）には、こんな特徴があります

1. 変数宣言や関数定義を簡素にしてくれる。
2. 操作（関数の動作)が保証され、それに伴う値も正確。
3. 何が起こっているのかわかりやすい（リンク先コメントも参照）。