JavaScriptを基礎から勉強できるサービス10選+本3冊


JavaScriptを基礎から勉強できるサービス10選+本3冊


今やJavaScriptという言語は最も重要なプログラミング言語と言っても過言ではありません。なぜならどんなWebブラウザでも動作するほぼ唯一のプログラミング言語だからです。

Webアプリケーションが進化と拡大を続けている現在、JavaScriptの重要性は増すことはあれど減ることはないでしょう。

本エントリではJavaScript初心者が自分のペースでJavaScriptを学べるサービスをご紹介します。

image

目次
  1. そもそもJavaScriptとは?
  2. CodeCamp
  3. ドットインストール
  4. CODEPREP
  5. Progate
  6. Codecademy
  7. Schoo
  8. MOONBlock
  9. jsdo.it
  10. Paiza
  11. CODECOMBAT
  12. JavaScript学習者におすすめの本
  13. 確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)
  14. ノンプログラマのためのJavaScriptはじめの一歩
  15. スラスラわかるJavaScript
  16. まとめ

そもそもJavaScriptとは?

JavaScriptとはプログラミング言語の一種で、Webページに様々な機能を付加することができる言語です。例えば対象物の上でカーソルをかざすと動きが出る、いわゆる「マウスオーバー」のようなユーザの動きに応じたWebページにおける機能を作る際に活用されています。

しかしその反面、セキュリティが甘いなどのデメリットもあります。

なので、ユーザ認証機能のような具体的な処理内容が見られたらセキュリティ上問題となる箇所ではJavaScriptで実装しないようにします。

CodeCamp

image

画像出典:CodeCamp

現役エンジニアによるオンラインのマンツーマンレッスンを7時〜24時まで受ける事が可能。自分のスケジュールに合わせて学習スケジュールを組むことができ、学業や本業で忙しい人でも空いた時間で勉強を進めることができます。

「地方だから」や「スクールに通う時間がない」といった人におすすめ。無料カウンセリングとはどういうものか?知りたい方はこちらのページをみてみましょう!「オンラインレッスンってどんな感じ?」と思っている方や、まだ決めてにかける、実際に学んだあとどういうキャリアアップができるの?など迷ってる方は相談してみるとよいでしょう。

無料カウンセリングの受講者限定で、受講料が1万円オフになるキャンペーンも実施中です!

CodeCampの評判受講生、講師インタビュー

【関連記事】:「エンジニアは女性のキャリアとして魅力的」モノづくり好き理系女子がWebエンジニアへ転職するまで
「エンジニアは女性のキャリアとして魅力的」モノづくり好き理系女子がWebエンジニアへ転職するまで

「エンジニアは女性のキャリアとして魅力的」モノづくり好き理系女子がWebエンジニアへ転職するまで

未経験からエンジニアへの転職を実現している人は、どのようにプログラミングを身に着けて転職を成功させているのでしょうか? 今回はCodeCampGATE(現:エンジニア転職コース)の1期生として、エンジニアへ転職した三吉 愛さんにプログラミング学習・転職の経験談を伺いました。過去にはビジネスコンテストで優勝した経験もあり、チャレンジ精神が旺盛な彼女がどのようにエンジニアとしての転職を実現したのかを語っていただきました。 ※三吉さんが受講したコースは[CodeCampGate(現:エンジニア転職コース)](https://codecamp.jp/courses/engineer)です。このコースの特徴は - 4ヶ月に及ぶ基礎学習と実践演習 - 計40回のマンツーマンレッスン - 職務経歴書の添削、模擬面接、エンジニアメンターによる推薦状の作成、など充実したキャリアサポート 未経験からエンジニアに転職するまでを徹底的に支援するコースです。コース詳細はこちらから確認してみてください! ▶︎https://codecamp.jp/courses/engineer [![image](//s3-ap-northeast-1.amazonaws.com/mash-jp/production/uploads/9901/0e8d3a419c4954dc2561fedc66fd56eebfc73cc7.9930.desktop.png)](http://ac.ebis.ne.jp/tr_set.php?argument=qkDLyMCX&ai=a5964631fbbe7b)

【関連記事】:プログラミング未経験で介護師からエンジニアへ。ITの力で介護を変える
プログラミング未経験で介護師からエンジニアへ。ITの力で介護を変える

プログラミング未経験で介護師からエンジニアへ。ITの力で介護を変える

「未経験歓迎」と募集要項に書いてあっても、知らない業界・職種への転職に踏み出すのは勇気がいるものです。不安な気持ちが先行してしまい、躊躇することもあるのではないでしょうか。 そんな環境のなか、介護の世界からエンジニアの世界に飛び込んだ経歴を持つのは、CodeCampGATE受講者の桑田さん。 今回は、桑田さんがプログラミング未経験の状態からエンジニアへ転職するまでの軌跡を伺ってきました。 ※桑田さんが受講したコースは[CodeCampGate](https://codecamp.jp/gate)です。このコースの特徴は - 4ヶ月に及ぶ基礎学習と実践演習 - 計40回のマンツーマンレッスン - 職務経歴書の添削、模擬面接、エンジニアメンターによる推薦状の作成、など充実したキャリアサポート 未経験からエンジニアに転職するまでを徹底的に支援するコースです。コース詳細はこちらから確認してみてください! ▶︎https://codecamp.jp/gate [![image](//s3-ap-northeast-1.amazonaws.com/mash-jp/production/uploads/9901/0e8d3a419c4954dc2561fedc66fd56eebfc73cc7.9930.desktop.png)](http://ac.ebis.ne.jp/tr_set.php?argument=qkDLyMCX&ai=a5964631fbbe7b)

【関連記事】:普通の文系大学生/営業職が、エンジニアへ転職し起業するまで成長の軌跡
普通の文系大学生/営業職が、エンジニアへ転職し起業するまで成長の軌跡

普通の文系大学生/営業職が、エンジニアへ転職し起業するまで成長の軌跡

「学生時代はいたって普通の文系大学生。当時は自分がエンジニアとして起業するなんて1ミリも考えてもいませんでした。」 そう語るのは、営業職からエンジニアへ転職し、共同創業者とVRスタートアップambrを起業して取締役 VPoE(VP of Engineering)を務める夛名賀(たなか) 浩介さん。 夛名賀さんは大学卒業後、医療系メーカーの営業職として働いていた時期に独学でプログラミングを始め、CodeCampでの学習を経てエンジニアとして就職。その1年後に起業を実現しています。 起業した今も「技術力により磨きをかけていきたい」と語る夛名賀さんに、どのようにプログラミングを身に着けて成長していったのか語ってもらいました。 ※夛名賀さんが受講したコースは[CodeCampGate](https://codecamp.jp/gate)です。このコースの特徴は - 4ヶ月に及ぶ基礎学習と実践演習 - 計40回のマンツーマンレッスン - 職務経歴書の添削、模擬面接、エンジニアメンターによる推薦状の作成、など充実したキャリアサポート 未経験からエンジニアに転職するまでを徹底的に支援するコースです。コース詳細はこちらから確認してみてください! ▶︎https://codecamp.jp/gate [![image](//s3-ap-northeast-1.amazonaws.com/mash-jp/production/uploads/9901/0e8d3a419c4954dc2561fedc66fd56eebfc73cc7.9930.desktop.png)](http://ac.ebis.ne.jp/tr_set.php?argument=qkDLyMCX&ai=a5964631fbbe7b)

【関連記事】:プログラミングで挫折しそうになった人の力に【CodeCamp人気講師 #5 杉浦先生】
プログラミングで挫折しそうになった人の力に【CodeCamp人気講師 #5 杉浦先生】

プログラミングで挫折しそうになった人の力に【CodeCamp人気講師 #5 杉浦先生】

子育てをきっかけに、新卒の時から15年間働いたシステム開発の会社を退職し、フリーランスとして働き始めたという杉浦先生。 自身が苦労して学習した経験を元に、受講生の「わからない」という気持ちによりそった指導に感謝の声が多く届けられています。 今回は杉浦先生に、CodeCampでプログラミングを教えることのやりがいや、フリーランスという働き方を選んだ理由について話を伺いました。 ``` 【受講生からの声】 ・すごく分かりやすい説明で40分の間に全て解決できたので嬉しかったです! 問題の対処方法を詳しく教えていただけたので、今後にも役立ちそうな説明でした! ・基礎となる土台の組み立てから一つ一つ丁寧に教えて頂いてわかりやすかったです。 要所でヒントを出して考えさせてくれ、初心者の目線に立って進めて頂けました。 ・今日はありがとうございました。先生の熱心さが凄く伝わりました。 初心者にも親切丁寧に向き合って頂き感謝です。またぜひ、先生の授業を受けたいです。 ※CodeCampでは毎日、受講生のみなさんから レッスンの満足度や感想をフィードバックしていただいています。 ```

ドットインストール

「3分動画でマスターするプログラミング学習サイト(初心者向け)」と謳われているサイトです。様々なプログラミング言語やフレームワークの初心者向けレッスンを動画で配信しています。

image

画像出典:ドットインストール

様々なレッスンがありますが、JavaScript入門は初心者向けの内容になっているので、知識ゼロからの学習にはうってつけです。1回の動画は3分程度なので、隙間時間を使って学習できるのもありがたいです。

image

画像出典:ドットインストール

さらに、AngularJSやjQueryなど、重要なJavaScriptライブラリの入門レッスンも備えています。下記はjQueryで検索した結果です。45件と豊富なレッスンが提供されています。

image

画像出典:ドットインストール

入門を超えた内容もあることから、広くJavaScriptの学習ができるサイトと言えるでしょう。

CODEPREP

CODEPREPはプログラミングをオンラインで書きながら覚えるができる学習サービスです。

image

画像出典:CODEPREP

JavaScript初心者向けには「初めてのJavaScript」というレッスン(CODEPREP中の用語では『ブック』)が提供されており、ゼロから学ぶことができます。

CODEPREPは「毎日コツコツとコードを書き続けるのがプログラミング学習に置いて最も重要」という考え方のもと、プログラムの穴埋め問題を解いていくことで、徐々に理解が進むように工夫されています。

問題をテンポよくどんどん回答できる上に、正解すると経験値が得られるというゲーム要素もあり思わず先に進みたくなる、巧みな作りです。

また、ディスカッション機能が利用者に活発に利用されているのも特徴です。問題に詰まった時に他の利用者に助けを求めたり、あるテーマについて議論したりと多くの投稿で賑わっています。

image

画像出典:CODEPREP

応用編のレッスンは「jQueryでつくるパララックス」「Three.jsではじめる3Dグラフィックス基礎」などバラエティに富んでおり、レベルに応じた学習が進められます。

image

画像出典:CODEPREP

Progate

image

画像出典:Progate

Progateではステップごとにレッスンを進めることができ、テンポよくJavaScriptを学習することができます。

image

画像出典:Progate

プラウザ上の専用エディタに課題を入力してその場で正誤が判定され、あっていれば次のレッスンに、といった具合でレッスンは進んでいきます。レッスンが進むことで経験値がたまり、レベルがアップするためレベルをあげようとモチベーションを高く保つことができます。

Codecademy

image

画像出典:Codecademy

Codecademyは残念ながら日本語に対応はしていませんが、これが本当に無料なの!?と思ってしまうような充実のコンテンツを無料で受講することができます。

コースをこなすごとにバッジをもらえたり、自身の進捗状況が確認できるため継続しやすい仕組みづくりがしっかりとなされているのです。

またコースも言語別の他にWeb制作で使われているスキルに幅広く対応しております。 JavaScriptが終わったらそれ以外の言語もマスターしてさらにスキルを磨いていきたいですね!

Schoo

image

画像出典:Schoo

プログラミングの枠を超えた、様々な授業を動画で受けることができるサイトです。JavaScriptの講座は入門から実践まで、幅広く用意されています。

たとえプログラミングをしたことがなくても、JavaScriptの概念から説明した動画もあるのでご安心を。録画授業は有料ですが、無料で受けられる動画もあるので、まずは試してみることをおすすめします。

MOONBlock

image

画像出典:MOONBlock

MOONBlockはコードを書くプログラミング学習サイトではありません。背景を変えたり、人形を出したりできるブロックを組みあわせて、動くものを作っていくサイトです。「プログラミング自体がはじめて」という方が、プログラミングとはどういうものかをまず理解するのに適しています。

ブロックで作ったプログラムは、「ソース」を見ることでJavaScriptとして確認できます。日本語表記にも対応しているので、JavaScriptのはじめの一歩としてピッタリですね。

jsdo.it

image

画像出典:jsdo.it

WebデザインやJavaScriptエンジニアのようなフロントエンド(ユーザーから見える部分)を扱う、エンジニアのためのコミュニティがjsdo.itです。日本語に対応しており、コードを書いたその場で動かすことができます。 自分の技術に自信がなくても、jsdo.it上で共有されているコードを書き換えて、他のユーザーからテクニックを学ぶことが可能です。

Paiza

image

画像出典:Paiza

Paizaではコーディングスキルをはかる問題に、Web上で取り組むことができるサイトです。スキルレベルは「S・A・B・C・D・E」の6段階でランクに分けられます。JavaScriptの実力が着いてきたと思ったら、チャレンジしてみましょう。

CODECOMBAT

image

画像出典:CODECOMBAT

ゲームをしながらプログラミングを学べる画期的なWebサービスが、こちらのCODECOMBATです。RPGのような親しみやすいグラフィックで、コーディングをしながらゲームを進めることができます。 自分でコードを書いてゲームを作る、なんてこともできてしまう、初心者から上級者まで楽しめるサービスです。

JavaScript学習者におすすめの本

JavaScript学習におすすめのWebサービスを紹介しました。ここからは、JavaScriptを学ぶのに最適な本を、3冊イッキに紹介します。

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)
SBクリエイティブ (2015-10-30) 売り上げランキング: 2,713

プログラミングのことはきちんと分かっていないけど、とりあえずJavaScriptを使ったプログラミングを書いてみたい方におすすめの本です。

本書の内容に従って作っていけば、JavaScriptを使った機能を自分の手で作る体験ができます。

ただ、細かい内容は省かれています。なので、本の内容から発展させて自分のオリジナルで何かをつくることは難しいでしょう。サイト上のコンテンツに動きを与える程度ととらえて、本書を利用するのがよさそうです。

JavaScriptをとりあえず触ってみて慣れることや、そもそもJavaScriptとはどういうものかを理解することを目的として利用するにはピッタリの一冊。

ノンプログラマのためのJavaScriptはじめの一歩

ノンプログラマのためのJavaScriptはじめの一歩 (WEB+DB PRESS plus)
外村 和仁 技術評論社 売り上げランキング: 222,495

簡単なJavaScriptであれば見よう見まねで書けるが、しっかりとは理解していない。

また、JavaScriptを基礎から勉強したいという方におすすめの本です。

一つ一つの関数に対して説明がとても丁寧にされており、基本的なプログラムから言語自体の仕組み・考え方を学ぶことができるようになっています。

JavaScriptの基本をしっかりと学ぶことができ、サンプルコードも付いているので基本を身に付けたいというときには目を通しておきたい一冊です。

ただし、プログラミング自体が全くの初めてというノンプログラマの方には、難しく感じる部分がある可能性があるので注意してください。

あくまでも「JavaScriptのはじめの一歩」であって、プログラミングのはじめの一歩にはなりえない本だとも言えますね。

スラスラわかるJavaScript

スラスラわかるJavaScript (Beginner's Best Guide to Programmin)
生形 可奈子 翔泳社 売り上げランキング: 34,789

上記の「ノンプログラマのためのJavaScriptはじめの一歩」と同じく、JavaScriptを触ったことはあるが正しくは理解しておらず、基本から勉強したいという方におすすめの一冊。

内容や構成も「ノンプログラマのためのJavaScriptはじめの一歩」と近くなっており、JavaScript初級者にとって分かりやすく、その内容量もちょうどよいです。

また、わかりやすくイラストが多く、平易な日本語で書かれた解説となっており、初級者にぴったりの入門書と言えます。

Webサイト担当者としてのスキルが身に付く

無料カウンセリングはこちら

まとめ

冒頭で述べたように、JavaScriptは今や最も重要なプログラミング言語の1つです。デザイン面でも、動きを付けるためにjQueryを使う時にはJavaScriptの知識が必要ですので、非プログラマでも必要なスキルとなっています。

本エントリで紹介したサービスを使って、ぜひJavaScriptを扱えるようになってください。Webの世界がぐっと広がることを実感できると思います。


黒田剛司
この記事を書いた人
黒田剛司
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp