はじめまして、ITエンジニアのカワノです。
JavaScript に入門したいけれど、独学でも大丈夫なのか？難しいのではないか？このような疑問や悩みを抱えている方も多いと思います。この記事では、そんな疑問や悩みを少しでも軽くできるように、現役エンジニアである筆者が JavaScript の独学での入門・学習方法を解説していきます。
目次
JavaScript は難しい？プログラミング初心者でも大丈夫？
JavaScript は比較的、習得が用意なプログラミング言語です。ブラウザで動作するため、他の多くのプログラミング言語の最初の難関である環境構築がとても容易であり、静的型付言語と異なりコンパイルの手間もありません。プログラミング初心者であっても、基本的な文法だけならば 1 ~ 3ヶ月で習得可能です。
その一方で非常に奥が深く、プログラミングに詳しくなればなるほど難しく感じるプログラミング言語としても知られています。JavaScript はフロントエンドとサーバーサイドの両方で活用されていますが、それぞれに独特の癖があり、可読性と保守性を保つことに苦労しがちです。
特にフロントエンド開発では、ブラウザ間での動作の違い、常に新しくなり続ける仕様、ライブラリ・フレームワークのトレンドなどに対応する必要があるため、絶え間ない継続学習が必要になります。
このような背景から、腕のある JavaScript エンジニアは多くの企業で大変重宝されています。JavaScript の基本的なことを理解している人材は豊富でも、複雑な仕様や最新のトレンドまでおさえている人材は希少だからです。
プログラミング初心者の方でも「とりあえずプログラミングを始めてみたい」「個人的なプログラムを作れるようになりたい」「Web デザインと一緒に学んでみたい」といった場合は問題ありません。しかし「JavaScript を極めて就職・転職につなげたい」という場合には相応の覚悟が必要なので注意してください。
どのくらい学習する必要がある？
プログラミングには向き不向きがあるため一概にいうことはできませんが、以下の表をどのくらいの学習期間でどのくらいのことができるようになるのかの目安にしてください。
| できるようになること | 学習期間目安 | |
|---|---|---|
| Lv.1 | 写真スライドショーなどWebページへの動きをつける | 1 ~ 3ヶ月 |
| Lv.2 | Webページに高度なアニメーションをつける | 2 ~ 6ヶ月 |
| Lv.3 | Webページの UI / UX を高い水準に引き上げ可読性や保守性も保つ ( プロレベル ) | 約1年以上 |
JavaScript を独学で学ぶ方法4ステップを紹介！
それでは、具体的に JavaScript を独学で学ぶ方法について紹介していきます。
ステップ1. 学習環境を整えよう
まずは JavaScript を学習するための環境を整える必要があります。とは言っても、JavaScript は他の多くのプログラミング言語と違って複雑な環境構築は必要ありません。はじめに必要なのは、ブラウザを開くことができるパソコンとプログラムを書くためのエディタだけです。
JavaScript はメモ帳などの特別な機能のないテキストエディタでも記述することができますが、やはりプログラミング用のエディタを使ったほうが楽に記述できます。そこで、現役エンジニアである筆者がおすすめするのが atom というエディタです。
atom は GitHub という開発プラットフォームを開発・運営しているGitHub社が作った、プログラマーのためのテキストエディタです。分散型バージョン管理システムの git, 及び開発プラットフォームの GitHub の使用を想定した機能がデフォルトで備わっていることや、様々なパッケージをインストールすることによる拡張性が特徴です。
せっかくですので、将来エンジニアになることを目的としているならばここで git, GitHub についても使い始めると良いでしょう。エンジニアになるためには必須のスキルです。
このように聞くとなにやら難しそうに感じると思いますが、まずは気にせずに使ってみましょう。学習を進めるうちに、atom の便利さに気づいていくはずです。
ブラウザはどのブラウザでも構いませんが、できれば Google Chrome を使いましょう。Google Chrome は他のブラウザと比べて JavaScript の新しい文法に対応するのが早いからです。最新の JavaScript は Google Chrome 以外では動作しない可能性があります。
ステップ2. 基本的な文法をマスターしよう
学習できる環境が整ったなら、早速 JavaScript を書いてみましょう。以下に紹介するプログラミング学習サイトで大まかな学習流れをつかみ、そのあとに入門書などの本を使ってサンプルプログラムの写経やオリジナルアプリケーションの作成を行う、という流れがおすすめです。
この時点では、複雑な仕様や最新のトレンド、専門的なライブラリやフレームワークなどについてはあまり深追いせず、基本的な文法を身につけることを優先しましょう。
おすすめのプログラミング学習サイト
基本的な文法をマスターするときにおすすめのプログラミング学習サイトは「progate の JavaScript コース」と「ドットインストールのはじめての JavaScript コース」です。
progate は要点を簡潔にまとめたスライドショー形式のプログラミング学習サイトです。要点を噛み砕いた解説が非常に丁寧でプログラミング初心者にもおすすめです。ただし、1講義にかかる時間が1時間以上なため、まとまった時間が取れない方や独学に自信がない方はドットインストールの方が向いているかもしれません。
ドットインストールは3分以内の動画を1講義として、すべての講義を受講することで一つの技術を習得できるように構成されているプログライング学習サイトです。1講義3分という短さと動画という授業形態から挫折しにくいため、隙間時間に学習したい方や独学に自信がない方にもおすすめです。
おすすめの本
基本的な文法をマスターする時におすすめの本は「スラスラ読める JavaScriptふりがなプログラミング」と「確かな力が身につくJavaScript「超」入門 第2版」です。
「スラスラ読める JavaScriptふりがなプログラミング」は、プログラミング学習サイトでは JavaScript の文法を自分のものにできたという感覚が薄い方や、過去にプログラミング学習に挫折してしまったという方に特におすすめです。ソースコードにふりがなを振って解説するという独自のスタイルでプログラミング初心者の方でもわかりやすいようにと工夫が施されています。
「確かな力が身につくJavaScript「超」入門 第2版」は、プログラミング学習サイトである程度 JavaScript を理解できたので次のステップに進みたいと感じている方に特におすすめです。この本は、序盤は基本的な事項についての解説であるものの、後半には少し応用的な内容を載せています。さらに、サンプルプログラムも実践的なものが多く採用されているので、ステップアップを実感できるはずです。
ステップ3. フロントエンドかバックエンドかを選ぼう
基本的な文法をマスターしたら、フロントエンド開発とバックエンド開発のどちらを学ぶか選びましょう。習得するべき技術が大きく異なってきます。
フロントエンド開発を学びたい場合は、HTML, CSS の知識が必須になります。まずは基本的な記法を学んで、後に続くライブラリやフレームワークの学習に備えましょう。この時点で得られる知識だけでも、駆使すればシューティングゲームなどのちょっとしたゲームを作れるようになります。
バックエンド開発を学びたい場合は JavaScript 実行環境 Node.js を学ぶことになります。Node.js は、非同期処理を中心にフロントエンド開発ではあまり使用されない技術を積極的に使うことで真価を発揮します。まずはそれらを理解しましょう。
本格的な Web アプリケーションは後述する Web フレームワーク Express を使わないと作成は難しいですが、この時点でワードカウンタなどのちょっとしたツールが作れるようになります。
ステップ4. ライブラリやフレームワークについて学ぼう
フロントエンド開発、バックエンド開発のうち選択した分野の基本的な知識を身につけたら、次はそれぞれのライブラリやフレームワークについて学習しましょう。
ライブラリやフレームワークを駆使することで、今まで作れなかったような規模の大きなアプリケーションの作成が可能になります。また、就職や転職に向けて学習している場合はこれらの知識や経験はほぼ必須レベルです。
フロントの場合は jQuery, Vue.js, React を学習しよう
フロントエンド開発では、 JavaScript ライブラリやフレームワークの学習をしましょう。しかし、全てを学習する必要はありません。以下には特に人気で需要のあるライブラリ・フレームワークを紹介していますが、世の中には他にも数え切れないほどのライブラリ・フレームワークが存在していますし、これからも誕生し続けます。
なので、目的のものを作ることができれば十分なのであれば、その目的に合ったライブラリ・フレームワークを1つか2つ学習するだけで十分です。就職や転職を目的としている場合も、目的の企業がある程度絞れているのなら、その企業が採用しているライブラリ・フレームワークを学習するだけで問題ありません。
もし、それでも学習するべきライブラリやフレームワークを決められない場合は以下に紹介するものから選ぶと良いでしょう。これらで大概のものは作れるようになりますし、特に需要のあるものに絞って紹介しているので、就職や転職にも役に立つはずです。
jQuery
jQuery は歴史的に幅広く利用されている JavaScript ライブラリです。しかし、現在は可読性や保守性を高く記述するのが困難であるという理由から後述する Vue.js や React などに押され気味です。
しかし、歴史的経緯から開発現場では今でも jQuery が残っている、使っているということも少なくありません。身につけておくと就職後に役に立つ可能性が高いです。加えて、小規模開発ならば可読性や保守性をあまり気にしなくても良い点と、後述するライブラリ・フレームワークと比べると学習コストが低い点から、目的のものを作れるようになるだけで良い方にもおすすめです。
jQuery を学習する際におすすめの本は「jQuery最高の教科書」です。この本は2013年の出版と少し前のものになりますが、jQuery 自体が最新の技術ではなくなってきていることもあり、筆者は今でも入門に最適の本だと考えています。初心者が抱きやすい疑問を丁寧に解説し、中盤から終盤にかけては実践的・応用的内容についても詳細に書かれています。
Vue.js
Vue.js はフロントエンドエンジニア界隈で話題のモダンな JavaScript フレームワークです。フロントエンド開発のごくごく基本さえ知っていればすぐに使い始められることが特徴です。なるべく平易な記法、簡潔な仕様で小規模開発から大規模開発までの多くの現場のエンジニアの要求に応える機能を提供します。
Vue.js を学習する際におすすめの本は「Vue.jsのツボとコツがゼッタイにわかる本」です。Vue.js の本は他にも多く出版されていますが、本書はその中でも初心者にわかりやすく書かれていることが特徴です。あまり深い知識については触れられませんが、入門には最適と言えるでしょう。
React
React は フロントエンドエンジニア界隈で話題のモダンな JavaScript ライブラリです。こちらは Vue.js と比べるとある程度 JavaScript の経験があったほうが恩恵を感じやすいでしょう。というのも、小規模な開発にも使用できる Vue.js に対し、React は複雑になりがちな大規模開発現場での使用に特化した仕様を採用しているからです。
React を学習する際におすすめの本は「作りながら学ぶReact入門」です。この本はタイトルの通り、あまり難しい解説をすることなく作ることに重きをおいた入門書です。JavaScript の基礎については前提知識として要求されますが、初心者でも挫折しにくい優秀な入門書です。
バックエンドの場合は Express, RDBMS, SQL を学習しよう
バックエンド開発はやりたいことによって必要になる知識が変わってきます。データを扱うならば RDBMS と SQL の知識が必要になりますし、Web アプリケーションを作りたいならばそれに加えて Web フレームワークの Express を学習する必要があります。
これらの技術に関しては必要な知識量が少ない場合も多いので、ドットインストールや progate をはじめとしたプログラミング学習サイトで学習し、必要だと思ったタイミングで書籍を探すと良いでしょう。人によっては、ネット上で得られる知識だけでも十分だと感じるかもしれません。なお、Express に関しては「express実践入門」という入門資料が非常によくできていますので是非活用してみてください。
JavaScript を就職・転職につなげるには？
未経験から JavaScript エンジニアとして仕事を探す際には、何度も何度も書くことと作ったものを世の中に公開することが重要です。フロントエンド・バックエンド問わず、使用した GitHub リポジトリや作った Web サイトなどを公開しておくことで企業に対してスキルと実績をアピールすることができます。
JavaScript は非常に需要の高いプログラミング言語ですので、たとえ現場未経験でもスキルのある人材ならば必要としている企業が多く存在します。スキルをアピールできる手段を複数用意し、万全の体制で就職・転職活動に臨みましょう。
