HTMLやCSSを習得し、次はJavaScriptを学習したいがどのような手順を踏めばいいのかわからない、勉強しているけれど中々定着しないという方に向けた内容となっています。
プログラミング学習には独学 or プログラミングスクールという選択肢がありますが、本記事では独学かつ1万円以内でJavaScriptを習得する手順と教材を紹介していきます。
JavaScriptは独学でも十分習得可能です！
以下、対象読者とレベル別学習期間目安となります。
- HTMLとCSSは習得済み
- 独学でJavaScriptを習得したい
- JavaScriptを勉強してみたものの中々身につかない
- 初学者・・・6ヶ月ほど
- ちょっと経験のある方・・・3ヶ月ほど
JavaScriptを習得する手順と役立つ教材
ご紹介する教材はJavaScriptに限ったものですが、手順はどのプラグラミング言語にも通ずるものですので、他の言語も学習してみたい方は是非とも参考にしてください！
教材は私が実際に試した本とUdemy動画を紹介しています。
個人的に本は紙の本をオススメします。（Kindle版は読みにくい😢）
また、Udemy動画は通常時は1、2万円するため、月に1、2回開催されるセール期間を狙ってください。セール期間であれば1200円〜1600円ほどで購入可能です。
1. JavaScriptで何ができるのかを知る
JavaScriptで何ができるのかがまだわからない方は、まず何ができるのかを知る必要があります。
初めから基礎文法学習をしてしまうと、その文法で何が実現でき、どこで役に立つのかが分からないと思います。
右も左も分からないという時は、何かを作りながら基礎を学べる教材がぴったりです。
確かな力が身につくJavaScript「超」入門 第2版
作って楽しみながらJavaScriptの基礎を学べる教材としてかなり出来が良く、高い評価を得ています。
JavaScriptでドロワーメニュー、画像切り替え、ミニゲーム、天気予報アプリ、現在地の取得などを実装しながら基礎学習を進めていけます。
2. 作りたいものを決める
JavaScriptでどんなことができるのか分かってきたと思うので、今度は作りたいものを決めてみましょう！
最も効率良くプログラミング言語を習得する方法は作るものを決め、それに向けて学習を進めていくことです。
例えば…
- ハンバーガーアイコンを押したら出てくるメニュー作ってみる
- 郵便番号を入力したら、住所が自動入力されるフォーム
- クイズアプリ
- 現在地から近い飲食店を検索できるサービス
オリジナルのWebサイトやWebアプリなどを作っていくことで、自分で調べ、考え、問題を解決していく力が付いていきます。
それがみなさんの本当のスキルになります。
3. 基礎文法を勉強する（暗記しなくてもOK！）
基礎文法の学習はとても大事です。
初めのうちは基礎文法を一通りやってみましょう。
1、2周程度で良いかと思います。
丸暗記する必要はありません。
なぜならJavaScriptの基礎文法やJavaScriptに備わっている組み込み関数の量は膨大で、とても全て暗記できるような量ではなく、まともにやると生涯を終えます✋
「そういえばこんなことできたなあ」くらいは1、2度やれば身につくので心配する必要はありません。
分からないことは随時ネットで検索して情報は拾えますし、調べて書いていくうちに自然と覚えてしまうものです。
基礎文法を学べる教材はたくさんありますが、個人的には以下の本や動画がオススメです。
自分に合ってそうなものを1つやってみるだけで十分かと思います。
独習JavaScript 新版
オンライン学習サービスUdemyで数々のベストセラーを生み出しているCodeMafiaさんの著書です。
基礎文法を一通り学ぶことができる上、章終わりに練習問題があるため、効率良く基礎を定着させることができます。
【JavaScript＆CSS】ガチで学びたい人のためのWEB開発徹底実践（フロントエンド編）
先程紹介した「独習JavaScript 新版」の著者CodeMafiaさんのUdemyベストセラー講座です。
こちらはJavaScriptの基礎だけでなく、モダンCSSも学ぶことができます。
24.5時間とかなりボリューミーで内容は濃く、講座の終盤にはJavaScriptを使った本格的なWebサイトを作っていきます。
基礎とアウトプットも行いたい、動画の方が学習しやすいという方にはこちらがオススメです。
【2022年最新】【JavaScript＆CSS】ガチで学びたい人のためのWEB開発実践入門（フロントエンド編）
4. 似たものを参考にしてみる
もう成果物の作成を行いたいという方は読み飛ばしていただいても大丈夫です！
ここまで学習できたら基礎はばっちりかと思うので、実践に移ってみると良いでしょう。
しかし、ここから成果物の作成に踏み込むイメージが湧かなかったり、自信がない方は作りたいものと似たようなものを探してみましょう。
そして、そのコードを参考にし模写してみることをオススメします。
模写とはコードを丸写しして動作を確かめるプログラミング学習方法です。
そのコードの節々で何が起きているのか、このような書き方をすればこのように動くと考えながら模写を進めていくと、理解が深まります。
参考資料をキーワードでググるのも良いですが、CodepenというJavaScript制作物のアウトプットを閲覧できるサイトで参考にできそうなものを探してみることもオススメします。
https://codepen.io/
基本的には無料で利用でき、ソースコードや動きの閲覧だけでなく、自分でコードを書いて公開することもできます。
英語のサイトなので、英語でキーワード検索をする必要があります。
このようにWebサイトに埋め込むことも可能です。
See the Pen Voyage Slider | GSAP by Sikriti Dakua (@dev_loop) on CodePen.
5. 作りたいものを作る
ここまで学習を進めることができたら、作りたいものを作ってみましょう！
わからない点があれば、本やネットで調べ、とにかく最後までやり切ってみてください。
最後までやりきったら、また何か作りたいものを決め、分からないところは学習しながら作ってみましょう。
作れば作るほどスキルも自信も付いていき、みなさんにJavaScriptで作れないものはなくなっていくでしょう。
JavaScriptフレームワークReactの習得に役立つ教材
ReactというJavaScriptフレームワークも習得してみたいという方は読んでみてください。
JavaScriptフレームワークとは？
フレームワークとはアプリ開発において、頻繁に利用される機能をあらかじめ備えた枠組みのことをいいます。
JavaScriptフレームワークというと、JavaScriptで頻繁に利用される機能をそのフレームワーク独自の書き方で実現する枠組みのことを言います。
プレーンなJavaScriptで開発するよりもJavaScriptフレームワークで開発する方が早いため、昨今のWebアプリ開発において、JavaScriptフレームワークの知識は必須となっております。
JavaScriptフレームワークを使用しての開発はPHPやPythonなどのバックエンド言語（システム言語）との連携ありきなところもありますが、JavaScriptフレームワーク（JavaScript）単体でもアプリ開発は可能です。
ReactはJavaScriptフレームワークとしての働きだけでなく、React NativeというReact派生のフレームワークでスマホアプリを開発することもできます。
次は私が実際に試したReactの習得に役立つ教材を紹介していきます。
その前にJavaScript基礎のおさらいと深掘り
React習得の教材を紹介する前にJavaScript基礎のおさらいと深掘りを行うとReactの学習効率が飛躍的に上がります。
【JS】ガチで学びたい人のためのJavaScriptメカニズム
またまたUdemyで数々のベストセラーを生み出しているCodeMafiaさんの講座です。
中級者〜上級者向けで、何かを作っていくというタイプの教材ではなく、JavaScriptという言語を基礎から深ぼっていく内容です。
最後はJavaScriptフレームワークのVue.jsに触れていきますが、僕はReact派閥なのでスキップしました🐼
正直かなり大変ですが、この講座を受講する前と後ではReactの定着に雲泥の差が出ると思います。
実は私、React学習を2回行っており、最初は失敗しています。
というのもJavaScriptの基礎があまり出来ていない状態でReact学習を進めたので、碌に定着しませんでした。しかも、Reactを使って何も開発していません。
年を跨いで再びReact学習を行おうとした際、ReactなどのJavaScriptフレームワークには何がなんでもJavaScriptの基礎が必須と知り、基礎と基礎の深掘りをこの講座で行いました。
その甲斐あってか、React学習内容がスッと入ってくるようになり、知識定着を実感できるようになりました。
【JS】ガチで学びたい人のためのJavaScriptメカニズム
モダンJavaScriptの基礎から始める挫折しないためのReact入門
国内ではReactを学習するならこの講座と言われているほど、定評のあるUdemyのReact入門講座です。
JavaScriptの基礎を振り返りつつ、JavaScriptでできることをReactに置き換え、同じアプリでもReactで実装すると如何に効率的なのかが分かる内容になっています。
モダンJavaScriptの基礎から始める挫折しないためのReact入門
Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版
先程紹介した「モダンJavaScriptの基礎から始める挫折しないためのReact入門」の続編となる講座で、発展的な内容になっています。
また、JavaScriptフレームワークを使用した開発では、CSSフレームワークもよく利用されるため、こちらの講座では同時にCSSフレームワークも学ぶことができます。
Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版
ここまで進められると、Reactで簡単なアプリ開発ができるようになっているでしょう。
以下、私がReactを使って作成したアプリになります。
テンプレートを選んで入力！書類作成サービス「ツクールドック」
https://2cool-doc.com/
まとめ
- JavaScriptで何ができるのかを知る
- 作りたいものを決める
- 基礎文法を勉強する（暗記はしなくてもOK！）
- 似たものを参考にしてみる
- 作りたいものを作る
この手順はJavaScriptに限らずに他のプログラミング言語にも通ずるものです。
何かを作ることができて初めてそのプログラミング言語を「習得した」と言えると思います。
いつまでも何かを作ろうとしないのは車に乗らず、運転技術を磨こうとするものです。
プログラミング学習は大変ですが、めげずに頑張ってください✊
