paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

初心者でもほぼ無料でJavaScriptを勉強できるコンテンツ17選

f:id:paiza:20161207185150j:plain
Photo by dotConferences
f:id:paiza:20140916135428p:plainこんにちは。谷口です。

プログラミングをこれから学ぼうとしている方で、「JavaScriptを使えるようになりたい!」という方は多いと思います。

JavaScriptは実行環境が主にWebブラウザに実装され、動的なウェブサイト構築や、リッチインターネットアプリケーションなど高度なユーザインタフェースの開発に用いられます。(JavaScript - Wikipedia

Webサービスの作成・運用をする機会がある方には必要不可欠なJavaScriptですが、これから勉強を始める方の中には「プログラミング経験ゼロなんだけど、一体どうやって勉強したらいいの……?」と思っている方も多くいらっしゃるのではないでしょうか。中には「エンジニアではないんだけど、仕事でJavaScriptを触る機会があるから覚えたい!」という方や、「初心者だけど、なるべくコストも時間もかけずに習得したい!」という方もいらっしゃるかと思います。

また、意外と実際のサーバサイドエンジニアの中にも「実はJavaScript苦手です……」という方や「JavaScriptをちゃんと学び直したい……」という方もいらっしゃるようです。

そこで今回は、プログラミング未経験~初心者の方が、なるべくコストをかけず楽しくJavaScriptに触れられて、学習に役立てられるコンテンツを17件ご紹介していきます。

また、paizaラーニングでもJavaScriptのレッスンを公開しております(一部無料)。
paiza.jp
f:id:paiza:20170531183850p:plain
動画を使ってJavaScriptの基礎が学べます。ブラウザさえあればすぐに学習を始められますので、ぜひこちらもご利用ください!

■プログラミング経験ゼロからJavaScriptを覚えたい人

◆1.MOONBlock

料金:無料
http://moonblock.jp/
f:id:paiza:20150302152412p:plain
プログラミング自体が全く初めて!という方や、お子さんの場合は、まずビジュアルプログラミングでプログラミングに触れてみることをお勧めします。ビジュアルプログラミングでは、ブロックを組み合わせて動くものを作っていくことができます。視覚的に理解がしやすいビジュアルプログラミングを通して、自分で作ったシステムを動かす楽しさを知ると、抵抗なくプログラミングに入門できるのではないかと思います。

こちらのMOONBlockは、ブロックで作ったプログラムを、ボタン1つで実際のJavaScriptのコードに変換して見ることができます。また、国産サイトのため表示は日本語に対応しています。「プログラミングって敷居が高い……」「本や学習サイトに挑戦してみたけど挫折した」と思っている人にも、JavaScript学習の最初の一歩として、ぜひ挑戦してみてほしいサービスです。

◆2.スクー

料金:登録無料(有料会員は月額525円)
http://schoo.jp/guest
f:id:paiza:20150302162010p:plain
プログラミングに限らず、様々なジャンルの動画授業を扱っている学習サイトです。現在は様々な言語の学習動画がありますが、JavaScriptの授業はかなり前から実施されているので、動画数も多く、入門から実践まで充実しています。

JavaScriptの入門コースは、プログラミング自体の経験がない人のために、変数や演算子の使い方や概念から動画で教えてくれます。コースの1つ目の動画は無料で受講することができ、毎月配布されるチケットを使うと、有料の録画授業も1コマ無料で受講できます。それ以降の授業は有料となりますが、まずは無料で入門編を受講してみてはいかがでしょうか。「本当はスクールに通いたいんだけど、費用や時間をかけたくないんだよな……」という方や、「本やサイトを見て独学で勉強しようとしたけど挫折した……」という方にはぴったりなサービスだと思います。

◆3.CodeStudy(JEEK)

料金:無料
http://jeek.jp/study/exp
f:id:paiza:20150302173311p:plain
就活サイトの1コーナーですが、JavaScriptの実行環境が提供されており、課題に従って画面上でコードを書きながらJavaScriptを学べる作りになっています。コードのエラーも日本語で表示されますので、Javascriptを書きながらライトに学んでいくのには良いサービスです。プログラミング経験のない学生向けのコンテンツですが、学生・社会人を問わず、未経験者でもプログラミングの基礎的な概念から学んでいくことができます。

Javascriptは対応したブラウザとエディタがあれば実行できる言語ではありますが、やはりオンラインですぐコードを書けてすぐ実行結果を確認できる環境が揃っているコンテンツだと学習も捗ると思います。

◆4.初心者のためのJavaScript入門(@IT)

料金:無料
http://www.atmarkit.co.jp/fcoding/index/js.html
f:id:paiza:20150302163208p:plain
@ITで連載されていました、プログラミング初心者のための入門講座です。JavaScriptとは何かの基礎知識から、さまざまな基本構文/文法(alertなどのイベント処理、変数、function(関数)、引数、ifなどの条件分岐、whileやforなどの繰り返し(ループ)、配列、オブジェクト、HTMLを操作するDOMなど)を、書き方が分かる豊富なサンプルコードとともに解説しています。

とにかくサンプルコードが豊富に掲載されているので、「実際のコードを見て学びたい!」という方にはうってつけだと思います。

◆この段階で書籍を購入するなら……

◇5.3ステップでしっかり学ぶ JavaScript入門

定価:¥2,570

3ステップでしっかり学ぶ JavaScript入門 (今すぐ使えるかんたんプラス)

3ステップでしっかり学ぶ JavaScript入門 (今すぐ使えるかんたんプラス)

JavaScript入門の最初の1冊として、多くの人が勧めるかなり評価の高い1冊です。現在JavaScriptを使いこなしている方々も、「最初にこの本に出逢いたかった!」と言っているのをよく聞きます。

プログラミング経験のない人でも理解できるよう、大きな図をふんだんに使い、基本的なことに絞って明確に解説しています。演習問題も実践的で、初心者でも「プログラミングってこういうことなんだ!」と理解しながら楽しく学習を進められる1冊になっているのではないかと思います。

◇6.よくわかるゼロからはじめるJavaScript

定価:¥2,700

よくわかるゼロからはじめるJavaScript (よくわかるトレーニングテキスト)

よくわかるゼロからはじめるJavaScript (よくわかるトレーニングテキスト)

こちらも、プログラミング経験ゼロでも実践的な課題を解き進めながら学習していける、入門者向けの教本として評価の高い1冊です。一章ごとに実際のWebページを作成していけますので、自分の成果物が目に見えて確認できます。初心者がつまずきやすいポイントもかなり丁寧に解説してくれてあるので、文字通り経験ゼロからでも1人で学習していくことができます。


上記2冊はもちろん初心者向けなので、学習を進めてある程度JavaScriptが使えるようになってくると、掲載されている内容だけでは満足できなくなってくるとは思いますが、「何か最初の1冊を購入したいな~」という方には、どちらもぴったりな内容の書籍だと思います。

■実際にJavaScriptのコードを書いて動かしてみたい人

◆7.paiza.IO

料金:無料
https://paiza.io/
f:id:paiza:20150205121058p:plain
paiza.IOは、ブラウザ上でコードが書け、書いたコードをその場で実行出来るオンラインプログラム実行環境です。面倒な環境構築なしに、例えば本に載っていたコード、ネット上で他の人が公開していたコード等をオンラインで実行して結果を見ることができます。ブログパーツとして使えたり、GitHub(Gist)連携なんかもできますので、ぜひpaiza.IOでどんどんコードを書いてみてください!

詳しくはこちらの記事をごらんください。


24のプログラミング言語がブラウザで即実行できる『paiza.IO』 - paiza開発日誌

コードをリプライとして飛ばすと結果を返信してくれるツイッターアカウントで遊ぶこともできます。


Twitterでプログラムコードを実行!結果を返信してくれるpaiza_run - paiza開発日誌

◆8.JSFiddle

料金:無料
http://jsfiddle.net/
f:id:paiza:20141126165430p:plain
JavaScriptのコードをを実行できる、オンライン実行環境JSFiddleです。JSFiddleJavaScriptのライブラリーがかなりたくさんあります。jQueryRaphael、MooTools、DojoYUI等、バージョンもあわせて指定できますし、SCSS、CoffeeScriptも使えます。トップ画面にはHTML、CSS、JSを書く場所と結果が出る場所がさっそく表示されており、シンプルで見やすく使いやすいです。

◆9.jsbin.com

料金:無料
http://jsbin.com/?html,output
f:id:paiza:20141126165758p:plain
コードを書くと結果をリアルタイムで反映してくれるjsbinです。HTMLのコードも、JavaScriptコードのバリデートもリアルタイムで表示してくれます。

◆10.Codepen

料金:無料
http://codepen.io/
f:id:paiza:20141126165931p:plain
黒くてデザインがかっこいいなーと思うCodepenです。HTML入力欄ではHamlMarkdown、Slim、Jadeを、CSSではSass、LESS、Stylusを、JSではCoffeeScript、LiveScript、Traceurが選べるようになっています。JavaScriptのライブラリーはjQuery、Prototype、MooTools、YUI等があります。

◆11.jsdo.it

料金:無料
http://jsdo.it/
f:id:paiza:20141126170111p:plain
JS実行系サービスの中でも珍しい日本製サイトで、英語・中国語にも対応しています。書いたコードは公開・非公開が選べます。あらゆるSNS等のアカウントでログインできますし、トップページにはHot Codeとして今話題になっているコードの紹介や、人気コードのランキングなんかもあります。国産だけあって日本語表示なのがうれしい。

■基礎的なコードが書けるようになってきた人

◆12.paizaのスキルチェック問題

料金:無料
http://paiza.jp
f:id:paiza:20150205133638p:plain
paizaでは、コーディングスキルをはかるコーディング問題の結果により、S・A・B・C・D・Eの6段階でランクが分かります。ぜひ問題を解いて、ランクアップを目指してみてください!プログラミング業務経験のない方でも、Dランクが取得できると、プログラミングの基礎的な概要は理解できているということになります。

■paizaでDランク以上が取得できた人

◆13.CODECOMBAT

料金:無料
http://codecombat.com/
f:id:paiza:20141014144421p:plain
フルボイスの本格RPGJavaScriptが学べるCODECOMBATです。アニメ絵のグラフィックがきれいで、学習サイトとは思えませんね。コーディングをしながらゲームを進めるモードだけでなく、自ら書いたコードでゲームを作れるモードもあるので、初心者からやりこみたい方まで幅広くお勧めします。

◆14.とほほのJavaScriptリファレンス

料金:無料
http://www.tohoho-web.com/js/
f:id:paiza:20150302173435p:plain
JavaScriptに関する解説をかなり網羅されているサイトです。「JavaScript って何?」から始まり、「準備するもの」や「Hello World!!」の出力方法から始まっているので、ある程度プログラミング経験のある方はこちらで学習を進めるのもいいかと思いますが、プログラミングの基礎的な概念の部分に関しては詳しい解説を省略されている部分も多くありますので、プログラミング経験のない方は、少し理解が進んでから、文字通りリファレンス的に使用するのがよいかと思います。

◆15.jQuery日本語リファレンス

料金:無料
http://semooh.jp/jquery/
f:id:paiza:20150303151006p:plain
jQueryは、John Resig氏が開発した、JavaScriptをより容易に記述できるようにするための軽量なJavaScriptライブラリで、JavaScriptのライブラリの中では一番人気となっています。jQueryなしではやる気が出ないというエンジニアもいるほどです。実務でJavaScriptを使った開発をする予定がある方は、jQueryに触れる必要性が出てくると思いますので、日本語に訳されたリファレンスの中でも人気の高いこちらをご紹介しておきます。うさぎのせむーちゃんめっちゃかわいい。

◆16.JavaScriptのリファレンス

料金:無料
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference
f:id:paiza:20150302173958p:plain
ある程度コードが書けるようになってきたら、分からないことはJavaScript公式のリファレンスやマニュアルを見て調べるということも必要だと思います。本来は最初にリファレンスをご紹介すべきなのかもしれませんが、他の言語でプログラミングをした経験がある方ならいざ知らず、経験ゼロの方がいきなりリファレンスを読むというのは大変だと思いますので、ある程度の基礎が身についてから開いてみるのがよいのではないでしょうか。

◆この段階で書籍を購入するなら……

◇17.JavaScript逆引きレシピ

定価:¥3,240

JavaScript逆引きレシピ jQuery対応

JavaScript逆引きレシピ jQuery対応

入門編の本はやり終えたし、次はどうしようかな……」という方や、「いよいよ実際に業務でJavaScriptを使っていくぞ!」という方にお勧めなのが、こちらの逆引きレシピです。

今後本格的にJavaScriptを使っていくに当たって、基本構文や関数、スコープといった基礎的な知識から、オブジェクト指向、基本オブジェクト、ページ操作、エフェクト&インタラクション、jQuery/jQuery UI/jQuery MobileによるUI開発、CoffeeScriptなどの定石・応用テクニックまでが掲載されています。

逆引きですから、知りたいことから探せますし、JavaScriptを実践していて「勉強した気がするけどあの処理ってどうやるんだったっけ……?」という時などに大変役立つ、手元や職場に置いておいて損はない1冊です。kindle版もありますよ!

■まとめ

JavaScriptは、多くのWebサイトに必要とされている言語です。また、実行環境サイト等もご紹介しましたが、前述のとおりブラウザとエディタがあれば実行結果を確認できるので、最初の敷居も低い言語なのではないでしょうか。また、JavaScriptを習得できれば、様々なWebサービスを作る際に必ずと言っていいほど役に立ちますので、学んでおいて損はありません。興味のある方は、ビジュアルプログラミングでも、学習サイトでも、書籍でも、自分が気になるところから挑戦して、ぜひともJavaScriptの楽しさに触れてみてください!

さらに、勉強してある程度の基礎が身につきましたら、ぜひpaizaでご自分のスキルをはかってみてください!




paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

↓詳しくはこちら
paiza.jp

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
paiza.jp
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

ITプログラマ・エンジニア向け転職・就活・学習サービスのpaiza