Web業界未経験者必見!現役エンジニアが紹介する「書いて学ぶ」Web学習サービス3選

何事にも言えることですが、最良の学びは「実際にやってみる」ことです。
今回は、現役のフロントエンドエンジニアがハンズオン(実際に手を動かすこと)で学べるサービスを実際に使ってみました!
これからHTMLやCSSなどのコーディング技術を学びたいと思っている方に、各サービスの特長や「こんな人に向いてる!」をご紹介します。

1.CODEPREP

CODEPREPの概要・特長

  • URL:https://codeprep.jp
  • 会員登録:必要
  • 利用料金:無料(2018年1月4日以降プレミアム会員への新規登録が終了)
  • 利用環境:PC
  • 難易度:初心者〜中級者
  • 学習できる範囲:HTML, CSS, JavaScript, PHP, Ruby, その他

CODEPREPは2013年8月からスタートしたサービスです。2018年に一度サービスが終了しそうになりましたが、ユーザーからの強い要望により無期限無償提供という形で継続が決定しました。
現在は定期的なコンテンツの更新はないものの、既存のコンテンツがとても優れているので、基礎的な学習サービスとしては十分なクオリティがあります。
学習コンテンツはカテゴリごとに「ブック」という単位で分けられており、「HTMLとCSSで作るローディング」や「JavaScriptでつくるおみくじ」など、応用的な使い方も実践できます。

実際にCODEPREPを使ってみました

今回は「HTML5編」にチャレンジしてみます!

コースを選択すると上の画面が表示されます。画面の左側に問題文や、それに関連するヒントやTipsが表示されます。
右上の画面のオレンジに塗られている箇所に回答を入力することで、その下のプレビュー部分にコードを書き換えた結果が表示されます。

正解しました!
正しいコードを入力すると次の問題に取り組むことができます。

CODEPREPの特長のひとつとして「ディスカッション」機能があります。
画面右上にある「ディスカッション」ボタンを押すと、現在開いているブックに関連するユーザーからの投稿を閲覧することができます。

この機能を使って、問題を解く中でわからないことがでてきたら質問を投稿するという形で進めるのも良さそうですね。

CodePrepは「とりあえず書いてみたい!」人にオススメ!

一問あたりの記述量が少ないので、サクサク進めることができます。
その反面、コードの解説自体はやや少なめなので、「とにかく実際書いて動かしてそれから理解する」「コードの概念はなんとなくわかっているのでとりあえず書きたい」という方に向いていると思います。

2.Progate

Progateの概要・特長

  • URL:https://prog-8.com
  • 会員登録:必要
  • 利用料金:無料プラン / 有料プラン(月額 ¥980)
  • 利用環境:PC / iOS / Android
  • 難易度:初心者〜中級者向け
  • 学習できる範囲:HTML,CSS,JavaScript,Git,他多数

2014年からサービスを開始し、今やユーザー登録数70万を超えるProgateは、ハンズオン系の学習サービスのデファクトスタンダードと言ってよいでしょう。
筆者もこのサービスを使って学習していた経験があります。

実際にProgateを使ってみました

今回は他のハンズオン系ではあまり見ない、Gitの演習をやってみました。
Gitについては筆者もついついGUI(マウスやタッチパネルのような入力機器で画面を直接操作できるインターフェース)に頼ってしまうことが多いので、これを機にコマンドを覚えたいと思います。

Progateは一つの単元に対し、スライドと演習問題の組み合わせで学習します。
画面左でキャラクター達がコードやコマンドについて解説し、画面右には実際のコードが載っています。

一通りスライドに目を通したら、演習問題に取り組みましょう!
画面の左から「問題文」「コマンド入力画面」「HTMLのコードを入力画面」が並んでいます。今回は画面中央の「コマンド入力画面」に回答のコードを書いていきます。
表示される内容は学習コンテンツによって変わりますが、いずれもシンプルかつわかりやすく作られています。

なんてこった(冗談抜きで間違えました)

何がいけなかったのでしょうか……。
画面下にある「ヒント」を見て、もう一度よく考えてみましょう。

先ほどのコードと見比べてみると……

!!!
どうやらgit commit -mに続くコミットメッセージを囲うダブルクオーテーションが抜けていたようです。
今度はここを意識して再挑戦してみましょう!

正解しました!しかもご褒美に経験値がもらえました。優しい。

また、今回の問題を正解したことで経験値が一定以上溜まり、レベルが上がりました!
自分のスキルレベルが上がったようでとても嬉しいですね。

Progateはアプリもすごい!いつでもどこでも手軽にプログラミング学習ができる

Progateはスマートフォンアプリ版もリリースされており、こちらも非常によくできています!

スライドで学習→演習問題という学習スタイルはPC版と同じですが、スマートフォンアプリ版ではコードを入力する形ではありません。
必要なコードや記述を選択して組み合わせることで、正解のコードを作る形になっています。
自分でHTMLやCSS, JavaScriptといったコードを書くのとはまた違った、パズルを解いていくような感覚で非常に楽しいです!

Progateはプログラミングに初めて触れる人にオススメ

実は筆者がWeb業界を目指そうとしたとき、初めてHTMLやCSSの学習として触れたサービスがProgateでした。
Progateは学習スライド・演習問題ともにとてもクオリティが高く、非常にわかりやすい内容になっています。
まずはProgateのスライド学習・演習問題をやってみる→書籍や動画などでさらに理解を深めるという形で進めると、非常に効率の良い学習ができると思います。

3.paizaラーニング

paizaラーニングの概要・特長

  • URL:https://paiza.jp/works
  • 会員登録:必要
  • 利用料金:無料プラン / 有料プラン(月額 ¥600)
  • 利用環境:PC
  • 難易度:初心者〜上級者向け
  • 学習できる範囲:HTML,CSS,PHP,他多数

paizaラーニングはITエンジニア・プログラマ向けの転職・就活・学習サービスであるpaizaが提供しているプログラミングの学習コンテンツです。
動画による解説と演習問題を組み合わせたコンテンツで、動画はプロの声優によるフルボイス解説入りです。
また、ゲームコンテンツも充実しており、今回取り上げたサービスの中では最もアプローチしたいユーザー層が明確だと感じました。

実際にpaizaを使ってみました

今回は機械学習の分野で近年注目度の高いPythonのコースを受講してみます。

初手から他のサービスとは明確に異なる空気を感じます。
これは導入となる動画で、そもそもこのコースがどういった内容なのか、どういった人を対象としているかの説明があります。

導入の動画を見終わったらいよいよレッスンに入っていきましょう。まずは画面左上に映るプロの声優によるフルボイスの解説動画をじっくり見ます。
ときどき「よいしょっ」とか「どーんっ」といったプログラミングの説明とは何の関係もないセリフが入ってきますが、僕は好きです。
左下には各チャプターに関わるTips、右側は実際にコードを入力できる画面と、その結果を出力する画面があります。

動画を見終わったらいよいよ演習問題に取り組んでみましょう。
左上、先ほどまで動画が映っていたところには問題が表示されています。
右側のコード入力画面に正解となるコードを入力し、「採点する」を押してみましょう。

正解です!といってもやはり1問正解したくらいでは、まだまだ村人の域を脱しないようですね。がんばります。

paizaラーニングはゲームでも学べる

もはや大作ゲームの予感すらさせますが、paizaラーニングのコンテンツのひとつである「エンジニアが死滅シタ世界」をプレイしてみます。学習したいので。

マップ上に存在する各エリアの問題を解いていくことでゲームが進行するようです。
各エリアは難易度ごとに分かれており、問題をクリアするとアイテムがもらえます。
今回は「ポニーテール」が手に入る「砂漠の公園」に挑戦してみましょう。

問題の画面は一旦ゲームから離れたような印象ですね。
今回は「野球の試合で優勝したチームを知るためにプログラムを書く」というのが目的のようです。理由はわかりませんが、きっとこの世界においては難易度Bクラスの重要なことなのでしょう。

問題に正解し、「ポニーテール」をゲットしました。
水とか食料とかもっと大事なものがあるとも思いますが、ポニーテールもとても重要だと思います。「さっそく着替えさせる」でポニーテールを装着してみましょう。

尊い。

paizaラーニングはいいぞ

解説動画と演習問題の組み合わせは非常に高い学習効率を得られます。
また、アニメやゲームで馴染みの深い声優さんがフルボイスで解説してくれるので、そちら方面に興味のある方は高いモチベーションが保てるのではないでしょうか。
また、ゲームについては若干難易度が高いものもあるので、動画と演習問題でしっかり学習してから取り組むことをおすすめします。

まとめ

ハンズオン系のサービスの一番の利点は「本当はわかっていなかった」ということがわかるということです。
書籍やネットの記事を読むとついわかった気になってしまうことがありますが、実際に書いてみると案外「あれっ」と思う場面が多々あります。
こういったハンズオン系のサービスを学習の中心に置き、書籍やインターネットで理解を深めていくという形で進めると効率よく学習できます。

次回は「見て学ぶ」に最適な動画サービスをご紹介いたします!お楽しみに!

HTMLやCSS、JavaScriptの学習をしている方に向けて無料のコーディング課題をKROWLサイトで配布中!
難易度別に用意してあるサンプルサイトのデザインデータを元に、サイト制作のスキルを磨こう!

関連記事