JavaScriptの勉強ができるおすすめの本やサイト紹介！

この記事では、JavaScriptの勉強におすすめの書籍やサイトを紹介します。

初心者向けの入門書や入門サイトから、中級者向けのサイトまで様々なものを紹介しています。また、JavaScriptの勉強をする際の注意点や、勉強すべき範囲についても解説しています。

👇 メンターやってます 👇

模写修行やこのメディアを作ったメンバー中心に、メンタリングサービスHello Mentorを運営しています。

• 独学に限界を感じている...
• 基礎学習後に何をしたら良いかわからない...
• 自分のコードやデザインが正しいかわからない...
• 転職や副業・フリーランスのアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。

👆 メンターやってます 👆

JavaScriptを勉強する際の注意点

JavaScriptはweb制作でもweb開発でも使いますが、目的によっては勉強不要な項目があります。

ここでは、JavaScriptの勉強をスムーズに進めるための注意点について解説します。

↑ これらについて紹介します。

目的によって勉強すべき内容が変わる

web制作志望かweb開発志望かによって、勉強する内容は変わってきます。

まずは、基礎を勉強する点は同じです。その後のステップが下記のように変わってきます。

• web制作：よく作るUIやアニメーションの勉強をする
• web開発：TypeScript / ReactやVueの勉強をする

web制作志望の場合のJavaScript学習の流れ

1. JavaScriptの基礎を勉強
2. よく作るUIを作れるようになる
3. アニメーションの勉強(特にGSAP)

よく作るUIは、例えばモーダルやアコーディオンなどです。

アニメーションを多用したサイトを作らないのであれば、アニメーションに関してはそこまで深く学ばなくても大丈夫です。

web開発志望の場合のJavaScript学習の流れ

1. JavaScriptの基礎を勉強
2. TypeScriptの勉強
3. ReactやVueの勉強

TypeScript / ReactやVueは、web制作では使わないことが多いですが、web開発の場合はほとんどの現場で使います。

※ 最近ではweb制作でもReactやVueを使うこともあります。

Reactの勉強をしたい方は、下記の記事も参考にしてみてください。

【初心者向け】React / Next.jsの勉強方法と手順を紹介！ 【注意点あり】React / Next.jsの勉強本おすすめ8選！ React / Next.jsで作るポートフォリオの例やポイントを紹介！

まずは入門書や入門サイトから始める

書籍や学習サイトによっては、中級者向けのものもあります。

• プログラミング経験者ではない
• 基礎ができている自信がない

上記の場合、まずは超入門書くらい簡単な書籍やサイトを使うと良いです。中級者向けのものは、いずれ学ぶべきですが、そこから入ると挫折する可能性が高まります。

ブラウザで手を動かしながら学べるサービスもあるので、そういったものを使うのも良いと思います。

書籍を使うなら出版時期に気をつける

IT業界は流れが速いため、書籍を使うなら2,3年以内に出版されたものにしましょう。

5年以上前に出版された書籍は、内容が古くなっているはずです。

ReactやVueなどのモダンなライブラリやフレームワークは、活発に更新されているので、1年以内に出版された書籍でも内容が古くなってしまう可能性があります。

【注意点あり】React / Next.jsの勉強本おすすめ8選！

HTML・CSSを学んでからJavaScriptに入る

JavaScriptを学ぶ場合、HTML・CSSも触れることになります。

まずは、HTML・CSSを勉強してから、JavaScriptに入った方がスムーズです。

HTML・CSSが学べるサイトは、下記の記事内で紹介しています。書籍を使う場合は、JavaScriptと同じく、入門書で2,3年以内に出版されたものにしましょう。

【2024年版】web制作の独学に使える学習サイト15選！

私たちが運営してる模写修行もぜひご利用ください。どの書籍やサイトよりも実践的な内容になっています。

Hello Mentorでは、web制作 / フロントエンド / バックエンド / webデザイン / グラフィックデザインなど、幅広く対応可能です。最短でスキルアップしたい方は、下記のリンクから詳細をご確認ください。

JavaScriptの勉強に使えるおすすめの本やサイト

テキスト、動画、手を動かして学べる系など、様々な種類を紹介します。自分に合う合わないもあるので、好きなものを使うと良いです。

下記の4つに分けて紹介します。

• 環境構築不要で学べるおすすめサービス
• おすすめの入門書や入門サイト
• 入門後におすすめの本やサイト
• その他

おすすめ度とその理由も記載しました。

環境構築不要で学べるおすすめサービス

環境構築不要で学べるおすすめサービスを紹介します。

Progate

リンク：Progate

Progateは、ブラウザで手を動かしながらプログラミングが学べるサービスです。

内容はかなり簡単なので、プログラミング超入門サービスだと思うと良いです。Progateだけでは、基礎も怪しいので、まずはプログラミングに触れてみる目的で使うことがおすすめです。

おすすめの入門書や入門サイト

おすすめの入門書や入門サイトを紹介します。

ドットインストール

リンク：ドットインストール

ドットインストールは、動画でプログラミングが学べるサービスです。JavaScriptの動画も多く扱っています。

ともすたチャンネル

リンク：ともすたチャンネル

たにぐちさんのYouTubeメンバーシップ動画です。月990円でJavaScriptだけでなく、TypeScript / WordPress / Gitの基礎を勉強できます。

Udemy

リンク：Udemy

Udemyは、プログラミングに限らず様々な動画教材を販売できるサイトです。特にプログラミング関連の動画は多く、クオリティーも高いのでおすすめです。

教材は主に個人が出しているので、評価等を参考に選ぶと良いです。

※ セール時期以外はとても高いので買わない方が良いです。月に何回も90%OFF以上のセールをやっています。

書籍

• 2,3年以内に出版されている
• 図解が多めでわかりやすそうな入門書

この条件をクリアしていれば、どれを使っても大きな差はありません。

※ 『1冊ですべて身につくJavaScript入門講座』はweb制作向けの書籍です。web開発志望の方にはおすすめしません。

入門後におすすめサイト

入門後におすすめの本やサイトを紹介します。

JavaScript Primer

リンク：JavaScript Primer

JavaScript Primerは書籍版もあります。書籍版とウェブサイト版は同じ内容です。(ウェブサイト版は全て無料)

無料でかなり詳しく解説されています。ただ、入門書ではないため、初めてJavaScriptに触れる方にはおすすめできません。

基礎学習後にJavaScript Primerを一通りやる、もしくは基礎学習後に辞書として使うと良いです。

現代のJavaScript チュートリアル

リンク：現代の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では、普段から実務でReactを使っているメンターがいます。プロのアドバイスが欲しい方は、ご検討ください。

独学に限界を感じていませんか？