プログラミング初心者がプログラミングをいざ勉強しようと思っても、どうやってはじめていいのかわからないという方は多いのではないでしょうか。

また、ITスクールなどで勉強しようと思うと、数十万円の費用がかかることが一般的で、なかなか手が出しにくいということも多いと思います。

そんな高額のスクールではなく、無料でプログラミングを学べるサイトがアメリカを中心にして増えてきています。中でも実際にコードをブラウザ上で入力したり、詳しい動画を見ることができるサイトが人気を集めています。

今回はそんなプログラミングを学べる10サイトをご紹介します。 日本語対応しているサイトも少しずつ増えているので、ぜひこの記事を参考にプログラミングの独学に活用してみてください!

1.ドットインストール

/uploads/picture/asset/51/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2017-03-10_17.31.11.png

ドットインストールもはや説明の必要のないくらい有名なサイトですね。

「3分間でマスターする初心者向けプログラミング学習サイト」として展開しており、内容は全てYouTubeを使って学ぶことができます。

どこまで勉強したのかを記録する機能も充実しているため初心者にとっては学びやすい環境が整っています。

レッスン内容は、PHP、JavaScript、Ruby、Python、Javaなど幅広い言語がカバーされています。さらにスマホサイトを作るレッスンなど最新のトレンドも盛り込まれています。

まずはプログラミングがどういうものかを知りたいという人におすすめのサイトです。

ドットインストール

2.Codecademy(コードアカデミー)

/uploads/picture/asset/52/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2017-03-10_17.31.28.png

codecademyこちらも世界的に有名なサイトです。少し前からTOPページのみCodecademyは日本語対応を開始しています。

練習問題が毎週メールで送られてくるサービスとしてはじまりました。ブラウザ上でコードを書くエディタが用意されているため、特に環境を用意しなくても始められるようになっています。

問題を解いていくとバッジがもらえる機能もあるため、このあたりはゲーミフィケーション的な要素もあります。

言語はJavaScriptやHTML、CSSといったクライアントサイドの言語が中心でしたが、7月末からPython、Rubyにも対応しています。 また、一般のユーザーがレッスンを自作できるサービスもはじめており、今後プラットフォームのように発展していく可能性があります。

Codecademy(コードアカデミー)

3.Progate

/uploads/picture/asset/53/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2017-03-10_17.48.45.png

Progateは、無料から始められるハンズオン形式のプログラミング学習サービスです。
ブラウザ上でコーディングをしながらHTML/CSS、JavaScriptなどを学習することができます。最初にスライドで分かりやすく説明してくれるので、全くの初心者でもスムーズに進められるはずです。

まずは独学で始めたい人におすすめの学習方法でしょう。

Progate

4.code.9leap.net

/uploads/picture/asset/54/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2017-03-10_17.39.43.png

code.9leap.net株式会社ユビキタスエンターテインメントが運営しており、「ゲームプログラミング学習」に特化したサービスです。

Codecademyのようにブラウザ上でコードを入力すると、ゲームの画面が切り替わるようになっています。

問題の出し方は対話のようになっているため初心者でもわかりやすくなっています。 また、ユーザー自身がサンプルコードを使って簡単なゲームがを作成することも可能です。

code.9leap.net

5.Google Blockly

/uploads/picture/asset/55/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2017-03-10_17.40.00.png

Google BlocklyGoogleが提供しているパズル感覚でプログラミングを学べるサービスです。タイピングなどは必要としません。

Google Blocklyの使い方はデモサイトを見て実際に使ってみて覚えていきましょう。 この画像の用に迷路が設定されていますので、「命令」と「状態」を指定してゴールまで進めるように組み合わせていくことになります。

プログラミングの言語などの書き方を覚えるというよりも、プログラミングの考え方を学ぶ際に使えるサービスと言えます。

Google Blockly

6.Khan Academy

/uploads/picture/asset/56/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2017-03-10_17.40.26.png

Khan Academyもとは数学、科学、経済など幅広いジャンルの講座を見ることができるサイトに、ブラウザ内で学習することのできるJavaScriptコースが加わりました。

講座の内容としては左にコードが表示され、右側にはグラフィックにこだわった独自のイラストなどが結果として映しだされます。

手書きで丸印をつけたような表現まで動画がするので、実際に講座を受けているかのような感覚で学習することができます。

Khan Academy

7.Code School

/uploads/picture/asset/57/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2017-03-10_17.43.03.png

Code Schoolブラウザ内で学習できるサイトで、 有料版は月間25ドルかかりますが一部のコンテンツは無料で利用することができます。

他のサイトとの比較として、非常に動画の質が優れているという点があります。コードを入力する前に動画を見るパートが用意されているのですが、ただ映像を流すだけでなく、あたかも目の前でプレゼントしているかのようにスライドなどが表示されます。

映像を見終わったあとはクイズに答える形式をとっており、正解するとバッジがもらえる仕組みになっています。

言語はJavaScript、Rubyがメインで他にWebデザインを扱った講座も用意しています。

Code School

8.Code Avengers

/uploads/picture/asset/58/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2017-03-10_17.43.20.png

codeavengersサイトデザインのインパクトが強いですが、こちらも質の高いサービスを提供しています。

映像を使ったコンテンツはありませんが、穴埋め方式で問題が出題されるので、その問題に対してブラウザ上で答えを入力すれば先に進む仕組みです。

言語はJavaScriptとHTML/CSSを扱っています。

Code Avengers

9.ShareWis

/uploads/picture/asset/59/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2017-03-10_17.52.11.png

動画で様々なプログラミング言語、デザインを学べるコースを用意しています。
スマホやタブレットからも閲覧できるのが特徴で、移動中や隙間時間でも学習することができます。
全体で20時間以上あるコースが多いですが、各動画は5~10分と短く気軽に視聴できるので、自分のペースで進めることができるはずです。

ShareWis

10.TheCodePlayer

/uploads/picture/asset/60/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2017-03-10_17.44.47.png

thecodeplayerサンプルのページに対して、実際にどのようなコードが書かれているのかを時間を追って見て学べるサービスです。実際の様子を見ることで初心者でもイメージがわかりやすくなります。

また、できあがったコードを書き換えて、どのように表示されるかについても確認することができる機能もついています。言語はJavaScript、HTML5、CSS3がメインです。

まずは全体像を把握したいという方向けのサービスです。

TheCodePlayer

各サービスの特徴まとめ

サービスごとに言語や扱う機能が違うため表にまとめてみました。全てを試す必要はありませんので、気になったものを試してみてください。

サービス名 日本語対応 動画コンテンツ コード入力 言語
ドットインストール × JavaScript、PHP、Ruby、Pythonなど
Codecademy × JavaScript、Python、Ruby
Progate × JavaScript、Ruby、PHPなど
code.9leap.net × JavaScript
Google Blockly × × なし
Khan Academy × × JavaScript
Codeschool × JavaScript、Ruby
Code Avengers × × JavaScript
ShareWis × JavaScript、Ruby、Javaなど
TheCodePlayer × × JavaScript

※コード入力はブラウザ上でコード入力できる機能を用意しているか

初心者向けの学習サービスを紹介しました。
動画やテキスト、ブラウザ上でコーディングしながらなど学び方も多様になってきていて、自分に合った学習方法で進められるはずです。
これからプログラミングを始めようと思っている方はぜひお役立てください。