※ 当サイトの記事には、広告を含む場合があります。
この記事では、JavaScriptの勉強におすすめの書籍やサイトを紹介します。
初心者向けの入門書や入門サイトから、中級者向けのサイトまで様々なものを紹介しています。また、JavaScriptの勉強をする際の注意点や、勉強すべき範囲についても解説しています。
私たちが運営しているHello Mentorでは、JavaScriptが得意なフロントエンドエンジニアがいます。メンティーさんのレベルに合わせて、オーダーメイドでロードマップを組んで、学習サポートしています。
Hello Mentorは、本気でエンジニアを目指す方を応援します。興味を持っていただけましたら、ぜひ下記のリンクからサービス詳細をご覧ください。
Hello Mentor\ 公式LINE始めました /
👇 友達登録でプレゼント 👇
自称日本一詳しいweb制作ロードマップ解説動画
※ 他にも無料学習相談や
学習に役立つ情報など特典あり
この記事の目次
JavaScriptを勉強する際の注意点
JavaScriptはweb制作でもweb開発でも使いますが、目的によっては勉強不要な項目があります。
ここでは、JavaScriptの勉強をスムーズに進めるための注意点について解説します。
- 目的によって勉強すべき内容が変わる
- まずは入門書や入門サイトから始める
- 書籍を使うなら出版時期に気をつける
- HTML・CSSを学んでからJavaScriptに入る
↑ これらについて紹介します。
この内容を知らないと遠回りする可能性もあるので、気をつけてください！
目的によって勉強すべき内容が変わる
web制作志望かweb開発志望かによって、勉強する内容は変わってきます。
まずは、JavaScriptの基礎を勉強する点は同じです。その後のステップが下記のように変わってきます。
- web制作：JavaScriptを使ったアニメーションの勉強をする
- web開発：TypeScript / ReactやVueの勉強をする
web制作志望の場合のJavaScript学習の流れ
- JavaScriptの基礎を勉強
- アニメーションの勉強(特にGSAP)
アニメーションを多用したサイトを作らないのであれば、アニメーションに関してはそこまで深く学ばなくても大丈夫です。
web開発志望の場合のJavaScript学習の流れ
- JavaScriptの基礎を勉強
- TypeScriptの勉強
- ReactやVueの勉強
TypeScript / ReactやVueは、web制作では使わないことが多いですが、web開発の場合はほとんどの現場で使います。
※ 最近ではweb制作でもReactやVueを使うこともあります。
Reactの勉強をしたい方は、下記の記事も参考にしてみてください。
【初心者向け】Reactの勉強方法と手順を紹介！ 【注意点あり】React / Next.jsの勉強本おすすめ6選！ React / Next.jsで作るポートフォリオの例やポイントを紹介！まずは入門書や入門サイトから始める
書籍や学習サイトによっては、中級者向けのものもあります。
- プログラミング経験者ではない
- 基礎ができている自信がない
上記の場合、まずは超入門書くらい簡単な書籍やサイトを使うと良いです。中級者向けのものは、いずれ学ぶべきですが、そこから入ると挫折する可能性が高まります。
ブラウザで手を動かしながら学べるサービスもあるので、そういったものを使うのも良いと思います。
書籍の場合、簡単そうで図解が多いものがおすすめです！意気込んで難しいものを選ぶのは逆効果です！
書籍を使うなら出版時期に気をつける
IT業界は流れが速いため、書籍を使うなら2,3年以内に出版されたものにしましょう。
5年以上前に出版された書籍は、内容が古くなっているはずです。
ReactやVueなどのモダンなライブラリやフレームワークは、活発に更新されているので、1年以内に出版された書籍でも内容が古くなってしまう可能性があります。
書籍は色んなチェックが入って出版されます。2,3年以内に出版された入門書を選んでおけば、そんなに差はありません！
HTML・CSSを学んでからJavaScriptに入る
JavaScriptを学ぶ場合、HTML・CSSも触れることになります。
まずは、HTML・CSSを勉強してから、JavaScriptに入った方がスムーズです。
HTML・CSSが学べるサイトは、下記の記事内で紹介しています。書籍を使う場合は、JavaScriptと同じく、入門書で2,3年以内に出版されたものにしましょう。
web制作の学習サイト15選！独学向け・無料あり！私たちが運営してる模写修行もぜひご利用ください。どの書籍やサイトよりも実践的な内容になっています。
Hello Mentorでは、web制作 / フロントエンド / webデザイン / グラフィックデザインなど、幅広く対応可能です。最短でスキルアップしたい方は、下記のリンクから詳細をご確認ください。
Hello Mentor\ 公式LINE始めました /
👇 友達登録でプレゼント 👇
自称日本一詳しいweb制作ロードマップ解説動画
※ 他にも無料学習相談や
学習に役立つ情報など特典あり
JavaScriptの勉強に使えるおすすめの本やサイト
テキスト、動画、手を動かして学べる系など、様々な種類を紹介します。自分に合う合わないもあるので、好きなものを使うと良いです。
下記の4つに分けて紹介します。
- 環境構築不要で学べるおすすめサービス
- おすすめの入門書や入門サイト
- 入門後におすすめの本やサイト
- その他
おすすめ度とその理由も記載しました。
大量に紹介することもできますが、選ぶのに困ると思うので、本当におすすめできるもののみに絞りました！
環境構築不要で学べるおすすめサービス
環境構築不要で学べるおすすめサービスを紹介します。
- Progate
Progate
リンク：Progate
Progateは、ブラウザで手を動かしながらプログラミングが学べるサービスです。
内容はかなり簡単なので、プログラミング超入門サービスだと思うと良いです。Progateだけでは、基礎も怪しいので、まずはプログラミングに触れてみる目的で使うことがおすすめです。
おすすめ度：★★☆☆☆
Progateの学習スタイルは好みが分かれるところだと思います。必ず使うべきサービスではないので、このスタイルが好きな方は利用すると良いでしょう。
おすすめの入門書や入門サイト
おすすめの入門書や入門サイトを紹介します。
- ドットインストール
- ともすたチャンネル
- Udemy
- おすすめ書籍2冊
ドットインストール
リンク：ドットインストール
ドットインストールは、動画でプログラミングが学べるサービスです。JavaScriptの動画も多く扱っています。
おすすめ度：★★★★☆
入門サイトとしては、個人的に1番おすすめです。テキストより動画派の方には特におすすめです。
ともすたチャンネル
リンク：ともすたチャンネル
たにぐちさんのYouTubeメンバーシップ動画です。月990円でJavaScriptだけでなく、TypeScript / WordPress / Gitの基礎を勉強できます。
おすすめ度：★★★★☆
解説がとてもわかりやすいので、動画が好きな方にはおすすめです。
Udemy
リンク：Udemy
Udemyは、プログラミングに限らず様々な動画教材を販売できるサイトです。特にプログラミング関連の動画は多く、クオリティーも高いのでおすすめです。
教材は主に個人が出しているので、評価等を参考に選ぶと良いです。
※ セール時期以外はとても高いので買わない方が良いです。月に何回も90%OFF以上のセールをやっています。
おすすめ度：★★★☆☆
教材数が多いので、良いものを探す手間があります。メンテナンスをちゃんとしている教材を選ぶと良いです。
書籍
- 2,3年以内に出版されている
- 図解が多めでわかりやすそうな入門書
この条件をクリアしていれば、どれを使っても大きな差はありません。
おすすめ度：★★★★☆
体系的に学べるので、書籍で勉強するのはおすすめです。どの分野もまずは1冊やると良いです！
入門後におすすめサイト
入門後におすすめの本やサイトを紹介します。
- JavaScript Primer
- 現代のJavaScript チュートリアル
JavaScript Primer
JavaScript Primerは書籍版もあります。書籍版とウェブサイト版は同じ内容です。(ウェブサイト版は全て無料)
無料でかなり詳しく解説されています。ただ、入門書ではないため、初めてJavaScriptに触れる方にはおすすめできません。
基礎学習後にJavaScript Primerを一通りやる、もしくは基礎学習後に辞書として使うと良いです。
おすすめ度：★★★☆☆
基礎学習後、テキストで学びたい方には、星5つレベルでおすすめです。なんといっても無料なのが良いです！
現代のJavaScript チュートリアル
現代のJavaScript チュートリアルは、前述したJavaScript Primerのさらに詳しいサイトだと思うと良いです。入門書ではありません。
どちらかというと、わからないことを調べるための辞書として使うのが良いです。
おすすめ度：★★☆☆☆
勉強するためのサイトとしては、あまりおすすめできませんが、わからないとこを調べるにはとても良いです。
その他
他にも場合によっては勉強すべきことを、紹介します。
jQuery
個人的には、jQueryは勉強する必要がないと思っていますが、環境によっては使わないといけないこともあるかもしれません。
最近出た書籍はないので、公式ドキュメントを見るのが良いです。英語なので、抵抗があるかもしれませんが、慣れるしかないです。
jQueryを勉強しなくて良いと思う理由は、下記の記事で解説しています。
jQueryは古い？オワコン？今から勉強すべきかを解説！GSAP
GSAPは、アニメーションライブラリです。web制作志望でアニメーションを多用したサイトを作りたい場合は、必須で勉強しましょう。
ギャラリーサイトに載るようなサイトは、GSAPを使っていることが多いです。以前調べた際は、半分くらいのサイトがGSAPを使っていました。
書籍はないので、公式ドキュメントを見ながら自分で色々作ってみるのがおすすめです。
さらにリッチなサイトを作る場合、WebGLという技術も必要になります。対象者が少ないので割愛します。興味がある方は調べてみてください。
TypeScript
TypeScriptは、JavaScriptを拡張して作られた言語です。web開発では、ほぼ確実に使うと思った方が良いです。web制作では、使わない現場が多いと思います。
JavaScriptの勉強後にサバイバルTypeScriptをやるのがおすすめです。
React.js / Next.js
web開発では、ReactやVueを使うことが多いです。今はReactが主流なので、これから勉強するならReactをやっておくと良いです。
ReactとセットでNext.jsも勉強します。
Next.jsは特にアップデートが頻繁にあり、書籍や記事も古い情報の場合が多いです。1番確実な情報は、公式ドキュメントです。
ここまで流れがはやいと、何を使って勉強すべきか自分で判断するのは難しいので、メンター等を利用するのがおすすめです。
私たちが運営しているHello Mentorでは、1人1人にあったロードマップを組んで、学習サポートをしています。もちろん使う教材のアドバイスや無制限の質問対応もあります。
現役のフロントエンドエンジニアがメンターを担当！独学の非効率さを解消して3倍速でスキルアップしませんか？
私たちが運営しているHello Mentorは、メンター全員が今も現役のエンジニアです。フロントエンドエンジニアで、JavaScriptやReact / Next.jsが得意なメンバーがいます。
プログラミングは独学可能ですが、プロのサポートがあれば、効率的かつ安心して学習ができます。
メンティーさんからは、『圧倒的に効率化できている！』と嬉しい声をいただいています。
厳しい時代も生き残れるエンジニア/デザイナーになりたい方は、まずは無料相談にお越しください。(強引な営業等、一切ありません！)
Hello Mentor\ 公式LINE始めました /
👇 友達登録でプレゼント 👇
自称日本一詳しいweb制作ロードマップ解説動画
※ 他にも無料学習相談や
学習に役立つ情報など特典あり
web制作ロードマップ解説動画プレゼント👉
LINE登録でGETこの記事を書いた人
Gaku / @gaku92014091
フリーランス8年を経て法人化(3期目)、業界歴は12年目。コンテンツ制作、ライティング、マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやってます！webサービスを作るのが好き！
本当におすすめできるものに絞って紹介しています！